/* ==========================================================================
   RAJA MAKHANA UDYOG — Responsive Rules
   Breakpoints: 1100px (tablet), 780px (large mobile), 480px (small mobile)
   ========================================================================== */

/* ---------- Tablet (<=1100px) ---------- */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-track { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1fr; }
  .about-visual { max-width: 480px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .booking-wrap { grid-template-columns: 1fr; }
  :root { --space-xl: 4rem; }
}

/* ---------- Mobile nav breakpoint (<=900px) ---------- */
@media (max-width: 900px) {
  .nav-links {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(78vw, 320px);
    background: #fff; flex-direction: column; align-items: flex-start;
    padding: 6.5rem 2rem 2rem; gap: 1.6rem;
    box-shadow: -12px 0 40px rgba(0,0,0,0.1);
    transform: translateX(100%); transition: transform 0.4s var(--ease);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 1.05rem; }
  .nav-toggle { display: flex; }
  .nav-toggle.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .nav-cta .btn-outline { display: none; }
  body.nav-open { overflow: hidden; }
  .nav-overlay {
    position: fixed; inset: 0; background: rgba(10,20,17,0.4); z-index: 998;
    opacity: 0; visibility: hidden; transition: all 0.4s var(--ease);
  }
  .nav-overlay.open { opacity: 1; visibility: visible; }
}

/* ---------- Large mobile (<=780px) ---------- */
@media (max-width: 780px) {
  :root { --space-xl: 3.2rem; --space-lg: 2.2rem; }
  .container { padding: 0 5.5vw; }
  .hero { text-align: left; padding-top: 7rem; min-height: auto; padding-bottom: 4rem; }
  .hero-stats { gap: 1.6rem; }
  .feature-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-track { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-points { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; align-items: flex-start; padding: 2.4rem; }
  .about-badge { position: static; margin-top: -3rem; margin-left: 1.5rem; display: inline-block; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ---------- Small mobile (<=480px) ---------- */
@media (max-width: 480px) {
  .hero h1 { font-size: 2.05rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .product-grid { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .section-head h2 { font-size: 1.65rem; }
  .cta-actions { flex-direction: column; width: 100%; }
  .cta-actions .btn { width: 100%; }
  .floating-btns { right: 1rem; bottom: 1rem; }
  .fab { width: 50px; height: 50px; font-size: 1.3rem; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.2rem; }
  .price-notes { flex-direction: column; align-items: flex-start; }
}