*,::before,::after{margin: 0; box-sizing: border-box;}
a{text-decoration: none;}
img{vertical-align: bottom;}
button{cursor: pointer;}

/* fonts */
@font-face{
    font-family: mr;
    src: url(../fonts/montserrat/Montserrat-Regular.ttf);
}
@font-face{
    font-family: mb;
    src: url(../fonts/montserrat/Montserrat-Bold.ttf);
}
@font-face{
    font-family: msb;
    src: url(../fonts/montserrat/Montserrat-SemiBold.ttf);
}
@font-face{
    font-family: pb;
    src: url(../fonts/playfair/PlayfairDisplay-Black.ttf);
}

body{font-family: mr,sans-serif; background-color: var(--mud);}
html{scroll-behavior: smooth;}
/* colors */
:root{
    --mud:#ebe3cd;
    --lightmud:#f8f8ef;
    --blue:#12202f;
    --orange:#df581e;
    --green:#6bb99c;
    --lightorange:#eaa73b;
    --darkmud:#ccc1a3;
    --footerorange:#fa9d30;
    --fontcolor:#404040;
}

/* container */
.container{
    max-width: 1335px;
    margin: auto;
    padding: 0 10px;
}
 
p{font-family: msb; font-size: 16px; color: var(--blue);}
h3{font-family: pb; font-size: 50px; color: var(--blue);}

