.yellow-container {
    margin-bottom: 5px;
    margin-top: 230px;
    height: 300px;
    background-color: #F5B335;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    position: relative;
}
  
  .yellow-container .container {
      display: flex;
      position: relative;
      top: -138px;
  }
  

.toGo_box {
    margin: 15px;
    position: relative;
    max-width: 287px;
    max-height: 258px;
    width: 95%;
    height: 50vw;
    background-color: #F5B335;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.inner-box {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid white;
}

.box-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.img-fluid {
    width: 100%;
    height: 100% !important;
    object-fit: contain;
    display: block;
    margin: auto;
    max-width: 254px !important;
}

.yellow-container .owl-carousel {
    position: absolute;
    top: -135px;
    left: -4px;
}

.yellow-container .owl-carousel .owl-stage-outer .owl-stage .owl-item {
    justify-content: center;
    display: flex;
    width: 285px;
}

.swiper {
  max-width: 60% !important;
  overflow: visible;
}
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  /*height: 300px;*/
}

.swiper-slide::after {
  position: absolute;
  content: "";
  inset: 0;
  width: 100%;
  aspect-ratio: 1/1;
 /* border-radius: 50%;
  background: linear-gradient(to bottom right, #b8b8b88f, #ffffff5e);*/
}
.swiper-slide-active::after {
  background: none;
}
.swiper-slide > div {
  margin-top: 38px;
  text-align: center;
  display: none;
  opacity: 0;
}
.swiper-slide-active div {
  display: block;
  opacity: 1;
}

.swiper-slide h2 {
    letter-spacing: 1px;
    font-size: 1.7rem;
    font-family: 'Myriad Pro Regular';
    position: relative;
    text-transform: uppercase;
}

.swiper-slide h2::after {
  position: absolute;
  content: "";
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  height: 1px;
  background: #3D3935;
}

.toGo-container {
    overflow: hidden;
    padding-bottom: 300px;
}

.swiper .prev-arrow {
    transform: translateY(50%);
    left: -50px;
    bottom: 0;
}

.swiper .next-arrow {
    transform: translateY(50%);
    right: -50px;
    bottom: 0;
}

@keyframes line {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.swiper-slide-active h2::after {
  animation: line 0.5s linear forwards;
}
.swiper-slide img {
  display: block;
  width: 100%;
  object-fit: cover;
  /*box-shadow: 0px 3px 17px rgb(0 0 0 / 25%);*/
  border-radius: 50%;
  aspect-ratio: 1/1;
  opacity:0.8;
}

.swiper-slide-active img {
    opacity: 1;
}

.swiper-slide .about_button {
    width: unset;
}

.swiper-slide .about_button a {
    padding: 8px 21px;
    font-size: 21px !important;
    background-color: #3D3935;
}

.prev-arrow, .next-arrow { 
    font-size: 4rem !important;
    line-height: 12rem !important;
}

.opacity-04 {
    opacity: 0.4 !important;
}

.dish-details {
      display: flex;
      flex-direction: column;
      align-items: center;
}

.dish-details .dish-image {
      width: 100%;
      height: auto;
    }

.dish-details .content {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      padding: 20px;
      font-family: 'Myriad Pro Regular';
    }

.dish-details .content .heading {
      font-size: 24px;
      margin-bottom: 20px;
      text-transform: uppercase;
      color: #3D3935;
    }

    .dish-details .content .number {
      font-size: 18px;
      margin-bottom: 5px;
    }

    .dish-details .content .ingredients {
      margin: 40px 0px 30px;
    }

    .content .row .col-md-1 {
        padding-right: 50px;
        height: 29px;
        border-right: 1px solid;
    }
    
    .content .row .col-md-6 p { 
        margin: 0;
        font-size: 10px;
        opacity: 0.7;
    }

    
.dish-details {
      display: flex;
      flex-direction: column;
      align-items: center;
}

.dish-details .dish-image {
      width: 100%;
      height: auto;
    }

.dish-details .content {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      padding: 20px;
      font-family: 'Myriad Pro Regular';
    }

.dish-details .content .heading {
      font-size: 24px;
      margin-bottom: 20px;
      text-transform: uppercase;
      color: #3D3935;
    }

    .dish-details .content .number {
      font-size: 18px;
      margin-bottom: 5px;
    }

    .dish-details .content .ingredients {
      margin: 40px 0px 30px;
    }

    .content .row .col-md-1 {
        padding-right: 50px;
        height: 29px;
        border-right: 1px solid;
    }
    
    .content .row .col-md-6 p { 
        margin: 0;
        font-size: 10px;
        opacity: 0.7;
    }
    
    .toGo-text-image {
        width: 350px;
        position: absolute;
        transform: translateY(-43%);
    }

  .about-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 2600px;
    margin: 0 auto;
    justify-content: space-between;
    overflow: hidden;
  }
  
  .about-container .row {
    margin-bottom: 20px; /* Adjust as needed */
    display: flex;
   /* align-items: center; */
    padding: 50px;
    width: 100%;
  }
  
  .about-container .image,
  .about-container .text {
    width: calc(50% - 10px); /* Adjust padding and margin */
    padding: 30px;
    box-sizing: border-box;
    font-size: 1.2vw;
    font-family: 'Myriad Pro Regular';
    letter-spacing: 2px;
    
  }
  
  .about-container .image img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  
  .about-container .text {
    text-align: left;
  }
  
  .about-container .text h1 {
      padding-bottom: 3%;
      font-size: 2.4vw;
  }
  
  .about-container .text .about_button {
        width: unset;
        padding-bottom: 0;
  }
  
  /* Swap image and text for odd rows */
  .about-container .row:nth-child(even) .image {
    order: 2;
  }
  
  .about-container .row:nth-child(even) .text {
    order: 1;
  }
  
  .about-container .row:nth-child(odd) {
    background-color: #F5B335;
    color: white;
  }
  
    .text .flex-container {
      display: flex;
      flex-direction: column;
      align-items: start;
      padding-left: 150px;
    }
    
    .text .flex-item {
      margin: 10px 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 50%;
    }
    
    .text .flex-item img {
      width: 3.8vw; /* Adjust width as needed */
      height: auto; /* Maintain aspect ratio */
    }
    
    .text .flex-item p {
      margin: 0;
      letter-spacing: normal;
      padding-left: 30px;
    }

 .text ol li {
    text-align: left; /* Align list item content to the left */
    position: relative; /* Set position to relative */
    display: flex;
    align-items: flex-start; /* Align items to the top */
    margin-bottom: 20px; /* Add space between list items */
  }

 .text ol li::before {
    counter-increment: item; /* Increment counter */
    content: counter(item, 2); /* Display the counter */
    font-weight: bold; /* Make the counter bold */
    position: absolute; /* Set position to absolute */
    top: 50%; /* Adjust the vertical position */
    left: calc(-10% + 0.7vw); /* Adjust the horizontal position */
    transform: translateY(-50%);
  }
  
