body{
    background-color: #000;
    overflow: hidden;
}
/* ////////////////////////////////lodingpage/////////////////////////////// */
.lodingpage{
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    background-color: black;
    z-index: 999;
}
.ring
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:150px;
  height:150px;
  background:transparent;
  border:3px solid #3c3c3c;
  border-radius:50%;
  text-align:center;
  line-height:150px;
  font-family:sans-serif;
  font-size:20px;
  color:#fff000;
  letter-spacing:4px;
  text-transform:uppercase;
  text-shadow:0 0 10px #fff000;
  box-shadow:0 0 20px rgba(0,0,0,.5);
}
.ring:before
{
  content:'';
  position:absolute;
  top:-3px;
  left:-3px;
  width:100%;
  height:100%;
  border:3px solid transparent;
  border-top:3px solid #fff000;
  border-right:3px solid #fff000;
  border-radius:50%;
  animation:animateC 2s linear infinite;
}
.load span
{
  display:block;
  position:absolute;
  top:calc(50% - 2px);
  left:50%;
  width:50%;
  height:4px;
  background:transparent;
  transform-origin:left;
  animation:animate 2s linear infinite;
}
.load span:before
{
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff000;
  top:-6px;
  right:-8px;
  box-shadow:0 0 20px #fff000;
}
@keyframes animateC
{
  0%
  {
    transform:rotate(0deg);
  }
  100%
  {
    transform:rotate(360deg);
  }
}
@keyframes animate
{
  0%
  {
    transform:rotate(45deg);
  }
  100%
  {
    transform:rotate(405deg);
  }
}

/* ////////////////////////////////Navbar/////////////////////////////// */
nav{
    width: 350px;
    left: -283.84px !important;
}
.left-nav{
  width: 83%;
}
.left-nav ul li {
    padding-top: 15px;
    cursor: pointer;
}
.whiteNav ul li {
    cursor: pointer;
}
.whiteNav img{
    width: 50px
}



.nav-in{
  transform: translateX(283.84px);
  transition: 0.5s;
}
.nav-out{
  transform: translateX(0px);
  transition: 0.5s;
}


.animate__animated.animate__slideInDown{
  --animate-duration: 1s;
}

.closebtn,.openbtn{
  cursor: pointer;
}

/* ////////////////////////////////Home/////////////////////////////// */
.overlay{
  top: 0%;
  bottom: 0%;
  left: 12px;
  right: 12px;
  transform: translateY(100%);
  transition: 0.5s;
  background-color: rgba(240, 248, 255, 0.705);
}
.meal:hover .overlay{
  transform: translateY(0%);
}

/* ////////////////////////////////Search/////////////////////////////// */
.form-control {
background-color: #000;
color: #fff !important;
}
.form-control:focus{
background-color: #000;
color: #fff !important;
}

::placeholder{
  color: #ffffff8e !important;
  font-weight: lighter;
}

/* ////////////////////////////////Category/////////////////////////////// */
.categoryDDesc{
  overflow: hidden;

}

/* ////////////////////////////////Area/////////////////////////////// */
.areaIcon{
  font-size: 70px !important;
}

.ingrediantDesc{
  overflow: hidden !important;
  max-height: 70px;
}
/* ////////////////////////////////Ingrediant/////////////////////////////// */
.ingrad-list li{
  background-color: #CFF4FC;
  color: #066a8f;
  padding:7px 10px;
  border-radius: 8px;
}

.type{ 
  width: fit-content;
  background-color: #F8D7DA;
  color: #93205C;
  padding:7px 10px;
  border-radius: 8px;
}

.ingradSrc li{
  background-color: #CFF4FC;
  color: #fff;
  padding:7px 10px;
  border-radius: 8px;
}
.ingradSrc .scr{
  background-color: #157347;
}
.ingradSrc .yout{
  background-color: #BB2D3B;
}

@media screen and (max-width:600px){
  .detealsPage{
    width: 330px;
    padding-left: 15px;
  }

}

/* ////////////////////////////////Contact Us////////////////////////////// */
.form-control.contact-input {
  background-color: #FFF;
  color: #000 !important;
}
.form-control.contact-input::placeholder {
  color: #000 !important;
}