*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
body{
    /* background-color: #5f9166; */
}
header{
    /* border-color: rgba(0, 0, 0, 0); */
    width: 100%;
    display: block;
    align-items: center;
    /* padding: 1rem 1.2rem; */
    position: fixed;
    z-index: 10;
    justify-content: space-between;
    flex-direction: row;
    text-align: right;
    background-color: white;
    max-height: 8%;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}
.hidemenu{
    max-height: 44%;
}
.content-holder{
    display: flex;
    align-items: center;
    padding: 0 1px;
    gap: 0.4rem;
}
.logo{
    display:flex;
    color: #013608; 
    font-weight: 600;
    font-size: 1.6rem;
    align-items: center;
}
.logo img{
    height: 3rem;  
}
.mobile-nav-toggle {
    display: block;
    position: fixed;
    right: 2rem;
    cursor: pointer;
    z-index: 100;
    background: transparent;
  }

  .mobile-nav-toggle .icon-close {
    display: none;
  }
nav{
    display: inline-block;
    width: 100%;
    z-index: 10;
}
nav ul{
    display: block;
    list-style: none;
    align-items: center;
    padding: 2.8rem 2rem 7rem 0rem;
    margin:1rem 0rem 0rem 1rem;
    position: absolute;
}
li a{
    text-decoration: none;
    font-size: 1.3rem;
    color: #404943;
    display: block;
    line-height: 2rem;
}
.cta{
    display:inline-block ;
    background-image:radial-gradient(rgb(33, 148, 73) 5%,  rgb(4, 53, 4) 60%);
    font-size: 1rem;
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 2rem;
    box-shadow: 6px 15px 9px rgb(44, 73, 54);
    text-decoration: none;
    margin: 11.6rem 13rem;    
}
.menu{
    position:fixed;
    top:  0;
    left: 86%;
    color: #000;
    font-size: 2.3rem;
}
/*------Hero-------*/
.landPage{
    background-color: #07330e;
    border-bottom-right-radius: 6rem;
    border-bottom: 14px solid #fff;
    border-right:14px solid #fff;
}
.box{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 4.8rem 1rem;
}
.box-img{
    align-items: center;
    padding: 0.7rem 0;
    width: auto;
}
.hero-img{
    width:100%;
}
.box-text{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0rem;
}
#greet{
    color: rgb(231, 197, 3);;
    margin-bottom: 0.4rem;
}
h1{
    color: #fff;
    line-height: 1.8rem;
    font-weight: 600;
    font-size:1.8rem ;
    margin-bottom:0.4rem;
}
.box-text p{
    color: #fff;
    text-align: justify;
}
.mainCta{
    background-color: #fff;
    text-decoration: none;
    color: #000;
    padding: 0.6rem 1rem;
    border-radius: 50rem;
    margin:1rem 0rem 0rem 0rem;
    border: 2px solid white;
    box-shadow:3px 4px 9px rgb(253, 251, 251);
}
.mainCta:hover{
    background-color: transparent;
    border: 2px solid #fff;
    box-shadow: none;
    color: #fff;    
}
.about{
  background-color: #fff;  
  /* border-top-left-radius:5rem ; */
  border-top-left-radius: 6rem;
  border-top: 14px solid #07330e;
  border-left:14px solid #013608;
}
.holder2{
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;
    padding: 2rem 1rem;
}
.box2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}
.img2{
    display: flex;
    width: 100%;
    justify-content: center;
}
.pin{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between; 
}
.info{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0rem;
}
.info a{
    color: rgb(223, 189, 1);
    text-decoration: none;
}
.info p{
    color: #07330e;
    text-align: justify;
}
.info h2{
    color: #013608;
    font-size: 2rem;
    line-height: 2rem;
    font-weight: 540;
}
.food{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.food1, .food2, .food3{
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 2rem;
    /* background: rgba(0,0,0,0.7); */
}
.food img{
    border-top-right-radius : 2rem;
    border-top-left-radius : 2rem;
}
.desc{
    padding: 1rem;
}
.desc h3{
    color: #013608;
    font-weight: 600;
}
.discount{
    border-radius: 2rem; 
    padding: 3rem 1rem;
    background:none;
}
.tab{
    border-radius: 2rem;
    background-image:radial-gradient(circle, #010c01, transparent), url(./assest/img/bg2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1rem;
}

.tab-text{
    color: #fff;
    display: flex;
    flex-direction: column;
    bottom: 100px;
    gap: 1rem;
    z-index: 1;
    padding: 0.1rem 0.4rem;
    text-align: center;
}
.tab-text h3 {
    font-size: 1.4rem;
    font-weight: 600;
}
.tab-text p{
    font-size: 1rem;
    font-weight:700;
}
.dis-cta{
    display: inline-block;
    color: #000;
    text-decoration: none;
    background: #fff;
    padding: 0.8rem 0rem;
    border-radius: 50rem;
}
.dis-cta:hover{
    background: transparent;
    border: 2px solid #fff;
}
.rev-pannel{
    display:flex;
    padding: 2rem 1rem;
    flex-direction: column;
}
.pannel{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* padding: 1rem 1rem; */
}
.pannel-text{
    color: #013608;
    line-height: 1.5rem;
    padding: 0rem 0rem 3rem 0rem;
}
.pannel-text h3{
    padding: 1rem 0rem 0rem 0rem;
    font-size: 1.6rem;
    font-weight: 700;
}
.pannel-text a{
    color: rgb(231, 197, 3);;
    text-decoration: none;
}
.pannel-box{
    background-color: rgb(192, 190, 190);
    border-radius: 2rem;
    padding: 0rem 1.2rem 0.6rem 1.2rem;
    text-align: justify;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #012006;
}
.pannel-box img{
    width: 90px;
    height: 90px;
    border-radius: 80%;
    transform: translateY(-40%);
}
.pannel-text p{
    font-size: 1.2rem;
}
.reviewer{
    padding: 1rem 0rem 0.5rem 0rem;
}
.pannel-img{
    /* display: flex; */
    padding: 1rem 1rem 0rem 1rem;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0rem 0rem 0rem;
}
.pannel-img img{
    width: 100%;
    border-radius: 2rem;
}
.img-pin{
    display: flex;
    /* gap: 1rem; */
    transform: translateY(-3.5rem);
    color: #fff;
    padding: 0rem 0.8rem;
    align-items: center;
    justify-content: space-between;
}
.img-pin a{
    text-decoration: none;
    padding: 0.6rem 0.6rem;
    border-radius: 50rem;
    text-align: center;
    background-image:radial-gradient(rgb(33, 148, 73) 5%,  rgb(4, 53, 4) 60%);
    color: #fff;
}
.img-pin a:hover{
    background: transparent;
    border: 2px solid #fff;
}
.img-pin h5{
    font-size: 1rem;
    color: white;
    text-shadow: 1px 1px 1px black, 0 0 22px rgb(15, 252, 7), 0 0 5px rgb(27, 27, 177);
    padding: 0rem 0rem 0.2rem 0rem;
}
.card{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 0rem 1rem;
}
.card-text{
    display:inline-block;
    text-align: center;
    padding: 0rem 0rem 1.2rem 0rem;
}
.card-text a{
    color: rgb(231, 197, 3);
    text-decoration: none;
    font-weight: bold;
}
.card-text h2{
    font-size: 1.6rem;
    color: #013608;
    padding: 1rem 0rem;
    font-weight: 600;
}
.card-box{
    display: flex;
    flex-direction: column;
}
.card-img{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.card-img img{
    border-radius: 2rem;
    background: linear-gradient(to right, #000);
}

.chef{
    display: flex;
    gap: 0.6rem;
    align-items: center;
    position: absolute;
    padding: 0.8rem 1rem;
}
.chef img{
    height: 40px;
    width: 40px;
}
.chef-desc{
    color: #fff;
    /* text-shadow:  1px 1px black, 0 0 22px rgb(15, 252, 7), 0 0 5px rgb(27, 27, 177); */
}
.label{
    padding: 0.8rem 1rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    transform: translateY(-4rem);
}
footer{
    width: 100vw;
    display: flex;
    padding: 2rem 1rem 0rem 1rem;
}
.fHolder{
    display: flex;
    flex-direction: column;
}
.f-top{
    display:none;
    /* padding: 0.8rem 1rem;
    justify-content: end;
    background:#012006;
    background-size: cover; */
}
/* .f-top img{
    width: 60px;
} */
.f-bottom{
    display: flex;
    flex-direction: column;
    background: #013608;
    background-size: cover;
}
.logoForm{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.logoForm img{
    width: 18rem;
}
.formm{
    padding: 0rem 0rem;
}
form{
    display: flex;
    gap: 1rem;
    padding: 0rem 0rem;
    flex-direction: column;
    justify-content: space-between;    
}
form input {
    padding: 0.6rem 0.3rem;
    border: 2px solid greenyellow;
    background: transparent;
    color: #fff;
    font-size: 1rem;
}
form textarea{
    padding: 0.6rem 0.3rem;
    border: 2px solid greenyellow;
    background: transparent;
    color: #fff;
    font-size: 1rem;
}
.f-btn{
    padding: 0.5rem;
    background: transparent;
    border-radius: 1rem;
    border: 2px solid greenyellow;
    color: #fff;
}
.f-btn:hover{
    border: 2px solid #fff;
    background: transparent;
}
.soc{
    display: flex;
    gap: 1rem;
    color: #fff;
    margin:1rem 0rem 2rem 0rem ;
}
.contact-holder{
    display:flex;
    padding:1rem 1rem;
    color: #fff;
    gap: 1rem;
    justify-content: space-between;
}
.contact-holder ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.contact-holder li{
    display: flex;
    gap: 0.6rem;
    font-size: 0.6rem;
}
.contact h5{
    font-size: 0.9rem;
}
.contact p{
    font-size: 0.6rem;
}
.navigate{
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.navigate h5{
    font-size: 1rem;
}
.navigate p{
    font-size: 0.8rem;
}

    /*Web View*/
@media only screen and (min-width: 768px) {
    /* header{
        width: 100%;
        display: flex;
        align-items: center;
        /* padding: 1rem 1.2rem; 
        position: fixed;
        /* z-index: 10; 
        justify-content: space-between;
        text-align: center;
        height: 10%;
        padding: 2rem 2rem 0rem 2rem ;
        border: 2px solid red;
        background: none; 
    }
    header{
        width: 100%;
        display: flex;
        height: 10%;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        padding: 2rem 2rem;
        background-color: rgb(23, 189, 72);
    }
    nav{
        border: 2px solid red;
        display: flex;
        align-items: center;
        padding: 1rem;
    } 
    
    nav ul{
        display: inline-flex;
        list-style: none;
        align-items: center;
        gap: 1rem;
    }
   
    li a{
        text-decoration: none;
        font-size: 1.4rem;
        color: #404943;
    } 
    .cta{
        display: flex;
        background-image:radial-gradient(rgb(33, 148, 73) 5%,  rgb(4, 53, 4) 60%);
        font-size: 1rem;
        color: #fff;
        padding: 1rem 1.2rem;
        border-radius: 2rem;
        box-shadow: 6px 15px 9px rgb(44, 73, 54);
        text-decoration: none;
    }
    .menu{
        display: none;
    }
    .hold{
        display: flex;
        align-items: center;
        padding: 0px 1px;
        gap: 0.4rem;
        border: 2px solid red;
        width: 100%;
    }
    .logo{
        display:flex;
        color: #013608; 
        font-weight: 600;
        font-size: 1.6rem;
        align-items: center;
    }
    .logo img{
        height: 2rem; 
}*/

    #header{
        width: 100%;
        align-items: center;
        padding: 2rem 5rem;
        display: flex;
        /* gap: 22rem; */
        justify-content: space-between;
        background-color: transparent;
    }
    .logo{
        display: flex;
        align-items: center;
        /* border: 2px solid blue; */
        gap: 1rem;
        color: #536e58;
    }
    .royal{
        border-radius: 2rem;
    }
    .mobile-nav-toggle {
        display: none;
      }
    nav{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    nav ul{
        width: 100%;
        display: flex;
        align-items:center;
        gap: 1.6rem;
        padding: 0rem 4rem;
    }
    nav ul li a{
        text-decoration: none;
        display: flex;
        color: #a2b3a5;
        align-items: center;
        font-size: 1.4rem;
    }
    nav li:hover{
        padding: 0.2rem;
        border-bottom: 2px solid lime;
    }
    .menu{
        display: none;
    }
    .cta{
        box-shadow: none;
        /* border: 1px solid white; */
        padding: 0.8rem 1rem;
        display: flex;
        margin: 1.6rem;
        box-shadow: 6px 5px 9px rgb(44, 73, 54);
    } 
        /*------Hero-------*/
    .landPage{
        border-radius: 0;
        border: none;
        display: flex;
        background-color: #fff;
        height:100vh;  
        width: 100vw;  
    }
    .box{
        display: flex;
        width: 68%;
        flex-direction: row-reverse;
        padding: 4.8rem 0rem;
        justify-content: space-between;
        background-color: #07330e;
        border-bottom-right-radius: 4rem;
        border-right: 15px solid #fff;
        border-bottom: 15px solid #fff;
    }
    .box-img{
        display: flex;
        align-items: center;
        width: 100%;
        /* border:2px solid red; */
        /* background-color: #fff; */
        transform: translateX(-580%);
        /* position: absolute; 
       left: -34%;                                                                                                                                                                                                                                                                                                               : 4%; */
    }
    .hero-img{
        width:10000%;
        height: 30rem;
    }
    .box-text{
        display: flex;
        flex-direction: column;
        gap: 0rem;
        padding: 2rem 5rem;
        width: 2100%;
        /* border: 2px solid blue; */
    }
    #greet{
        color: rgb(231, 197, 3);
        padding:0rem 0rem 0.9rem 0rem;
    }
    h1{
        color: #fff;
        line-height: 3.6rem;
        font-weight: 500;
        font-size:3.2rem ;
        padding:0rem 9rem 1.2rem 0rem;

    }
    .box-text p{
        color: #fff;
        text-align: justify;
        padding: 0rem 20rem 0rem 0rem;
    }
    .mainCta{
       display: flex;
        background-color: #fff;
        text-decoration: none;
        text-align: center;
        color: #000;
        position: absolute;
        padding: 0.6rem 3.4rem;
        border-radius: 50rem;
        width: 20%;
        /* margin:1rem 0rem 0rem 0rem; */
        border: 2px solid white;
        /* transform: translateX(70%); */
        margin: 0rem 6rem ;
        bottom: 5rem;
        left: -1rem;
        box-shadow:3px 4px 9px rgb(253, 251, 251);
    }
    .mainCta:hover{
        background-color: transparent;
        border: 2px solid #fff;
        box-shadow: none;
        color: #fff;    
    }
    .holder2{
        display: flex;
        flex-direction: row;
        /* justify-content: center; */
        width: 100%;
        height: 100vh;
        /* border: 2px solid brown; */
    }
    .box2{
        display: flex;
        align-items: center;
        /* border: 2px solid blue; */
        flex-direction: row;
        width: 100%;
    }
    .img2{
        display: flex;
        width:30%;
    }
    .pin{
        display: flex;
        width: 70%;
        padding: 0rem 6rem 0rem 9rem;
    }
    .info{
        gap: 1rem;
    }
    .info h2{
        font-size: 3.4rem;
        font-weight: 600;
        line-height: 3.5rem;
    }
    .info p{
        padding: 0rem 10rem 0rem 0rem;
    }
    .food{
        display: flex;
        flex-direction: row;
        position: relative;
        width: 100%;
        animation: trend ease-in-out 8s;
    }
    @keyframes trend {
        0%{right:0px; top: 0px;

        }  
        25%{
            right:25px; top:0px;
        }
        50%{
            left:50px; top:0px;
        }
        75%{
            left:10px; top:0px;
        }
        100%{
            right:0px; top:0px;
            }        
    }
    .desc{
        cursor: pointer;
    }    
    .discount{
        display: flex;
        width: 100%;
        height: 60vh;
        padding: 2rem 6rem;
        /* border: 2px solid pink; */
        justify-content: center;
    }
    .tab{
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        padding: 0rem 2rem;
    }
    .tab-text{
        display: flex;
        align-items: center;
        /* position: relative;
        animation: disSlide ease-in 5s;
    }
    @keyframes disSlide {
        0%{
            top: 0px; font-size: 1rem
        }
        25%{
            top: 10px;
        }
        50%{
            top: 30px;
        }
        75%{
            top: 60px;
        }
        100%{
            top: -50px;
        }  */
        
    }
    .tab-text h3{
        font-size: 3rem;
        padding: 2rem;
    }
    .tab-text p{
        padding: 0rem 0rem 2rem 0rem;
        cursor: pointer;
    } 
    .dis-cta{
        width: 25%;
        font-size: 1rem;
        cursor: pointer;      
    }
    .dis-cta:hover{
        color: #fff;     
    }
    .rev-pannel{
        display: flex;
        flex-direction: row;
        padding:3rem 6.5rem 3rem 6rem;
        gap:2.5rem;
        align-items: flex-start;
    }
    .pannel{
        display: flex;
        width: 100%;
        gap: 2.5rem;
        padding: 2rem 0rem 0rem 0rem;
    }
    .pannel-text h3{
        font-weight: 700;
        font-size: 4rem;
        line-height: 3.4rem;   
    }
    .pannel-img{
        width: 100%;
    }
    .pannel-box{
        display: flex;
        justify-content: space-between;
    }
    .pannel-img{
        position: relative;
        animation: imgPannelAni ease-out 8s;
    }
    @keyframes imgPannelAni{
        0%{right:0px; top: 0px;

        }  
        25%{
            right:25px; top:0px;
        }
        50%{
            right:50px; top:0px;
        }
        75%{
            right:5px; top:0px;
        }
        100%{
            right:0px; top:0px;
            }        
    }       
    .card{
        display: flex;
        padding: 0rem 6rem 3rem 6rem;
    }
    .card-text h2{
        font-size: 4rem;
    }
    .card-box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
    }
    .card-img{
        display: flex;
        width: 30%;
        cursor: pointer;
    }
    .card-img img:hover{
        border: 4px solid rgb(198, 218, 224);
        box-shadow: 0 4px 8px 0 rgba(7, 230, 63, 0.884), 0 6px 20px 0 rgba(47, 255, 5, 0.466);
    }
    .card-img img::before{
        filter: drop-shadow(1);
    }
    .chef-desc{
      font-weight: bolder; 
      font-size:1.1rem;
    }
    /* Footer starts Here */
    footer{
        width: 100%;
        height: 100vh;
        padding: 2rem 0rem 0rem 0rem;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        background-color: #013608;
    }
    .fod-icon{
        display: block;
        width: 70px;
        height: 70px;
        position: relative;
        top: 0%;
        right: -50%;
    }
    .f-bottom{
        display: flex;
        justify-content: space-between;
        padding: 0rem 3rem;
        flex-direction: row;
    }
    .f-logo{
        width: 300px;
    }
    form{
        display: flex;
        gap: 1rem;
        width: 100%;
        align-items: center;
        flex-direction: column;
    }
    form input {
        background-color: transparent;
        border: 1px solid #fff;
        width: 100%;
        padding: 0.6rem;
        border-radius: 1rem;
        color: #fff;
    }
    form textarea{
        padding: 0.6rem;
        background-color: transparent;
        border-radius: 1rem;
        border: 1px solid #fff;
        color: #fff;
    }
    .f-btn{
        padding: 0.5rem 6rem;
        border-radius: 1rem;
        border: none;
        font-size: 1rem;
        color: #fff;
        cursor: pointer;
    }
    .f-btn:hover{
        background-color:transparent;
        border: 2px solid #fff;
        color: #fff;
    }
   .social{
        padding: 1.4rem 0rem 0rem 0rem;
        color: #fff;
        display: flex;
        gap:1rem;
        align-items: center;
    }
    .social ul{
        display: flex;
        flex-direction: row;
        list-style-type: none;
        gap: 0.9rem;
    }
    .fa-instagram{
        color: rgb(202, 62, 85);
    }
    .fa-facebook{
        color:blue ;
    }
    .fa-youtube{
        color: red;
    }
    .contact-holder ul{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 0rem;
        list-style: none;
        font-weight: bold;
    }
    .con-holder-list li{
        display: flex;
        flex-direction: row;
        color: #fff;
        width: 100%;
        line-height: 2rem;
        align-items: center;
        font-size: 0.8rem;
    }
    .title{
        display: flex;
        gap: 1rem;
        flex-direction: column;
        color: #10e922;
        font-size: 2rem;
    }
    .fa-location-dot{
        color:#04e404e1;
    }
    .fa-phone{
        color: rgb(6, 211, 23);
    }
    .fa-envelope{
        color: red;
    }
    .f-nav li a{
        color: #fff;
        display: flex;
        flex-direction: column;
        text-align: left;
        font-size: 0.8rem;        
    }
}