/* ==========================================================
   Glow Beauty Salon — Responsive FIXES ONLY
   Link this AFTER style.css. Your style.css already handles
   most responsiveness (auto-fit grids, nav toggle, footer
   breakpoints) — this file only patches real gaps.
   ========================================================== */

@media (min-width: 480px) {
  .gallery img {
    height: 300px;
  }
}

/* ---------- Small phones (≤ 480px) ---------- */
@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 1.7rem;
  }

  .hero-content .btn {
    width: 100%;
    text-align: center;
  }

  .gallery img {
    height: 220px;
  }

  /* Hover-scale feels janky on touch; keep it subtle on mobile */
  .team-member:hover {
    transform: none;
  }

  form {
    padding: 0 10px;
  }
}
@media (max-width: 768px) {
  .about-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-text {
    text-align: left;
  }
}