/* Additional styles for a more professional look */
body {
    background-color: #f8f9fa !important; /* Set a light background color */
    font-family: 'Arial', sans-serif !important; /* Set a more professional font */
}



/* Responsive styles */
@media screen and (max-width: 768px) {
    .fl-col {
        width: 100%;
    }

    .img-container {
        text-align: center;
    }

    .newsletter-img {
        width: 80%;
        height: auto;
    }
}
#container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px; /* Add padding to the container */
}

#card-section, #image-section, #form-section {
    flex-basis: calc(33.33% - 20px); /* Adjust as needed */
    margin-bottom: 20px; /* Adjust spacing between sections */
}


#card1 {
    flex-basis: 100%; /* Full width */
    margin-bottom: 20px; /* Adjust spacing between sections */
    text-align: center; /* Center align text */
    background-color: #003366; /* Dark blue background */
    border: 2px solid darkblue; /* Dark blue borders */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Add padding for spacing */
}

#title {
    color: white !important;
}

#text {
    color: white !important;
}

@media (max-width: 768px) {
    #card-section, #image-section, #form-section {
        flex-basis: calc(50% - 20px); /* Adjust for smaller screens */
    }
}

@media (max-width: 576px) {
    #card-section, #image-section, #form-section {
        flex-basis: 100%; /* Stack sections on smaller screens */
        margin-bottom: 10px; /* Adjust margin for smaller screens */
    }

    #form-section {
        border-radius: 10px; /* Decrease border radius for smaller screens */
    }
}


.form-control {
    background-color: #f8f9fa;
    color: #495057;
    border: 2px solid #ced4da;
    border-radius: 10px;
}

#form-section {
    width: 80%; /* Decrease the width */
    margin: 0 auto; /* Center the section horizontally */
    text-align: center; /* Center align text */
    border-radius: 20px; /* Rounded corners */
    border: 2px solid double #ced4da; /* Dark blue borders */
    
    background-color: #ffffff;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1)
}

/*.form-control {
    width: calc(100% - 22px);*/ /* Adjust width to accommodate padding and border */
    /*padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;*/ /* Ensure padding and border are included in width */
/*}*/

.btn-submit {
    background-color: #003366; /* Dark blue background */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

    .btn-submit:hover {
        background-color: #001a33; /* Darker blue on hover */
    }



    #custom-navbar.navbar {
        background-color: #ffffff !important;
        /*border-bottom: 2px solid #dee2e6 !important;*/
        padding: 0px 0; /* Adjust the vertical padding */
    }

    #custom-navbar .navbar-brand {
        font-size: 20px !important; /* Reduce font size for the brand name */
        margin-right: 10px !important; /* Add some space to the right of the brand */
    }

        #custom-navbar .navbar-brand img {
            max-width: 100px; /* Adjust max width for the logo */
            padding: 0px;
        }

    #custom-navbar.navbar-light .navbar-nav .nav-link {
        font-size: 13px !important; /* Reduce font size for menu items */
    }

    @media screen and (max-width: 768px) {
        #custom-navbar.navbar {
            padding: 0px 0; /* Adjust padding for smaller screens */
        }

        #custom-navbar .navbar-brand {
            font-size: 18px !important; /* Reduce font size for the brand name on smaller screens */
        }

            #custom-navbar .navbar-brand img {
                max-width: 50px; /* Adjust max width for the logo on smaller screens */
            }

        #custom-navbar.navbar-light .navbar-nav .nav-link {
            font-size: 12px !important; /* Reduce font size for menu items on smaller screens */
        }
    }


    #custom-navbar.navbar-light .navbar-nav .nav-link {
        color: #001A4D !important; /* Set text color to a darker shade */
        font-size: 15px !important; /* Set font size for menu items */
        transition: color 0.3s !important; /* Add a smooth color transition effect */
        margin-right: 5px !important; /* Add some space between menu items */
    }

        #custom-navbar.navbar-light .navbar-nav .nav-link:hover {
            color: #007bff !important; /* Change text color on hover */
        }

    #custom-navbar .navbar-text {
        margin-left: auto !important; /* Move the buttons to the right */
    }

    #custom-navbar .btn {
        font-size: 15px !important;
        color: white !important; /* Set font size for buttons */
    }

    /* Custom styles for buttons */
    #custom-navbar .btn-primary {
        background-color: #003366 !important; /* Dark Blue color for primary button */
        border-color: #003366 !important;
        color: white !important;
    }

    .btn-primary {
        background-color: #003366 !important; /* Dark Blue color for primary button */
        border-color: #003366 !important;
        color: white !important;
    }

    .btn-second {
        background-color: white !important; /* Dark Blue color for primary button */
        border-color: #003366 !important;
        color: #003366 !important;
    }

    #custom-navbar .btn-secondary {
        background-color: #003366 !important; /* Dark Blue color for secondary button */
        border-color: #003366 !important;
        color: white !important;
    }

    .header-container {
        width: 100%;
        background-color: #003366; /* Dark blue color */
        color: #FFFFFF !important; /* White color for text */
        padding: 10px 0;
    }

    .header-content {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .header-title {
        font-size: 24px;
        margin-right: 20px;
    }

        .header-title a {
            color: #FFFFFF; /* White color for links */
        }

    .header-description {
        margin-right: 20px;
    }

    .header-button {
        text-align: center;
    }

    .btn {
        padding: 10px 10px;
        background-color: #FFFFFF; /* White color for button background */
        color: #003366 !important; /* Dark blue color for button text */
        text-decoration: none;
        border-radius: 5px;
    }

        .btn:hover {
            background-color: #001A4D; /* Dark blue color for button hover */
            color: #FFFFFF; /* White color for button text on hover */
        }

    @media screen and (max-width: 768px) {
        .header-title {
            font-size: 20px;
        }
    }


.fl-button-wrap {
    text-align: right; /* Align the button to the right */
}

.fl-button {
    display: inline-block;
    padding: 10px 20px; /* Adjust padding as needed */
    background-color: #007bff; /* Your button background color */
    color: #fff; /* Your button text color */
    text-decoration: none;
    border-radius: 5px; /* Rounded corners for the button */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

    .fl-button:hover {
        background-color: #0056b3; /* Change button background color on hover */
    }

/* Media query for responsiveness */
@media only screen and (max-width: 768px) {
    .fl-button-wrap {
        text-align: center; /* Center align the button on smaller screens */
    }
}