/* ============================================================
   responsive.css — Tuskers Dental
   Full device-specific responsive overrides
   Breakpoints: 1280 | 1040 | 860 | 768 | 620 | 480 | 380
   ============================================================ */

/* ─── Base Utility ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }

/* ─── Homepage Hero Visual (class-based, no inline styles) ─── */
.hero-visual--home {
  position: relative;
  height: 100%;
  min-height: 560px;
  display: flex;
  flex-direction: column;
}
.hero-visual-img-wrap {
  flex: 1;
  min-height: 560px;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 20px 55px rgba(0,0,0,0.14);
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
}
.hero-visual-img-wrap img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 560px;
  display: block;
}
.hero-card.nabh-float { position: absolute; top: 20px; right: 20px; }
.hero-card.hours-float { position: absolute; bottom: 20px; left: 20px; }

@media (max-width: 1040px) {
  .hero-visual--home { min-height: 340px; }
  .hero-visual-img-wrap { min-height: 340px; }
  .hero-visual-img-wrap img { min-height: 340px; }
}

@media (max-width: 768px) {
  .hero-visual--home { min-height: 280px; }
  .hero-visual-img-wrap { min-height: 280px; border-radius: 20px; }
  .hero-visual-img-wrap img { min-height: 280px; }
  .hero-card.nabh-float, .hero-card.hours-float { display: none !important; }
}

@media (max-width: 620px) {
  .hero-visual--home { min-height: 220px; }
  .hero-visual-img-wrap { min-height: 220px; border-radius: 14px; }
  .hero-visual-img-wrap img { min-height: 220px; }
}



/* ─── NOTICE BAR ────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .notice-bar { display: none !important; }
}

/* ─── HEADER & NAV ──────────────────────────────────────────── */
@media (max-width: 1280px) {
  .main-nav a { font-size: 13px; padding: 7px 8px; }
  .help-pill { display: none; }
}

@media (max-width: 1040px) {
  .nav-inner { min-height: 70px; }
  .site-logo img { max-height: 56px; }
  .nav-book { display: none !important; }
  .menu-toggle {
    display: block !important;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mint);
    padding: 12px 10px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px auto;
    background: var(--primary);
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
  }
  .menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2) { opacity: 0; }
  .menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .main-nav {
    position: fixed;
    inset: 70px 0 auto;
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 16px 28px;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
    display: none;
    z-index: 999;
  }
  .main-nav.open { display: block; }
  .main-nav > ul { display: grid; gap: 2px; }
  .main-nav a { width: 100%; padding: 12px 14px; font-size: 15px; }
  .dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none;
    border: none;
    background: #f7f1eb;
    border-radius: 12px;
    margin: 6px 0 10px 12px;
    padding: 6px;
    width: calc(100% - 12px);
  }
  .dropdown-menu a { font-size: 14px; padding: 10px 12px; }
  .nav-highlight-special > a,
  .nav-highlight-tourism > a {
    border-radius: 12px !important;
    display: flex !important;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .nav-inner { min-height: 60px; }
  .site-logo img { max-height: 46px; }
  .main-nav { inset: 60px 0 auto; max-height: calc(100dvh - 60px); }
  .menu-toggle { width: 42px; height: 42px; padding: 11px 9px; }
}

/* ─── HERO SECTION ──────────────────────────────────────────── */
@media (max-width: 1040px) {
  .hero { min-height: 0; }
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px;
    padding: 52px 0 70px;
  }
  .hero h1 { font-size: clamp(36px, 9vw, 54px); }
  .hero p { font-size: 16px; }
  .hero-visual {
    position: relative !important;
    min-height: 340px !important;
    height: 340px !important;
  }
  .hero-visual > div { min-height: 340px !important; }
  .hero-visual > div > img { min-height: 340px !important; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hero-stats div { padding: 14px 10px; }
  .hero-stats strong { font-size: 26px; }
}

