/* Navbar Padding for this Component */

#header-placeholder .ns-header,
#header-placeholder .navbar.bg-white {
    margin-top: 0;
    padding: 25px 0 28px 0;
    margin-top: 0px;
}

/* Contact Hero Section */
.contact-hero-section {
    background-color: #f5f3ed; /* Background color */
    padding: 80px 0; /* Vertical padding */
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px; /* Horizontal padding */
}

.contact-header-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 60px; /* Space below header and social icons */
}

.contact-text-col {
    text-align: left;
}

.contact-small-heading {
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--teal); /* Teal color */
    margin-bottom: 40px;
    margin-top: 38px;
}

.contact-main-heading {
    font-family: "Agrandir-Textbold", sans-serif;
    font-size: 3.5rem; /* Giant text size */
    font-weight: 400;
    color: var(--teal); /* Teal color */
    line-height: 1.2;
    margin-bottom: 22px;
}

.contact-social-col {
    display: flex;
    margin-top: 67px;
    flex-direction: column; /* Stack icons vertically */
    align-items: flex-end; /* Align to the right */
    gap: 15px; /* Space between icons */
}

.social-icon-circle {
    width: 35px; /* Size of the circle */
    height: 35px;
    border-radius: 50%; /* Make it circular */
    border: 1px solid #bbbbbb; /* Grey outline */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

    .social-icon-circle i {
        font-size: 0.8rem; /* Icon size */
        color: var(--teal); /* Teal icon color */
    }

    .social-icon-circle:hover {
        background-color: var(--teal); /* Teal background on hover */
        border-color: var(--teal); /* Teal border on hover */
        color: #f5f3ed;
    }

        .social-icon-circle:hover i {
            color: #f5f3ed; /* Light text on hover */
        }

/* Contact Form */
.contact-form {
    padding-bottom: 80px; /* Padding from the bottom of the container */
}

    .contact-form .form-label {
        font-family: "Agrandir-Regular", sans-serif;
        font-size: 1.1rem;
        font-weight: 500;
        color: var(--teal); /* Teal color */
        margin-bottom: 0px;
        display: block;
    }

    .contact-form .form-control {
        background-color: transparent; /* Transparent background */
        border: none;
        border-bottom: 1px solid #bbbbbb; /* Grey bottom border */
        border-radius: 0; /* No rounded corners */
        padding: 8px 0; /* Adjust padding */
        font-family: "Agrandir-Regular", sans-serif; /* Inter font for input text */
        font-size: 1rem;
        color: var(--teal); /* Teal text color */
        outline: none; /* Remove outline on focus */
    }

        .contact-form .form-control::placeholder {
            color: #bbbbbb; /* Grey placeholder text */
            opacity: 1;
        }

        .contact-form .form-control:focus {
            border-color: var(--teal); /* Teal border on focus */
            box-shadow: none; /* Remove Bootstrap's default focus shadow */
        }

.message-textarea {
    resize: none; /* Disable resizing */
    overflow-y: scroll; /* Add vertical scrolling */
    /* UPDATED: Swapped min-height and padding-top to move cursor down */
    min-height: 18px; /* Reduced content height */
    padding-top: 70px; /* Increased top padding to push text down */
    padding-bottom: 8px; /* Maintained bottom padding */
    /* Hide scrollbar for Webkit browsers (Chrome, Safari) */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
    /* Corrected syntax for webkit scrollbar */
    .message-textarea::-webkit-scrollbar {
        display: none;
    }


/* Adjusting gap between message heading and textarea */
.contact-form .row > .col-12:nth-child(4) {
    margin-top: 53px; /* Adjusted margin-top to create desired gap */
}


.submit-message-btn {
    background-color: var(--teal); /* Teal background */
    color: #f5f3ed; /* Text color */
    font-family: "Agrandir-TextBold", sans-serif;
    font-size: 1.1rem;
    padding: 18px 35px;
    border: none;
    border-radius: 22px; /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px; /* Space above button */
}

    .submit-message-btn:hover {
        background-color: var(--teal); /* Slightly darker on hover */
        transform: translateY(-2px);
    }

    .submit-message-btn i {
        font-size: 1.2rem;
        color: #f5f3ed;
    }

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .contact-hero-section {
        padding: 60px 0;
    }

    .contact-header-row {
        flex-direction: column; /* Stack header and social icons */
        align-items: center; /* Center content when stacked */
        text-align: center; /* Center text content */
        margin-bottom: 40px;
    }

    .contact-text-col {
        width: 100%; /* Full width when stacked */
        padding: 0 15px; /* Add horizontal padding */
        text-align: center; /* Center text content */
    }

        .contact-text-col .contact-small-heading,
        .contact-text-col .contact-main-heading {
            text-align: center; /* Ensure these specific headings are centered */
        }

    .contact-social-col {
        width: 100%; /* Full width when stacked */
        padding: 0 15px; /* Add horizontal padding */
        flex-direction: row; /* Display icons in a row */
        justify-content: center; /* Center icons horizontally */
        margin-top: 0; /* Reset margin-top for stacked layout */
    }

    .contact-text-col {
        margin-bottom: 25px; /* Space between text and social icons */
    }

    .contact-main-heading {
        font-size: 2.8rem;
        margin-bottom: 30px; /* UPDATED: Reduced bottom margin for smaller screens */
    }

    .contact-form .col-lg-4,
    .contact-form .col-md-6,
    .contact-form .col-sm-12,
    .contact-form .col-12 { /* Target all columns within the form */
        max-width: 100%; /* Ensure full width for stacked inputs */
        margin-left: auto; /* Center the columns */
        margin-right: auto; /* Center the columns */
    }

    .contact-form .form-label,
    .contact-form .form-control {
        text-align: center; /* Center input labels and placeholder text */
    }

    .contact-form .form-control {
        padding-left: 15px; /* Add padding to input fields when centered */
        padding-right: 15px;
    }

    .submit-message-btn {
        width: 100%; /* Full width button */
        justify-content: center; /* Center button content */
    }
}

@media (max-width: 767.98px) {
    .contact-hero-section {
        padding: 40px 0;
    }

    .contact-container {
        padding: 0 10px;
    }

    .contact-main-heading {
        font-size: 2.2rem;
    }

    .social-icon-circle {
        width: 40px;
        height: 40px;
    }

        .social-icon-circle i {
            font-size: 1.1rem;
        }

    .contact-form .form-label,
    .contact-form .form-control {
        font-size: 0.95rem;
    }

    .submit-message-btn {
        font-size: 1rem;
        padding: 12px 25px;
    }
}

@media (max-width: 575.98px) {
    .contact-hero-section {
        padding: 30px 0;
    }

    .contact-main-heading {
        font-size: 1.8rem;
    }

    .social-icon-circle {
        width: 35px;
        height: 35px;
    }

        .social-icon-circle i {
            font-size: 1rem;
        }

    .contact-form .form-label,
    .contact-form .form-control {
        font-size: 0.9rem;
    }

    .submit-message-btn {
        font-size: 0.9rem;
        padding: 10px 20px;
    }
}

/* Contact Info Section */
.contact-info-section {
    background-color: var(--teal); /* Teal background */
    padding: 80px 0; /* Vertical padding */
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-info-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0px; /* Horizontal padding */
}

.contact-info-row {
    align-items: flex-start; /* Align columns to the top */
}

/* Left Column Styling */
.contact-info-left-col {
    text-align: left;
    padding-right: 30px; /* Space from right column */
}

.contact-info-small-heading {
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #F7F4EF; /* Light color for left section */
    margin-bottom: 15px;
}

.contact-info-main-heading {
    font-family: "Agrandir-Textbold", sans-serif;
    font-size: 3rem; /* Giant text size */
    font-weight: 100; /* Bold */
    color: #F7F4EF; /* Light color for left section */
    line-height: 1.3;
}

/* Right Column Styling (for the two cards) */
.contact-info-right-col {
    padding-left: 70px; /* Space from left column */
    display: flex; /* Make it a flex container */
    justify-content: space-between; /* Distribute space evenly between cards */
    flex-wrap: nowrap; /* Prevent cards from wrapping on desktop */
    /* Removed gap to let justify-content handle spacing more precisely */
}

.contact-info-card {
    background-color: transparent; /* Transparent background as requested */
    /* Adjusted flex basis and max-width for precise horizontal alignment */
    flex: 0 0 calc(50% - 15px); /* Two columns with half width minus half of desired gap */
    max-width: calc(50% - 15px); /* Ensure max-width for consistency */
    min-width: 280px; /* Minimum width for cards before wrapping */
    box-sizing: border-box; /* Include padding/border in width calculation */
    padding: 20px; /* Padding inside the card */
    text-align: left; /* Align text content to the left */
}

.card-heading {
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: 600; /* Semi-bold */
    color: #F5F3ED; /* Text color for right section cards */
    margin-bottom: 25px;
}

.card-divider {
    width: 25px; /* Small divider line */
    height: 2px;
    background-color: #F5F3ED; /* Light color */
    margin-bottom: 25px;
}

.card-subheading {
    font-family: "Inter", sans-serif;
    font-size: 1.1rem;
    font-weight: 500; /* Medium weight */
    color: #F5F3ED; /* Text color for right section cards */
    margin-bottom: 10px;
}

.card-paragraph {
    font-family: "Inter", sans-serif;
    max-width: 75%; /* Keep max-width for desktop */
    font-size: 0.95rem;
    font-weight: 300; /* Light weight */
    color: #F5F3ED; /* Text color for right section cards */
    line-height: 1.5;
    margin-bottom: 0;
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .contact-info-row {
        flex-direction: column; /* Stack columns vertically */
        /* text-align: center; /* Removed from here, will apply to specific elements */
    }

    .contact-info-left-col,
    .contact-info-right-col {
        padding: 0 15px; /* Adjust padding for stacked columns */
        width: 100%;
        text-align: center; /* Center align content within columns */
    }

    .contact-info-left-col {
        margin-bottom: 40px; /* Space between stacked columns */
    }

    .contact-info-small-heading,
    .contact-info-main-heading {
        text-align: center; /* Center align these specific headings */
    }

    .contact-info-main-heading {
        font-size: 2.8rem;
    }

    .contact-info-right-col {
        flex-direction: column; /* Stack cards vertically */
        align-items: center; /* Center cards horizontally */
        padding-left: 15px; /* Adjust padding for consistency */
    }

    .contact-info-card {
        flex: none; /* Remove flex property when stacked */
        width: 100%; /* Take full width when stacked */
        min-width: auto; /* Reset min-width */
        max-width: 400px; /* Limit card width on tablets */
        margin-left: auto; /* Center card */
        margin-right: auto; /* Center card */
        margin-bottom: 30px; /* Space between stacked cards */
        text-align: center; /* Center text within cards when stacked */
    }

        .contact-info-card:last-child {
            margin-bottom: 0; /* No bottom margin for the last card */
        }

    .card-heading,
    .card-subheading { /* Centering text within cards */
        text-align: center;
    }

    .card-paragraph {
        text-align: center; /* Ensure paragraph is centered on smaller screens */
        max-width: 100%; /* Override max-width for smaller screens to allow full centering */
    }

    .card-divider {
        margin-left: auto; /* Center divider */
        margin-right: auto; /* Center divider */
    }
}

@media (max-width: 767.98px) {
    .contact-info-section {
        padding: 60px 0;
    }

    .contact-info-main-heading {
        font-size: 2.2rem;
    }

    .card-heading {
        font-size: 1.1rem;
    }

    .card-subheading {
        font-size: 1rem;
    }

    .card-paragraph {
        font-size: 0.9rem;
    }
}

@media (max-width: 575.98px) {
    .contact-info-section {
        padding: 40px 0;
    }

    .contact-info-main-heading {
        font-size: 1.8rem;
    }

    .card-heading {
        font-size: 1rem;
    }

    .card-subheading {
        font-size: 0.95rem;
    }

    .card-paragraph {
        font-size: 0.85rem;
    }
}