/* =========================
   MENU SECTION
========================= */

.menu-section{

  position:relative;

  padding:
  140px 8vw;

  background:
  linear-gradient(
  180deg,
  #070707,
  #121212
  );

  overflow:hidden;

}

/* =========================
   TOP
========================= */

.menu-top{

  text-align:center;

  margin-bottom:80px;

}

.menu-label{

  font-size:0.9rem;

  letter-spacing:8px;

  color:
  rgba(255,255,255,0.55);

  margin-bottom:22px;

}

.menu-title{

  font-size:
  clamp(3rem,5vw,5rem);

  font-weight:300;

  margin-bottom:20px;

}

.menu-subtitle{

  font-size:1.2rem;

  color:
  rgba(255,255,255,0.7);

}

/* =========================
   NAV
========================= */

.menu-nav{

  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:18px;

  margin-bottom:120px;

}

.menu-nav a{

  padding:
  14px 28px;

  border-radius:999px;

  text-decoration:none;

  color:#fff;

  background:
  rgba(255,255,255,0.05);

  border:
  1px solid rgba(255,255,255,0.08);

  backdrop-filter:
  blur(18px);

  transition:
  .4s ease;

}

.menu-nav a:hover{

  transform:
  translateY(-4px);

  background:
  rgba(255,120,40,0.16);

}

/* =========================
   BLOCK
========================= */

.menu-block{

  display:grid;

  grid-template-columns:
  1fr 1fr;

  align-items:center;

  gap:90px;

  margin-bottom:180px;

}

.menu-block.reverse .menu-image{

  order:2;

}

/* =========================
   IMAGE
========================= */

.menu-image{

  position:relative;

}

.menu-image img{

  width:100%;

  filter:
  drop-shadow(
  0 40px 80px rgba(0,0,0,.45)
  );

  transition:
  .6s ease;

}

.menu-image img:hover{

  transform:
  translateY(-10px)
  scale(1.03);

}

/* =========================
   CONTENT
========================= */

.menu-content{

  position:relative;

}

.menu-category{

  font-size:
  clamp(2.8rem,4vw,4.5rem);

  font-weight:300;

  margin-bottom:40px;

}

.menu-items{

  display:flex;
  flex-direction:column;

  gap:24px;

}

.menu-item{

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding-bottom:18px;

  border-bottom:
  1px solid rgba(255,255,255,0.08);

}

.menu-item span{

  font-size:1.35rem;

  color:
  rgba(255,255,255,0.88);

}

.menu-item strong{

  font-size:1.2rem;

  font-weight:600;

  color:
  rgba(255,140,60,1);

}

/* =========================
   DESCRIPTION
========================= */

.menu-description{

  font-size:1.15rem;

  line-height:1.7;

  color:
  rgba(255,255,255,0.72);

  margin-bottom:34px;

}

/* =========================
   BIG PRICE
========================= */

.menu-price-big{

  font-size:4rem;

  font-weight:700;

  color:
  rgba(255,140,60,1);

}

/* =========================
   MOBILE
========================= */

@media(max-width:900px){

  .menu-section{

    padding:
    100px 24px;

  }

  .menu-block{

    grid-template-columns:
    1fr;

    gap:50px;

    margin-bottom:120px;

  }

  .menu-block.reverse .menu-image{

    order:0;

  }

  .menu-category{

    font-size:3rem;

  }

  .menu-item span{

    font-size:1.05rem;

  }

  .menu-item strong{

    font-size:1rem;

  }

  .menu-price-big{

    font-size:3rem;

  }

}

/* =========================
   MENU NAV
========================= */

.menu-nav{

  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:20px;

  margin-bottom:120px;

}

/* BUTTON */

.menu-nav a{

  position:relative;

  overflow:hidden;

  padding:
  16px 34px;

  border-radius:999px;

  text-decoration:none;

  color:#fff;

  font-size:1rem;

  font-weight:500;

  letter-spacing:0.3px;

  background:
  linear-gradient(
  135deg,
  rgba(255,120,40,0.96),
  rgba(255,80,20,0.92)
  );

  border:
  1px solid rgba(255,255,255,0.12);

  backdrop-filter:
  blur(20px);

  box-shadow:

  0 14px 44px rgba(255,90,20,0.24),

  inset 0 1px 1px rgba(255,255,255,0.18),

  inset 0 -8px 18px rgba(0,0,0,0.22);

  transition:
  .45s ease;

}

/* SHINE EFFECT */

.menu-nav a::before{

  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:80%;
  height:100%;

  background:
  linear-gradient(
  90deg,
  transparent,
  rgba(255,255,255,0.22),
  transparent
  );

  transform:
  skewX(-20deg);

  transition:
  1s;

}

/* HOVER */

.menu-nav a:hover{

  transform:
  translateY(-4px)
  scale(1.03);

  box-shadow:

  0 18px 60px rgba(255,90,20,0.34),

  inset 0 1px 1px rgba(255,255,255,0.2),

  inset 0 -8px 18px rgba(0,0,0,0.24);

}

.menu-nav a:hover::before{

  left:140%;

}

/* MOBILE */

@media(max-width:768px){

  .menu-nav{

    gap:14px;

    margin-bottom:90px;

  }

  .menu-nav a{

    padding:
    14px 24px;

    font-size:0.95rem;

  }

  /* mobile shimmer */

  .menu-nav a::before{

    animation:
    mobileShine 3.5s linear infinite;

  }

}

/* =========================
   SHINE
========================= */

@keyframes mobileShine{

  0%{

    left:-120%;

  }

  100%{

    left:140%;

  }

}