/* @font-face {
    font-family: GE Thameen DemiBold ;
    src: url(fonts/@font-face/e57ca2d3280d3d41d2bc04b067ff8a8e.ttf);
  
    font-family: GE Thameen Book;
    src: url(fonts/ge-thameen-5e9473b7e1/GE_Thameen_Book/GE_Thameen_Book.otf);
  }  */
  :root{
    --text-color: #bbbbba;
    --background-color: #AA5933;
  }
  html{
    font-size: 24px;
  }

 
    
  body{
      font-family: GE Thameen DemiBold, GE Thameen Book,Arial, Helvetica, sans-serif;
      background: var(--background-color);
      background-color: #AA5933;
/* background-image: url("https://www.transparenttextures.com/patterns/concrete-wall.png"); */
      background-image: url(./img/leather-background.png);
      /* overflow: auto; */
      color: var(--text-color);
  }

  .nav-link{
    color: var(--text-color);
    font-size: 1.5rem;
  }


  .menu-containt{
      width: auto;
      overflow: auto;
    }

 .sticky-navbar{

    position:sticky;
    top:0px;
    z-index: 1;
}

.menuNavbar{
    
    margin-bottom: 30px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 26%;
    overflow-x: auto;
    overscroll-behavior-inline:contain;
    font-size: 1.25rem;
    z-index: 1;
    text-align: center;
    /* background: var(--background-color); */
    /* background-image: url("data:image/svg+xml,%3Csvg width='32' height='26' viewBox='0 0 32 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 0v3.994C14 7.864 10.858 11 7 11c-3.866 0-7-3.138-7-7.006V0h2v4.005C2 6.765 4.24 9 7 9c2.756 0 5-2.236 5-4.995V0h2zm0 26v-5.994C14 16.138 10.866 13 7 13c-3.858 0-7 3.137-7 7.006V26h2v-6.005C2 17.235 4.244 15 7 15c2.76 0 5 2.236 5 4.995V26h2zm2-18.994C16 3.136 19.142 0 23 0c3.866 0 7 3.138 7 7.006v9.988C30 20.864 26.858 24 23 24c-3.866 0-7-3.138-7-7.006V7.006zm2-.01C18 4.235 20.244 2 23 2c2.76 0 5 2.236 5 4.995v10.01C28 19.765 25.756 22 23 22c-2.76 0-5-2.236-5-4.995V6.995z' fill='%23000000' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"); */


  }

  .menuNavbar a{
      text-decoration: none;
      font-size: 1.55rem;
      color: var(--text-color);
  }
  .border{
      /* position: sticky; */
      /* top: 100px; */
      overflow: auto;
      /* overscroll-behavior: auto contain; */
      height: 750px;
      border-radius: 20px;
      border:2px !important;

  }
  .menu-logo img{
      width: 50%;
      align-items: center;
      margin: 20px;
  }
  .head-title{
    font-size: 3.5rem;
    padding: 20px 0px 20px 0px;
    color: var(--text-color);
  }
  .item_image img{
      max-width: 100%;
      max-height: 100%;
      border-radius: 30px;
      padding-top: 8px;
  } 

  .dish-description{
      display: block;
      font-size: 1.5rem;
      /* text-align: justify; */
      text-align: -webkit-auto;
  }
  .dish-detials{
      margin-bottom: 20px;
      text-align: justify;
  }
  #VAT{
      text-align: center;
      font-size: 1rem;
      padding-bottom: 20px;
      margin: 1% 5% 1% 5%;
  }
  a::before{
      font-weight: 600;
  }

  .cal{
    font-size: 0.7rem;
  }   
  
  a::before{
      font-weight: 600;
  }



  #price{
    font-family: 'Courier New', Courier, monospace;
      font-size: 1.75rem;
      text-align: center;
  }
  .item{
    box-shadow: 2px 4px 9px 0px #00000070;
    /* margin-top: 5%; */
    border-radius: 15px;
    backdrop-filter: blur(2px) contrast(98%);
    -webkit-backdrop-filter: blur(2px) contrast(98%);
    width: 100%;
  }
  .item_name{
    /* font-size: medium; */
    padding-top: 10%;
  }

.item_name h4{
    font-size: 1.5rem;
    color: var(--text-color);
    text-align: -webkit-auto;

}
p{
  color: var(--text-color);
}

.en{
  display: none;
}
.ar{
  display: block;
}

.btn-primary{
  background-color: #68786407;
  border-color: aliceblue;
  border-radius: 20px;
}

#btnAr{
  margin: 0 5% 2% 0;
}

#btnEn{
  margin: 0% 0% 2% 5%;
}

.modal-content{
  background-color: #aa7a63da;
  border-radius: 1.3rem;
  
}

.modal-content .item_name{

  padding: 0 0 0 0;
}
.modal-footer{
  border-top: 0;
}
.lunchOffer{
  display: none;
}


@media (max-width : 450px) {

  html{  
    font-size: 14px;
    
  }
}


/* popup */
 /* Fullscreen overlay styling */
 .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1050; /* Bootstrap modal-like z-index */
}
/* Hidden overlay by default */
.overlay.hidden {
  display: none;
}
/* Close button styling */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  font-size: 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1100;
}
/* Image adjustments for responsiveness */
.overlay img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
/* popup end */