* { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Poppins', sans-serif; background:#000; color:#fff; }


    .header {
      width:100%;
      background-color: rgb(166, 146, 146);
      position: sticky;
      top:0;
      z-index:1000;
      box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    }
    .container.nav {
      max-width:1500px;
      margin:auto;
      height:170px;
      padding:0 40px;
      display:flex;
      align-items:center;
      gap:30px;
    }


    .logo-img { width:170px; }


    .brand-info { display:flex; flex-direction:column; color: #000; }
    .brand-title { font-size:26px; font-weight:700; font-family:'Playfair Display', serif; margin-left:60px; }
    .brand-points { font-size:12px; opacity:0.85; margin-top:5px; margin-left:62px; }

    .contact-btn { display:flex; flex-direction:column; text-decoration:none; color:#000000; padding:10px 16px; border-radius:12px; transition:0.3s; }
    .contact-btn:hover { background:#8b8b31; }
    .contact-title { font-size:23px; font-weight:600; font-family:'Playfair Display', serif; }
    .contact-number { font-size:15px; font-weight:700; margin-top:5px; }
    


    .nav-actions { display:flex; align-items:flex-start; gap:15px; }
    .book {
      background:transparent; color:#000000; padding:11px 20px;
      border-radius:30px; border:1px solid #333; font-size:14px;
      font-weight:600; cursor:pointer; transition:0.25s; display:block; margin-top:60px;
    }
    .book:hover { background:#8b8b31; transform:translateY(-2px); }

    .pickup-wrap, .delivery-wrap, .catering-wrap { position:relative; }
    .pickup-dropdown, .delivery-dropdown, .catering-dropdown {
      position:absolute; top:calc(100% + 4px); left:0;
      width:280px; background:#111; border-radius:14px; padding:8px 0;
      box-shadow:0 18px 40px rgba(0,0,0,0.6); opacity:0; visibility:hidden; transition:0.25s; font-size: 13px;
    }
    .catering-dropdown h4 {color: rgb(231, 92, 92);}
    .pickup-dropdown.active, .delivery-dropdown.active , .catering-dropdown.active { opacity:1; visibility:visible; }
    .pickup-item, .delivery-item , .catering-item{ padding:10px 16px; display:flex; flex-direction:column; color:#fff; text-decoration:none; }
    .pickup-item:hover, .delivery-item:hover , .catering-item:hover { background: linear-gradient(135deg,#4b1829,#cf5027); }
.takeout-wrap, .pickup-wrap, .delivery-wrap { position: relative; }

/* Main Takeout dropdown */
.takeout-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 280px;
  background: #111;
  border-radius: 14px;
  padding: 4px 0;
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  transition: 0.25s;
  font-size: 13px;
  z-index: 100;
}

/* Pickup & Delivery submenus positioned directly below button */
.pickup-dropdown, .delivery-dropdown {
  position: absolute;
  top: 100%;  /* directly under the submenu button */
  left: 0;
  width: 100%;
  background: #111;
  border-radius: 14px;
  padding: 4px 0;
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  transition: 0.25s;
  font-size: 13px;
  z-index: 200;
}

.pickup-wrap,
.delivery-wrap {
  margin: 0;
  padding: 0;
}


/* Show active dropdown */
.takeout-dropdown.active, .pickup-dropdown.active, .delivery-dropdown.active {
  opacity: 1;
  visibility: visible;
}

/* Items */
.pickup-item, .delivery-item {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  color: #fff;
  text-decoration: none;
}

.pickup-item:hover, .delivery-item:hover, .book.submenu-btn:hover {
  background: linear-gradient(135deg,#4b1829,#cf5027);
}

/* Submenu button style */
.submenu-btn {
  width: 100%;
  text-align: left;
  background: none;
  margin-top: 0 !important;
  border: none;
  color: #fff;
  padding: 8px 16px;  /* slightly tighter */
  cursor: pointer;
  font-size: 13px;
}


    .map-embed { width:190px; height:160px; border-radius:14px; overflow:hidden; margin-left:40px; }
    .map-embed iframe { width:100%; height:100%; }
    .review-box { display:flex; flex-direction:column; width:220px; height:160px; background:#111; padding:18px; border-radius:18px; text-decoration:none; color:#fff; transition:0.3s; margin-left:18px; }
    .review-box:hover { background:#cf5027; transform:translateY(-4px); }
    .google-head { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; opacity:0.85; }
    .g-icon { width:14px; height:14px; }
    .stars { color:#ffc107; font-size:15px; letter-spacing:2px; }
    .rating { font-size:16px; font-weight:700; }
    .count { font-size:11px; opacity:0.7; }
    .review-msg { font-size:11px; line-height:1.35; opacity:0.85; font-size: 9.2px; }


    .menu-toggle { display:none; font-size:28px; cursor:pointer; background:#111; padding:6px 14px; border-radius:8px; margin-left:auto; }


 

/* ================= MID-LARGE SCREEN ALIGNMENT ================= */
@media (min-width: 1437px) and (max-width: 1499px) {
  /* Align brand info neatly */
  .container.nav .brand-info {
    margin-left: 40px; /* adjust spacing from logo */
  }
  .container.nav .brand-title {
    font-size: 24px; /* slightly smaller for this screen */
    margin-left: 0;  /* reset left margin */
  }
  .container.nav .brand-points {
    font-size: 12px;
    margin-left: -10px; /* reset left margin */
    margin-top: 4px;
  }

  /* Adjust Contact Us button */
  .container.nav .contact-btn {
    margin-left: auto; /* push to the right */
    margin-right: -20px; /* optional padding from screen edge */
  }
  .container.nav .contact-title {
    font-size: 19px;
    margin-left: 10px; /* slightly smaller */
  }
  .container.nav .contact-number {
    font-size: 14px;
  }
  .container.nav .contact-tagline {
    font-size: 10px;
  }
}

@media (min-width: 1257px) and (max-width: 1436px) {
  /* Align brand info neatly */
  .container.nav .brand-info {
    margin-left: 30px;
    display: none; /* adjust spacing from logo */
  }
  .container.nav .brand-title {
    font-size: 22px; /* slightly smaller for this screen */
    margin-left: 0;  /* reset left margin */
  }
  .container.nav .brand-points {
    font-size: 12px;
    margin-left: -10px; /* reset left margin */
    margin-top: 4px;
  }

  /* Adjust Contact Us button */
  .container.nav .contact-btn {
    margin-left: auto; /* push to the right */
    margin-right: 30px; /* optional padding from screen edge */
  }
  .container.nav .contact-title {
    font-size: 22px;
    margin-left: 27px; /* slightly smaller */
  }
  .container.nav .contact-number {
    font-size: 15px;
    margin-left: 22px;
  }
  .container.nav .contact-tagline {
    display: none;
  }
}


.main-section {
  display: flex;
  gap: 20px;
  padding: 20px;
  height: 780px;
}

/* LEFT GALLERY */
.gallery-container {
  width: 17%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #111;
}

.gallery-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.7s ease-in-out;
}

.gallery-item {
  flex-shrink: 0;
  height: calc(100% / 3); /* show exactly 3 images at once */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* RIGHT CONTENT */
.content-area {
  flex: 1;
  background: #000000;
  border-radius: 12px;
  height: 100%;
  color: #fff;
  /* Remove centering */
  display: block;
  padding: 20px;
  overflow-y: auto; /* scroll if content exceeds height */
  font-size: 16px;
}

/* ================= MOBILE LAYOUT FIX ================= */
@media (max-width: 767px) {

  .main-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* 🔥 ORDER CHANGE (menu first, gallery last) */
  .content-area {
    order: 1;
  }

  .gallery-container {
    order: 2;
  }


  /* ================= GALLERY STYLE (match menu look) ================= */

  .gallery-container {
    width: 100%;
    height: auto;
    padding: 12px;
    background: #000;              /* same as menu */
    border-radius: 14px;
  }

  .gallery-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    transform: none !important;
  }

  .gallery-item {
    height: 140px;
    border-radius: 14px;
    overflow: hidden;
  }

  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
  }


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

  .content-area {
    width: 100%;
    height: auto;
    padding: 14px;
    text-align: center;
  }
}


.menu-section {
  width: 100%;
  padding: 20px;
  display: flex;
  margin-top: -40px;
  margin-left: -20px;
  flex-direction: column;
  gap: 20px;
  color: #fff8e6;
}

.menu-row.main-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
  gap: 25px;
  align-items: start;
  justify-content: start; /* prevents stretching */
}


/* Each category box */
.menu-category {
  background: #1a1a1a;
  border-radius: 12px;
  padding: 12px;
}

/* Category title */
.menu-category h3 {
  margin-bottom: 10px;
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  color: #ffffff;
  border-bottom: 2px solid #df0808;
  padding-bottom: 5px;
}

/* Sub-grid inside category */
.sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

/* Snacks ONLY → force 3 columns */
.menu-category:first-child .sub-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Make ONLY snacks wider */
.menu-category:first-child {
  grid-column: span 2;
}

.sub-box {
  background: transparent;
  border: 3px solid #7e5656;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
}


.sub-box h4 {
  font-size: 22px;
  font-family: 'Playfair Display', serif;
  margin-bottom: 6px;
  color: #ffffff;
}

.sub-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sub-box li {
  display: grid;
  grid-template-columns: 1fr max-content;
  column-gap: 15px;
  color: #ffffff;
  font-weight: 400;
  padding: 2px 0;
  border-bottom: 2px solid #7e5656;
  font-size: 15px;
}

.sub-box li:last-child {
  border-bottom: none;
}

.sub-box li span {
  text-align: right;
}

/* Fix Beverages alignment */
.menu-category:nth-child(3) .sub-box ul {
  margin-left: -0px;

}

.menu-category:nth-child(3) .sub-box li {
  justify-content: start;   /* force left */
  text-align: left;
}


.entree-subtitle {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 3px solid #916464;
  color: #fff;
  text-align: left;
}

.entree-section h3{
  border-bottom: 2px solid #da1515;
}

.entree-section {
  width: 96%;              /* reduce overall width */
  max-width: 1500px;       /* keeps it neat on large screens */
  margin: 0 auto;    
  margin-left: -1px;        /* center horizontally */
  padding: 14px 16px;       /* smaller padding */
  border: 3px solid #7e5656; /* full section border */
  border-radius: 12px;       /* optional: rounded corners */
  background-color: #1a1a1a; /* optional: dark background to contrast border */
}

/* 3 PERFECT COLUMNS */
.entree-wrapper {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 30px;              /* reduced from 60px */
  margin-top: 10px;
}

/* remove bullets */
.entree-wrapper ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* LEFT column */
.price-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 2px solid #7e5656;
  font-size: 16px;
}

/* Middle + Right */
.style-list li {
  padding: 5px 0;
  border-bottom: 3px solid #7e5656;
  font-size: 16px;
}

/* vertical separators tighter */
.entree-wrapper > ul:nth-child(2),
.entree-wrapper > ul:nth-child(3) {
  border-left: 2px solid #3a3a3a;
  padding-left: 18px;     /* reduced from 30px */
}

.sub-gridd {
  margin-left: -10px;
}

.sub-gridd li {
  margin-left: -1px;
}
/* ================================= */
/* 📱 PERFECT MOBILE STACK VERSION   */
/* ================================= */
@media (max-width: 1656px) {

  /* ===== MAIN LAYOUT ===== */
  .main-section {
    flex-direction: column;
    height: auto;
    gap: 14px;
    padding: 10px;
  }

  .content-area {
    width: 100%;
    height: auto;
    padding: 12px;
  }


  /* ===== STACK ALL CATEGORIES ===== */
  .menu-row.main-categories {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .menu-category {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
  }


  /* ===== CATEGORY TITLE ===== */
  .menu-category h3 {
    font-size: 20px;
    text-align: left;
    margin-bottom: 12px;
  }


  /* ===== SUB BOXES ===== */
  .sub-grid,
  .sub-gridd {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .sub-box {
    padding: 12px;
    border-radius: 12px;
  }


  /* ===== TEXT CLEANUP ===== */
  .sub-box h4 {
    font-size: 17px;
    margin-bottom: 8px;
  }

  .sub-box li {
    font-size: 14px;
    padding: 8px 0;
    column-gap: 20px; /* better price spacing */
  }


  /* ===== ENTREE SECTION STACK ===== */
  .entree-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .entree-wrapper ul {
    width: 100%;
  }

  /* remove vertical lines */
  .entree-wrapper > ul {
    border-left: none !important;
    padding-left: 0 !important;
  }

  .price-list li,
  .style-list li {
    font-size: 15px;
    padding: 9px 0;
  }


  /* ===== REMOVE weird margins ===== */
  .menu-section {
    margin: 0;
    padding: 10px;
  }

  /* ===== CENTER SUB HEADINGS PERFECTLY ===== */

.sub-box {
  text-align: center; /* centers everything */
}

.sub-box h4 {
  text-align: center;
  width: 100%;
  display: block;
}

/* keep prices aligned properly */
.sub-box ul {
  text-align: left; /* keep items readable */
}

/* ================= GALLERY STACK (LIKE MOBILE) ================= */

/* order → menu first, gallery last */
.content-area {
  order: 1;
}

.gallery-container {
  order: 2;
  width: 100%;
  height: auto;
  padding: 14px;
  background: #000;   /* match menu */
  border-radius: 14px;
  overflow: visible;
}

/* disable slider */
.gallery-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cols for tablet/laptop */
  gap: 14px;
  transform: none !important;
  transition: none !important;
}

/* image cards */
.gallery-item {
  height: 160px;
  border-radius: 14px;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

}



@media (min-width: 1657px) and (max-width: 1779px) {

  /* ===== MAIN LAYOUT ===== */
  .main-section {
    flex-direction: column;
    height: auto;
    gap: 14px;
    padding: 10px;
  }

  .content-area {
    width: 100%;
    height: auto;
    padding: 12px;
  }


  /* ===== STACK ALL CATEGORIES ===== */
  .menu-row.main-categories {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .menu-category {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
  }


  /* ===== CATEGORY TITLE ===== */
  .menu-category h3 {
    font-size: 20px;
    text-align: left;
    margin-bottom: 12px;
  }


  /* ===== SUB BOXES ===== */
  .sub-grid,
  .sub-gridd {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .sub-box {
    padding: 12px;
    border-radius: 12px;
  }


  /* ===== TEXT CLEANUP ===== */
  .sub-box h4 {
    font-size: 17px;
    margin-bottom: 8px;
  }

  .sub-box li {
    font-size: 14px;
    padding: 8px 0;
    column-gap: 20px; /* better price spacing */
  }


  /* ===== ENTREE SECTION STACK ===== */
  .entree-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .entree-wrapper ul {
    width: 100%;
  }

  /* remove vertical lines */
  .entree-wrapper > ul {
    border-left: none !important;
    padding-left: 0 !important;
  }

  .price-list li,
  .style-list li {
    font-size: 15px;
    padding: 9px 0;
  }


  /* ===== REMOVE weird margins ===== */
  .menu-section {
    margin: 0;
    padding: 10px;
  }

  /* ===== CENTER SUB HEADINGS PERFECTLY ===== */

.sub-box {
  text-align: center; /* centers everything */
}

.sub-box h4 {
  text-align: center;
  width: 100%;
  display: block;
}

/* keep prices aligned properly */
.sub-box ul {
  text-align: left; /* keep items readable */
}

/* ================= GALLERY STACK (LIKE MOBILE) ================= */

/* order → menu first, gallery last */
.content-area {
  order: 1;
}

.gallery-container {
  order: 2;
  width: 100%;
  height: auto;
  padding: 14px;
  background: #000;   /* match menu */
  border-radius: 14px;
  overflow: visible;
}

/* disable slider */
.gallery-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cols for tablet/laptop */
  gap: 14px;
  transform: none !important;
  transition: none !important;
}

/* image cards */
.gallery-item {
  height: 160px;
  border-radius: 14px;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}

}









/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;  /* move off-screen to the right */
  width: 280px;
  height: 100%;
  background: #111;
  color: #fff;
  transition: 0.3s;
  z-index: 9999;
  overflow-y: auto;
  padding-bottom: 40px;
}

/* Active state slides it in */
.mobile-menu.active {
  right: 0;  /* slide in from the right */
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  padding: 20px 15px; /* left & right padding */
  border-bottom: 1px solid #333;
}


.mobile-menu-header span {
  font-size: 28px;
  cursor: pointer;
}

.mobile-logo {
  width: 120px;
  margin-left: 55px !important; /* small spacing from the edge */
}


.mobile-nav {
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
}

.mobile-item {
  margin-bottom: 12px;
}

.mobile-btn, .mobile-sub-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #fff;
  padding: 10px 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}

.mobile-btn:hover, .mobile-sub-btn:hover {
  color: #cf5027;
}

.mobile-dropdown, .mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  padding-left: 12px;
}

.mobile-dropdown.active, .mobile-submenu.active {
  max-height: 500px; /* enough to show all items */
}

.mobile-link {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 8px 0;
}

.mobile-link:hover {
  color: #cf5027;
}

.mobile-nav iframe {
  width: 100%;
  height: 150px;
  border-radius: 12px;
  margin-top: 8px;
}



/* Show mobile menu toggle on smaller screens */

@media (max-width: 1256px) {
  .menu-toggle {
    display: block;
  }

  /* Hide desktop menus and brand info */
  .brand-info,
  .nav-actions,
  .contact-btn {
    display: none;
  }


  /* Make toggle align right */
  .container.nav {
    justify-content: space-between; /* logo left, toggle right */
  }
  
}

/* Add divider between pickup/delivery/catering items */
.mobile-submenu a {
  display: flex;              /* keep strong + span aligned vertically */
  flex-direction: column;
  padding: 10px 16px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* subtle divider */
  transition: background 0.25s;
}

/* Remove border from the last item */
.mobile-submenu a:last-child {
  border-bottom: none;
}

/* Hover effect for better UI */
.mobile-submenu a:hover {
  background: rgba(207, 80, 39, 0.3); /* slight orange highlight */
}

/* Divider for Pickup, Delivery, and Catering mobile submenu items */
.mobile-submenu a,
#mobileCateringMenu a {
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* subtle divider */
  transition: background 0.25s;
}

/* Remove border from the last item in each submenu */
.mobile-submenu a:last-child,
#mobileCateringMenu a:last-child {
  border-bottom: none;
}

/* Hover effect for better UX */
.mobile-submenu a:hover,
#mobileCateringMenu a:hover {
  background: rgba(207, 80, 39, 0.3); /* subtle orange highlight */
}


/* Google Reviews hover effect */