html,body{
    width: 100vw;
    height: 100vh;
    margin: 0%;
}
header{
    width: 100%;     /*width of header */
    display: flex;  /* used to all content diretion change */
    justify-content: space-between; /* content are right side*/
    position: fixed; /* position are fixed*/
    top: 0;
    background-color: white;
    margin: 0px 0px 10px 0px ;/* outside of content */
    z-index: 1;
    
    
}
.menus{
    list-style-type: none; /* remove disc or any formate*/
    display: flex; /* vertical to horzontal*/
    padding-top: 10px; /*inside of content*/
    padding-bottom: 20px;
}
.menus li a{
    text-decoration: none; /* remove to underline and all types of decoration*/
    color: black; /* change the color */
    padding: 10px; /* inside of content */
}
.menus li:first-child a {      /* Content chya first linevae seprate hover use karnya sathi*/
    background-color:#deb887; /* background color of the hover*/
    color: white;
    margin-right: 5px;
}
.menus li a:hover{
    background-color:#deb887;/* seprate hover saglua varti use*/
    color: white;
}
main{
    height: 100%;
    width: 100%;
}
.banner{
    margin-top: 6%;
    width: 100%;
    height: 70%;
    background-image: linear-gradient(0deg, rgba(1, 1, 1, 0.3), rgba(1, 1, 1, 0.6)), url('Bg_2.jpg');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#border{
    border: 2px solid #deb887;
    border-radius: 3px;
}
.text-white {
    color: white;
    text-align: center;
}
.intro {
    width: 100%;
    height: 65%;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
margin-top: -17px;
  

}
.intro-article{
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.intro-article p{
    width: 70%;
    margin: 5px;
}

.text-orange {
    color: rgb(213, 170, 116);
}
.intro img {
    box-shadow: -10px -10px rgb(213, 170, 116);
}
body{
    width: 99%;
    margin: 0%;
    height: 100%;
    background-image: url('Bg_5.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.quote{
    height: 100px;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 20px;
}

#Special{
    text-align: center;
   padding-top: 10px;
}
.special-menu{
    height: 40%;
    width: 100%;
    background-color: white;
    align-items: center;
    display: flex;
    justify-content: center;
   flex-direction: column; 
    padding: 10px; 
    
   
}
.menu-border{
    border: 1px solid black;
    margin: 10px;
    padding: 0px 50px 10px 40px;
}

.menu-border li a{
    text-decoration: none; /* remove to underline and all types of decoration*/
    color: black; /* change the color */
    padding: 10px; /* inside of content */
}
.menu-border li:first-child a {      /* Content chya first linevae seprate hover use karnya sathi*/
    background-color:#deb887; /* background color of the hover*/
    color: white;
    margin-right: 5px;
}
.menu-border li a:hover{
    background-color:#deb887;/* seprate hover saglua varti use*/
    color: white;
}
.Menu-items{
    width: 70%;
    height: 150%;
    margin: auto;
    background-color:white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* margin-top: 10px; */
}
.Menu-items div {
    width: 250px;
    height: 250px;
    margin: 20px;
}
#one{
    background-image: linear-gradient(0deg, rgba(204, 156, 92, 0.7),
     rgba(204, 156, 92, 0.9)), url(Drinks_1.jpg);
    background-size:300px 300px;
    background-repeat: no-repeat;
}
#two{
    background-image: linear-gradient(0deg, rgba(204, 156, 92, 0.7),
     rgba(204, 156, 92, 0.9)), url(Drinks_2.jpg);
    background-size:300px 300px;
    background-repeat: no-repeat;
}
#three{
    background-image: linear-gradient(0deg, rgba(204, 156, 92, 0.7),
     rgba(204, 156, 92, 0.9)), url(Drinks_3.jpg);
    background-size:300px 300px;
    background-repeat: no-repeat;
}
#four{
    background-image: linear-gradient(0deg, rgba(204, 156, 92, 0.7),
     rgba(204, 156, 92, 0.9)), url(Lunch_1.jpg);
    background-size:300px 300px;
    background-repeat: no-repeat;
}
#five{
    background-image: linear-gradient(0deg, rgba(204, 156, 92, 0.7),
     rgba(204, 156, 92, 0.9)), url(Lunch_2.jpg);
    background-size:300px 300px;
    background-repeat: no-repeat;
}
#six{
    background-image: linear-gradient(0deg, rgba(204, 156, 92, 0.7),
     rgba(204, 156, 92, 0.9)), url(Lunch_3\ \(1\).jpg);
    background-size:300px 300px;
    background-repeat: no-repeat;
}
#seven{
    background-image: linear-gradient(0deg, rgba(204, 156, 92, 0.7),
     rgba(204, 156, 92, 0.9)), url(Dinner_1.jpg);
    background-size:300px 300px;
    background-repeat: no-repeat;
}
#eight{
    background-image: linear-gradient(0deg, rgba(204, 156, 92, 0.7),
     rgba(204, 156, 92, 0.9)), url(Dinner_2.jpg);
    background-size:300px 300px;
    background-repeat: no-repeat;
}
#nine{
    background-image: linear-gradient(0deg, rgba(204, 156, 92, 0.7),
     rgba(204, 156, 92, 0.9)), url(Dinner_3.jpg);
    background-size:300px 300px;
    background-repeat: no-repeat;
}
.Menu-items p{
    text-align: center;
    color: white;
    text-shadow: 1px 1px black;
}
.Menu-items h1{
color: white;
text-shadow: 1px 1px black;
}
.Menu-items h2{
    text-align: center;
    color: white;
    text-shadow: 1px 1px black;
}
.gallery{
    height: 20%;
    width: 100%;
    background-color:white;
    padding: 10px;   
}
#gallery-1{
    text-align: center;
    margin: 20px 0px 20px 0px;
    padding-top: 20px;
}
.gallery p{
    font-size: 20px;   
}
.gallery-img {
    width: 75%;
    height: 150%;
    margin: auto;
    background-color:white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px;
}