@media (max-width: 768px) {
  .hero-grid { padding: 40px 0 60px; gap: 28px; }
  .hero h1 { font-size: clamp(28px, 8vw, 42px); margin-top: 12px; }
  .hero p { font-size: 15px; margin-top: 14px; }
  .hero-actions { gap: 10px; margin-top: 20px; }
  .hero-actions .btn { font-size: 14px; padding: 12px 18px; min-height: 44px; }
  .hero-visual {
    min-height: 280px !important;
    height: 280px !important;
  }
  .hero-visual > div { min-height: 280px !important; }
  .hero-visual > div > img { min-height: 280px !important; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
  .hero-stats div { padding: 12px 8px; }
  .hero-stats strong { font-size: 22px; }
  .hero-stats span { font-size: 11px; }
  .trust-points { gap: 8px; }
  .trust-points span { font-size: 12px; padding: 8px 12px; }
  /* Hide floating cards on mobile to prevent overflow */
  .hero-card.nabh-float, .hero-card.hours-float { display: none !important; }
}

@media (max-width: 620px) {
  .hero-grid { padding: 32px 0 50px; }
  .hero h1 { font-size: clamp(26px, 7.5vw, 36px); }
  .hero-visual { min-height: 240px !important; height: 240px !important; }
  .hero-visual > div { min-height: 240px !important; }
  .hero-visual > div > img { min-height: 240px !important; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 24px; }
  .hero-stats { grid-template-columns: 1fr; }
}

/* ─── QUICK CONTACT STRIP ───────────────────────────────────── */
@media (max-width: 860px) {
  .quick-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 24px;
    text-align: center;
  }
  .quick-grid > div { align-items: center; }
  .quick-grid .btn { width: 100%; justify-content: center; }
}

@media (max-width: 620px) {
  .quick-grid { padding: 20px 16px; }
  .quick-grid strong { font-size: 16px; }
}

/* ─── SECTIONS GENERAL ──────────────────────────────────────── */
@media (max-width: 1040px) {
  .section { padding: 72px 0; }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading .btn { grid-column: 1; grid-row: auto; width: max-content; }
}

@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .section-heading h2 { font-size: clamp(26px, 6vw, 38px); }
  .section-heading p { font-size: 14.5px; }
}

@media (max-width: 620px) {
  .section { padding: 44px 0; }
  .container { width: calc(100% - 28px) !important; }
}

@media (max-width: 380px) {
  .container { width: calc(100% - 20px) !important; }
}

/* ─── ABOUT / SPLIT GRID ────────────────────────────────────── */
@media (max-width: 1040px) {
  .split-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
}

@media (max-width: 620px) {
  .split-grid { gap: 28px; }
  .experience-badge, .doctor-count {
    position: static !important;
    width: 100%;
    margin-top: 14px;
    min-height: 110px;
  }
  .experience-badge strong, .doctor-count strong { font-size: 38px; }
  .image-stack img, .doctor-panel img { border-radius: 16px; }
}

/* ─── SERVICES GRID ─────────────────────────────────────────── */
@media (max-width: 1260px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .service-card { padding: 24px; min-height: 260px; }
  .service-card h3 { font-size: 19px; }
  .service-icon { width: 56px; height: 56px; font-size: 22px; margin-bottom: 18px; }
}

@media (max-width: 620px) {
  .services-grid { grid-template-columns: 1fr; gap: 14px; }
  .service-card { min-height: auto; }
}

/* ─── ADVANTAGES / WHY US ───────────────────────────────────── */
@media (max-width: 1260px) {
  .advantages-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .advantages-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .advantage-card { padding: 22px; }
  .advantage-card h3 { font-size: 17px; }
  .advantage-card i { width: 46px; height: 46px; font-size: 19px; margin-bottom: 16px; }
}

@media (max-width: 620px) {
  .advantages-grid { grid-template-columns: 1fr; }
}

/* ─── BEFORE/AFTER CARDS ────────────────────────────────────── */
@media (max-width: 992px) {
  .before-after-grid { grid-template-columns: repeat(2, 1fr); }
  .smile-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .smile-trust-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .before-after-grid { grid-template-columns: 1fr; }
  .smile-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .smile-trust-strip { grid-template-columns: 1fr; gap: 8px; }
  .ba-slider, .ba-placeholder { height: 240px; }
  .before-after-card { padding: 14px; }
  .before-after-card h3 { font-size: 18px; }
}

