/* ============================================================
   AROGYAM DENTAL — MOBILE RESPONSIVE CSS
   Breakpoints: 1199 | 991 | 767 | 575 | 400
   ============================================================ */

.dekstop { display: block; }
.mobile  { display: none; }

/* ============================================================
   MOBILE BOTTOM CTA BAR — hidden on desktop
   ============================================================ */
.mobile-cta-bar {
  display: none; /* shown only on mobile via media query below */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
  padding: 10px 12px;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.mobile-cta-book {
  flex: 1;
  display: block;
  background: #dc1a2b;
  color: #fff !important;
  text-align: center;
  padding: 11px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: background 0.25s;
}
.mobile-cta-book:hover { background: #b01020; color: #fff !important; }

.mobile-cta-call {
  flex: 1;
  display: block;
  background: #0d1b3e;
  color: #fff !important;
  text-align: center;
  padding: 11px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  text-decoration: none;
  letter-spacing: 0.2px;
  transition: background 0.25s;
}
.mobile-cta-call:hover { background: #1a3568; color: #fff !important; }



/* ============================================================
   GLOBAL — Prevent horizontal overflow / scroll on all sizes
   ============================================================ */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Swiper testimonials — contain navigation within viewport */
.marketkey-slider {
  overflow: hidden;
  position: relative;
}
.marketkey-slider .swiper-button-prev,
.marketkey-slider .swiper-button-next {
  /* Keep arrows inside the swiper container */
  position: absolute;
}
#services .container,
#services .row {
  overflow: hidden;
}

/* Ensure no section bleeds outside viewport */
section, header, footer, .container, .container-fluid {
  max-width: 100%;
  overflow-x: hidden;
}



/* ============================================================
   1199px — Large tablets / small laptops
   ============================================================ */
@media (max-width: 1199px) {
  .feature-panel .nav-link { font-size: 16px; padding: 10px 14px; }
  .inv-heading { font-size: 1.7rem; }
  .footer-col { padding-right: 20px; }
}

/* ============================================================
   991px — Tablets
   ============================================================ */
@media (max-width: 991px) {

  /* Header */
  .bottom-header { height: auto; padding: 10px 0; }
  .navbar { top: 0; }
  .call-now { font-size: 15px; padding: 4px 10px; margin-top: 8px; display: inline-block; }

  /* Hero — full rework for tablets */
  #hero {
    background-position: center center;
  }
  .hero-topleft {
    position: relative;
    top: auto;
    left: auto;
    max-width: 100%;
    padding: 28px 20px 14px;
    text-align: center;
    z-index: 3;
  }
  .hero-heading-topleft { font-size: 1.6rem; }
  .hero-cta-topleft { margin-top: 12px; display: inline-block; }
  .hero-inner { padding: 16px 0 32px; }
  .hero-heading { font-size: 2rem; }
  .hero-left { padding-right: 15px; margin-bottom: 24px; }
  .hero-right { justify-content: center; }
  .hero-form-card { max-width: 100%; }
  .hero-side-tabs { display: none; }

  /* Counter */
  .counter-section .counters span { font-size: 34px; }
  .counter-section .counters p { font-size: 14px; }

  /* Featured Services */
  #featured-services .col-lg-4 { margin-bottom: 16px; }

  /* About Us Intro */
  #about-us-intro .col-lg-6:first-child { margin-bottom: 24px; }
  #about-us-intro h3 { padding-top: 0 !important; }
  #about-us-intro h3 br { display: none; }

  /* About Us — Doctor — stack on tablet */
  #about-us .col-lg-4 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 24px;
    text-align: center;
  }
  #about-us .col-lg-8 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  #about-us .doctor-photo { width: 100%; max-width: 340px; display: block; margin: 0 auto; }
  #about-us h4 span { font-size: 28px; }

  /* Dental Team Cards — stack to single col */
  #dental-team .col-lg-6 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Services section (Why Choose / feature panel) */
  #services .col-lg-6.pe-0 { padding-right: calc(var(--bs-gutter-x) * 0.5) !important; }
  #services .col-lg-6.ps-0 { padding-left:  calc(var(--bs-gutter-x) * 0.5) !important; }
  .feature-panel { border-radius: 0 0 16px 16px; }
  .feature-panel .nav-link { font-size: 14px; padding: 9px 12px; }
  .video-box img { height: auto; }

  /* Services grid — stack */
  #services .col-lg-4 { margin-bottom: 20px; width: 50%; flex: 0 0 50%; max-width: 50%; }
  #services h3 { padding-top: 20px !important; }

  /* Highlights */
  #highlights-section { padding: 50px 0; }
  #highlights-section .col-lg-4,
  #highlights-section .col-md-6 { margin-bottom: 24px; }

  /* Achivements / service cards grid */
  .achivements .col-lg-4 { width: 50%; flex: 0 0 50%; max-width: 50%; }

  /* Before/After — stack */
  #case-studies .col-lg-6 { width: 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 24px; }
  #case-studies .col-lg-5 { width: 100%; flex: 0 0 100%; max-width: 100%; }
  #case-studies .col-lg-7 { width: 100%; flex: 0 0 100%; max-width: 100%; }

  /* Invisalign */
  .invisalign-content { padding-right: 0; margin-bottom: 32px; }
  .invisalign-content, .invisalign-image { width: 100%; flex: 0 0 100%; max-width: 100%; }
  .inv-heading { font-size: 1.6rem; }

  /* Call to action */
  #call-to-action h3 { font-size: 22px; }
  #call-to-action .col-lg-6:first-child { margin-bottom: 20px; }
  #call-to-action .col-lg-6 { width: 100%; flex: 0 0 100%; max-width: 100%; }
  .consultation-buttons .btn { margin-top: 16px !important; }

  /* Testimonials */
  .testimonial-card { padding: 130px 24px 32px; }
  .testimonial-text { font-size: 15px; }

  /* FAQ */
  #faq h3 { font-size: 24px; }

  /* Location */
  .clinic-card .col-md-6:first-child { margin-bottom: 20px; }
  .map-box iframe { height: 260px; }

  /* Footer — fix large negative margin */
  #footer .footer-top {
    margin-top: 0;
    padding: 50px 0 30px;
  }
  .footer-col { padding-right: 15px; margin-bottom: 24px; }
  .footer-hours td { font-size: 13px; }
}

