.portfolio-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            text-align: center!important;
        }
        
        /* Tablet */
        @media (max-width: 991px) {
            .portfolio-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* Mobile */
        @media (max-width: 575px) {
            .portfolio-grid {
                grid-template-columns: 1fr;
                gap: 72px;
            }
        }
      .portfolio-box-1 .content {
            width: 85%;
            margin-left: auto;
            box-sizing: border-box;   /* 🔥 THIS IS THE MISSING PIECE */
            border-radius: 12px!important;
        }
        .portfolio-carousel .container {
            padding-left: 0;
            padding-right: 0;
        }
        
        .portfolio-grid {
            padding-left: 15px;
            padding-right: 15px;
        }
        
        .portfolio-box-spacing
        {
            margin-top:50px!important
        }        
        
        img,.item
        {
            border-radius:12px;
        }

        html, body {
            cursor: url('https://hyther.in/shreenathji1/assets/images/icon/leaf.png') 4 4, auto;
        }
        
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          html, body {
            cursor: url('https://hyther.in/shreenathji1/assets/images/icon/leaf.png') 8 8, auto;
          }
        }
        .hero-img-button-next, a, button, [role="button"], input[type="submit"], input[type="button"] {
          cursor: url('https://hyther.in/shreenathji1/assets/images/icon/leaf.png') 6 2, pointer;
        }
        
      /* ================= MENU SECTION ================= */
.menu-section{
  padding: 50px 20px;
}

.menu-container{
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

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

.menu-desc{
  max-width: 600px;
  margin: 0 auto 40px;
  font-size: 17px;
  line-height: 30px;
  color: #666;
}

/* ================= TABS ================= */
.menu-tabs{
  display: flex;
  justify-content: center;
  gap: 26px;
  list-style: none;
  padding: 0;
  margin-bottom: 60px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 500;
  font-family: Audrey;
}

.menu-tabs li{
  cursor: pointer;
  color: #999;
  padding-bottom: 4px;
  transition: color .3s ease, border-color .3s ease;
}

.menu-tabs li.active{
  color: #000;
  border-bottom: 1px solid #c8a97e;
}

/* ================= IMAGE GRID ================= */
.menu-grid{
  position: relative;
}

/* Group controlled by tabs */
.menu-images{
  display: none;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  align-items: center;
  animation: fadeUp .45s ease;
}

.menu-images.active{
  display: grid;
}

.menu-image img{
  width: 100%;
  height: 532px;
  object-fit: cover;
  display: block;
}

/* ================= MENU CARD (if used later) ================= */
.menu-card{
  background: #0e1621;
  padding: 40px 35px;
  color: #fff;
}

.menu-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-list li{
  margin-bottom: 26px;
  text-align: left;
}

.menu-list .dish{
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 600;
}

.menu-list .price{
  float: right;
  color: #c8a97e;
}

.menu-list p{
  font-size: 12px;
  margin-top: 6px;
  color: #bbb;
}

/* ================= CTA ================= */
.menu-cta{
  margin-top: 50px;
}


/* ================= ANIMATION ================= */
@keyframes fadeUp{
  from{
    opacity: 0;
    transform: translateY(12px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= RESPONSIVE ================= */
@media(max-width: 992px){
  .menu-images{
    grid-template-columns: 1fr;
  }

  .menu-image img{
    height: auto;
  }
}




@media (max-width: 768px) {
  .header__logo img {
  max-width:  193px;
  max-height:  49px;
  }

  #main-nav .sub-menu {
    display: none;
  }

  #main-nav li.menu-item-has-children.active > .sub-menu {
    display: block;
  }
  
  .portfolio-box-spacing
        {
            margin-top:0px!important
        } 
        
        .vouchers-content-philosophy
{
    padding:35px;
    padding-top:5px;
    font-size:18px;
}
}
@media (min-width: 769px) {
.vouchers-content-philosophy
{
    padding:100px;
    padding-top:5px;
    font-size:18px;
}
}



/* =========================
   MENU TABS – 2 ROWS (MOBILE)
========================= */
@media (max-width: 768px) {

  .menu-section .menu-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 2 per row */
    gap: 14px;
    padding: 0;
    margin-top: 20px;
  }

  .menu-section .menu-tabs .menu-item {
    text-align: center;
    white-space: nowrap;
  }
}
.footer .widget.locations ul li:last-child p:last-child {
    font-family: "DM Sans";
    font-size: 16px!important;
    line-height: 23px!important;
    color: #f9b842;
}


.menuItemImage
{
    width:128px!important;
}

/* ================= HEADER NAV CENTERING ================= */
/* The theme positions .main-nav with a hardcoded "left: 18%", tuned for a
   7-item menu — it drifts off-center whenever the menu's width changes (e.g.
   adding "Products"). True centering here keeps it centered regardless of
   how many items the menu has. Desktop only, so the mobile menu toggle
   (which has its own layout below 992px) is untouched. */
@media (min-width: 992px) {
  .header.style-2 #site-header-inner .main-nav {
    left: 50%;
    width: max-content;
    max-width: 94vw;
    white-space: nowrap;
    transform: translate(-50%, -50%);
  }

  /* The top bar centers the logo with flex "space-between" between the
     email block and the (wider) address block, so unequal side widths
     pull the logo off true center. Giving both sides equal width fixes it. */
  .top-header .contact-left,
  .top-header .contact-right {
    flex: 1 1 0;
  }
  /* .top-header .contact-right {
    justify-content: flex-end;
  } */
}

/* 8 items (with "Products" added) need noticeably less width than the
   original 7-item spacing gave them — tighten spacing so the row keeps
   fitting on one line on typical laptop-width screens instead of wrapping. */
@media (min-width: 992px) and (max-width: 1366px) {
  .header.style-2 #site-header-inner .main-nav .menu li {
    margin-right: 22px;
  }
  .header.style-2 #site-header-inner .main-nav .menu li a {
    font-size: 12.5px;
    letter-spacing: 1.4px;
  }
}
.header-cart-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid #e4e6ec;
  color: #0e1927;
  font-size: 16px;
  flex-shrink: 0;
  margin-right: 20px;
  transition: border-color .2s ease, background .2s ease;
}
.header-cart-link:hover {
  border-color: #f9b842;
  background: #f9b842;
  color: #0e1927;
}
.header-cart-link .cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #f9b842;
  color: #0e1927;
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.header-cart-link .cart-count.is-empty {
  display: none;
}
@media (max-width: 991px) {
  .header-cart-link {
    margin-right: 60px;
  }
}

@media (min-width: 1367px) and (max-width: 1600px) {
  .header.style-2 #site-header-inner .main-nav .menu li {
    margin-right: 34px;
  }
  .header.style-2 #site-header-inner .main-nav .menu li a {
    font-size: 14px;
    letter-spacing: 2px;
  }
}