.title {
        font-family: 'Myriad Pro Regular';
        text-align: center;
        background-color: #c2b09f;
        color: white;
        padding: 7px;
        margin-top: 10px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
.owl-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.owl-controls .owl-buttons {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
}

.owl-prev,
.owl-next {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
}

.owl-carousel .owl-nav {
  display: block !important; /* Override the default behavior to always show the navigation arrows */
}

.owl-carousel .item {
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.3s ease;
    }

.owl-carousel .item:hover {
        opacity:1 !important;
    }
    
.owl-carousel .owl-item.active_restaurant .item {
    opacity: 1;
}

.fa-caret-right:before {
    display:block !important;
    margin: 0 40px;
    font-size: 33px;
    content: "\f178" !important;
    color: #c2b09f;
}

.fa-caret-left:before {
    display: block !important;
    content: "\f177" !important;
    margin: 0 40px;
    font-size: 33px;
    color: #c2b09f;
}

.owl-theme .owl-nav {
    margin-top: 40px !important;
}

.parent-container {
    font-family: 'Myriad Pro Regular' !important;
    margin-top: 100px;
}
.parent-container .flex-container {
        display: flex;
        align-items: center;
    }

    /* Set widths for the columns */
    .parent-container .flex-container .flex-item {
        flex-grow: 1;
        padding: 10px; /* Add padding for spacing */
    }

    /* Set widths for the columns */
    .parent-container .flex-container .column1 {
        justify-content: center;
        flex-direction: column;
        display: flex;
        line-height: 1.9;
        padding: 0 50px;
        flex-basis: 20%;
    }
    .parent-container .flex-container .column2 ,
    .parent-container .flex-container .column3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-basis: 35%; 
    }
    
    .parent-container .flex-container .column2 {
        padding: 0 40px;
        min-height: 230px;
        border-left: 1px solid;
    }

    /* Style for images */
    .parent-container .flex-container img {
        max-width: 100%; /* Ensure images fit within their containers */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Remove any default inline styling */
        margin: auto; /* Center the image horizontally */
    }
    
    .owl-prev:hover,
    .owl-next:hover {
        background-color: transparent !important;
    }
    
    .owl-prev:hover .fa-caret-left:before,
    .owl-next:hover .fa-caret-right:before {
        transform: scale(1.3);
        transition: all 0.5s; /* Corrected transition syntax */
}

#mapModal {
    z-index: 10000;
}
    
@media screen and (max-width: 800px) {
        .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next {
            display: inline-block !important;
        }
    }
    

.grid-container {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr;
  padding: 10px;
  margin-top: 110px;
}

.item1{
    display:flex;
    object-fit: cover;
}

.item2,
.item3{
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.item2 {
    font-family: 'Myriad Pro Regular';
    font-size: 1.05rem;
    padding: 20px 36px;
    line-height: 1.7;
}

.item3 {
    border-left: 1px solid;
    align-items: center;
    padding: 0px 30px;
    position: relative;
}

.item3 img {
    width: 100%;
    height: auto;
    max-width: 5.9rem;
    position: absolute;
    top: -110px;
    left: -46px;
}

.item3 p {
    font-size: 1.2rem;
}

.item3 p p span, .item3 p p {
       font-size: 1.05rem;
       line-height: 1.6;
       font-family: 'Myriad Pro Regular' !important;
}

.restaurant-detail.container {
    display: flex;
    gap: 20px;
    margin: 40px auto;
    padding: 20px;
    align-items: stretch; /* Stretch both sides to match height */
  }
  
  .restaurant-detail .left {
    flex: 2; /* left part will take 2 times more space */
    display: flex;
    flex-direction: column;
    font-family: 'Myriad Pro Regular';
  }
  
  .restaurant-detail .left p span {
      font-family: 'Myriad Pro Regular' !important;
      letter-spacing: 1px;
      
  } 
  .restaurant-detail .right {
    flex: 3; /* right part will take 1 times more space */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .restaurant-detail .right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .restaurant-title {
      margin-bottom: 45px;
  }
  .restaurant-description {
      margin-bottom: 50px;
  }
  .restaurant-information {
      position: relative;
      padding-top: 20px;
      margin-top: 60px;
      width: 52%;
      border-top: 1px solid; 
      line-height: 1.8;
  }
  .restaurant-information img {
      position: absolute;
      right: -117px;
      width: 97px;
      top: -15%;     
  }
  
   @media (max-width: 1200px) {
    .restaurant-detail.container {
      flex-direction: column; /* Change to a column layout */
      align-items: center; /* Center align content */
    }
    
    .restaurant-detail .left,
    .restaurant-detail .right {
      flex: auto; /* Let both sides take equal space */
      width: 100%; /* Make both sides take full width */
    }
    
    .restaurant-detail .right {
      order: -1; /* Put the image container at the top */
    }
  }

@media screen and (max-width: 1000px) {
  .item1 { grid-area: header; }
  .item2 { grid-area: menu; }
  .item3 { grid-area: main; }
    
  .grid-container {
    grid-template-columns: auto; 
    grid-template-areas:
      'header header header header header header'
      'menu main main main main main'
      'footer footer footer footer footer footer';
    gap: 10px;
  }
  
  .item3 p {
    font-size: 0.9rem;
}

.item3 img {
    transform: translateY(-50%);
    max-width: 52px;
    position: absolute;
    top: 114%;
    left: -28px;
}
  
}

@media screen and (max-width: 600px) {
    .item2 {
        width: 90px;
        padding: 0;
        font-size: 9.5px;
    }
    
    .item3 {
        align-items: center;
        padding: 15px;
        display:unset !important;
    }
}