@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

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

:root{

  --primary:#f26b00;
  --secondary:#2daa35;

  --bg:#f7f7f7;
  --card:#ffffff;

  --text:#222222;
  --border:#e8e8e8;

  --veg:#1fa63a;
  --nonveg:#d81e1e;
  --egg:#f4a623;

}

body{

  font-family:'Poppins',sans-serif;

  background:var(--bg);

  color:var(--text);

  min-height:100vh;

  padding:20px;
}

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

.header{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:18px;

  margin-bottom:25px;
}

.icon-logo{

  width:85px;

  height:85px;

  object-fit:contain;

  flex-shrink:0;
}

.full-logo{

  width:280px;

  max-width:70vw;

  height:auto;

  object-fit:contain;
}

/* =========================
   SEARCH
========================= */

.search-container{

  max-width:1200px;

  margin:0 auto 20px;
}

#search{

  width:100%;

  height:55px;

  border:1px solid var(--border);

  border-radius:12px;

  padding:0 20px;

  font-size:16px;

  outline:none;

  background:white;
}

#search:focus{

  border-color:var(--primary);
}

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

.categories{

  display:flex;

  gap:10px;

  overflow-x:auto;

  margin:0 auto 25px;

  max-width:1200px;

  padding-bottom:5px;
}

.categories::-webkit-scrollbar{

  display:none;
}

.category-btn{

  border:none;

  background:white;

  border:1px solid var(--border);

  border-radius:10px;

  padding:10px 16px;

  cursor:pointer;

  white-space:nowrap;

  font-size:14px;

  font-weight:600;

  transition:.2s;
}

.category-btn:hover{

  background:var(--primary);

  color:white;
}

.category-btn.active{

  background:var(--primary);

  color:white;
}

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

#menu-container{

  max-width:1200px;

  margin:auto;
}

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

.category-section{

  background:var(--card);

  border-radius:14px;

  overflow:hidden;

  margin-bottom:20px;

  box-shadow:
  0 2px 10px rgba(0,0,0,.05);
}

.category-title{

  background:var(--primary);

  color:white;

  padding:14px 20px;

  font-size:20px;

  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.5px;
}

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

.price-header{

  display:grid;

  grid-template-columns:
    22px
    1fr
    80px
    80px;

  gap:15px;

  align-items:center;

  padding:12px 20px;

  background:#fff7f0;

  border-bottom:1px solid #ececec;

  font-size:12px;

  font-weight:700;

  color:#666;
}

.single-header{

  text-align:right;
}

.family-header{

  text-align:right;
}

/* =========================
   NORMAL ITEM
========================= */

.menu-item{

  display:grid;

  grid-template-columns:
    22px
    1fr
    auto;

  gap:15px;

  align-items:center;

  padding:16px 20px;

  border-bottom:1px solid #efefef;
}

.menu-item:last-child{

  border-bottom:none;
}

/* =========================
   DUAL ITEM
========================= */

.menu-item-dual{

  display:grid;

  grid-template-columns:
    22px
    1fr
    80px
    80px;

  gap:15px;

  align-items:center;

  padding:16px 20px;

  border-bottom:1px solid #efefef;
}

/* =========================
   DOTS
========================= */

.dot{

  width:14px;

  height:14px;

  border-radius:50%;
}

.veg{

  background:var(--veg);
}

.nonveg{

  background:var(--nonveg);
}

.egg{

  background:var(--egg);
}

/* =========================
   ITEM NAME
========================= */

.item-name{

  font-size:17px;

  font-weight:500;

  line-height:1.3;
}

/* =========================
   PRICES
========================= */

.item-price{

  font-size:17px;

  font-weight:700;

  color:#111;
}

.single-price{

  text-align:right;

  font-size:17px;

  font-weight:700;
}

.family-price{

  text-align:right;

  font-size:17px;

  font-weight:700;
}

.na{

  color:#d81e1e;
}

/* =========================
   FOOTER
========================= */

footer{

  text-align:center;

  margin-top:30px;

  padding:20px;
}

.footer-title{

  font-size:20px;

  font-weight:700;

  color:var(--primary);
}

.footer-subtitle{

  font-size:14px;

  margin-top:3px;

  color:#666;
}

.footer-contact{

  margin-top:8px;

  font-size:15px;

  font-weight:600;
}

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

@media(max-width:768px){

  body{

    padding:12px;
  }

  .header{

    gap:12px;

    margin-bottom:20px;
  }

  .icon-logo{

    width:60px;

    height:60px;
  }

  .full-logo{

    width:240px;
  }

  #search{

    height:50px;

    font-size:15px;
  }

  .category-title{

    font-size:16px;

    padding:12px 15px;
  }

  .price-header{

    grid-template-columns:
      14px
      1fr
      65px
      65px;

    gap:10px;

    padding:10px 12px;

    font-size:11px;
  }

  .menu-item{

    padding:14px 12px;

    gap:10px;
  }

  .menu-item-dual{

    grid-template-columns:
      14px
      1fr
      65px
      65px;

    gap:10px;

    padding:14px 12px;
  }

  .item-name{

    font-size:15px;
  }

  .item-price,
  .single-price,
  .family-price{

    font-size:14px;
  }

  .dot{

    width:12px;

    height:12px;
  }
}

.item-price,
.single-price,
.family-price{

  white-space:nowrap;
}

.categories{

  -webkit-overflow-scrolling:touch;
}