/* =====================================================================
   VITAL STATIONERY — GLOBAL RESPONSIVE OVERRIDES
   Loaded after main.css. Covers all pages at every breakpoint.
   Breakpoints: 1399 | 1200 | 992 | 767 | 480
   ===================================================================== */

/* ── 1. PAGE HEADER BANNER ─────────────────────────────────────────── */
.page-header {
    min-height: unset;
}
@media (max-width: 1200px) {
    .page-header { height: 420px !important; }
}
@media (max-width: 992px) {
    .page-header { height: 320px !important; }
    .page-header .title { font-size: 34px !important; line-height: 1.25 !important; }
    .page-header .sub-title { font-size: 14px !important; }
}
@media (max-width: 767px) {
    .page-header { height: 260px !important; }
    .page-header .title { font-size: 28px !important; }
    .page-header .sub-title { font-size: 13px !important; }
    .page-header-content { padding: 0 10px; }
}
@media (max-width: 480px) {
    .page-header { height: 210px !important; }
    .page-header .title { font-size: 22px !important; }
}

/* ── 2. SECTION PADDING (pt-120 / pb-120 / pt-80 / pb-80) ─────────── */
@media (max-width: 992px) {
    .pt-120 { padding-top: 80px !important; }
    .pb-120 { padding-bottom: 80px !important; }
    .pt-80  { padding-top: 55px !important; }
    .pb-80  { padding-bottom: 55px !important; }
}
@media (max-width: 767px) {
    .pt-120 { padding-top: 60px !important; }
    .pb-120 { padding-bottom: 60px !important; }
    .pt-80  { padding-top: 45px !important; }
    .pb-80  { padding-bottom: 45px !important; }
    .mb-60  { margin-bottom: 40px !important; }
    .mb-50  { margin-bottom: 30px !important; }
}
@media (max-width: 480px) {
    .pt-120 { padding-top: 48px !important; }
    .pb-120 { padding-bottom: 48px !important; }
}

/* ── 3. SECTION HEADINGS ────────────────────────────────────────────── */
@media (max-width: 992px) {
    .section-title, h2.section-title { font-size: 28px !important; }
    .sub-heading { font-size: 14px !important; }
}
@media (max-width: 767px) {
    .section-title, h2.section-title { font-size: 24px !important; }
    .sub-heading { font-size: 13px !important; }
    .section-heading { margin-bottom: 30px !important; }
}
@media (max-width: 480px) {
    .section-title, h2.section-title { font-size: 20px !important; }
}

/* ── 4. HOME HERO SLIDER ────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .slider-item { min-height: 460px !important; }
}
@media (max-width: 992px) {
    .slider-item { min-height: 360px !important; }
    .slider-item .edcare-cap { font-size: 32px !important; }
    .slider-item .sub-heading { font-size: 14px !important; }
    .slider-item p { font-size: 14px !important; }
}
@media (max-width: 767px) {
    .slider-item { min-height: 300px !important; }
    .slider-item .edcare-cap { font-size: 26px !important; }
    .slider-item .slider-content-wrap { padding: 20px 0 !important; }
}
@media (max-width: 480px) {
    .slider-item { min-height: 250px !important; }
    .slider-item .edcare-cap { font-size: 20px !important; }
    .slider-item .slider-btn { font-size: 13px !important; padding: 10px 20px !important; }
}

/* ── 5. GALLERY / PRODUCT IMAGE BOX ────────────────────────────────── */
@media (max-width: 992px) {
    .gallery-img-box  { height: 200px !important; }
    .product-image-box, .product-item-card { height: 220px !important; }
}
@media (max-width: 767px) {
    .gallery-img-box  { height: 185px !important; }
    .product-image-box, .product-item-card { height: 190px !important; }
}
@media (max-width: 480px) {
    .gallery-img-box  { height: 165px !important; }
    .product-image-box, .product-item-card { height: 160px !important; }
}

