/* ========================= */
/* RESET */
/* ========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Poppins', sans-serif;
  background:#0b0b0b;
  color:white;
  overflow-x:hidden;
  line-height:1.6;
  padding:50px 0;
  position:relative;
}

/* ========================= */
/* ANIMATED BACKGROUND */
/* ========================= */

body::before{

  content:"";

  position:fixed;

  inset:0;

  background:
  linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)),
  url('restaurant-bg.jpg');

  background-size:cover;
  background-position:center;
  background-attachment:fixed;

  z-index:-3;

  animation:bgZoom 20s ease-in-out infinite alternate;
}

body::after{

  content:"";

  position:fixed;

  inset:0;

  background:
  radial-gradient(circle at top left,
  rgba(200,169,107,.12),
  transparent 40%),

  radial-gradient(circle at bottom right,
  rgba(255,255,255,.05),
  transparent 30%);

  z-index:-2;
}

@keyframes bgZoom{

  from{
    transform:scale(1);
  }

  to{
    transform:scale(1.08);
  }

}

/* ========================= */
/* MAIN MENU CONTAINER */
/* ========================= */

.menu-container{

  width:88%;

  max-width:1200px;

  margin:auto;

  background:#151515;

  border-radius:40px;

  padding:70px 45px;

  border:1px solid rgba(255,255,255,.05);

  box-shadow:
  0 25px 80px rgba(0,0,0,.45);

  position:relative;

  overflow:hidden;
}

/* GOLD GLOW */

.menu-container::before{

  content:"";

  position:absolute;

  width:450px;
  height:450px;

  background:rgba(200,169,107,.05);

  border-radius:50%;

  top:-180px;
  right:-120px;

  filter:blur(100px);
}

/* ========================= */
/* BACK BUTTON */
/* ========================= */

.back-btn{

  position:fixed;

  top:30px;
  left:30px;
  z-index: 99999;

  background:#1d1d1d;

  color:white;

  text-decoration:none;

  padding:10px 18px;

  border-radius:999px;

  font-size:.82rem;

  font-weight:600;

  transition:.3s ease;

  z-index:1000;

  backdrop-filter: blur(10px);

  border:1px solid rgba(255,255,255,.06);

  box-shadow:
  0 8px 20px rgba(0,0,0,.25);
}

.back-btn:hover{

  background:#c8a96b;

  transform:translateY(-3px);
}

/* ========================= */
/* HEADER */
/* ========================= */

.menu-header{

  text-align:center;

  margin-bottom:65px;

  animation:fadeUp 1s ease;
}

.menu-header h1{

  font-family:'Playfair Display', serif;

  font-size:4.8rem;

  color:white;

  margin-bottom:14px;

  letter-spacing:2px;
}

.menu-header p{

  color:#a5a5a5;

  font-size:1rem;
}

/* ========================= */
/* NAVIGATION */
/* ========================= */

.menu-nav{

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:8px;

  width:fit-content;

  margin:0 auto 85px;

  padding:12px 16px;

  background:#1d1d1d;

  border-radius:999px;

  position:sticky;

  top:20px;

  z-index:100;

  box-shadow:
  0 10px 30px rgba(0,0,0,.35);
}

.menu-nav a{

  text-decoration:none;

  background:#262626;

  color:white;

  padding:8px 16px;

  border-radius:999px;

  transition:.3s ease;

  font-size:.78rem;

  font-weight:500;
}

.menu-nav a:hover{

  background:#c8a96b;

  transform:translateY(-3px);
}

/* ========================= */
/* CATEGORY */
/* ========================= */

.category{

  margin-bottom:110px;

  text-align:center;

  opacity:0;

  transform:translateY(60px);

  animation:fadeUp .9s ease forwards;
}

.category:nth-child(1){
  animation-delay:.1s;
}

.category:nth-child(2){
  animation-delay:.2s;
}

.category:nth-child(3){
  animation-delay:.3s;
}

.category:nth-child(4){
  animation-delay:.4s;
}

/* ========================= */
/* TITLES */
/* ========================= */

.category-title{

  font-family:'Playfair Display', serif;

  font-size:2.8rem;

  color:white;

  margin-bottom:14px;
}

.category-title::after{

  content:"";

  display:block;

  width:75px;
  height:4px;

  background:#c8a96b;

  border-radius:999px;

  margin:15px auto 0;
}