/* ============================================================
   767px — Tablets portrait / large phones
   ============================================================ */
@media (max-width: 767px) {

  .dekstop { display: none; }
  .mobile  { display: block; }

  /* Show mobile bottom CTA bar */
  .mobile-cta-bar {
    display: flex;
  }

  /* Add padding so page content doesn't hide behind the bar */
  body {
    padding-bottom: 68px;
  }



  /* Header */
  .bottom-header { height: auto; padding: 8px 0; }
  #header .logo img { max-width: 120px; }
  .call-now { font-size: 13px; padding: 4px 8px; }
  .top-header { font-size: 12px; padding: 6px 10px; }

  /* Hero — full mobile stack */
  #hero {
    background-position: center top;
    min-height: unset;
  }
  .hero-topleft {
    position: relative;
    top: auto;
    left: auto;
    max-width: 100%;
    padding: 24px 16px 10px;
    text-align: center;
  }
  .hero-heading-topleft { font-size: 1.3rem; line-height: 1.4; }
  .hero-desc-topleft { display: none; }
  .hero-inner { padding: 12px 0 24px; }
  .hero-heading { font-size: 1.8rem; }

  /* Show form full-width, hide empty left col */
  #hero .col-lg-7, #hero .col-md-7 { display: none; }
  #hero .col-lg-5, #hero .col-md-5 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  .hero-form-card { margin: 0 auto; max-width: 480px; }

  /* Counter */
  .counter-section { padding: 24px 10px; margin: 0 10px; }
  .counter-section .counters span { font-size: 28px; }
  .counter-section .counters p { font-size: 13px; margin-bottom: 12px; }

  /* Featured services — full width on mobile */
  #featured-services .col-lg-4 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 16px;
  }

  /* About us intro */
  #about-us-intro { padding: 30px 0; }
  #about-us-intro h3 { font-size: 22px; padding-top: 0 !important; }
  #about-us-intro p { font-size: 14px; }
  #about-us-intro .feature-item span { font-size: 13px; }
  #about-us-intro .col-lg-6 { width: 100%; flex: 0 0 100%; max-width: 100%; }

  /* About us doctor */
  #about-us h4 { font-size: 18px; }
  #about-us h4 span { font-size: 24px; }
  #about-us p { font-size: 14px; }
  #about-us .col-lg-4,
  #about-us .col-lg-8 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  #about-us .col-lg-4 { margin-bottom: 20px; text-align: center; }
  #about-us .doctor-photo { max-width: 280px; margin: 0 auto; display: block; }

  /* Dental team — single col */
  #dental-team .col-lg-6 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .team-card {
    flex-direction: column;
  }
  .team-card-img,
  .team-photo {
    width: 100%;
    height: 340px;
    object-position: center 15%;
    min-height: unset;
    flex: 0 0 auto;
  }

  /* Services (Why Choose heading) */
  #services h3 { font-size: 20px; padding-top: 16px !important; }
  #services h3 span { font-size: 14px; }

  /* Services grid — full width on mobile */
  #services .col-lg-4 { width: 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 20px; }

  /* Feature panel */
  .feature-panel .nav-link { font-size: 13px; padding: 8px 10px; line-height: 1.4; }
  .icon { font-size: 18px; margin-right: 10px; }

  /* Service cards */
  .service-card h4 { font-size: 18px; }
  .service-card p { font-size: 14px; }

  /* Achivements — full width service cards */
  .achivements .col-lg-4 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 16px;
  }

  /* Case studies — full width */
  #case-studies .col-lg-5,
  #case-studies .col-lg-7,
  #case-studies .col-lg-6 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  #case-studies img { width: 100%; height: auto; margin-bottom: 10px; }
  #case-studies .row { margin-bottom: 16px; }

  /* Highlights */
  #highlights-section { padding: 40px 0; }
  .highlight-title { font-size: 1.1rem; }
  .highlight-card-emi { padding: 24px 20px; }
  .highlight-title-emi { font-size: 1.4rem; }
  #highlights-section .col-lg-4,
  #highlights-section .col-md-6 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }

  /* Invisalign — stack */
  #invisalign { padding: 40px 0; }
  .inv-heading { font-size: 1.4rem; }
  .inv-features { grid-template-columns: 1fr; gap: 10px; }
  .inv-offer-box { flex-direction: column; align-items: flex-start; gap: 12px; }
  .invisalign-content,
  .invisalign-image {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .invisalign-content { margin-bottom: 24px; padding-right: 0; }

  /* Call to action — fix massive margin-top on buttons */
  #call-to-action { padding: 40px 0; }
  #call-to-action h3 { font-size: 20px; }
  #call-to-action p { font-size: 14px; }
  #call-to-action .col-lg-6 { width: 100%; flex: 0 0 100%; max-width: 100%; }
  .consultation-buttons { flex-direction: column; gap: 12px !important; }
  .consultation-buttons .btn { width: 100%; margin-top: 0 !important; }

  /* Why Trust section — collapse wt-tri-grid and make videos scrollable */
  .wt-tri-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .wt-vid-center { order: -1; }
  .wt-section { padding: 32px 16px 40px; border-radius: 16px; }

  /* Video cards — horizontal scroll strip on mobile */
  .wt-duo-vids {
    display: flex;
    flex-direction: row;
    gap: 12px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 8px 4px 12px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
  }
  .wt-duo-vids::-webkit-scrollbar { height: 4px; }
  .wt-duo-vids::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 2px; }
  .wt-duo-vids::-webkit-scrollbar-thumb { background: rgba(19,66,120,0.35); border-radius: 2px; }

  .wt-phone-card {
    width: 140px;
    height: 248px;
    flex-shrink: 0;
    scroll-snap-align: center;
  }
  /* Reset stagger on mobile (all at same vertical level) */
  .wt-phone-card:nth-child(2) {
    margin-top: 0;
  }

  /* Testimonials */
  .testimonial-card { padding: 120px 20px 28px; min-height: auto; }
  .testimonial-text { font-size: 14px; }
  .patient-name { font-size: 18px; }
  .profile-img { width: 100px; height: 100px; }

  /* FAQ */
  #faq { padding: 30px 0; }
  #faq h3 { font-size: 22px; }
  .accordion-button { font-size: 14px; }
  .accordion-body { font-size: 14px; }

  /* Location */
  #location { padding: 30px 0; }
  .map-box iframe { height: 220px; border-radius: 10px; }
  .clinic-card .phone { font-size: 16px; }
  .clinic-card .col-md-6 { width: 100%; flex: 0 0 100%; max-width: 100%; }
  .clinic-card .col-md-6:first-child { margin-bottom: 20px; }

  /* Footer — remove negative margin that causes overlap */
  #footer .footer-top {
    margin-top: 0 !important;
    padding: 36px 0 20px;
  }
  .footer-col { padding-right: 0; margin-bottom: 28px; }
  .footer-hours { width: 100%; }
  .footer-hours td { font-size: 13px; padding: 3px 0; }
  .footer-bottom p { font-size: 13px; }
}

