/* =====================================================================
   Matha Kerala Ayurvedic Treatment Centre
   Responsive Stylesheet  (responsive.css)
   Breakpoints tuned for Desktop, Laptop, Tablet/iPad, Android/iPhone
   ===================================================================== */

/* Large laptops / small desktops (<= 1199px) */
@media (max-width: 1199.98px) {
  .section { padding: 84px 0; }
  .hero { background-attachment: scroll; }
}

/* Tablets & iPad landscape (<= 991px) */
@media (max-width: 991.98px) {
  :root { --nav-h: 68px; }

  .section { padding: 68px 0; }
  .section-sm { padding: 48px 0; }

  /* Mobile nav panel becomes solid for readability */
  .navbar-hero .navbar-collapse {
    background: rgba(255,255,255,.98);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-top: .6rem;
    box-shadow: var(--shadow-md);
  }
  .navbar-hero .navbar-collapse .nav-link { color: var(--green-dark); }
  .navbar-hero .navbar-collapse .nav-link.active { color: var(--gold); }
  .navbar-hero .navbar-collapse .btn { margin-top: .6rem; }

  .hero { text-align: center; padding: 130px 0 70px; }
  .hero .hero-sub { margin-left: auto; margin-right: auto; }
  .hero .hero-actions { justify-content: center; }
  .spirit-frame { margin-top: 2.5rem; width: min(300px, 70vw); }
  .hero-stats { justify-content: center; }

  .about-img-wrap { margin-bottom: 3rem; }
  .about-img-wrap .badge-float { right: 12px; }

  .cta-strip, .page-hero, .hero { background-attachment: scroll; }

  .form-panel, .contact-side { padding: 2rem; }

  .page-hero { padding: 140px 0 60px; }
}

/* Small tablets / large phones (<= 767px) */
@media (max-width: 767.98px) {
  .section { padding: 56px 0; }

  .topbar { display: none; } /* keep phones clean; contact via floating buttons */

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

  .masonry { column-count: 2 !important; }

  .hero-stats .num { font-size: 1.4rem; }

  .float-btn { width: 50px; height: 50px; font-size: 1.35rem; }
}

/* Phones (<= 575px) */
@media (max-width: 575.98px) {
  .section { padding: 48px 0; }

  .hero h1 { font-size: 1.9rem; }
  .hero .hero-actions .btn { width: 100%; }
  .hero .hero-actions { flex-direction: column; }

  .masonry { column-count: 1 !important; }

  .btn { padding: .75rem 1.5rem; }

  .form-panel, .contact-side { padding: 1.5rem; }

  .newsletter-box { padding: 1.7rem; }

  .footer { padding-top: 56px; }

  .spirit-frame { width: min(260px, 78vw); }
}

/* Very small phones (<= 360px) */
@media (max-width: 360px) {
  .navbar .brand-name { font-size: .95rem; }
  .hero h1 { font-size: 1.7rem; }
}

/* Landscape short screens */
@media (max-height: 640px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 120px 0 60px; }
}