*{
    margin: 0;
    padding: 0;
    
}
html{
    scroll-behavior: smooth;
}

/*css variables*/
:root{
    --navbar-height:58px;
}


/* nav: logo and image*/
#logo{
    margin: 4px ;
    
}

#logo img{
    height: 90px;
    margin: 4px ;
    width: 90px;
    filter: invert(90%);
    border-radius: 50%;
    
}

/*navbar*/
#navbar{
    display: flex;
    align-items: center;
        position:sticky;
        top: 0;
        width: 100%;
    
}
#navbar::before{
    content: "";
    background-color: black;
    position:absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    z-index:-1;

}
/*nav: list style*/

#navbar ul{
    display: flex;
    

}
#navbar ul li{
    list-style: none;
    font-size: 1.08rem;
}
#navbar ul li a{
    color: white;
    margin-left: 25px;
    padding: 3px 35px; 
    display: block;
    border-radius: 20px;
    text-decoration: none;
}
#navbar ul li a:hover{
    color: black;
    transform: scale(1.2);
    border-radius: 0%;


}

/*homesection*/
#home{
    display: flex;
    flex-direction: column;
    padding: 3px 200px;
    justify-content: center;
    align-items: center;
   height:645px;
  
}
#home::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url('layot/backgrounds/pexels-photo-1267320.jpeg')no-repeat center  center/cover;
    height:100vh;
    width: 100%;
    opacity: 0.8;
    z-index:-1;

}
#home h1{
    color: rgb(90, 38, 38);
    text-align: center;
    font-size:3.3rem;
   font-family: southeasterly demo;
    padding: 4px;
    
    

}
#home p{
    color: rgb(0, 0, 0);
    text-align: center;
    font-size: 1.2rem;
    text-align: center;
    
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* services section */

.menu-container{
    background-color: lightgoldenrodyellow;
    height: 1650px;
}
#services{
    display: flex;
    margin: 40px;
    justify-content: center;
}
#services .box{
/* border: 2px solid black; */
padding: 0;
margin: 3px 10px;
border-radius: 30px;
/* background:#f2f2f2; */

cursor: pointer;

}


#services .box img{
    height:280px;
    width: 380px;
   
    margin: auto;
    border-radius: 30px;
    display: block;
}

#services2{
    

    display: flex;
    margin: 40px;
    justify-content: center;
}
#services2 .box{
    cursor: pointer;

    /* border: 2px solid black; */
    padding: 0;
    margin: 3px 10px;
    border-radius: 30px;
    /* background:#f2f2f2; */
}    
#services2 .box img{
    height:280px;
    width: 380px;
    
    border-radius: 30px;
    margin: auto;
    display: block;
}
#services3{
  

    margin: 40px;
    justify-content: center;
    display: flex;
}
#services3 .box{
    /* border: 2px solid black; */
    padding: 0;
    cursor: pointer;

    margin: 3px 10px;
    border-radius: 30px;
    /* background:#f2f2f2; */
}    
#services3 .box img{
    height:280px;
    width: 380px;
   
    margin: auto;
    border-radius: 30px;
    display: block;
}
#services4{
   
    margin: 40px;
    justify-content: center;
    display: flex;
}
#services4 .box{
    /* border: 2px solid black; */
    padding: 0;
    margin: 3px 10px;
    cursor: pointer;

    border-radius: 30px;
    /* background:#f2f2f2; */
}    
#services4 .box img{
    height:280px;
    width: 380px;
    margin: auto;
    display: block;
    border-radius: 30px;
}



/*utlity class*/
.h-primary-center{
    font-size: 2.8rem;
    padding: 15px;
    text-align: center;
    font-family: 'Baloo Bhai',cursive;
    
}
.h-secondary{
    font-size: 2rem;
    padding: 5px;
    text-align:center;
}

.btn{
    padding: 6px 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: rgb(107, 102, 102);
    color: rgb(0, 0, 0);
    box-shadow: 2px 2px 5px grey;
    margin: 17px;
    font-size: 1.1rem;
    cursor: pointer;
}

/* .center{
    text-align: center;
} */
/*contact*/
#reservation
{
    position: relative;
}
#reservation::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.6;
    background: url('layot/photo/res.jpeg')center;
}

#reservation-box{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 35px;
}
#reservation-box form{
    width: 30%;
    
}
#reservation-box label{
    font-size: 1.3rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}
#reservation-box input{
width: 100%;
padding: 0.5rem;
border-radius: 10px;
font-size: 1.1rem;
}

footer{
    background-color: rgb(49, 45, 45);
    color: white;
    padding: 9px 20px;
    text-align: center;
}