.text ol li:nth-child(3n+1):before,
.text ol li:nth-child(3n+1):before {
  counter-reset: custom-counter 0;
  content: "1.";
}

.text ol li:nth-child(4n+2):before,
.text ol li:nth-child(3n+2):before {
  counter-reset: custom-counter 1;
  content: "2.";
}

@media (max-width: 768px) {
    .swiper-slide h2 { 
        font-size: 1.2rem;
    }
    .swiper-slide .about_button a {
        padding: 8px 11px;
        font-size: 15px !important;
    }
    .yellow-container:not(#bottom-yellow-container) { 
        margin-top: 0;
    }
    .dish-details {
        width: 100%;
        max-width: unset !important;
    }
}


/* on Mobile */
@media screen and (max-width: 800px) {
  .yellow-container:not(#bottom-yellow-container) {
     height: 200px; 
  }
  .yellow-container .owl-carousel {
      top: -79px;
  }
}

@media only screen and (min-width: 768px) {
      .dish-details {
        flex-direction: row;
      }

      .dish-details .content {
        padding: 20px;
      }
    }
    
    @media only screen and (max-width: 768px) {
    
       .content .row .col-md-1 {
              border-right: none;
              border-bottom: 1px solid;
              padding-right: 0;
        }
      .content .row .col-md-6 {
          justify-content: center;
      }
      
    }
  @media (max-width: 1000px) {
    .about-container .image,
    .about-container .text {
        width: 100%;
    }
    .text .flex-item p {
        font-size: 20px;
    }
    .text .flex-item img { 
        width: 67px;
    }
    .about-container .row { 
        padding: 20px;
    }
    .text span {
        font-size: 20px;
    }
    .text .flex-item { 
        width: unset;
    }
    .text ol li::before { 
        font-size: 20px;
    }
    .about-container .text h1 { 
        font-size:5.7vw;
    }
    .about-container .text {
        font-size: 3.4vw;
        padding: 10px;
        text-align: center;
    }
    .about-container .image {
        padding: 5px;
    }
    .text .flex-container { 
        align-items: center;
    }
    .text .about_button a {
        padding: 8px 20px;
    }
    .text .flex-container { 
        padding-left:0;    
    }
  }