@media (max-width: 480px) {
  .smile-stat-grid { grid-template-columns: 1fr; }
  .smile-stat strong { font-size: 30px; }
}

/* ─── TESTIMONIALS ──────────────────────────────────────────── */
@media (max-width: 1260px) {
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .testimonial-grid { grid-template-columns: 1fr; gap: 14px; }
  .testimonial-card { padding: 24px; }
}

/* ─── GALLERY GRID ──────────────────────────────────────────── */
@media (max-width: 1040px) {
  .gallery-grid { grid-template-columns: 1fr 1fr !important; }
  .gallery-item.wide { grid-row: auto; min-height: 300px; }
}

@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .gallery-item, .gallery-item.wide { min-height: 260px; }
}

/* ─── APPOINTMENT SECTION ───────────────────────────────────── */
@media (max-width: 1040px) {
  .appointment-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .appointment-form { padding: 24px; }
  .form-row { grid-template-columns: 1fr !important; gap: 14px; }
  .appointment-trust { flex-direction: column; text-align: center; gap: 8px; }
}

@media (max-width: 480px) {
  .appointment-form { padding: 18px; }
  .appointment-form input,
  .appointment-form select,
  .appointment-form textarea { font-size: 14px; }
}

/* ─── EMI SECTION ───────────────────────────────────────────── */
@media (max-width: 992px) {
  .emi-banner-card { grid-template-columns: 1fr !important; gap: 24px; }
}

@media (max-width: 768px) {
  .emi-section { padding: 44px 0; }
  .emi-banner-card { padding: 20px !important; }
  .emi-compact {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
    gap: 12px;
  }
  .emi-compact .btn { width: 100% !important; }
}

@media (max-width: 620px) {
  .emi-benefits { grid-template-columns: 1fr !important; }
}

/* ─── VIDEO SECTION ─────────────────────────────────────────── */
@media (max-width: 992px) {
  .celebrity-video-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 620px) {
  .celebrity-video-grid { grid-template-columns: 1fr !important; }
  .celebrity-video-thumb { height: 220px !important; }
  .celebrity-video-thumb .video-play-btn { width: 52px !important; height: 52px !important; font-size: 18px !important; }
}

/* ─── FOOTER ────────────────────────────────────────────────── */
@media (max-width: 1260px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px; }
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 22px; }
  .site-footer { padding-top: 56px; }
  .footer-logo img { max-height: 46px; }
  .footer-brand p { font-size: 14px; }
}

@media (max-width: 620px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px; }
  .footer-bottom .container { flex-direction: column; text-align: center; align-items: center; }
}

/* ─── SERVICE HERO (individual service pages) ───────────────── */
@media (max-width: 1040px) {
  .service-hero-inner { grid-template-columns: 1fr !important; gap: 36px; }
  .service-hero { padding: 56px 0 72px; }
  .service-hero-visual { width: 100%; }
  .service-hero-visual > img,
  .service-hero-visual .ba-slider {
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/10;
  }
  .nabh-float, .hours-float { display: none !important; }
}

