/* Center the form container */
.contact-container {
    max-width: 1240px;
    margin: 20px auto; /* Adjusted margin to create space */
    padding: 20px;
    background: #374F7B;
    box-shadow: 0px 24px 46px -10px #131E2B;
    border-radius: 15px;

    display: flex; /* Flexbox layout */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    gap: 20px; /* Space between sections */
    justify-content: space-between; /* Space sections evenly */
}

/* Left Section Styling (Contact Info & Text) */
.contact-left {
    flex: 1;
    min-width: 300px;
    max-width: 50%;
    color: #fff; /* Ensure text color matches theme */
    padding-right: 20px;
    margin-bottom: 50px;
    margin-top: 50px;
    margin-left: 50px;
}

.contact-left h1 {
    font-size: 36px;
    color: #FF5722;
    margin-bottom: 20px;
}

.contact-left h2 {
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 0px;
}

.contact-container p {
    text-align: center;
    margin-bottom: 0px;
    color: #fff;
}

/* Right Section Styling (Form) */
.contact-right {
    flex: 1;
    min-width: 300px;
    max-width: 50%;
    margin-top: 50px; /* Add some spacing above form */
    margin-bottom: 50px;
    margin-right: 50px
}

/* Styling for form headings and text */
.contact-container h1,
.contact-container h2 {
    text-align: center;
    margin-left: 0;
}

.contact-container h1 {
    font-size: 36px;
    color: #FF5722;
}

.contact-container h2 {
    font-size: 32px;
    color: #fff;
}

/* Form Groups */
.contact-form-group {
    display: flex;
    flex-direction: column; /* Stack labels and inputs vertically for fields other than name/email */
    margin-bottom: 20px;
    text-align: left;
}

/* Align Name and Email in One Row */
.contact-form-group.name-email {
    flex-direction: row;
    justify-content: space-between; /* Space name and email fields */
}

/* Universal Label Styling */
.contact-form-group label {
    margin-bottom: 5px; /* Apply consistent spacing below all labels */
    font-weight: bold;
    color: #fff;
}

/* For name and email fields, limit width to 45% to fit them in one row */
.contact-form-group.name-email .half-width {
    width: 45%; /* Adjust width so they fit side by side */
    display: flex;
    flex-direction: column; /* Stack label and input vertically */
}

/* Style Input Fields */
.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
}


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

    .contact-left,
    .contact-right {
        max-width: 100%; /* Allow full width for small screens */
    }

    /* Adjust label alignment and input size for better mobile experience */
    .contact-form-group label {
        text-align: left;
        width: auto;
        margin-bottom: 5px; /* Add spacing below labels */
    }

    .contact-form-group {
        flex-direction: column; /* Stack input and label vertically on small screens */
    }

    /* Ensure name/email fields stack vertically on small screens */
    .contact-form-group.name-email {
        flex-direction: column;
    }

    .contact-form-group .half-width {
        width: 100%; /* Make name/email fields full width on small screens */
    }
}

#subjectDropdown {
    background-color: #fff;
    color: #374F7B;
}