/* ============================================================
   AYURVED MORE — responsive.css
   All responsive / media-query overrides
   ============================================================ */

/* ── XL desktops (≤ 1200px) ────────────────────────────────── */
@media (max-width: 1200px) {
  .hero-title { font-size: 62px; }
  .hero-circle-bg { width: 360px; height: 360px; }
  .hero-icon-main { font-size: 130px; }
}

/* ── Large tablets / small laptops (≤ 992px) ───────────────── */
@media (max-width: 992px) {

  /* Hero */
  .hero-modern { min-height: auto; padding: 80px 0; }
  .hero-title  { font-size: 48px; }
  .hero-subtitle { font-size: 17px; }
  .hero-stats  { gap: 30px; }
  .hero-stat-num { font-size: 34px; }
  .hero-circle-bg { width: 300px; height: 300px; margin-top: 50px; }
  .hero-icon-main { font-size: 100px; }
  .hero-float-card.card-1,
  .hero-float-card.card-2 { display: none; }

  /* Section titles */
  .section-title { font-size: 38px; }

  /* About */
  .about-content {
    padding-left: 0;
    margin-top: 50px;
  }

  .about-experience-badge {
    right: 15px;
    bottom: 15px;
    width: 120px;
    height: 120px;
  }

  .about-experience-badge .badge-number { font-size: 36px; }

  /* Contact form */
  .contact-form-modern { padding: 40px 35px; }
  .contact-info-box    { padding: 40px 35px; }
    .navbar-logo {
      height: 80px;
      max-width: 220px;
    }
}

/* ── Tablets & large phones (≤ 768px) ──────────────────────── */
@media (max-width: 768px) {

  /* Navbar */
  .navbar-logo { height: 58px; max-width: 180px; }
  .nav-link { padding: 14px 16px !important; }
  .navbar-collapse { background: white; padding: 10px 0 20px; border-radius: 0 0 16px 16px; }
  .btn-book-now { margin: 10px 16px 5px !important; display: block; text-align: center; }

  /* Hero */
  .hero-title    { font-size: 38px; }
  .hero-subtitle { font-size: 16px; }
  .hero-stats    { gap: 20px; flex-wrap: wrap; }
  .hero-stat-num { font-size: 30px; }
  .hero-image-side { display: none; }

  /* Page header (contact) */
  .page-header h1 { font-size: 38px; }
  .page-header p  { font-size: 16px; }

  /* Section */
  .section-title { font-size: 32px; }
  .section-desc  { font-size: 15px; }

  /* Sections padding */
  .chambers-modern,
  .services-modern,
  .about-modern,
  .team-modern,
  .treatments-modern,
  .contact-modern,
  .contact-section,
  .chambers-section { padding: 70px 0; }

  /* About */
  .about-content h2 { font-size: 34px; }
  .about-content    { padding-left: 0; margin-top: 40px; }

  /* Forms */
  .contact-form-wrapper { padding: 35px 25px; }
  .contact-form-modern  { padding: 35px 25px; }
  .contact-info-box     { padding: 35px 25px; border-radius: 18px; }

  /* Map */
  .map-container { height: 350px; }

  /* FAB */
  .fab-container { bottom: 20px; right: 18px; gap: 12px; }
  .fab-button    { width: 54px; height: 54px; font-size: 22px; }
  .fab-button::before { display: none; }

  /* Back to top */
  #back-to-top { bottom: 95px; right: 20px; }
  .cta-box {
  padding: 45px 35px;
  }
  .cta-title {
  font-size: 32px;
  }
}

/* ── Small phones (≤ 576px) ─────────────────────────────────── */
@media (max-width: 576px) {

  .hero-title    { font-size: 32px; }
  .hero-badge    { font-size: 11px; padding: 6px 14px; }
  .hero-buttons  { flex-direction: column; }
  .btn-hero-primary,
  .btn-hero-outline { width: 100%; text-align: center; }

 .navbar-logo {
   height: 65px;
   max-width: 190px;
 }

 .navbar-tagline {
   font-family: 'Cormorant Garamond', serif;
   font-size: 10px;
   font-weight: 700;
   color: #c77825;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   margin-top: -4px;
   white-space: nowrap;
 }

  .section-title { font-size: 28px; }

  .page-header        { padding: 90px 0 60px; }
  .page-header h1     { font-size: 32px; }

  .chamber-modern-card,
  .chamber-location-card { border-radius: 16px; }

  .chamber-body { padding: 24px 20px; }

  .contact-form-wrapper { padding: 28px 20px; }
  .contact-form-wrapper h2 { font-size: 32px; }

  .footer-modern { padding: 55px 0 25px; }
  .footer-brand h4 { font-size: 26px; }

  .map-section { padding: 50px 0; }
  .map-container { height: 280px; }

    .cta-box {
      padding: 35px 25px;
      border-radius: 20px;
    }

    .cta-title {
      font-size: 26px;
    }

    .cta-trust-row {
      gap: 12px;
    }

    .cta-trust-item {
      font-size: 12px;
    }
}