@media (max-width: 768px) {
  .service-hero { padding: 44px 0 56px; }
  .service-hero-copy h1 { font-size: clamp(28px, 8vw, 44px); }
  .service-hero-copy > p { font-size: 15px; }
  .service-hero-badges span { font-size: 12px; padding: 6px 12px; }
  .service-hero-badges { gap: 7px; margin-top: 18px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { font-size: 14px; padding: 11px 16px; min-height: 42px; }
}

@media (max-width: 620px) {
  .service-hero { padding: 34px 0 44px; }
  .service-hero-copy h1 { font-size: clamp(24px, 7.5vw, 34px); }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .service-hero-badges span { font-size: 11px; padding: 5px 10px; }
}

/* ─── PROCESS STEPS ─────────────────────────────────────────── */
@media (max-width: 860px) {
  .process-steps::before { left: 18px; }
  .process-num { width: 40px; height: 40px; font-size: 14px; }
  .process-step { gap: 18px; }
}

@media (max-width: 480px) {
  .process-step h3 { font-size: 17px; }
  .process-step p { font-size: 14px; }
}

/* ─── CONTACT PAGE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .contact-main-grid { grid-template-columns: 1fr !important; gap: 36px; }
  .page-hero-inner { grid-template-columns: 1fr !important; gap: 28px; }
}

@media (max-width: 540px) {
  .contact-form-box { padding: 22px 16px !important; }
  .contact-hero { padding: 50px 0 44px; }
}

/* ─── PAGE HERO (services, gallery, blog) ───────────────────── */
@media (max-width: 768px) {
  .page-hero { padding: 60px 0 44px; }
  .page-hero h1 { font-size: clamp(28px, 7vw, 46px); }
  .page-hero p { font-size: 15px; margin-top: 14px; }
}

@media (max-width: 480px) {
  .page-hero { padding: 44px 0 34px; }
  .page-hero h1 { font-size: clamp(24px, 7vw, 34px); }
}

/* ─── PRO HERO (facilities, dental-tourism) ─────────────────── */
@media (max-width: 768px) {
  .pro-hero-section { padding: 56px 0 44px; background-attachment: scroll; }
  .pro-hero-inner { padding: 30px 22px; border-radius: 20px; }
  .pro-hero-section h1 { font-size: clamp(26px, 7vw, 40px); }
  .pro-hero-section p { font-size: 15px; }
  .pro-hero-actions .btn { min-width: 180px; justify-content: center; }
}

@media (max-width: 480px) {
  .pro-hero-section { padding: 40px 0 32px; }
  .pro-hero-inner { padding: 22px 16px; }
  .pro-hero-actions { flex-direction: column; align-items: stretch; }
  .pro-hero-actions .btn { width: 100%; justify-content: center; }
  .pro-hero-badges span { font-size: 12px; padding: 6px 12px; }
}

/* ─── FACILITIES & TOURISM GRIDS ────────────────────────────── */
@media (max-width: 992px) {
  .tourism-pillars-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
  .pro-facility-grid { grid-template-columns: 1fr !important; }
  .pro-facility-card { padding: 24px 20px; }
}

@media (max-width: 640px) {
  .tourism-pillars-grid { grid-template-columns: 1fr !important; }
  .pro-hero-section { padding: 40px 0 30px; }
}

/* ─── ABOUT / TEAM / TIMELINE ───────────────────────────────── */
@media (max-width: 768px) {
  .team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }
  .timeline-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr !important; }
  .timeline-grid { grid-template-columns: 1fr !important; }
}

/* ─── TREATMENT CARDS GRID ──────────────────────────────────── */
@media (max-width: 768px) {
  .treatment-cards-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .treatment-full-card { padding: 22px 20px; }
}

/* ─── JOURNEY CARD ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .journey-card { min-height: 340px; padding: 28px; }
  .journey-card h3 { font-size: 24px; margin: 10px 0 20px; }
}

@media (max-width: 480px) {
  .journey-card { min-height: 280px; padding: 22px 18px; }
  .journey-card h3 { font-size: 20px; }
}

/* ─── FAQ ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .faq-item { padding: 18px 16px; }
  .faq-item span { font-size: 14px; }
}

/* ─── TREATMENT GALLERY SLIDER ──────────────────────────────── */
@media (max-width: 768px) {
  .treatment-gallery-slider-section { padding: 28px 0 36px; }
  .treatment-slide-card { width: 240px; height: 170px; }
  .treatment-gallery-marquee::before,
  .treatment-gallery-marquee::after { width: 50px; }
}

@media (max-width: 480px) {
  .treatment-slide-card { width: 200px; height: 145px; }
}

/* ─── PROVIDER MARQUEE ──────────────────────────────────────── */
@media (max-width: 768px) {
  .provider-marquee-section { padding: 44px 0; }
  .provider-item { min-width: 150px; height: 80px; padding: 12px 14px; gap: 10px; }
  .provider-item img { width: 36px; height: 36px; }
  .provider-item span { font-size: 15px; }
}