/* ============================================================
   575px — Mobile phones
   ============================================================ */
@media (max-width: 575px) {

  /* Header */
  .bottom-header { padding: 8px 0; }
  #header .logo img { max-width: 100px; }
  .call-now { font-size: 12px; padding: 3px 7px; }

  /* Hero */
  #hero { background-position: center center; }
  .hero-heading-topleft { font-size: 1.1rem; }
  .hero-cta-topleft { font-size: 13px; padding: 8px 16px; }
  .hero-inner { padding: 8px 0 20px; }
  .hero-form-card { max-width: 100%; border-radius: 12px; }

  /* Counter */
  .counter-section { border-radius: 12px; margin: 0 10px; }
  .counter-section .counters span { font-size: 24px; }
  .counter-section .counters p { font-size: 12px; }
  .counter-section .col-lg-3.col-6 { margin-bottom: 8px; }

  /* Featured services */
  #featured-services .col-lg-4 { width: 100%; flex: 0 0 100%; max-width: 100%; }
  .box1, .box2, .box3 { margin-bottom: 16px; }

  /* About us intro */
  #about-us-intro .col-lg-6 { width: 100%; flex: 0 0 100%; max-width: 100%; }
  #about-us-intro .row.mt-4 .col-lg-6 { width: 100%; flex: 0 0 100%; max-width: 100%; }
  #about-us-intro .feature-item { margin-bottom: 10px; }

  /* About us doctor */
  #about-us .col-lg-4,
  #about-us .col-lg-8 { width: 100%; flex: 0 0 100%; max-width: 100%; }

  /* Dental team cards */
  #dental-team .col-lg-6 { width: 100%; flex: 0 0 100%; max-width: 100%; }

  /* Services — full width */
  #services .col-lg-6.pe-0,
  #services .col-lg-6.ps-0 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
    padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
  }
  .feature-panel { border-radius: 12px; }
  .feature-panel .nav-link { font-size: 12px; padding: 8px; }

  /* Service cards */
  #services .col-lg-4 { width: 100%; flex: 0 0 100%; max-width: 100%; }
  .achivements .col-lg-4 { width: 100%; flex: 0 0 100%; max-width: 100%; }

  /* Highlight cards */
  #highlights-section .col-lg-4,
  #highlights-section .col-md-6 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  .highlight-img-box { height: 180px; }

  /* Why Trust — maintain horizontal scroll at small sizes */
  .wt-phone-card { width: 130px; height: 230px; border-radius: 18px; }
  .wt-duo-vids { gap: 10px; }

  /* Before/After */
  .ba-after img, .ba-before img { height: 200px; }
  #case-studies .col-lg-5,
  #case-studies .col-lg-6,
  #case-studies .col-lg-7 { width: 100%; flex: 0 0 100%; max-width: 100%; }

  /* Invisalign */
  #invisalign .col-lg-6 { width: 100%; flex: 0 0 100%; max-width: 100%; }

  /* Call to action */
  #call-to-action .col-lg-6 { width: 100%; flex: 0 0 100%; max-width: 100%; }

  /* Testimonials */
  .testimonial-card { padding: 110px 16px 24px; border-radius: 16px; }
  .testimonial-text { font-size: 13px; }
  .profile-img { width: 90px; height: 90px; }

  /* Location */
  .custom-tabs { flex-wrap: wrap; }
  .map-box iframe { height: 200px; }
  .clinic-card { padding: 20px; }
  .clinic-card .col-md-6 { width: 100%; flex: 0 0 100%; max-width: 100%; }

  /* Footer */
  .footer-col { width: 100%; }
  #footer .footer-top .row { flex-direction: column; }
  #footer .footer-top {
    margin-top: 0 !important;
    padding: 30px 0 16px;
  }
}