/* ── 6. GALLERY FILTER BUTTONS ──────────────────────────────────────── */
@media (max-width: 767px) {
    .filter-nav-wrap { text-align: center; }
    .filter-nav-wrap button {
        padding: 6px 13px !important;
        font-size: 12px !important;
        margin: 3px !important;
    }
}
@media (max-width: 480px) {
    .filter-nav-wrap button {
        padding: 5px 9px !important;
        font-size: 11px !important;
        margin: 2px !important;
    }
}

/* ── 7. ZOOM LENS — hide on touch/small screens ─────────────────────── */
@media (max-width: 1100px) {
    .popup-zoom-lens { display: none !important; }
}

/* ── 8. ABOUT / COUNTER SECTION ─────────────────────────────────────── */
@media (max-width: 992px) {
    .counter-section { padding: 60px 0 !important; }
    .counter-item .title { font-size: 34px !important; }
    .about-counter-items { flex-wrap: wrap; gap: 20px !important; }
    .about-counter-item { flex: 1 1 45%; }
}
@media (max-width: 767px) {
    .counter-item .title { font-size: 28px !important; }
    .about-counter-item { flex: 1 1 100%; }
    .about-feature-card { margin-bottom: 16px; }
}

/* ── 9. INFRASTRUCTURE CARDS ────────────────────────────────────────── */
@media (max-width: 992px) {
    .infra-pattern-box { padding: 35px 24px !important; }
    .infra-title       { font-size: 17px !important; }
}
@media (max-width: 767px) {
    .infra-pattern-box { padding: 28px 18px !important; }
    .infra-title       { font-size: 16px !important; }
    .infra-text        { font-size: 14px !important; }
    .infra-icon-box    { width: 52px !important; height: 52px !important; font-size: 22px !important; }
}

/* ── 10. FAQ ACCORDION ──────────────────────────────────────────────── */
@media (max-width: 767px) {
    .faq-accordion .accordion-button { font-size: 14px !important; padding: 14px 16px !important; }
    .faq-accordion .accordion-body   { font-size: 14px !important; padding: 14px 16px !important; }
}

/* ── 11. CONTACT CARDS ──────────────────────────────────────────────── */
@media (max-width: 992px) {
    .contact-content { padding: 24px !important; }
}
@media (max-width: 767px) {
    .contact-content { padding: 20px 16px !important; margin-bottom: 16px; }
    .contact-content .title { font-size: 16px !important; }
}

/* ── 12. SITEMAP GROUP CARDS ────────────────────────────────────────── */
@media (max-width: 767px) {
    .sitemap-group { padding: 18px 14px !important; }
    .sitemap-group h3 { font-size: 12px !important; }
}

/* ── 13. TEAM CARDS ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .team-card { margin-bottom: 20px; }
}

/* ── 14. PRELOADER ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    #preloader img { width: 200px !important; }
}

/* ── 15. ED PRIMARY / SLIDER BUTTONS ────────────────────────────────── */
@media (max-width: 767px) {
    .ed-primary-btn { font-size: 13px !important; padding: 12px 22px !important; }
}
@media (max-width: 480px) {
    .ed-primary-btn { font-size: 12px !important; padding: 10px 16px !important; }
}

/* ── 16. OFFER / CAPABILITIES TABS (index.php) ──────────────────────── */
@media (max-width: 767px) {
    .offer-nav.nav-tabs { flex-wrap: wrap; }
    .offer-nav.nav-tabs .nav-link { font-size: 13px !important; padding: 8px 12px !important; }
}

/* ── 17. TESTIMONIAL / CAROUSEL SECTIONS ────────────────────────────── */
@media (max-width: 767px) {
    .testimonial-item { padding: 20px !important; }
    .testimonial-item p { font-size: 14px !important; }
}

/* ── 18. BODY CONTAINER FLUID PADDING ──────────────────────────────── */
@media (max-width: 480px) {
    .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
    .container       { padding-left: 16px !important; padding-right: 16px !important; }
}