* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      list-style-type:none;

    }
body{
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;;
}


    .headimg {
      position: relative;
      width: 100%;
      height: 100vh;
    }

    .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      opacity: 0;
      animation: fade 9s infinite;
    }

    .slide:nth-child(1) {
      background-image: url('./assets/slide1.jpg');
      animation-delay: 0s;
    }

    .slide:nth-child(2) {
      background-image: url('./assets/slide2.jpg');
      animation-delay: 3s;
    }

    .slide:nth-child(3) {
      background-image: url('./assets/slide3.jpg');
      animation-delay: 6s;
    }

    @keyframes fade {
      0%, 33.33% {
        opacity: 1;
        z-index: 1;
      }
      33.34%, 100% {
        opacity: 0;
        z-index: 0;
      }
    }

    .text {
      position: absolute;
      width: 100%;
      text-align: center;
      top: 40%;
      color: #d7cece;
      font-family: 'Dancing Script', cursive;
    }

    .text h1 {
      font-size: 3.5rem;
      animation: topFade 9s infinite;
    }

    .text p {
      margin-top: 45px;
      font-size: 1.2rem;
      animation: bottomFade 9s infinite;
    }

    /* Animation for Top Text */
    @keyframes topFade {
      0% {
        opacity: 0;
        transform: translateY(-50px);
      }
      10% {
        opacity: 1;
        transform: translateY(0);
      }
      30% {
        opacity: 1;
        transform: translateY(0);
      }
      40% {
        opacity: 0;
        transform: translateY(-50px);
      }
      100% {
        opacity: 0;
      }
    }

    /* Animation for Bottom Text */
    @keyframes bottomFade {
      0% {
        opacity: 0;
        transform: translateY(50px);
      }
      10% {
        opacity: 1;
        transform: translateY(0);
      }
      30% {
        opacity: 1;
        transform: translateY(0);
      }
      40% {
        opacity: 0;
        transform: translateY(50px);
      }
      100% {
        opacity: 0;
      }
    }

    .slide:nth-child(2) .text h1,
    .slide:nth-child(2) .text p {
      animation-delay: 3s;
    }

    .slide:nth-child(3) .text h1,
    .slide:nth-child(3) .text p {
      animation-delay: 6s;
    }

    /* navbar */
    .headnav{
      position: relative;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .navbar li{
        display: inline-block;
        
    }
    .navbar li a{
        text-decoration: none;
        padding: 10px;
        color:white
    }
   
     .navbar li a:hover{
        color: #f4b350 ;
     }
     .menu i{
        display: none;
        color:white;
        font-size: 30px;
     }
     .menuinfo{
      display: none;
        position: absolute;
        width:100%;
        height:350px;
        z-index: 9999;
        top:100%;
        background-color: #131212;
     }
     @media(max-width:768px){
      .navbar ul{
        display: none;
    
      }
      .menu i{
        display: block;
      }
      .menuinfo{
        display: block;
      }
     }
     /* about */
     .title-sec{
        position: relative;
     }
     .title-sec h1{
        font-size: 40px;
     }
     .title-sec h1:after{
        content: '';
        position: absolute;
        margin-left: -15px;
        left: 50%;
        bottom: 45%;
        width:30px;
        height:3px;
        background-color:#f4b350 ;

     }
      .title-sec p{
        margin: 0 0 10px;
      }
      .para h3{
        font-size: 35px;
      }
      .para p{
        font-size: 16px;
        color: rgb(116, 116, 116);
      }
      .para1{
        line-height: 2px;
      }
      /* .cimg{
        display: flex;
      } */
    
     .story .fimg{
       float:left;
       width:46%;
       height:auto;
       margin-top: 30px;
     }
      .story .simg{
        width:53%;
        height:auto;
        float:right;
     
      }
      .aboutimg{
        display: flex;
        flex-wrap: nowrap !important;
        margin-left: 10%;
        
      }
       @media(max-width:1020px){
         .cimg{
        display: flex;
        width:255px;
        height:333px;
      }
      }

       @media(max-width:820px){
         .aboutimg{
        display: flex;
        flex-wrap: wrap !important;
      }
       }


       /* @media(max-width:820px){
         .cimg{
        display: flex;
        width:180px;
        height:230px;
        flex-wrap: wrap !important;
      }
      }
      
      @media(max-width:560px){
         .cimg{
        display: flex;
        width:150px;
        height:200px;
        flex-wrap: wrap !important;
      }
      }  */


   /* today special */
   #todaysspecial{
       background-image: url(./assets/ban1.jpg);
       width: 100%;
       height:auto;
       background-position: center;
       background-size: cover;

   }
   .spec{
        position: relative;
        padding-top: 7%;
        color:white;
     }
     .spec h1{
        font-size: 40px;
     }
     .spec h1:after{
        content: '';
        position: absolute;
        margin-left: -15px;
        left: 50%;
        bottom: 35%;
        width:30px;
        height:3px;
        background-color:#f4b350 ;

     }
      .spec p{
        color:white;
        margin: 0 0 10px;
      }

      .food-line{
        display: flex;
      }
      .food-price{
        height:310px;
        width: 279px;
        background-color: white;
      }
      .food-price .pri{
        font-size: 14px;
        color: #969494;
      }
     .doller{
        font-size: 1.5rem;
        color:#f4b350;
        font-weight: bold;
        margin: 10px 0 5px;

      }
      .specialfood{
        display: flex;
        font-family:  Helvetica Neue, Helvetica, Arial, sans-serif;;
        /* margin-left:5%; */
        
      }
      /* .food-line:hover{
        background-color: #f4b350;
        color:white;
      } */
      
      .food-line:hover{
        background-color: #f4b350;
        color: #151515;
      }
      .food-price:hover p,
      .food-price:hover .doller{
        color: rgb(236, 232, 232);
      }
      .food-price:hover{
        cursor: pointer;
         background-color: #f4b350;
        color:rgb(19, 18, 18);
      }
      .food-line:has(.foodimg:hover) .food-price{
         background-color: #f4b350;
         color: #131212;
      }
      .food-line:has(.foodimg:hover) .food-price .doller,
       .food-line:has(.foodimg:hover) .food-price p{
         color: white;
       }
      

      @media(max-width:1200px){
        .specialfood{
        display: flex;
        flex-wrap: wrap;
        margin-left: 0;
      }
      }
      @media(max-width:850px){
         .specialfood{
        display: flex;
        flex-wrap: wrap;
        margin-left: 0 !important;
      }
      }
      @media(max-width:710px){
        .food-line{
            display: flex;
            flex-wrap: wrap;
            
        }
      }

      @media(max-width:400px){
        .foodimg img{
          width:200px;
        }
        .food-price{
          width: 200px;
          height:200px;
        }
      }

      /* menu */
      .ourmenu{
        position: relative;
        padding-top: 7%;
        color:rgb(21, 20, 20);
     }
     .ourmenu h1{
        font-size: 40px;
     }
     .ourmenu h1:after{
        content: '';
        position: absolute;
        margin-left: -15px;
        left: 50%;
        bottom: 28%;
        width:30px;
        height:3px;
        background-color:#f4b350 ;

     }
      .ourmenu p{
        color:rgb(11, 11, 11);
        margin: 0 0 10px;
      }
      .menu-food li{
        display: inline-block;
        /* border-right: 1px solid rgb(207, 206, 206); */
      }
      .menu-food li a{
        text-decoration:none ;
        color:#131212;
        padding:10px 28px 18px 28px;
        border: 1px solid rgb(186, 184, 184);
        background-color: #f4b350;
        color:white;
      }
      .menu-food li a:hover{
         background-color: white;
         color:black;
      }
    
      .foodimgs{
        float:left;
        position: relative;
        width:70px;
        padding-top:15px;
      }
      .foodimgs span{
        position: absolute;
        top:-2px;
        right:0;
        width:30px;
        height:30px;
        text-align: center;
        line-height: 30px;
        border-radius: 50%;
        background-color: #f4b350;
        color:white;
        font-size: 8px;
      }
      .food-content{
        margin-left: 100px;
        padding-top:8px;
      }
       .food-content h2{
        text-align: start;
        font-size: 16px;
        color:black;
        font-weight: 400;
        line-height: 20px;
      
      } 
      .food-content span{
        float: right;
        color:#f4b350
      }
      .food-content p{
         text-align: start;
        max-width: 360px;
        margin-bottom: 0;
        font-size: 14px;
      }
      .foodpara{
        color: #999999;
        font-family: 'Rubik', sans-serif;
        font-weight: 300;
        line-height: 24px;
        text-align: center;
        margin: 0 0 10px;
      }

      /* Reservation*/

    
      .resimg{
        width:100vw;
        height:auto;
        background-image: url(./assets/res.jpg);
        background-size: cover;
        background-position: center;
  
      }
      .tableimg{
         line-height: 30px;
         padding-bottom: 95px;
         
      }
      .imgcol{
         margin-left: 5%;
      }
      .input{
         width:62.5%
      }
      .time {
        margin-right: 60px;
      }
      .pers{
        margin-left: 50px;
      }

      @media(max-width:768px){
         .imgcol{
         margin-left:0;
      }
       .time {
        margin-right: 0;
      }
      .pers{
        margin-left: 0;
      }
      }

      /* gallery */

     
    .gallery-nav a{
        text-decoration:none;
        color:#bebdbd;
        font-weight: 300;
        padding:0;
      }
      .gallery-nav a:hover{
          color:#f4b350;
      }
      .gallery-nav a:after{
          content:'/';
          padding:10px
      }
    
    .gallery-box{
      display: grid;
      /* grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); */
      grid-template-columns: 1fr 1fr 1fr 1fr;
      /* gap: 10px; */
        
      }
    .gallery1{
      position: relative;
      overflow: hidden;
      height: 250px;
    
      }
    .gallery1 img{
          width:100%;
          height:100%;
          object-fit: cover;
          transition: transform 0.6s ease;
      }
    .gallery1:hover img {
      transform: scale(1.1);
    }

    .ghover {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-color: rgb(51 51 51 / 80%);
      /* color: #fff; */
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .gallery1:hover .ghover {
      opacity: 1;
    }

    .ghover h2 {
      margin: 0;
      font-size: 1rem;
      font-weight: 500;
      color:#f4b350;
      text-transform: uppercase;
    }

    .ghover span {
      margin: 5px 0 0;
      font-style: italic;
      font-size: 0.9rem;
      color:white;
      font-weight: 300;
    }
    @media(max-width:998px){
      .gallery-box{
        display: grid;
         grid-template-columns: 1fr 1fr 1fr;
      }
    }
      @media(max-width:768px){
      .gallery-box{
        display: grid;
         grid-template-columns: 1fr 1fr 1fr;
      }
    }
      @media(max-width:660px){
      .gallery-box{
        display: grid;
         grid-template-columns: 1fr 1fr ;
      }
      
    }
      @media(max-width:450px){
      .gallery-box{
        display: grid;
         grid-template-columns: 1fr ;
      }
      
    }
    
      
      /* .gallery1{
        position: absolute;
        top:0px;
        left:0px;
        overflow: hidden;
        
      }

      .gallery1 img{
         transition: transform 0.6s ease;
      }
      .gallery1:hover img{
      
        object-fit: cover;
        transform: scale(1.1);
      }
      .gallery-box .gallery1:hover .ghover{
        opacity:1;
        visibility: visible;
      }
      .gallery-box .gallery1 .ghover{
        position: absolute;
        top: 0;
        left:0;
        bottom:0;
        right:0;
        background-color: rgb(51 51 51 / 80%);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        opacity: 0;
        transition: transform 0.6s ease;

       }
     
       .gallery1:hover .ghover{
        opacity: 1;
        transform: scale(1.1);
      
       }
       .innerimg h2{
        font-size:16px;
        color:#f4b350;
        font-weight: 500;
        text-transform: uppercase;
       }
       .innerimg span{
        font-size: 13px;
        font-weight: 300;
        color:rgb(181, 179, 179);

       }
       /* g2 */
      /* .gallery2{
        position: absolute;
        top:0px;
        left:25%;
        overflow: hidden;
        
      }
       .gallery2 img{
         transition: transform 0.6s ease;
      }
      .gallery2:hover img{
      
        object-fit: cover;
        transform: scale(1.1);
      }
    .gallery-box .gallery2 .ghover{
        position: absolute;
        top: 0;
        left:0;
        bottom:0;
        right:0;
        background-color: rgb(51 51 51 / 80%);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        opacity: 0;
        transition: transform 0.6s ease;

       }
      .gallery2:hover .ghover{
        opacity: 1;
        transform: scale(1.1);
      
       } */
       /* g3 */
    /* .gallery3{
        position: absolute;
        top:0px;
        left:50%;
        overflow: hidden;
        
      }
       .gallery3 img{
         transition: transform 0.6s ease;
      }
      .gallery3:hover img{
      
        object-fit: cover;
        transform: scale(1.1);
      }
    .gallery-box .gallery3 .ghover{
        position: absolute;
        top: 0;
        left:0;
        bottom:0;
        right:0;
        background-color: rgb(51 51 51 / 80%);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        opacity: 0;
        transition: transform 0.6s ease;

       }
      .gallery3:hover .ghover{
        opacity: 1;
        transform: scale(1.1);
      
       } */
       /* g4 */
    /* .gallery4{
        position: absolute;
        top:0px;
        left:75%;
        overflow: hidden;
        
      }
    .gallery4 img{
         transition: transform 0.6s ease;
      }
  .gallery4:hover img{
      
        object-fit: cover;
        transform: scale(1.1);
      }
  .gallery-box .gallery4 .ghover{
        position: absolute;
        top: 0;
        left:0;
        bottom:0;
        right:0;
        background-color: rgb(51 51 51 / 80%);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        opacity: 0;
        transition: transform 0.6s ease;

       }
    .gallery4:hover .ghover{
        opacity: 1;
        transform: scale(1.1);
      
       } */

       /* g5 */
     /* .gallery5{
        position: absolute;
        top:328px;
        left:0;
        overflow: hidden; 
      }
    .gallery5 img{
         transition: transform 0.6s ease;
      }
  .gallery5:hover img{
      
        object-fit: cover;
        transform: scale(1.1);
      }
  .gallery-box .gallery5 .ghover{
        position: absolute;
        top: 0;
        left:0;
        bottom:0;
        right:0;
        background-color: rgb(51 51 51 / 80%);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        opacity: 0;
        transition: transform 0.6s ease;

       }
    .gallery5:hover .ghover{
        opacity: 1;
        transform: scale(1.1);
      
       } */
       /* g6 */
      /* .gallery6{
        position: absolute;
        top:328px;
        left:25%;
        overflow: hidden; 
      }
    .gallery6 img{
         transition: transform 0.6s ease;
      }
  .gallery6:hover img{
      
        object-fit: cover;
        transform: scale(1.1);
      }
  .gallery-box .gallery6 .ghover{
        position: absolute;
        top: 0;
        left:0;
        bottom:0;
        right:0;
        background-color: rgb(51 51 51 / 80%);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        opacity: 0;
        transition: transform 0.6s ease;

       }
    .gallery6:hover .ghover{
        opacity: 1;
        transform: scale(1.1);
      
       } */
       /* g7 */
    /* .gallery7{
        position: absolute;
        top:328px;
        left:50%;
        overflow: hidden; 
      }
  .gallery7 img{
         transition: transform 0.6s ease;
      }
  .gallery7:hover img{
      
        object-fit: cover;
        transform: scale(1.1);
      }
  .gallery-box .gallery7 .ghover{
        position: absolute;
        top: 0;
        left:0;
        bottom:0;
        right:0;
        background-color: rgb(51 51 51 / 80%);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        opacity: 0;
        transition: transform 0.6s ease;

       }
    .gallery7:hover .ghover{
        opacity: 1;
        transform: scale(1.1);
       
       }
        */
       /* g8 */

    /* .gallery8{
        position: absolute;
        top:328px;
        left:75%;
        overflow: hidden; 
      }
  .gallery8 img{
         transition: transform 0.6s ease;
      }
  .gallery8:hover img{
      
        object-fit: cover;
        transform: scale(1.1);
      }
  .gallery-box .gallery8 .ghover{
        position: absolute;
        top: 0;
        left:0;
        bottom:0;
        right:0;
        background-color: rgb(51 51 51 / 80%);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        opacity: 0;
        transition: transform 0.6s ease;

       }
    .gallery8:hover .ghover{
        opacity: 1;
        transform: scale(1.1);
      
       }
       @media(max-width:2340px){
      .gallery2{
        position: absolute;
        top:0px;
        left:18%;
        overflow: hidden;
        
      }
       .gallery3{
        position: absolute;
        top:0px;
        left:35%;
        overflow: hidden;
        
      }
      .gallery4{
        position: absolute;
        top:0px;
        left:53%;
        overflow: hidden;
        
      }
    .gallery5{
        position: absolute;
        top:328px;
        left:0;
        overflow: hidden; 
      }
    .gallery6{
        position: absolute;
        top:328px;
        left:18%;
        overflow: hidden; 
      }
       .gallery7{
        position: absolute;
        top:328px;
        left:35%;
        overflow: hidden; 
      }
      .gallery8{
        position: absolute;
        top:328px;
        left:53%;
        overflow: hidden; 
      }
    }  */


/* Contact */

.gettouch{
  width:100%;
  height:auto;
  background-image: url(./assets/ban3.jpg);
}
.social-link li{
  display: inline-block;
  padding: 10px;
  border:1px solid;
  border-radius: 50%;
 
}
.social-link li i{
    padding-left: 5px;
  padding-right:5px;
}
.social-link li:hover{
     background-color: #f4b350;
     color:white
}
.info{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
.hours p{
  line-height:10px;
}
.info-links .input{
    width:340px;
    padding: 10px;
    border: none;
}
.info-links .textarea{
       width:340px;
    padding: 10px;
}
.info-links ::placeholder{
  font-size: 12px;
}
.info-links button{
  font-size: 14px;
  border: 1px solid #999999;
  color:#999999;
  background-color: transparent;
  border-radius: 5px;

}
.info-links button:hover{
  background-color: #f4b350;
  color:white;
}