*{
margin: 0;
padding: 0;
box-sizing: border-box;

}

/* navigation */

.nav-div{
display: flex;
height: 15vh;
width: 100%;

justify-content: space-around;
align-items: center;


}

ul{
display: flex;
list-style-type: none;
gap: 40px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
font-size: larger;
color: rgb(11, 15, 51);
}

img{
height: 60px;
width: 200px;
}


/* head */


.head{
display: flex;

height: 100vh;
width: 100%;
background-image: url(background.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment:fixed ;
position: relative;
justify-content: center;
align-items: center;
}

.div1{

    display: flex;
    flex-direction: column;
height: 20vh;
width: 100%;
color: white;
text-align: center;


}

.p1{
text-transform: uppercase;
font-size:large ;
letter-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;

}

h2{
font-size:70px;
letter-spacing: 3px;
/* font-family: 'Times New Roman'; */
}

.color-change{
color: rgb(255, 196, 0);

}
b{
   color: rgb(255, 196, 0); 
}

/* body */

.main{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
/* height: 100vh; */
/* border: solid; */
margin-top: 50px;

}


.div2 .welcome-bg{

height: 550px;
width: 550px;

}

.div3 h3{
font-size: 50px;
color: rgb(11, 15, 51);
}

.div3 p{
font-size: large;
color: rgb(109, 109, 109);
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 30px;
line-height: 25px;

}

.div3{
width: 500px;
margin-left: 60px;


}

button{
width: 220px;
height: 60px;
font-size: large;
font-weight: bold;
font-family:  'Arial Narrow', Arial;
color: rgb(31, 31, 31);
outline: none;
border: none;
background-color:rgb(255, 196, 0)  ;
transition: 1s ease-out;

}

/* button hover */

button:hover{
outline:0.5px solid rgb(255, 196, 0)  ;
background-color: white;

}

/* main-menu */



.main-menu{

    position: relative;

width: 100%;
height: 220vh;


}

.image{

width: 35%;
height: 150vh;
position: absolute;
right: 0px;

}

.mainp{
    position: absolute;
height: 30px;
width: 450px;
font-size: larger;
margin-top: 250px;
margin-left: 70px;
}

.mainp p{
font-size: large;
color: rgb(109, 109, 109);
font-family: Arial, Helvetica, sans-serif;
line-height: 25px;


}

.main-menu h3{
font-size: 50px;
color: rgb(11, 15, 51);


}

.food1{

    position: absolute;
left: 70px;
top: 450px;
height:550px; 
width: 350px;
border: solid rgb(255, 255, 255); 
display: flex;
flex-direction: column;
margin-top: 100px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-size: large;
color: rgb(109, 109, 109);
background-color: whitesmoke;
text-transform: capitalize;
}



 
 .food11{
padding: 20px;
box-sizing: border-box;

} 

.bold{
font-size: 25px;
font-weight: bolder;
line-height: 90px;
font-family: 'Times New Roman';
color: rgb(11, 15, 51);

}

/* food design hover */

.food1:hover {
background-color:rgb(255, 196, 0)  ;
transition: 1s ease-in;


}

.food2:hover {
background-color:rgb(255, 196, 0)  ;
transition: 1s ease-in;

}

.food3:hover {
background-color:rgb(255, 196, 0)  ;
transition: 1s ease-in;

}

.food4:hover {
background-color:rgb(255, 196, 0)  ;
transition: 1s ease-in;

}

.food5:hover {
background-color:rgb(255, 196, 0)  ;
transition: 1s ease-in;

}

.food6:hover {
background-color:rgb(255, 196, 0)  ;
transition: 1s ease-in;

}

.food{
width: 342px;
height: 330px;
}


.food2{
  position: absolute;
left: 490px;
top: 450px;
height:550px; 
width: 350px;
border: solid rgb(255, 255, 255); 
display: flex;
flex-direction: column;
margin-top: 100px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-size: large;
color: rgb(109, 109, 109);
background-color: whitesmoke;
text-transform: capitalize;

}

.food3{
  position: absolute;
left: 907px;
top: 450px;
height:550px; 
width: 350px;
border:  solid rgb(255, 255, 255); 
display: flex;
flex-direction: column;
margin-top: 100px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-size: large;
color: rgb(109, 109, 109);
background-color: whitesmoke;
text-transform: capitalize;

}

.food4{
  position: absolute;
left: 70px;
top: 1070px;
height:550px; 
width: 350px;
border:  solid rgb(255, 255, 255); 
display: flex;
flex-direction: column;
margin-top: 100px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-size: large;
color: rgb(109, 109, 109);
background-color: whitesmoke;
text-transform: capitalize;

}

.food5{
  position: absolute;
left: 490px;
top: 1070px;
height:550px; 
width: 350px;
border: solid rgb(255, 255, 255); 
display: flex;
flex-direction: column;
margin-top: 100px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-size: large;
color: rgb(109, 109, 109);
background-color: whitesmoke;
text-transform: capitalize;

}

.food6{
  position: absolute;
left: 907px;
top: 1070px;
height:550px; 
width: 350px;
border:  solid rgb(255, 255, 255); 
display: flex;
flex-direction: column;
margin-top: 100px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-size: large;
color: rgb(109, 109, 109);
background-color: whitesmoke;
text-transform: capitalize;

}


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

.img5{

width: 100%;
height: 70vh;
/* position: relative; */

}

.p3{
font-size:60px ;
font-weight: 900;
color: rgb(255, 255, 255);
}

.p4{
font-size:40px;
text-transform: capitalize;
color: rgb(255, 255, 255);
font-family: Arial, Helvetica, sans-serif;
margin-top:20px ;
margin-bottom:20px ;
}

.div4{
position: absolute;
text-align: center;
top: 200px;
left: 200px;
transform: translate(-50px -50px);
}

.p5{
font-size: 50px;
font-weight: 900;
color: rgb(11, 15, 51) ;


}

.p6{
font-size: large;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
color:  rgb(109, 109, 109);

}

.div5{
text-align: center;
margin-top: 150px;
line-height: 50px;
margin-bottom:200px ;

}

.div6{
display: flex;
justify-content: space-around;
width: 100%;
height: 70vh;

}

.text{
height: 50vh;
width: 400px;


}

.pic{
height: 50vh;
width: 470px;
background-image: url(image11.jpg);
background-position: center center;


}

.button1{
background-color: white;
outline: none;

}

.button1:hover{
color:rgb(255, 196, 0)  ;
outline: none;

}

i{
font-size: larger;

}

.p7{

font-size: 80px;
font-weight: 900;
color: rgb(11, 15, 51) ;

}

.pic2{
height: 50vh;
width: 470px;
background-image: url(image12.jpg);
background-position: center center;
}

.div7{
width: 100%;
height: 70vh;
background-image: url(image13.jpg);
background-repeat: no-repeat;
text-align: center;
padding-top: 250px;
box-sizing: border-box;
margin-bottom: 100px;

}

.heading3{
color: white;
}

.p1{
color: white;

}

.div8{
display: flex;
justify-content: space-around;
width: 100%;
height: 95vh;

}

.light2{
color: rgb(109, 109, 109) ;
font-size: large;
font-family: Arial, Helvetica, sans-serif;
padding: 10px 30px ;
box-sizing: border-box;
}

.bold2{
  margin-top: 20px;
font-size: 30px;
text-transform: capitalize;
color: rgb(11, 15, 51) ;
font-weight: 900;
padding: 10px 30px;
box-sizing: border-box;
}

.img6{
width: 400px;
height: 300px;


}

.first{

width: 400px;
height: 650px;
background-color: whitesmoke;

}

.button2{


outline: none;
padding: 10px 30px;
font-family: Arial, Helvetica, sans-serif;
color: rgb(11, 15, 51) ;
font-weight: bold;

}

.first:hover{
background-color: white;
box-shadow: 3px 3px 0.005px rgba(201, 201, 201, 0.315);
transition: 1s ease-in-out;


}

.div9{
width: 100%;
height: 80vh;
background-image: url(image17.jpg);
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
line-height: 50px;

}

.heading4{
font-size: 50px;
font-weight: 900;
color: white;

}

.p8{
color: rgba(255, 153, 0, 0.562);
font-size: large;
font-family: Arial, Helvetica, sans-serif;
}

.form{
width: 100%;
height: 100px;
margin-top: 50px;
padding: 20px;

}

input{
width: 170px;
height: 56px;
border: none;
outline: none;
border-radius: 5px;

}

.lastdiv{
width: 100%;
height: 70vh;
display: flex;
justify-content: space-around ;
align-items: center;
background-color: rgb(8, 3, 53);
padding-top:150px ;
box-sizing: border-box;

}

.lasttext{
height: 500px;
width: 300px;
}

.lastp{
font-size: large;
font-family: Arial, Helvetica, sans-serif;
color: gray;

}

.lastbold{
font-size: 50px;


}