/* ============================================================
   400px — Very small phones (iPhone SE, Galaxy A-series, etc.)
   ============================================================ */
@media (max-width: 400px) {

  /* Header */
  #header .logo img { max-width: 85px; }
  .call-now { font-size: 11px; padding: 3px 6px; }

  /* Hero */
  .hero-heading-topleft { font-size: 1rem; }
  .hero-form-card { border-radius: 12px; }

  /* Counter */
  .counter-section .counters span { font-size: 21px; }
  .counter-section .counters p { font-size: 11px; }

  /* Headings */
  #about-us-intro h3,
  #services h3,
  #faq h3 { font-size: 18px; }

  /* Feature panel */
  .feature-panel .nav-link { font-size: 11px; padding: 6px 8px; }
  .icon { font-size: 15px; margin-right: 8px; }

  /* Highlight cards */
  .highlight-title { font-size: 1rem; }
  .highlight-body { padding: 18px; }
  .highlight-img-box { height: 160px; }

  /* Why Trust — still horizontal scroll on tiny phones */
  .wt-phone-card { width: 118px; height: 210px; border-radius: 16px; }
  .wt-duo-vids { gap: 8px; }


  /* Testimonial */
  .testimonial-card { padding: 100px 12px 20px; }
  .testimonial-text { font-size: 12px; }
  .patient-name { font-size: 16px; }

  /* Before/After */
  .ba-after img, .ba-before img { height: 170px; }

  /* Footer */
  .footer-hours td { font-size: 12px; }
  .footer-bottom p { font-size: 12px; }
}