@media (max-width: 480px) {
  .provider-item { min-width: 130px; }
  .provider-item span { font-size: 14px; }
}

/* ─── FLOAT BTNS (WhatsApp, Phone, Scroll) ──────────────────── */
@media (max-width: 620px) {
  .float-btns { right: 12px; bottom: 14px; gap: 8px; }
  .float-btn { width: 40px; height: 40px; font-size: 14px; }
}

/* ─── SECTION HEADINGS UNIFORM ──────────────────────────────── */
@media (max-width: 768px) {
  .section-heading-center h2,
  .section-heading.text-center h2,
  .section-heading.center-heading h2 {
    font-size: clamp(24px, 6vw, 38px) !important;
  }
  .section-heading-center p { font-size: 14.5px !important; }
}

/* ─── BUTTONS RESPONSIVE ────────────────────────────────────── */
@media (max-width: 480px) {
  .btn { font-size: 14px; padding: 12px 18px; min-height: 44px; }
}

/* ─── COST TABLE (DENTAL TOURISM) ───────────────────────────── */
@media (max-width: 768px) {
  .cost-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cost-comparison-table th, .cost-comparison-table td { padding: 12px 14px; font-size: 13px; }
}

/* ─── VIDEO MODAL ───────────────────────────────────────────── */
@media (max-width: 620px) {
  .video-modal { padding: 12px; }
  .video-modal-content { max-height: 90vh; }
  .video-modal-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 18px; }
}

/* ─── WORKING HOURS BOX ─────────────────────────────────────── */
@media (max-width: 620px) {
  .working-hours { padding: 20px; }
  .emergency-box { padding: 20px; }
  .emergency-box strong { font-size: 22px; }
}

/* ─── PROGRESS BARS ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .progress-title { font-size: 14px; }
}

/* ─── EXPERTISE LIST ────────────────────────────────────────── */
@media (max-width: 480px) {
  .expertise-list strong { font-size: 16px; }
  .expertise-list i { width: 44px; height: 44px; }
}

/* ─── TOUCH — disable cursor dot & ring ─────────────────────── */
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ─── FIX: Prevent horizontal scroll from inline min-height ─── */
@media (max-width: 768px) {
  .hero-visual > div { min-height: 260px !important; }
  .hero-visual > div > img { min-height: 260px !important; }
}

/* ─── SECTION.HERO min-height override ──────────────────────── */
@media (max-width: 620px) {
  section.hero { min-height: 0 !important; }
  .hero-visual,
  .hero-visual > div,
  .hero-visual > div > img { min-height: 220px !important; }
}

/* ─── REMOVE HEAVY BACKGROUND FIXED ON MOBILE ───────────────── */
@media (max-width: 768px) {
  .pro-hero-section { background-attachment: scroll !important; }
}

/* ─── GALLERY PAGE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .gallery-hero-content h1,
  .hero-content h1 { font-size: clamp(26px, 7vw, 40px); }
}

/* ─── CONTACT MAP ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-map iframe { height: 280px !important; }
}

@media (max-width: 480px) {
  .contact-map iframe { height: 220px !important; }
}

/* ─── BLOG PAGE ─────────────────────────────────────────────── */
@media (max-width: 992px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 620px) {
  .blog-grid { grid-template-columns: 1fr !important; }
}

/* ─── SERVICES OVERVIEW PAGE ────────────────────────────────── */
@media (max-width: 480px) {
  .service-card { padding: 20px; }
  .service-card h3 { font-size: 17px; }
  .service-card p { font-size: 14px; }
  .service-icon { width: 50px; height: 50px; font-size: 20px; margin-bottom: 14px; }
}

/* ─── ENSURE BODY NO HORIZONTAL SCROLL ─────────────────────── */
body { overflow-x: hidden !important; }

/* ─── SECTION MAX-WIDTH CONSISTENCY ────────────────────────── */
@media (max-width: 480px) {
  section { overflow-x: hidden; }
}