@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&family=Satisfy&family=Ysabeau+Office&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');
.hero-img{
 height: 100% ;
 width: 100%;
 position: relative;
 left: 10px;
 border-radius: 40px;
 object-fit: cover;
}
/* nav{
    position: relative;
    left: .55%;
} */
@media (min-width:400px ) and (max-width:500px){
 nav{
    position: relative;
    left: 0% !important;
 }
}
.rating{
    width: 100%;
    height: 70px;
    background-color: #0B0A0B;
    border-radius: 30px;
}
.rating h1{
    color: white;
    font-weight: 600;
    font-size: 25px;
}
.fa-star{
    color: #FBB316;
    padding-left: 15px;
}
.hero1{
  font-size: 70px;
  font-weight: 800;
  background-image: url(https://images.pexels.com/photos/958545/pexels-photo-958545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
  background-repeat: repeat;
  -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  background-position: center;
  letter-spacing: 1.5px;
}
.hero3{
    font-size: 70px;
  font-weight: 800;
  background-image: url(https://images.pexels.com/photos/1633525/pexels-photo-1633525.jpeg?auto=compress&cs=tinysrgb&w=600);
  background-repeat: repeat;
  -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
  background-position: center;
  letter-spacing: 1.5px;
  position: relative;
  top: -50px;
  left: 80px;
}
.hero2{
    font-family: 'Satisfy', cursive;
    color: #8CA355;
}
.hero-des{
    width: 100%;
    font-family: 'Ysabeau Office', sans-serif;
    color: #6a6565;
}
.hero-des p{
    line-height: 28px;
}
.slick-next:before, .slick-prev:before {
    font-family: slick;
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: black !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.your-class{
    height: 250px;
}
.item-card{
    width: 110px !important;
    height: 207px !important;
    background-color:#413D3D;
    border-radius: 51% 49% 47% 51% / 26% 26% 26% 26%;
    margin-right: 14px;
    margin-left: 15px;
}
.item-card p{
    color: #EBA219;
    font-size: 15px;
    position: relative;
    left: 30px;
    top: 20px;
}
.circle{
    width: 100px;
    height: 50%;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    left: 4.7px;
    top: 10px;
    background-image: url(https://images.unsplash.com/photo-1625220194771-7ebdea0b70b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80);
    background-position: center center;
    background-size: contain;
}
.item-card-1{
    width: 110px !important;
    height: 207px !important;
    background-color:#413D3D;
    border-radius: 51% 49% 47% 51% / 26% 26% 26% 26%;
    margin-right: 14px;
    margin-left: 15px;
}
.item-card-1 p{
    color: #EBA219;
    font-size: 15px;
    position: relative;
    left: 30px;
    top: 20px;
}
.item-card-1 .circle{
        width: 100px;
        height: 50%;
        background-color: #fff;
        border-radius: 50%;
        position: relative;
        left: 4.7px;
        top: 10px;
        background-image: url(https://images.unsplash.com/photo-1555126634-323283e090fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=464&q=80);
        background-position: center center;
        background-size: contain;
}
.item-card-2{
    width: 110px !important;
    height: 207px !important;
    background-color:#F0A302;
    border-radius: 51% 49% 47% 51% / 26% 26% 26% 26%;
    margin-right: 14px;
    margin-left: 15px;
}
.item-card-2 p{
    color: #413D3D;
    font-size: 15px;
    position: relative;
    left: 30px;
    top: 20px;
}
.item-card-2 .circle{
        width: 100px;
        height: 50%;
        background-color: #fff;
        border-radius: 50%;
        position: relative;
        left: 4.7px;
        top: 10px;
        background-image: url(https://images.pexels.com/photos/7363680/pexels-photo-7363680.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
        background-position: center center;
        background-size: contain;
}
.item-card-3{
    width: 110px !important;
    height: 207px !important;
    background-color:#413D3D;
    border-radius: 51% 49% 47% 51% / 26% 26% 26% 26%;
    margin-right: 14px;
    margin-left: 15px;
}
.item-card-3 p{
    color: #EBA219;
    font-size: 15px;
    position: relative;
    left: 15px;
    top: 20px;
}
.item-card-3 .circle{
        width: 100px;
        height: 50%;
        background-color: #fff;
        border-radius: 50%;
        position: relative;
        left: 4.7px;
        top: 10px;
        background-image: url(https://images.pexels.com/photos/3926135/pexels-photo-3926135.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
        background-position: center center;
        background-size: contain;
}
.item-card-4{
    width: 110px !important;
    height: 207px !important;
    background-color:#F0A302;
    border-radius: 51% 49% 47% 51% / 26% 26% 26% 26%;
    margin-right: 14px;
    margin-left: 15px;
}
.item-card-4 p{
    color: #413D3D;
    font-size: 15px;
    position: relative;
    left: 36px;
    top: 20px;
}
.item-card-4 .circle{
        width: 100px;
        height: 50%;
        background-color: #fff;
        border-radius: 50%;
        position: relative;
        left: 4.7px;
        top: 10px;
        background-image: url(https://images.pexels.com/photos/17473023/pexels-photo-17473023/free-photo-of-indian-masala-tea.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
        background-position: center center;
        background-size: contain;
}
.f-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.food-box{
    position: relative;
    background-image: url(https://images.pexels.com/photos/884600/pexels-photo-884600.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
    width: 340px;
    height: 230px;
    background-color:red;
    background-size: cover;
    background-position: center ;
    background-repeat: no-repeat;
    border-radius: 35px;
    box-shadow: -11px -70px 34px -18px rgba(0,0,0,0.76) inset;
-webkit-box-shadow: -11px -70px 34px -18px rgba(0,0,0,0.76) inset;
-moz-box-shadow: -11px -70px 34px -18px rgba(0,0,0,0.76) inset;
transition: .5s;
    /* box-shadow: -11px -54px 47px -30px rgba(0,0,0,0.76) inset;
-webkit-box-shadow: -11px -54px 47px -30px rgba(0,0,0,0.76) inset;
-moz-box-shadow: -11px -54px 47px -30px rgba(0,0,0,0.76) inset; */

}
.food-box-2{
    position: relative;
    background-image: url(https://images.pexels.com/photos/13072972/pexels-photo-13072972.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
    width: 340px;
    height: 230px;
    background-color:red;
    background-size: cover;
    background-position: center ;
    background-repeat: no-repeat;
    border-radius: 35px;
    box-shadow: -11px -70px 34px -18px rgba(0,0,0,0.76) inset;
-webkit-box-shadow: -11px -70px 34px -18px rgba(0,0,0,0.76) inset;
-moz-box-shadow: -11px -70px 34px -18px rgba(0,0,0,0.76) inset;
transition: .5s;
}
.food-box p{
    font-size: 17px;
    font-weight: 600;
    color: white;
    position: absolute;
    bottom: 0;
    left: 15px;
    transition: .5s;
}
.food-box-2 p{
    font-size: 17px;
    font-weight: 600;
    color: white;
    position: absolute;
    bottom: 0;
    left: 30%;
    transition: .5s;
}
.food-box:hover{
    box-shadow: -11px -37px 57px 10px rgba(0,0,0,0.78) inset;
-webkit-box-shadow: -11px -37px 57px 10px rgba(0,0,0,0.78) inset;
-moz-box-shadow: -11px -37px 57px 10px rgba(0,0,0,0.78) inset;
}
.food-box:hover p{
    position: absolute;
    bottom: 20px;
    left: 15px;
}
.food-box-2:hover{
    box-shadow: -11px -37px 57px 10px rgba(0,0,0,0.78) inset;
-webkit-box-shadow: -11px -37px 57px 10px rgba(0,0,0,0.78) inset;
-moz-box-shadow: -11px -37px 57px 10px rgba(0,0,0,0.78) inset;
}
.food-box-2:hover p{
    position: absolute;
    bottom: 20px;
    left: 30%;
}
.menu{
    background-color: black;
}
.menu h1{
    display: flex;
    justify-content: center;
    color: white;
    font-weight: 600;
}
.menu-sp{
    color: #EBA219;
}
.menu-card-1{
    width: 320px;
    height: 370px;
    background-color: #DDDCDC;
    border-radius: 30px;
    overflow: hidden;
    transform: rotate(25deg);
    position: relative;
    left: 15%;
    animation: tilt 4s ease-in-out 0s 3  ;
}
@keyframes tilt{
    0%{
    transform: rotate(25deg);
    }
    50%{
    transform: rotate(-25deg);
    }
    100%{
    transform: rotate(25deg);
    }
}
.menu-img{
  width: 300px;
  object-fit: cover;
  height: 280px !important;
  position: relative;
  top: 9px;
  left: 9.5px;
  border-radius: 30px;
}
.menu-text{
    font-size: 30px;
    font-weight: 700;
    position: relative;
    left: 20px;
    top: 20px;
}
.menu-card-2{
    width: 320px;
    height: 370px;
    background-color: #DDDCDC;
    border-radius: 30px;
    overflow: hidden;
    /* transform: rotate(25deg); */
    position: relative;
    left: 15%;
    top: 20%;
}
.menu-card-3{
    width: 320px;
    height: 370px;
    background-color: #DDDCDC;
    border-radius: 30px;
    overflow: hidden;
    transform: rotate(-25deg);
    position: relative;
    left: 13%;
    /* top: 20%; */
    animation: tilt2 4s ease-in-out 0s 3  ;
}
@keyframes tilt2{
    0%{
        transform: rotate(-25deg);
        }
        50%{
        transform: rotate(25deg);
        }
        100%{
        transform: rotate(-25deg);
        }
}
.feedback-section{
    padding: 4% 0;
}
.customer-head{
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    font-size: 2.3em;
    font-weight: 700;
}
.feed-card-1{
    font-family: 'Poppins', sans-serif;
    background-color: #FBB316;
    color: #3b3a3a;
    padding: 2rem 2.7rem;
    border-radius: 15px;
}
.feed-name{
    font-weight: 600;
}
.feed-card-2{
    font-family: 'Poppins', sans-serif;
    background-color: #3b3a3a;
    color: rgb(188, 184, 184);
    padding: 2rem 2.7rem;
    border-radius: 15px;
}
@media (max-width: 500px){
    .hero1 , .hero2 , .hero3{
        font-size: 50px;
    }
    .hero-img{
        position: relative;
        left: -1%;
    }
    .your-class{
        width: 80%;
        position: relative;
        left: 10%;
    }
  .food-box{
    margin-top: 2%;
    margin-bottom: 6%;
  }
  .menu-img{
    width: 230px;
    height: 220px !important;
  }
  .menu-card-1{
   width: 250px;
   height: 300px;
   transform: rotate(0);
   animation: none;
  }
  .menu-card-2{
    width: 250px;
    height: 300px;

   }
   .menu-card-3{
    width: 250px;
    height: 300px;
    position: relative;
    top: 40%;
    animation: none;
    transform: rotate(0);
   }

   .customer-head{
    display: block;
    font-size: 1.7rem;
   }
   .feed-card-1{
    margin-bottom: 30px;
   }

}
@media (min-width:360px) and (max-width:414px) {
    .menu{
       height: auto;
       }
       .menu-card-3{
       position: none;
       }
}

 /* @media (max-height:850px){
    .menu{
        height: 150vh;
       }
}
@media (max-height:800px){
    .menu{
        height: 170vh;
       }
}
@media (max-height:700px){
    .menu{
        height: 200vh;
       }
} */
@media (min-width: 300px) and (max-width:400px){
    .hero1 , .hero2 , .hero3{
        font-size: 45px;
    }
    .item-card{
        margin-left: 10%;
        /* margin-right: 3%; */
    }

}
@media (min-width: 300px) and (max-width:400px){
    .rating h1{
        font-size: 20px;
    }
}