.gallery-img div{
    width: 270px;
    height: 270px;
    margin: 25px;
    transition: 0.5s linear;
    box-shadow: 8px 8px 3px  #deb887;
   
}
#one-g{
    background-image: url(Gallery_1.jpg);
    background-repeat: no-repeat;
    background-size:300px 300px;
}
#two-g{
    background-image: url(Gallery_2.jpg);
    background-repeat: no-repeat;
    background-size:300px 300px;
}
#three-g{
    background-image: url(Gallery_3.jpg);
    background-repeat: no-repeat;
    background-size:300px 300px;
}
#four-g{
    background-image: url(Gallery_4.jpg);
    background-repeat: no-repeat;
    background-size:300px 300px;
}
#five-g{
    background-image: url(Gallery_5.jpg);
    background-repeat: no-repeat;
    background-size:300px 300px;
}
#six-g{
    background-image: url(Gallery_6.jpg);
    background-repeat: no-repeat;
    background-size:300px 300px;
}
.gallery-img div:hover{
    transform: scale(1.1);
}
.Customer{
    height: 20%;
    width: 100%;
    background-color:white;
    padding: 10px;   
}
#Customer-1{
    text-align: center;
    margin: 20px 0px 20px 0px;
    padding-top: 20px;
    font-size: 30px;
}
.photo{
    height: 50%;
    width: 100%;
    background-color:white;
}
.photo img{
    border-radius: 50%;
    height: 150px;
    width: 150px;
    margin: auto;
    display: block;
}
.photo h1{
    text-align: center;
    color: #deb887;
}
#para{
    text-align: center;
    width: 100%;
    font-size: 15px;
}

.contact {
    width: 100%;
    height: 15%;
    background-color: #deb887;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

.contact div {
    width: 250px;
    height: 70px;
    display: flex;
    align-items: center;
    color: white; 
}
.about{
    height: 50%;
    width: 100%;
    background-color:rgb(39, 38, 38);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    box-sizing: border-box;

}
.about div{
    
    height:90%;
    width: 22%;
    margin: 10px;
    background-color: rgb(39, 38, 38);
    color: white;
    line-height: 30px;
    
}
#a-one{
    padding-left: 10px;
    margin-left: 30px;
    line-height: 20px;
}
footer{
    height: 15%;
    width: 100%;
    text-align: center;
  background-color:black;
  color: white;
}
footer p{
    margin-top:0px;
    padding: 40px;
}