/* layout */
/* navbar */
.header{background-color: var(--blue); width: 100%; height: 65px; display: flex; border-radius: 30px; margin-top: 50px;}
nav{width: 85%; margin: auto; display: flex; justify-content: space-between; align-items: center;}
nav h1 a{color: var(--mud); font-size:25px;}
nav h1 a img{color: #fff;}
.nav-links ul{list-style: none; padding: 0; margin-left: 100px;}
.nav-links ul li{display: inline-block; padding: 0 35px;}
.nav-links ul li a{color: var(--mud); font-size: 17px;}
nav .lamp{position: absolute; right: 20%; top: 8.5%;}
.sign {color: var(--green); font-size: 17px;}
/* toggle */
 .icon{display: none;}

/* wrap-1*/
.row{display: flex; justify-content: space-between; margin-top: 100px;}
.wrap-1-col-1{position: relative;}
.wrap-1-col-1 h2{font-family: pb; font-size: 80px; color: var(--blue); margin-bottom: 30px;}
.wrap-1-col-1 h3{font-size: 28px; color: var(--blue); margin-bottom: 25px;}
.wrap-1-col-1 p{margin-bottom: 45px;}
.hero-btn{font-family: mb; font-size: 20px; color: var(--blue); padding: 15px 20px; border: 1px solid var(--blue); 
    border-radius: 30px; display: inline-block; width: 150px; text-align: center; transition: .2s;}
.hero-btn:hover{background-color: var(--orange); color: var(--mud); box-shadow: 4px 4px var(--fontcolor);}
.hero-btn:active{background-color: var(--green);}
.wrap-1-col-1 img{position: absolute; right: 20px; bottom: 10px;}
.wrap-1-col-2 img{margin-top: 120px;}

/* wrap-2 */
.table{font-family: mb; font-size: 20px; margin-left: 50px; color: var(--blue); margin-bottom: 30px; margin-top: 50px; cursor: pointer;}
.booking{width: 100%; height: 300px; background-color: var(--lightmud); margin-top: 80px; border-radius: 35px; display: flex; 
    align-items: center; justify-content: space-around; box-shadow:-4px 3px 0px 1px rgba(207, 207, 207, 0.75)}
.book-col-1{width: 60%; height: 80%; display: flex; align-items: center}
.date{display: flex; justify-content: space-between;}
.date input{width: 215px; height: 90px; border-radius: 30px; background-color: var(--mud); border: 2px solid #000;
font-family: msb; font-size: 16px; text-align: center; margin-top: 10px;}
#mail{width: 330px;}
.let label{font-family: mb; font-size: 20px; cursor: pointer;}
.let label i{cursor: pointer;}
.book-col-2 a{background-color: var(--green); font-size: 20px; padding: 30px 35px; border-radius: 30px; color: var(--mud);}

/* wrap-3 */
.food{text-align: center; padding-top: 100px; margin: auto;}
.food h4{color:var(--orange); font-size: 28px;}
.food h3{margin-bottom: 80px;}
.categ{display: flex; justify-content: space-between;}
.categ-col{flex-basis: 31%; background-color: var(--lightmud); width: 40%; height: 540px; border-radius: 50px; padding: 30px;
box-shadow:-4px 3px 0px 1px rgba(207, 207, 207, 0.75)}
.categ-col h3{font-size: 40px; padding-top: 30px;}
.categ-col p{ line-height: 30px; margin-top: -65px; margin-bottom: 50px;}
.read-btn{background-color: var(--orange); padding: 15px 40px; color: var(--lightmud); font-family: mb; font-size: 20px; 
border-radius: 30px; transition: .1s;}
.read-btn:hover{box-shadow: 4px 4px var(--green);}
.read-btn:active{background-color: var(--lightorange);}

/* wrap-4 */
.covid{height: 850px; width: 100%; background-image: url(../images/level.png);  background-position: center center; 
    background-repeat: no-repeat; margin: 0 auto; margin-top: 200px;}
.protocol{text-align: center;}
.protocol h4{font-size: 28px; color: var(--green); margin-bottom: 20px;}
.protocol h3{margin-bottom: 40px;}

/* wrap-5 */
.counter{padding-top: 150px; display: flex; justify-content: space-between; width: 100%;}
.counter-col-1{ padding: 50px 100px ; height: 100%;}
.counter-col-1 h4{ font-size: 28px; color: var(--lightorange); margin-bottom: 20px;} 
.counter-col-1 h3{ margin-bottom: 20px;}
.counter-col-1 p{ line-height: 30px; margin-bottom: 80px;}

/* wrap-6 */
.cook-btn{background-color: var(--green);}
.cook-btn:hover{box-shadow: 4px 4px var(--fontcolor);}
.cook-btn:active{background-color: var(--orange);}

/* wrap-7 */
.react{width: 95%; height: 100vh; margin: auto; display: flex; justify-content: space-between; 
background-color: var(--lightmud); align-items: center;
border-radius: 50px;}
h4{color: var(--green);}

/* wrap-8 */
.review{display: flex; justify-content: space-between;}
.review-col{width: 580px; height: 265px; background-color: var(--lightmud); border-radius: 40px; 
box-shadow:-4px 3px 0px 1px rgba(207, 207, 207, 0.75)}
.view{justify-content: center; margin-top: 50px;}
.review-col{display: flex; justify-content: space-evenly; align-items: center;}
.review-sub{text-align: left;}
.review-sub h4{font-family: pb; font-size: 28px; color: var(--blue); margin-bottom: 10px;}
.review-sub h4 i{font-family: mb; font-size: 14px; color: var(--mud); margin-left: 20px;}
.review-sub p{ font-size: 14px; line-height: 25px;}

/* wrap-9 */
.letter{background-image: url(../images/leaf3.png); background-position: center;
     background-repeat: no-repeat; height: 1000px; padding-top: 100px; width: 100%;}
.form{margin-top: -40px;}
.letter input{padding-left: 50px; border: 2px solid #000;}
.letter .nob textarea{padding-left: 50px; padding-top: 50px; border: 2px solid #000;}
/* id */
.int{width: 860px; height: 90px; border-radius: 50px; margin-bottom: 60px; font-family: msb; font-size: 16px;
background-color: var(--darkmud);}
#message{width: 860px; height: 215px; border-radius: 50px; margin-top: -40px; font-family: msb; font-size: 16px;
background-color: var(--darkmud); margin-bottom: 50px; margin-top: 5px;}
#send{ background-color: var(--green); color: var(--fontcolor);}
#send:hover{box-shadow: 4px 4px var(--fontcolor);}

/* footer */
.last{width: 100%; height: 800px; background-color:var(--footerorange); display: flex; justify-content: space-around; align-items: center;}
.about-col{width: 100%; height: 470px}
.about-col h3{font-size: 40px; color: var(--mud); margin-bottom: 50px;}
.about-col h4{margin-bottom: 50px;}
.about-col h4 a{font-family: mb; font-size: 25px; color: var(--fontcolor);}
.sitr{width:500px; text-align: right;}
#note{width: 500px; height: 60px; border-radius: 30px; background-color: var(--footerorange); border: 2px solid var(--fontcolor)}
.about-col i{font-size: 80px; margin: 10px 15px; cursor: pointer; color: var(--fontcolor);}

/* back to top */
.back-to-top{font-family: msb; font-size: 20px; padding: 8px 12px; background-color: var(--green); color: var(--mud);
  position: fixed;
  right: 15px; bottom: 15px; z-index: 996; transition: all 0.4s;
}



/* --------RESPONSIVE-----------------------*/

@media screen and (max-width:1220px){
    .container{width: 960px;}
    .wrap-1-col-1 img{display: none;}
    .wrap-1-col-2 img{width: 90%;}
    .categ-col{width: 50%;}
    .dom{width: 50%;}
    .covid{width:80%;}
    .counter-img{width: 80%; margin-top: 180px}
    .cook-img{width: 80%;}
    .customer-img{width: 80%;}
    .review-col{width: 450px;}
    .sitr{width: 300px;}
    #note{width: 280px;}
}

@media screen and (max-width:1000px){
    .container{width: 900px;}
    .wrap-1-col-1 h2{font-size: 50px;}
    .hero-btn{width: 200px; margin-bottom: 10px;}
    .read-btn{font-size: 15px; padding: 10px 12px;}
    h3{font-size: 30px;}
    .categ-col h3{font-size: 30px;}
    p{font-size:14px;}
    .covid{width: 700px;}
    .about-col h3{font-size: 22px;}
    .about-col h4 a{font-size: 16px;}
    .about-col{width: 150px;}
    #note{display: none;}
    .about-col i{font-size: 40px;}
    .int{width: 500px;}
    #message{width: 500px;} 
    .booking{flex-direction: column; height: 600px;}
    .book-col-1{flex-direction: column; height: 60%;}
    .date{flex-direction: column;}
    .let{display: block;}
    #mail{width: 215px;}


   /* toggle */
     .nav-links ul li{
       display: block;
       padding: 20px 20px;
       text-align: left;
    }
    .nav-links ul{
        margin-top: 15px;
    }
    .nav-links{
        position: fixed;
        top: 0;
        left: -100%;
        height: 100vh;
        width:300px;
        background: var(--blue);
        z-index: 2;
        transition: all ease-in-out 0.5s;
    }
    .nav-links.active{
        left: 0%;
    }
   
    nav .icon{
        display: block;
        color: var(--lightmud);
        margin: 10px;
        cursor: pointer;
        font-size: 22px;
    }
    nav .cancel-btn{
        text-align: right;
        padding: 8px 12px;
    }
    
}

@media screen and (max-width:800px) {
    .container{width: 100%;}
    .sign{display: none;}
    .header{width: 100%; margin: 0 auto; margin-top: 50px;}
    .row{flex-direction: column-reverse; text-align: center; margin-bottom: 10%;}  
    .wrap-1-col-2 img{width: 100%; margin-top: 0%; margin-bottom: 5%;}  
    .booking{width: 100%; margin: 0 auto;}
    .categ{flex-direction: column;}
    .categ-col{margin:0 auto; margin-bottom: 5%; width: 80%;}
    .dom{width: 100%;}
    .covid{width: 100%;}
    .counter{flex-direction: column;}
    .counter-col-1{text-align: center;}
    .counter-img{width: 100%; margin-top: 0;}
    p{font-size: 16px;}
    h3{font-size: 30px; text-align: center;}
     .categ-col h3{font-size: 40px;}
    .about-col h3{font-size: 40px;}
    .about-col h4 a{font-size: 25px;}
    .react{flex-direction: column-reverse; width: 100%; height: 100%;}
    .cook-img{width: 100%;}
    .review{flex-direction: column;}
    .review-col{margin:0 auto; margin-bottom: 30%; width: 100%;}
    .last{flex-direction: column; height: 2000px;}
    .about-col{width: 100%;}
    .last{width: 100%;}
    .int{width: 100%;}
    #message{width: 100%}
    .dom{width: 80%;}
    .sitr{text-align: center;}
}