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

/* ── XS: 0–575px ─────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    :root {
        --section-py: 60px;
        --nav-height: 70px;
    }
    .hero         { min-height: 100svh; }
    .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; }

    .hero-image-wrapper { display: none; } /* hide image on very small screens */

    .hero-card    { display: none; }
    .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-image-wrapper { display: none; }
    .hero-title   { font-size: 2.5rem; }
    .mega-menu    { min-width: 320px; flex-direction: column; }
}

/* ── MD: 768–991px ───────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-image { width: 260px; height: 320px; }
    .hero-title { font-size: 2.8rem; }
    .ring-2, .ring-3 { display: none; }
    .hero-card.card-3 { display: none; }
}

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

/* ── 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; }
}

/* ── 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; }
}