:root {
    /* Slightly softer white */
  --color-one: #00264b;                /* Darker blue tone */
  --color-two: #042d54;                /* Adjusted secondary tone */
  --footer-background-color:#00264b;
}

.menu-card-main {
  background: linear-gradient(
    90deg,
    #001a33 0%,     /* darker edge */
    #00264b 20%,    /* Kyzo dark tone */
    #042d54 50%,    /* Kyzo light tone */
    #00264b 80%,    /* Kyzo dark tone */
    #001a33 100%    /* darker edge */
  );
}

.menu-card-style .menu-col .dish-block .desc {
    max-width: 390px;
}



  .menu-card-style .image-col .inner .image.no-image {
    height: 0;
    border: none;
    padding: 0px ;
    margin: 0px;
  }
}

.image-col,
.menu-col {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.menu-card-style .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.menu-card-style .menu-col .inner {
  padding-inline-start: 30px;
  padding-inline-end: 20px;
}
/* Default: .menu-col on the left */
.menu-card-style .menu-col .inner {
  padding-inline-start: 30px;
  padding-inline-end: 20px;
}

/* When layout is reversed: .menu-col on the right */
.menu-card-style .row.reverse-row .menu-col .inner {
  padding-inline-start: 70px;
  padding-inline-end: 80px;
}
.menu-card-style .menu-col .inner {
  box-sizing: border-box;
}

.menu-card-style.reverse .menu-col .inner {
  padding-left: 20px;
  padding-right: 30px;
}

/* Default layout: menu-col on the left */
.menu-card-style .menu-col .inner {
  padding-inline-start: 30px;
  padding-inline-end: 80px;
}

/* Flipped layout: menu-col on the right */
.menu-card-style.alternate .menu-col .inner {
  padding-inline-start: 30px;
  padding-inline-end: 70px;
}
.menu-card-style .image-col .inner {
  padding: 0 30px;
  box-sizing: border-box;
}



@media (max-width: 991px) {
  .menu-card-style:not(.alternate) .row {
    display: flex;
    flex-direction: column-reverse; /* Text first, image second */
  }

  .menu-card-style:not(.alternate) .image-col,
  .menu-card-style:not(.alternate) .menu-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 991px) {
  .menu-card-style .menu-col .inner {
    padding-left: 5px;
    padding-right: 5px;
  }
}
@media (max-width: 991px) {
  .menu-card-style .menu-col .inner {
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin: 0 auto;
    box-sizing: border-box;
  }
}


@media only screen and (max-width: 1339px) {
    .banner-section .banner-slider {
        width: 100% !important;
    }
}

@media only screen and (max-width: 1499px) {
    .banner-section .banner-slider {
         width: 100% !important;
        
    }
}