/* Image Container */
.image-container {
    position: relative; /* To keep the image properly positioned */
    width: 100%; /* Full width */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
}

/* Full-Width Image Styling */
.banner-image {
    width: 100%; /* Make the image span the full width of the container */
    height: auto; /* Maintain the aspect ratio */
    display: block; /* Remove any extra space below the image */
    margin: 0; /* Ensure it is close to the navbar */
    padding: 0; /* Remove default padding */
    object-fit: contain; /* Ensure the full image is displayed */
    filter: brightness(50%); /* Make the image darker */
}

/* Desktop View */
@media (min-width: 1024px) {
    .image-container {
        height: 100vh; /* Make the container take up the full viewport height */
    }
}

/* Mobile View */
@media (max-width: 768px) {
    .image-container {
        margin: 0; /* Remove any margin */
        padding: 0; /* Remove any padding */
        height: auto; /* Allow the height to adapt to the content */
    }

    .banner-image {
        margin: 0; /* Ensure the image is flush to the navbar */
        padding: 0; /* Remove padding */
    }
}

/* Main Container */
.main-container {
    display: flex; /* Flexbox for horizontal layout */
    flex-direction: row; /* Default: horizontal layout */
    min-height: 100vh; /* Full height of the viewport */
    margin-top: 60px; /* Offset for fixed navbar */
    box-sizing: border-box; /* Account for padding and borders */
    overflow-x: hidden; /* Prevent horizontal overflow */
}


/* Left Section: Form */
.form-section {
    flex: 1; /* Take up equal space */
    background: #ffffff;
    display: flex; /* Center the form */
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* Prevent content overflow */
}

/* Form Container */
.form-container {
    width: 90%; /* Slightly smaller width for spacing */
    max-width: 400px; /* Limit maximum width */
    text-align: center;
    border: 2px solid #004e92;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}


/* Form Heading */
.form-container h2 {
    margin-bottom: 20px;
    color: #004e92; /* Blue color for heading */
    font-size: 2rem; /* Larger font size */
    font-weight: bold; /* Bold heading */
    text-transform: uppercase; /* Make heading uppercase */
}

/* Form Group */
.form-group {
    margin-bottom: 15px;
    text-align: left; /* Align labels and inputs */
}

/* Form Labels */
.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333333; /* Dark text color */
    font-size: 1rem; /* Slightly larger label font */
}

/* Form Inputs */
.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #cccccc; /* Light gray border */
    border-radius: 5px; /* Slightly rounded corners */
    box-sizing: border-box;
    outline: none; /* Remove focus outline */
    background: #f9f9f9; /* Slightly off-white background */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Arial', sans-serif; /* Improve font readability */
}

/* Focus State for Inputs */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #004e92; /* Blue border on focus */
    background: #ffffff; /* White background on focus */
    box-shadow: 0 0 5px rgba(0, 78, 146, 0.5); /* Subtle blue glow */
}

/* Phone Group Styling */
.phone-group .phone-wrapper {
    display: flex;
    gap: 10px; /* Add spacing between country code and phone input */
}

.phone-group select {
    width: 30%; /* Country code dropdown width */
}

.phone-group input {
    width: 70%; /* Phone number input width */
}

/* Submit Button */
.submit-button {
    width: 100%;
    padding: 12px 15px;
    border: none;
    background: #004e92; /* Blue gradient */
    color: white; /* White text */
    font-size: 1.1rem; /* Slightly larger font */
    font-weight: bold;
    border-radius: 5px; /* Slightly rounded corners */
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

/* Submit Button Hover */
.submit-button:hover {
    background: linear-gradient(to right, #000428, #004e92); /* Reverse gradient */
    transform: scale(1.05); /* Slightly enlarge button */
}

.right-section {
    flex: 1; /* Ensure it takes equal space */
    background: #004e92; /* Blue background */
    color: white;
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal overflow */
    width: 100%; /* Ensure it spans the full width of the container */
}

/* Right Section Content */
.right-content {
    display: flex;
    flex-direction: column; /* Stack items below each other */
    width: 100%; /* Ensure content spans full width */
    max-width: 400px; /* Restrict maximum width for readability */
    text-align: center; /* Center-align the content */
    word-wrap: break-word; /* Break long text to prevent overflow */
    margin: 0 auto; /* Center-align content horizontally */
    padding: 10px; /* Add padding for better spacing */
    overflow-x: hidden; /* Prevent horizontal overflow */
}

/* Contact Items */
.contact-item {
    display: block; /* Make each item take the full width */
    margin-bottom: 15px; /* Add space between each contact item */
    padding: 10px; /* Add internal padding for spacing */
    text-align: center; /* Center-align text */
    word-break: break-word; /* Ensure long words break correctly */
}

.contact-item i {
    font-size: 1.5rem; /* Set icon size */
    color: #ffffff; /* White color for icons */
    margin-bottom: 5px; /* Add space below the icon */
}

.contact-item p {
    font-size: 1rem; /* Set text size */
    color: #ffffff; /* White text color */
    margin: 0; /* Remove default margin */
    line-height: 1.5; /* Increase line height for better readability */
}

/* Main Container */
.main-container {
    display: flex; /* Flexbox for horizontal layout */
    flex-direction: row; /* Default: horizontal layout */
    min-height: 100vh; /* Full height of the viewport */
    margin-top: 60px; /* Offset for fixed navbar */
    box-sizing: border-box; /* Account for padding and borders */
    overflow-x: hidden; /* Prevent horizontal overflow */
}

/* Left Section: Form */
.form-section {
    flex: 1; /* Take up equal space */
    background: #ffffff;
    display: flex; /* Center the form */
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* Prevent content overflow */
}

/* Form Container */
.form-container {
    width: 90%; /* Slightly smaller width for spacing */
    max-width: 400px; /* Limit maximum width */
    text-align: center;
    border: 2px solid #004e92;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* Right Section */
.right-section {
    flex: 1; /* Take up equal space */
    background: #004e92;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal overflow */
    width: 100%; /* Ensure it spans full width */
}

/* Right Section Content */
.right-content {
    width: 100%; /* Full width */
    max-width: 400px; /* Limit maximum width */
    text-align: center;
    margin: 0 auto; /* Center horizontally */
    padding: 10px; /* Add spacing */
    word-wrap: break-word; /* Break long text */
    overflow-x: hidden; /* Prevent horizontal overflow */
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column; /* Stack sections vertically */
    }

    .form-section {
        width: 100%; /* Full width on mobile */
        padding: 10px; /* Adjust padding */
    }

    .right-section {
        width: 100%; /* Full width on mobile */
        padding: 10px; /* Adjust padding */
    }

    .right-content {
        width: 100%; /* Full width */
        max-width: 100%; /* Remove restriction */
        padding: 10px; /* Add spacing */
    }

    .contact-item {
        padding: 5px 10px; /* Add padding for better spacing */
        text-align: center; /* Center-align text and icons */
    }

    .contact-item i {
        margin-bottom: 5px; /* Add margin below the icon */
    }
}