/* ==========================================================================
   White Villa Girls PG — responsive.css (v2)
   Tablet & mobile adjustments
   ========================================================================== */

/* ===== ≤ 1199px ===== */
@media (max-width: 1199.98px) {
  .section { padding: 4rem 0; }
  .masonry { columns: 3 220px; }
}

/* ===== ≤ 991px (tablets) ===== */
@media (max-width: 991.98px) {
  html { scroll-padding-top: 72px; }

  .navbar-collapse {
    background: #fff;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    padding: 1rem 1.25rem;
    margin-top: .75rem;
  }
  .navbar-nav .nav-link { padding-block: .6rem; }

  .hero { min-height: auto; padding: 7.5rem 0 4rem; }
  .hero-stats { gap: 2rem !important; }

  .map-wrap, .map-wrap iframe { min-height: 320px; }
}

/* ===== ≤ 767px (mobiles) ===== */
@media (max-width: 767.98px) {
  .section { padding: 3.25rem 0; }

  .hero { padding: 6.5rem 0 3.5rem; }
  .hero-stats .stat h3 { font-size: 1.6rem; }
  .badge-glass { font-size: .74rem; padding: .35rem .8rem; }

  .masonry { columns: 2 160px; }

  .form-card { padding: 1.75rem 1.25rem; }
  .addr-card { padding: 1.5rem; }

  /* Space for sticky bottom CTA */
  body { padding-bottom: 56px; }
  .site-footer { padding-bottom: .5rem; }

  /* Lift floating buttons above mobile CTA bar */
  .float-wa { bottom: 12.5rem; }
  .float-call { display: none; } /* Call already in bottom bar */
  .float-top { bottom: 5rem; }
}

/* ===== ≤ 575px (small phones) ===== */
@media (max-width: 575.98px) {
  .brand-text small { display: none; }
  .brand-mark { width: 40px; height: 40px; font-size: 1.05rem; }

  .hero-title { font-size: 1.9rem; }
  .btn-lg.btn-cta { padding: .7rem 1.25rem; font-size: .95rem; }

  .hl-card { padding: 1.15rem .75rem; }
  .hl-card i { width: 48px; height: 48px; font-size: 1.25rem; }
  .hl-card h6 { font-size: .84rem; }

  .fc-card { padding: 1.25rem 1rem; }

  .near-chip { font-size: .82rem; padding: .55rem 1rem; }

  .masonry { columns: 2 140px; column-gap: .6rem; }
  .m-item { margin-bottom: .6rem; border-radius: .7rem; }

  .section-head h2 { font-size: 1.55rem; }
  
  .m-item img{
      height: 100px !important;
  }
}