/* ===== CONTACT HERO (blog-style: bg image + overlay) ===== */
.contact-hero-section{
    position: relative;
    z-index: 0;
    min-height: 55vh;
    display: flex;
    align-items: center;
    padding-top: 140px;
    padding-bottom: 80px;
    overflow: hidden;
    background: url('https://images.unsplash.com/photo-1587560699334-cc4ff634909a?auto=format&fit=crop&w=1600&q=80') center center / cover no-repeat;
}

.contact-hero-section .hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(6,12,28,.92) 0%,
        rgba(11,23,48,.85) 45%,
        rgba(29,78,216,.75) 100%);
    z-index: -1;
}

.contact-hero-content{
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 12px;
}

.contact-hero-content .section-badge-inline{
    display: inline-block; padding: 8px 18px; border-radius: 50px;
    background: rgba(255,255,255,.12); color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    font-size: 13px; font-weight: 700; letter-spacing: .5px; margin-bottom: 18px;
}

.contact-hero-title{
    font-size: clamp(1.7rem, 5.5vw, 52px);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    margin: 20px 0;
    text-shadow: 0 2px 20px rgba(0,0,0,.35);
    word-break: break-word;
}
.contact-hero-title span{
    background: linear-gradient(135deg, #38BDF8, #93C5FD);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.contact-hero-description{
    font-size: clamp(14px, 2vw, 17px);
    line-height: 1.8;
    color: #F1F5FB;
    text-shadow: 0 1px 12px rgba(0,0,0,.3);
}

/* ===== SHARED BADGE (used elsewhere too) ===== */
.section-badge-inline{
    display: inline-block; padding: 8px 18px; border-radius: 50px;
    background: #EEF2FF; color: var(--primary-color, #1D4ED8);
    font-size: 13px; font-weight: 700; letter-spacing: .5px; margin-bottom: 18px;
}

/* ===== CONTACT INFO CARDS (kept, unused currently but safe) ===== */
.contact-info-section{ padding:100px 0; }
.contact-info-card{
    background:#fff; border-radius:20px; padding:40px 25px;
    box-shadow:0 12px 35px rgba(0,0,0,.08); height:100%;
    transition: transform .35s cubic-bezier(.25,.8,.25,1), box-shadow .35s cubic-bezier(.25,.8,.25,1);
    will-change: transform;
    transform: translateZ(0);
}
.contact-info-card:hover{ transform:translateY(-10px); }
.contact-icon{
    width:70px; height:70px; border-radius:18px;
    background:linear-gradient(135deg,#1D4ED8,#0B1730);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:28px; margin:0 auto 20px;
}
.contact-info-card h4{ margin-bottom:10px; color:var(--heading-color); font-size: clamp(16px, 2vw, 20px); word-break: break-word; }
.contact-info-card p{ color:var(--text-color); margin-bottom:0; word-break: break-word; }

/* ===== CONTACT FORM SECTION WRAPPER ===== */
.contact-form-section{ padding:100px 0 60px; background:#F8FAFF; overflow: hidden; }

/* ===== QUICK CONTACT (replaces form) ===== */
.quick-contact-wrapper{
    background:#fff; padding:50px 45px 45px; border-radius:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.08); height:100%;
}


.hero-buttons{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 25px;
}
.hero-secondary-btn{
    padding: 14px 25px;
    border-radius: 50px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
    border: 2px solid rgba(255,255,255,.4);
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
    white-space: nowrap;
}
.hero-secondary-btn:hover{
    background: #fff;
    color: #1D4ED8;
}   

.hero-primary-btn {
    padding: 14px 30px;
    border-radius: 50px;
    background: linear-gradient(135deg, #1D4ED8, #38BDF8);
    color: #fff;
    font-weight: 600;
    border: none;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;

}

.hero-primary-btn:hover{ transform: translateY(-3px); color: #fff; box-shadow: 0 10px 25px rgba(29,78,216,.4); }



.quick-contact-wrapper .section-title{ margin-bottom:15px; font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
.quick-contact-wrapper .section-description{ margin-bottom:35px; color:var(--text-color); }

.quick-contact-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:22px;
}
.quick-contact-card{
    background:#F8FAFF; border:1px solid #EEF1F8; border-radius:18px;
    padding:28px 22px;
    transition: transform .35s cubic-bezier(.25,.8,.25,1), box-shadow .35s cubic-bezier(.25,.8,.25,1), border-color .35s ease;
    will-change: transform;
    transform: translateZ(0);
    min-width: 0;
}
.quick-contact-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    border-color:transparent;
}
.qc-icon{
    width:56px; height:56px; border-radius:14px;
    background:linear-gradient(135deg,#1D4ED8,#0B1730);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:22px; margin-bottom:18px;
}
.quick-contact-card h4{
    color:var(--heading-color); font-size:18px; margin-bottom:8px; font-weight:600; word-break: break-word;
}
.quick-contact-card p{
    color:var(--text-color); font-size:14.5px; line-height:1.6; margin-bottom:16px; word-break: break-word;
}
.qc-link{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--primary-color); font-weight:600; font-size:14.5px;
    text-decoration:none; transition:.25s;
    word-break: break-word;
}
.qc-link i{ font-size:13px; transition:.25s; flex-shrink: 0; }
.qc-link:hover{ color:#0B1730; }
.qc-link:hover i{ transform:translateX(4px); }

/* ===== OFFICE MAP SIDE CARD ===== */
.contact-side-card{
    background:#fff; border-radius:25px; overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08); height:100%;
}
.contact-map-image{ width:100%; height:260px; object-fit:cover; }
.contact-side-content{ padding:35px; }
.contact-side-content h3{ color:var(--heading-color); margin-bottom:15px; font-size: clamp(1.3rem, 3vw, 28px); }
.contact-side-content p{ color:var(--text-color); line-height:1.8; margin-bottom:30px; }
.contact-detail{ display:flex; align-items:flex-start; gap:18px; margin-bottom:25px; }
.contact-detail i{
    width:50px; height:50px; border-radius:14px; display:flex;
    align-items:center; justify-content:center;
    background:linear-gradient(135deg,#1D4ED8,#0B1730);
    color:#fff; font-size:20px; flex-shrink:0;
}
.contact-detail strong{ display:block; color:var(--heading-color); margin-bottom:5px; }
.contact-detail span{ color:var(--text-color); font-size:15px; line-height:1.6; word-break: break-word; }

/* ===== OFFICE LOCATIONS ===== */
.office-section{ padding:100px 0; }
.office-card{
    background:#fff; border-radius:20px; overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08); height:100%;
    transition: transform .35s cubic-bezier(.25,.8,.25,1), box-shadow .35s cubic-bezier(.25,.8,.25,1);
    will-change: transform;
    transform: translateZ(0);
}
.office-card:hover{ transform:translateY(-10px); }
.office-card img{ width:100%; height:220px; object-fit:cover; object-position: center bottom; }
.office-content{ padding:30px; }
.office-content h4{ color:var(--heading-color); margin-bottom:20px; font-weight:600; }
.office-content p{
    display:flex; align-items:center; gap:10px; color:var(--text-color);
    margin-bottom:15px; font-size:15px; word-break: break-word;
}
.office-content i{ color:var(--primary-color); font-size:18px; flex-shrink: 0; }

/* ===== CONTACT FAQ ===== */
.faq-section{ padding:100px 0; background:#F8FAFF; }
.faq-section .accordion{ max-width:850px; margin:auto; }
.faq-section .accordion-item{
    border:none; border-radius:18px; overflow:hidden;
    margin-bottom:20px; box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.faq-section .accordion-button{
    background:#fff; color:var(--heading-color); font-weight:600;
    font-size:17px; padding:22px 25px; box-shadow:none;
    line-height: 1.5;
}
.faq-section .accordion-button:not(.collapsed){ background:var(--primary-color); color:#fff; }
.faq-section .accordion-button::after{ filter:brightness(0); flex-shrink: 0; }
.faq-section .accordion-button:not(.collapsed)::after{ filter:brightness(0) invert(1); }
.faq-section .accordion-body{
    padding:22px 25px; color:var(--text-color); line-height:1.8; background:#fff;
}

/* =====================================================
   CONTACT RESPONSIVE (all breakpoints, consolidated)
   ===================================================== */

/* ---- 1199px and below ---- */
@media (max-width: 1199px){
    .quick-contact-wrapper{ padding: 45px 35px 40px; }
    .contact-side-content{ padding: 30px; }
}

/* ---- 991px and below (tablets) ---- */
@media (max-width:991.98px){
    .contact-hero-section{ padding: 120px 0 80px; text-align: center; min-height: 45vh; }

    .contact-info-section{ padding: 80px 0; }

    .contact-form-section{ padding: 80px 0 50px; }
    .quick-contact-wrapper{ padding: 40px 35px 35px; }

    .office-section{ padding: 80px 0; }
    .office-card{ margin-bottom: 10px; }
    .contact-side-card{ margin-top: 30px; }

    .faq-section{ padding: 80px 0; }
}

/* Landscape phones/tablets — short viewport */
@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 500px){
    .contact-hero-section{ min-height: auto; padding: 110px 0 50px; }
}

/* ---- 767px and below (large phones) ---- */
@media (max-width:767.98px){
    .contact-hero-title{ font-size: 38px; }
    .contact-hero-description{ font-size: 16px; }

    .contact-info-card{ padding: 30px 20px; }
    .contact-icon{ width: 60px; height: 60px; font-size: 24px; }

    .contact-form-section{ padding: 70px 0 40px; }
    .quick-contact-wrapper{ padding: 35px 25px 30px; }
    .quick-contact-grid{ grid-template-columns:1fr; gap:16px; }

    .office-card img{ height: 200px; }
    .office-content{ padding: 25px; }

    .faq-section .accordion-button{ padding: 18px 20px; }
}

/* ---- 576px and below (phones) ---- */
@media (max-width:575.98px){
    .contact-hero-section{ padding: 100px 0 70px; min-height: 40vh; }
    .contact-hero-title{ font-size: 30px; }
    .contact-hero-description{ font-size: 15px; }

    .contact-form-section{ padding: 60px 0 35px; }
    .quick-contact-wrapper{ padding: 30px 20px 25px; }
    .quick-contact-card{ padding: 22px 18px; }

    .office-card img{ height: 180px; }
    .office-content h4{ font-size: 20px; }
    .office-content p{ font-size: 14px; flex-wrap: wrap; }

    .faq-section .accordion-button{ font-size: 15px; padding: 16px 18px; }
    .faq-section .accordion-body{ padding: 16px 18px; font-size: 15px; }

    .contact-side-content{ padding: 25px; }
    .contact-map-image{ height: 200px; }
    .contact-detail{ gap: 12px; }
    .contact-detail i{ width: 42px; height: 42px; font-size: 18px; }
    .contact-detail span{ font-size: 14px; }
}

/* ---- 480px and below ---- */
@media (max-width: 480px){
    .contact-hero-title{ font-size: 26px; }
    .contact-hero-section{ padding: 90px 0 60px; }

    .contact-info-card{ padding: 25px 16px; }
    .contact-icon{ width: 52px; height: 52px; font-size: 20px; margin-bottom: 14px; }

    .quick-contact-wrapper{ padding: 25px 16px 20px; border-radius: 18px; }
    .qc-icon{ width: 46px; height: 46px; font-size: 18px; }

    .office-content{ padding: 20px; }
    .office-content h4{ font-size: 18px; margin-bottom: 14px; }

    .contact-side-content h3{ font-size: 20px; }
    .contact-detail i{ width: 38px; height: 38px; font-size: 16px; }
}

/* ---- 400px and below (extra small) ---- */
@media (max-width: 400px){
    .contact-hero-title{ font-size: 24px; }
    .contact-side-content{ padding: 18px; }
    .contact-map-image{ height: 170px; }
    .faq-section .accordion-button{ font-size: 14px; padding: 14px 16px; }
}

/* ---- 360px and below (smallest phones) ---- */
@media (max-width: 360px){
    .contact-hero-title{ font-size: 22px; }
    .contact-info-card{ padding: 20px 14px; }
    .quick-contact-card{ padding: 18px 14px; }
    .office-content{ padding: 16px; }
}

/* =====================================================
   DARK MODE — Contact Page
===================================================== */

body.dark-mode .contact-info-card{
    background:#131B2E;
    box-shadow:0 12px 35px rgba(0,0,0,.35);
    border:1px solid #1E293B;
}
body.dark-mode .contact-info-card h4{ color:#F1F5F9; }
body.dark-mode .contact-info-card p{ color:#94A3B8; }

body.dark-mode .contact-form-section{ background:#0B1120; }

body.dark-mode .quick-contact-wrapper{
    background:#131B2E;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
    border:1px solid #1E293B;
}
body.dark-mode .quick-contact-wrapper .section-title{ color:#F1F5F9; }
body.dark-mode .quick-contact-wrapper .section-description{ color:#94A3B8; }

body.dark-mode .quick-contact-card{
    background:#0F1626;
    border:1px solid #1E293B;
}
body.dark-mode .quick-contact-card:hover{
    box-shadow:0 12px 30px rgba(0,0,0,.4);
    border-color:#38BDF8;
}
body.dark-mode .quick-contact-card h4{ color:#F1F5F9; }
body.dark-mode .quick-contact-card p{ color:#94A3B8; }
body.dark-mode .qc-link{ color:#60A5FA; }
body.dark-mode .qc-link:hover{ color:#93C5FD; }

body.dark-mode .contact-side-card{
    background:#131B2E;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
    border:1px solid #1E293B;
}
body.dark-mode .contact-side-content h3{ color:#F1F5F9; }
body.dark-mode .contact-side-content p{ color:#94A3B8; }
body.dark-mode .contact-detail strong{ color:#F1F5F9; }
body.dark-mode .contact-detail span{ color:#94A3B8; }

body.dark-mode .office-section,
body.dark-mode .faq-section{ background:#0B1120; }
body.dark-mode .office-card{
    background:#131B2E;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
    border:1px solid #1E293B;
}
body.dark-mode .office-content h4{ color:#F1F5F9; }
body.dark-mode .office-content p{ color:#94A3B8; }

body.dark-mode .faq-section .accordion-item{ box-shadow:0 10px 30px rgba(0,0,0,.35); }
body.dark-mode .faq-section .accordion-button{ background:#131B2E; color:#F1F5F9; }
body.dark-mode .faq-section .accordion-button:not(.collapsed){ background:var(--primary-color); color:#fff; }
body.dark-mode .faq-section .accordion-button::after{ filter:brightness(0) invert(1); }
body.dark-mode .faq-section .accordion-body{ background:#0F1626; color:#94A3B8; }