/* ============================================================
   AVI'S BEAUTY STUDIO — responsive.css
   Responsive layout system
   ============================================================ */


/* ─────────────────────────────────────────
   TABLET — 1200px
───────────────────────────────────────── */

  @media (max-width:1200px){
    .sec{
      padding:5rem 2rem;
    }
    nav{
      padding:0 2.5rem;
    }
    .nav-links{
      gap:1.5rem;
    }
    .nav-links a{
      font-size:.65rem;
      letter-spacing:.13em;
    }
    .hero-body{
      padding:7rem 2.5rem 9rem;
    }
    .hero-bottom{
      padding:1.4rem 2.5rem 2rem;
    }
  }
  
  
  /* ─────────────────────────────────────────
     TABLET — 1024px
  ───────────────────────────────────────── */
  
  @media (max-width:1024px){
    .svc-grid{
      grid-template-columns:repeat(2,1fr);
    }
    .hero h1{
      font-size:clamp(3.8rem,7vw,6rem);
    }
    .laser-inner{
      grid-template-columns:1fr;
    }
    .laser-img{
      min-height:420px;
    }
  }
  
  
  /* ─────────────────────────────────────────
     MOBILE — 900px
  ───────────────────────────────────────── */
  
  @media (max-width:900px){
    /* NAVBAR */
    nav{
      display:flex;
      justify-content:space-between;
      padding:0 1.3rem;
      height:72px;
    }
    .nav-links{
      display:none;
    }
    .nav-socials{
      display:none;
    }
    .hamburger{
      display:flex;
    }
    .nav-links.mob-open{
      display:flex;
      flex-direction:column;
      gap:0;
      position:absolute;
      top:72px;
      left:0;
      right:0;
      background:rgba(14,12,10,.98);
      padding:1rem 0;
      animation:fadeNav .3s ease;
      border-top:1px solid rgba(255,255,255,.05);
    }
  
    .nav-links.mob-open a{
      padding:.9rem 2rem;
      font-size:.82rem;
      border-bottom:1px solid rgba(255,255,255,.04);
    }
    .nav-cta-links .nav-book{
      display:inline-flex;
      font-size:.65rem;
      padding:.45rem 1rem;
    }
    .nav-cta-links.mob-open,
    .nav-links.mob-open + .nav-cta-links{
      display:flex;
    }

    .about-inner{
      grid-template-columns:1fr;
      gap:2.5rem;
    }
    .about-img{
      min-height:320px;
    }
    .insta-grid{
      grid-template-columns:repeat(2,1fr);
    }
    .footer-container{
      grid-template-columns:1fr 1fr;
      gap:2.5rem;
    }
    .premium-footer{
      padding:4rem 2rem 1.5rem;
    }
  
    /* SECTIONS */
    .sec{
      padding:4.5rem 1.5rem;
    }
  
    .divider{
      margin:0 1.5rem;
    }
  
    /* HERO */

    .hero-body{
      padding:6.5rem 1.5rem 11rem;
    }

    .hero h1{
      font-size:clamp(2.8rem,10vw,4.2rem);
      line-height:1.06;
    }

    .hero-sub{
      font-size:.9rem;
    }

    .hero-bottom{
      flex-direction:column;
      align-items:flex-start;
      gap:1.4rem;
      padding:1.2rem 1.5rem 1.8rem;
    }

    .hero-stats{
      gap:1.5rem;
      width:100%;
      justify-content:space-between;
    }

    .hero-stat-divider{
      height:32px;
    }

    .stat-num{
      font-size:1.7rem;
    }

    .hero-scroll{
      display:none;
    }

    .btn-phone{
      display:none;
    }
  
    /* SERVICES */
  
    .svc-grid{
  
      grid-template-columns:1fr;
  
    }
  
    /* LASER */
  
    .laser-text{
  
      padding:4rem 1.5rem;
  
    }
  
    .laser-img{
  
      min-height:320px;
  
    }
  
    /* GALLERY */
  
    .gallery-grid{
  
      grid-template-columns:1fr 1fr;
  
      grid-template-rows:auto;
  
    }
  
    .g-item:first-child{
  
      grid-column:span 2;
  
      grid-row:auto;
  
      height:240px;
  
    }
  
    .g-item{
  
      height:180px;
  
    }
  
    /* TESTIMONIALS */
  
    .testi-grid{
  
      grid-template-columns:1fr;
  
    }
  
    /* CONTACT */
  
    .contact-inner{
  
      grid-template-columns:1fr;
  
      gap:3rem;
  
    }
  
    .c-form .f-row{
  
      grid-template-columns:1fr;
  
    }
  
    /* FOOTER */
  
    footer{
  
      flex-direction:column;
  
      gap:1rem;
  
      text-align:center;
  
      padding:1.5rem;
  
    }
  
    /* MODAL */
  
    .modal-bd{
  
      padding:1.5rem;
  
    }
  
    .f-row2{
  
      grid-template-columns:1fr;
  
    }
  
    .svc-pick{
  
      grid-template-columns:1fr;
  
    }
  
    .staff-grid{
  
      grid-template-columns:repeat(2,1fr);
  
    }
  
    .time-grid{
  
      grid-template-columns:repeat(3,1fr);
  
    }
  
    .m-nav{
  
      flex-direction:column;
  
      gap:1rem;
  
    }
  
    .btn-back,
    .btn-nxt,
    .btn-pay-now{
  
      width:100%;
  
    }
  
  }
  
  
  /* ─────────────────────────────────────────
     SMALL MOBILE — 480px
  ───────────────────────────────────────── */
  
  @media (max-width:700px){
    .footer-container{
      grid-template-columns:1fr;
      gap:2rem;
    }
    .cta-inner{
      flex-direction:column;
      align-items:flex-start;
    }
    .insta-grid{
      grid-template-columns:1fr;
    }
    .insta-grid img{
      height:240px;
    }
  }

  @media (max-width:480px){
  
    .hero h1{
  
      font-size:clamp(2.5rem,10vw,3.4rem);
  
    }
  
    .hero p{
  
      font-size:.84rem;
  
    }
  
    .hero-stats{
      gap:.85rem;
    }

    .hero-stat-divider{
      display:none;
    }

    .stat-lbl{
      font-size:.5rem;
    }
  
    .gallery-grid{
  
      grid-template-columns:1fr;
  
    }
  
    .g-item:first-child{
  
      grid-column:auto;
  
      height:220px;
  
    }
  
    .g-item{
  
      height:200px;
  
    }
  
    .time-grid{
  
      grid-template-columns:repeat(2,1fr);
  
    }
  
    .staff-grid{
  
      grid-template-columns:1fr;
  
    }
  
    .svc-grid{
  
      grid-template-columns:1fr;
  
    }
  
    .modal-hd h2{
  
      font-size:1.5rem;
  
    }
  
  }
  
  
  /* ─────────────────────────────────────────
     NAV ANIMATION
  ───────────────────────────────────────── */
  
  @keyframes fadeNav{
  
    from{
  
      opacity:0;
      transform:translateY(-10px);
  
    }
  
    to{
  
      opacity:1;
      transform:translateY(0);
  
    }
  
  }