/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE.CSS  —  Mobile-first breakpoints
   ══════════════════════════════════════════════════════════════════════ */

/* ── XS: 0–575px ─────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    :root {
        --section-py: 60px;
        --nav-height: 70px;
    }
    .hero         { min-height: auto; padding-bottom: 40px; }
    .hero-title   { font-size: 2rem; }
    .hero-stats   { gap: 20px; }
    .stat-number  { font-size: 1.6rem; }
    .hero-actions { flex-direction: column; }
    .btn-hero-primary, .btn-hero-outline { width: 100%; justify-content: center; }

    /* Scroller — show on mobile, full width, compact height */
    .hero-image-wrapper {
        display: flex;
        padding: 16px 12px 48px;
    }
    .hero-scroller {
        max-width: 100%;
        height: 220px;
        margin-top: 0;
        border-radius: 12px;
    }
    .hero-image-ring, .hero-image-bg { display: none; }
    .hero-card    { display: none; }
    .hs-controls  { bottom: -22px; }

    .float-icon   { display: none; }
    .blob         { width: 200px; height: 200px; }

    .section-title { font-size: 1.75rem; }

    .mega-menu    { min-width: 100%; flex-direction: column; gap: 0; }

    .footer       { text-align: center; }
    .footer-social { justify-content: center; }
    .footer-desc   { max-width: 100%; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

    .contact-strip .row > div + div { border-top: 1px solid var(--gray-100); }

    .testimonial-card  { padding: 24px 20px; }
    .about-experience-badge { right: 0; }
}

/* ── SM: 576–767px ───────────────────────────────────────────────────── */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hero         { min-height: auto; padding-bottom: 40px; }
    .hero-title   { font-size: 2.5rem; }
    .mega-menu    { min-width: 320px; flex-direction: column; }

    .hero-image-wrapper {
        display: flex;
        padding: 16px 16px 52px;
    }
    .hero-scroller {
        max-width: 100%;
        height: 280px;
        margin-top: 0;
        border-radius: 14px;
    }
    .hero-image-ring, .hero-image-bg { display: none; }
    .hero-card { display: none; }
}

/* ── MD: 768–991px ───────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-title { font-size: 2.8rem; }
    .hero-image-wrapper { padding: 20px 16px 55px; }
    .hero-scroller {
        max-width: 100%;
        height: 320px;
        margin-top: -60px;
    }
    .ring-2, .ring-3 { display: none; }
    .ring-1 { width: 380px; height: 350px; }
    .hero-card.card-3 { display: none; }
    .card-1 { left: -10px; }
    .card-2 { right: -10px; }
}

/* ── LG: 992–1199px ──────────────────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-title { font-size: 3.2rem; }
    .hero-scroller { max-width: 480px; height: 370px; margin-top: -120px; }
}

/* ── XL: 1200px+ ─────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
    /* Baseline — styles in main.css already cover this. */
}

/* ── Navbar mobile ───────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    #mainNav {
        background: rgba(255,255,255,0.97) !important;
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--mint-100);
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    }
    .navbar-collapse {
        background: white;
        border-radius: var(--radius-md);
        padding: 16px;
        margin-top: 12px;
        box-shadow: var(--shadow-xl);
        border: 1px solid var(--gray-100);
    }
    .nav-actions {
        padding-top: 12px;
        border-top: 1px solid var(--gray-100);
        flex-direction: column;
        align-items: stretch;
    }
    .btn-cta-nav { justify-content: center; }
    .mega-menu { position: static !important; border-top: none; flex-direction: column; box-shadow: none; padding: 12px; }
}

/* ── Section layout adjustments ─────────────────────────────────────── */
@media (max-width: 767.98px) {
    .section-header { margin-bottom: 40px; }
    .section-desc   { font-size: 0.95rem; }
    .about-experience-badge { position: relative; bottom: auto; right: auto; margin-top: 20px; display: inline-block; }
    .stats-section .col-md-3 { border-bottom: 1px solid rgba(255,255,255,0.08); }
    .stats-section .col-md-3:last-child { border-bottom: none; }
    .appt-cta-section .col-lg-6 + .col-lg-6 { margin-top: 32px; }
}

/* ── Emergency bar mobile ───────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .emergency-bar { height: 32px; }
    #mainNav { top: 32px; }
    .eb-hours, .eb-divider { display: none !important; }
}
/* ── Quick Actions Strip ─────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .qa-grid { grid-template-columns: repeat(2,1fr); }
    .qa-card { padding: 16px; border-bottom: 1px solid var(--gray-100); }
    .qa-icon { width: 40px; height: 40px; font-size: 1rem; }
    .qa-text strong { font-size: .82rem; }
    .qa-text span   { font-size: .68rem; }
}
@media (max-width: 400px) {
    .qa-grid { grid-template-columns: 1fr; }
}
/* ── Specialities grid mobile ───────────────────────────────────────── */
@media (max-width: 575.98px) {
    .spec-card { padding: 16px 10px; }
    .spec-icon { width: 46px; height: 46px; font-size: 1.1rem; }
    .spec-card h6 { font-size: .76rem; }
}
/* ── Health Packages mobile ─────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .pkg-price { font-size: 1.7rem; }
    .pkg-features li { font-size: .8rem; }
}
/* ── Awards mobile ───────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .awards-section { padding: 50px 0; }
    .award-item strong { font-size: .78rem; }
    .accred-strip { gap: 8px; }
    .accred-badge { font-size: .7rem; padding: 6px 12px; }
}

/* ── Touch device improvements ───────────────────────────────────────── */
@media (hover: none) {
    .service-card:hover  { transform: none; }
    .blog-card:hover     { transform: none; }
    .testimonial-card:hover { transform: none; }
    .btn-hero-primary:hover { transform: none; }
}

/* ── Print ───────────────────────────────────────────────────────────── */
@media print {
    #mainNav, #backToTop, #preloader, .floating-icons, #particles-js { display: none !important; }
    .hero { padding-top: 20px; min-height: auto; }
    body { color: black; }
}