.category-sub{

  color:#9f9f9f;

  max-width:650px;

  margin:0 auto 35px;

  font-size:.92rem;
}

/* ========================= */
/* GRID */
/* ========================= */

.menu-grid{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(185px,220px));

  justify-content:center;

  gap:18px;

  margin-top:35px;
}

/* ========================= */
/* MENU CARDS */
/* ========================= */

.menu-card{

  background:#1d1d1d;

  border-radius:20px;

  padding:16px;

  border:1px solid rgba(255,255,255,.05);

  min-height:135px;

  transition:.35s ease;

  position:relative;

  overflow:hidden;

  text-align:left;

  box-shadow:
  0 8px 20px rgba(0,0,0,.25);
}

.menu-card::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:4px;

  background:#c8a96b;
}

.menu-card:hover{

  transform:
  translateY(-6px)
  scale(1.02);

  border-color:#c8a96b;

  box-shadow:
  0 20px 35px rgba(0,0,0,.35);
}

/* ========================= */
/* CARD TEXT */
/* ========================= */

.menu-card h3{

  font-family:'Playfair Display', serif;

  font-size:1rem;

  color:white;

  margin-bottom:8px;
}

.menu-card p{

  color:#b0b0b0;

  font-size:.74rem;

  line-height:1.4;

  margin-bottom:14px;
}

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

.price{

  color:#c8a96b;

  font-size:.95rem;

  font-weight:700;
}

/* ========================= */
/* SIDE CARDS */
/* ========================= */

.side-card{

  display:flex;

  flex-direction:column;

  justify-content:center;

  text-align:center;

  min-height:110px;
}

/* ========================= */
/* ANIMATIONS */
/* ========================= */

@keyframes fadeUp{

  from{
    opacity:0;
    transform:translateY(60px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

/* ========================= */
/* SCROLLBAR */
/* ========================= */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#111;
}

::-webkit-scrollbar-thumb{
  background:#c8a96b;
  border-radius:999px;
}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:992px){

  .menu-container{
    padding:40px 28px;
  }

  .menu-header h1{
    font-size:3.5rem;
  }

  .category-title{
    font-size:2.2rem;
  }

}

@media(max-width:768px){

  body{
    padding:15px 0;
  }

  /* ========================= */
  /* CONTAINER */
  /* ========================= */

  .menu-container{

    width:95%;

    padding:24px 16px;

    border-radius:24px;
  }

  /* ========================= */
  /* HEADER */
  /* ========================= */

  .menu-header{

    margin-bottom:45px;
  }

  .menu-header h1{

    font-size:2.3rem;

    line-height:1.1;
  }

  .menu-header p{

    font-size:.85rem;

    padding:0 10px;
  }

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

  .menu-nav{

    width:100%;

    justify-content:flex-start;

    overflow-x:auto;

    flex-wrap:nowrap;

    gap:6px;

    padding:10px;

    margin-bottom:55px;

    border-radius:18px;
  }

  .menu-nav::-webkit-scrollbar{
    display:none;
  }

  .menu-nav a{

    white-space:nowrap;

    padding:7px 14px;

    font-size:.72rem;

    flex-shrink:0;
  }

  /* ========================= */
  /* TITLES */
  /* ========================= */

  .category{

    margin-bottom:70px;
  }

  .category-title{

    font-size:1.8rem;
  }

  .category-sub{

    font-size:.82rem;

    padding:0 10px;

    margin-bottom:28px;
  }

  /* ========================= */
  /* GRID */
  /* ========================= */

  .menu-grid{

    grid-template-columns:1fr;

    gap:14px;

    justify-content:center;
  }

  /* ========================= */
  /* CARDS */
  /* ========================= */

  .menu-card{

    width:100%;

    max-width:330px;

    margin:auto;

    min-height:auto;

    padding:16px;

    border-radius:18px;
  }

  .menu-card h3{

    font-size:.95rem;
  }

  .menu-card p{

    font-size:.72rem;

    line-height:1.4;
  }

  .price{

    font-size:.9rem;
  }

  /* ========================= */
  /* BACK BUTTON */
  /* ========================= */

  .back-btn{

    top:80px;
    left:18px;
    z-index: 99999;

    padding:8px 14px;

    font-size:.72rem;
  }

}
@media(max-width:500px){

  .menu-header h1{
    font-size:1.9rem;
  }

  .category-title{
    font-size:1.5rem;
  }

  .menu-card{
    max-width:100%;
  }

}