@import url('https://fonts.googleapis.com/css2?family=Chewy&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
    :root {
            --bg: #0b0b0b;
            --fg: #f7f7f7;
            --muted: #b9b9b9;
            --accent: #ffb300;
            --accent-2: #ff6a00;
        }

        * {
            box-sizing: border-box
        }

        /* ===== page base & swipe lock ===== */
        /*html, body{*/
        /*  margin:0;*/
        /*  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;*/
        /*  background:var(--bg); color:var(--fg);*/
        /*  overflow-x:hidden;          */
        /*  touch-action: pan-y;         */
        /*  overscroll-behavior-x:none;  */
        /*}*/

        .menu-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px
        }

        /* ===== Branch pill ===== */
        .menu-branchbar {
            display: flex;
            justify-content: center;
            margin: 8px 0 28px
        }

        .menu-branchpill {
            position: relative;
            display: flex;
            gap: 10px;
            align-items: center;
            background: linear-gradient(90deg, #ffb300, #ff6a00);
            padding: 12px 22px;
            border-radius: 40px;
            color: #231600;
            font-weight: 800;
            letter-spacing: .5px;
            min-width: 320px;
            justify-content: center;
        }

        /* Display only ONE label */
        .menu-branchpill #branchLabel {
            pointer-events: none;
            /* clicks pass through to the select */
            text-transform: uppercase;
              color: #fff200; /* bright yellow text */

            white-space: nowrap;
        }

        /* Keep select as the click/keyboard target but hide its text */
       /* Make dropdown closed state look yellow */
.menu-branchpill select {
  background-color: #ffb300; /* yellow background */
  color: #000;               /* black text */
  border-radius: 40px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: none;
  appearance: none;
}

/* Change dropdown options background to yellow */
.menu-branchpill select option {
  background-color: #ffb300 !important; /* yellow */
  color: #000;               /* black text */
  font-weight: 600;
}

/* Optional: highlight hovered option slightly darker */
.menu-branchpill select option:hover,
.menu-branchpill select option:checked {
  background-color: #ffcc33;
}


        /* Custom arrow */
        .menu-branchpill:after {
            content: "▾";
            position: absolute;
            right: 18px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 14px;
        }

        /* ===== Category grid ===== */
        .menu-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            
            gap: 56px;
            align-items: start;
            overflow: hidden
        }

        .menu-category h2 {
            font-size: 56px;
            line-height: 1.05;
            margin: 0 0 24px;
            color: var(--accent);
              font-family: "Montserrat", sans-serif;
            letter-spacing: 0.4px
        }

        .menu-item {
            margin: 0 0 22px
        }

        .menu-item h3 {
            font-size: 22px;
            margin: 0 0 6px
              font-family: "Montserrat", sans-serif;
        }

        .menu-item p {
            margin: 0;
            color: var(--muted);
            line-height: 1.55;
              font-family: "Montserrat", sans-serif;
            max-width: 560px
        }

        /* ===== Nav arrows ===== */
        .menu-nav {
         position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: transparent;
            border: none;
            touch-action: manipulation
        }

        .menu-nav__btn {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            border: 2px solid var(--accent);
            display: grid;
            place-items: center;
            color: var(--accent);
            font-weight: 700;
            background: #141414;
            box-shadow: 0 0 0 4px #000 inset;
        }

        .menu-nav--left {
            left: -66px
        }

        .menu-nav--right {
            right: -66px
        }

        /* ===== CTA row ===== */
      
       .menu-cta {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin: 28px 0 8px;
  flex-wrap: wrap;
  align-items: center;
}

.menu-cta__title {
  flex-basis: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  margin-bottom: 8px;
  font-style: italic;
}

.menu-cta__btn {
  border: none;
  border-radius: 32px;
  padding: 16px 28px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

/* Swiggy (orange, white text) */
.menu-cta__btn--swiggy {
  background: #ff8000;
  color: #fff;
}

/* Zomato (red, white text) */
.menu-cta__btn--zomato {
  background: #e23744;
  color: #fff;
}

/* Download Menu (orange background + purple border/text) */
.menu-cta__btn--download {
  background: #ffb300;
  color: purple;
  border: 2px solid purple;
}


        /* ===== responsive ===== */
        @media (max-width:900px) {
            .menu-grid {
                grid-template-columns: 1fr;
                gap: 36px
            }

            .menu-category h2 {
                font-size: 40px
            }

            .menu-nav {
                display: none
            }
        }