:root {
      --dark: #121212;
      --light: #F7F5F2;
      --green: #2F8F83;
      --gold: #C9A24D;
      --text-dark: #1E1E1E;
    }

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

    body {
      font-family: 'Poppins', sans-serif;
      background: var(--light);
      color: var(--text-dark);
      line-height: 1.6;
    }

    h1, h2, h3 {
      font-family: 'Playfair Display', serif;
    }

    /* HEADER */
    header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: linear-gradient(90deg, #121212, #1f2d2a);
      color: white;
      padding: 18px 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    html {
      scroll-behavior: smooth;
    }

    header h1 {
      font-size: 28px;
      letter-spacing: 1px;
    }

    nav a {
      color: white;
      margin-left: 30px;
      text-decoration: none;
      font-weight: 400;
    }

    nav a:hover {
      color: var(--gold);
    }

    /* HERO */
    .hero {
      height: 90vh;
      background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url('hero-food.jpg') center/cover no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      padding: 20px;
    }

    .hero h2 {
      font-size: 54px;
      margin-bottom: 15px;
    }

    .hero p {
      font-size: 18px;
      margin-bottom: 30px;
    }

    .btn {
      padding: 14px 32px;
      border-radius: 30px;
      text-decoration: none;
      margin: 0 10px;
      font-weight: 500;
      display: inline-block;
    }

    .btn-primary {
      background: var(--green);
      color: white;
    }

    .btn-outline {
      border: 2px solid var(--gold);
      color: var(--gold);
    }

    /* SECTION */
    section {
      padding: 100px 80px;
    }

    .section-title {
      text-align: center;
      margin-bottom: 50px;
    }

    .section-title h2 {
      font-size: 36px;
      margin-bottom: 10px;
    }

    .section-title span {
      color: var(--gold);
      font-size: 14px;
      letter-spacing: 2px;
    }

    /* ABOUT */
    .about {
      max-width: 800px;
      margin: auto;
      text-align: center;
      font-size: 16px;
    }

    /* MENU */
    .menugrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 40px;
      max-width: 1100px;
      margin: auto;
    }

    .menu-card {
      background: #ffffff;
      padding: 35px 25px;
      border-radius: 16px;
      box-shadow: 0 15px 40px rgba(0,0,0,0.1);
      text-align: center;
      transition: transform 0.3s ease;
    }

    .menu-card:hover {
      transform: translateY(-6px);
    }

    .menu-card h3 {
      margin-bottom: 10px;
    }

    /* WHY US */
    .why {
      background: var(--dark);
      color: white;
    }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 30px;
      max-width: 1000px;
      margin: auto;
      text-align: center;
    }
    #cartItems button {
      margin-left: 5px;
      padding: 2px 6px;
      font-weight: bold;
      border-radius: 4px;
      border: 1px solid #333;
      cursor: pointer;
    }

    /* FOOTER */
    footer {
      background: #0e0e0e;
      color: #bbb;
      text-align: center;
      padding: 40px 20px;
    }

    /* WHATSAPP */
    .whatsapp {
      position: fixed;
      right: 20px;
      bottom: 20px;
      background: #25D366;
      color: white;
      padding: 15px 20px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 500;
    }

    @media(max-width:768px){
      .hero{
        height:80vh;
      }
      .hero p{
        font-size:16px;
      }
      .menu-grid{
        grid-template-columns:1fr;
      }

      header{
        flex-direction:column;
        padding:20px;
      }
      nav{
        margin-top:10px;
      }
      .hero h2{
        font-size:34px;
      }
      section{
        padding:70px 20px;
      }
    }
      nav{
        margin-top:10px;
      }
      .hero h2{
        font-size:38px;
      }
      section{
        padding:60px 20px;

      }