/* Simple contact page styles to complement global styles */
.contact-section {
    padding: 40px 0;
    background-color: whitesmoke!important; /* Light Blue background */
}
.contact-section p {
    text-align: center;
    margin-bottom: 30px;
    color: white;
}
.contact-layout { display: flex; gap: 30px; align-items: flex-start; }
.contact-form-section { flex: 1 1 60%; }


.contact-form textarea {
  height: 820px; /* increase this as needed */
}


.contact-info-section { flex: 1 1 35%; }
.contact-info-section p a {
    margin-bottom: 20px;
    color: white;
}

.contact-form .form-row { display: flex; gap: 15px; }
.contact-form .form-group { display: flex; flex-direction: column; margin-bottom: 15px; flex: 1; }
.contact-form input, .contact-form textarea { padding: 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.contact-form button.btn { display: inline-flex; align-items: center; gap: 8px; }
.info-card { background:#2c2c2c; padding: 15px; border-radius: 6px; box-shadow: var(--shadow-sm); margin-bottom: 15px; }
.info-icon { font-size: 28px; color: #14288A; }
.map-section { margin-top: 30px; }
@media (max-width: 900px) {
    .contact-layout { flex-direction: column; }
    .contact-form .form-row { flex-direction: column; }
}
/* ============================================
   CONTACT PAGE RESPONSIVE STYLES
   ============================================ */
@media (max-width: 600px) {
    .contact-section {
        padding: 20px 5px;
    }
    .contact-layout {
        flex-direction: column;
        gap: 1rem;
    }
    .contact-form-section,
    .contact-info-section {
        width: 100%;
        padding: 0;
    }
    .contact-form .form-row {
        flex-direction: column;
        gap: 10px;
    }
    .contact-form input,
    .contact-form textarea {
        font-size: 1rem;
        padding: 8px;
    }
    .info-card {
        padding: 10px;
        font-size: 0.95rem;
    }
    .map-section {
        margin-top: 20px;
    }
    .map-container iframe {
        height: 250px;
    }
    .section-intro h2 {
        font-size: 1.3rem;
    }
    .section-intro p {
        font-size: 1rem;
    }
}

/* Tablets and smaller */
@media (max-width: 992px) {
    .contact-layout {
        flex-direction: column;
        gap: 2rem;
    }

    .contact-form-section,
    .contact-info-section {
        width: 100%;
    }

    .contact-form .form-row {
        flex-direction: column;
    }

    .contact-form textarea {
        height: auto;
    }

    .contact-section {
        padding: 60px 20px;
    }

    .contact-section h2 {
        font-size: 1.75rem;
    }

    .contact-section p {
        font-size: 1rem;
    }

    .info-card {
        text-align: center;
        padding: 20px;
    }

    .info-icon {
        margin: 0 auto 10px;
    }

    .social-connect {
        text-align: center;
    }

    .social-icons {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .map-container iframe {
        height: 300px;
    }
}

/* Mobile devices */
@media (max-width: 600px) {
    .contact-section {
        padding: 40px 10px;
    }

    .contact-section h2 {
        font-size: 1.5rem;
    }

    .contact-form-section h3 {
        font-size: 1.25rem;
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 0.95rem;
        padding: 0.75rem;
    }

    .btn.btn-primary {
        width: 100%;
        justify-content: center;
        font-size: 1rem;
        padding: 0.75rem;
    }

    .info-card h4 {
        font-size: 1rem;
    }

    .info-card p,
    .info-card a {
        font-size: 0.9rem;
    }

    .map-section h3 {
        font-size: 1.2rem;
    }

    .map-container iframe {
        height: 250px;
    }
}