/* css/contact.css */

/* Main layout for the contact page */
.contact-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; 
    gap: 60px;
    align-items: center;
}

.contact-form-container h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1a144d; /* Using color from index.css .get-in-touch-text h2 */
    margin-bottom: 30px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Spacing between form fields */
}

/* Form field styling
  - Adapted from .get-in-touch-form in index.css for theme consistency
*/
.contact-form input,
.contact-form textarea {
    padding: 18px 22px;
    border: none;
    border-radius: 30px; /* Using your theme's rounded inputs */
    background: #f6f7fb;
    box-shadow: inset 6px 6px 10px rgba(0, 0, 0, 0.05),
        inset -6px -6px 10px rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
    width: 100%;
    font-family: 'Open Sans', Arial, sans-serif; /* Ensure font is inherited */
    color: #333;
}

.contact-form input:hover,
.contact-form textarea:hover,
.contact-form input:focus-within,
.contact-form textarea:focus-within {
    background: #ffffff; /* Lighter background on focus/hover */
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

/* The .btn-gradient class from index.css styles the button perfectly */
.contact-form .btn-gradient {
    width: fit-content; /* Button is only as wide as its text */
}


/* Contact Info Card Styling
  - Based on your reference image and site's theme
*/
.contact-info-card {
    background-color: #161153; /* Using your footer's dark blue */
    color: #ecf0f1;
    padding: 40px;
    border-radius: 8px; /* Matching other card elements */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-info-card h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    border-bottom: 1px solid #2a2468; /* Using footer border color */
    padding-bottom: 15px;
}

.contact-info- span{
    color: #c6afac;
}

.contact-info-card address {
    font-style: normal; /* Resets browser default */
}

/* Re-using footer contact item structure for consistency */
.contact-info-card .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    font-size: 1rem;
    line-height: 1.6;
}

.contact-info-card .contact-item:last-child {
    margin-bottom: 0;
}

.contact-info-card .contact-item i {
    color: #ffffff; /* Using accent color from your top-bar */
    font-size: 1.1rem;
    width: 20px;
    flex-shrink: 0;
    margin-top: 5px;
}

/* Ensure sup tag from address is styled correctly */
.contact-info-card sup {
    font-size: 0.7em;
    vertical-align: top;
    position: relative;
    top: -0.2em;
}


/* Responsive Design 
  - All header/footer/hero responsiveness is handled by index.css
  - This just handles the new .contact-layout
*/
@media (max-width: 992px) {
    .contact-layout {
        grid-template-columns: 1fr; /* Stack columns */
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .contact-form-container h2 {
        font-size: 1.8rem;
        text-align: center; /* Center title on mobile */
    }

    .contact-info-card {
        padding: 30px 25px;
    }

    .contact-form {
        align-items: center; /* Center the submit button */
    }

    .contact-form .btn-gradient {
        width: 100%;
        max-width: 400px; /* Button takes full width on small screens */
    }
}

@media (max-width: 576px) {
    .contact-form .btn-gradient {
        width: 100%; /* Ensures it fills the container */
    }
}