*{
  margin: 0;
  padding:0;
  
}

#header-nav{
  background-color: rgb(247, 169, 36);
  width: 100%;
  height: 10%;
  display: flex;
  flex-direction: row; 
}
#logo{
  margin-top: 9px;
margin-left: 60px;
height: 180px;
width: 180px;
}
#nav-1{
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}
#nav-1i h3{
  color: rgb(1, 90, 1);
  margin-top: 7px ;
  font-size: 24px;
  width: 450px;
}
#nav-1ii{
  display: flex;
  flex-direction: row;
  margin-top:10px;
}
#nav-1ii h6{
  margin-top: 6px;
  font-size: 12px;
 text-align: center;
}
#nav-3{
  display: flex;
  flex-direction: row;
  margin-top: 27px;
  margin-left: 70px;
  gap: 15px;
  font-size: 24px;
}

.nav-3i{
   color: rgb(123, 2, 2);
   text-decoration: none;
}

.nav-3icon{
  display: flex;
  flex-direction: column;
}

.nav-3icon i{
  color: rgb(123, 2, 2);
  font-size: 30px;
  text-align: center;
}
#nav-4{
  display: flex;
  flex-direction: column;
  margin-right: 12px;
  margin-left: 50px;
  margin-top: 25px;
}
#nav-4 h1{
  color:  rgb(123, 2, 2);
  margin-bottom: 4px;
  width: 250px;
}
#nav-4 h6{
  color: rgb(1, 90, 1);
  font-size: 14px;
  margin-right: 75px;
  text-align: end;
}
.kk{
  width: 100%;
  height: 142vh;
  background-color:  rgb(123, 2, 2) !important;
}
.btn{
  display: flex;
  justify-content: center;
}
.btnn{
  background-color: rgb(247, 169, 36);
  border: 2px  solid rgb(255, 255, 255);
  display: flex;
  width: 450px;
  height: 56px;
  color: rgb(123, 2, 2) ;
  justify-content: center;
  font-size: 25px;
  padding: 15px 10px;
  margin-top: 20px;
  margin-bottom: 30px;
  border-radius: 3px ;
}
.img-responsive{
  height: 500px;
  width: 1160px;
  margin-top: 18px;
  margin-left: 45px;
  margin-right: 40px;
  border-radius: 3px;
  border: 1px solid black;
  box-shadow: 0px 0px 7px 1px  #343434;
}

.main{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
  margin-left: 55px;
  gap: 7px;
  margin-right:55px;
  
}
 .menu-photo1{
  position: relative;
  
}
 .menu-photo1 img{
  width: 100%;
  margin-top: 20px;
  margin-right: 10px;
  display: flex;
  text-align: center;
  justify-content: center;
  width: 360px;
  height: 250px; 
  border-radius: 3px;
  border: 1px solid black;
    box-shadow: 0px 0px 7px 1px  #000000;

 }
 .menu-text1{
  position: absolute;
  bottom: 0px;
  color: aliceblue;
  font-size: 20px;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 156px;
  border-radius: 2px;

 }

 .menu-photo2{
  position: relative;

  
 }
 .menu-photo2 img{
  width: 100%;
    box-shadow: 0px 0px 7px 1px  #070606;
  margin-top: 20px;
  width: 360px;
  height: 250px; 
  display: flex;
  text-align: center;
  justify-content: center;
 }
 .menu-text2{
  position: absolute;
  bottom: 0px;
  color: aliceblue;
  font-size: 20px;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 149.6px;
  border-radius: 1px;
 }
 .menu-photo3{
  position: relative;
 }
 .menu-photo3 img{
  display: flex;
  text-align: center;
  justify-content: center;
  box-shadow: 0px 0px 7px 1px  #000000;
  width: 100%;
  width: 360px;
  height: 250px; 
  margin-top: 20px; 
 }
 .menu-text3{
  position: absolute;
  bottom: 0px;
  color: aliceblue;
  font-size: 20px;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 161px;
  border-radius: 1px;
 }
 .kkk{
  background-color: rgb(36, 35, 35);
  color: rgb(225, 225, 225);
 }
footer{
  position: relative;
  height: 300px;
  width: 100%;
}
.footer_container{
background-color: #343434;
height: 300px;
display: flex;

}
.footer_content{
  display: flex;
flex-direction: row;
width: 100%;
gap: 10%;
margin-left: 80px;
margin-right: 80px;
margin-top: 25px;
}
.hours{
  font-size: 20px;
  width: 60%;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.hours h3{
line-height: 32px;
color: #ffffff;
margin-bottom: 10px;
}
.hours p{
 color: #ffffff;
 font-size: 17px;
 padding-top: 7px;
 padding-right: 7px;
 padding-bottom: 7px;
}
.service{
display: flex;
flex-direction: column;
line-height: 32px;
color: #ffffff;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.service a{
   color: #ffffff;
   display: flex;
   text-decoration: none;
   padding-top: 7px;
   padding-bottom: 5px;
}
.Social_Network{
display: flex;
flex-direction: column;
width:30%;
 line-height: 32px;
color: #ffffff;

}
.Social_Network i{
color: #ffffff;
 padding-right: 4px;
 padding-top: 7px;  
font-size: 32px;
}
.flex_icon{
display: block;
flex-direction: row;
}
.greeting h4{
   color: #ffffff;
   margin-top: 8px;
}
.greeting pre{
  color: #ffffff;
  margin-top: 18px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

@media (min-width:200px ) and (max-width: 768px)
{
  
  #logo , #nav-3 , #nav-4{
     display: none;
  }
  #header-nav{
    gap: 5px;

  }
  #header-nav{
  background-color: rgb(247, 169, 36);
  width: 100%;
  height:90px;
  flex-direction: row; 
  display: flex;
  justify-content: space-between;
 
}
  #nav-1i h3{
  color: rgb(1, 90, 1);
  margin-top: 4px ;
  font-size: 24px;
  width: 340px;
  margin-left: 20px;
}
#nav-1ii{
  margin-left: 18px;
  margin-top: 5px;
}
#nav-1ii h6{
  margin-top: 6px;
  font-size:10px;
 text-align: center;
}
.kk{
  width: 100%;
  height: 213vh;
  background-color:  rgb(123, 2, 2) !important;
}
.menu-items{
  display: none;
}
.menu-items.show{
  display: block;
  background-color:  rgb(123, 2, 2);
  border: 2px solid  rgb(207, 207, 207);
  box-shadow: 0px 0px 17px 2px rgb(0, 0, 0);
  border-radius: 7px;
  text-align: center;
}
.menu-items  span{
   display: block;
   flex-direction: column;
}
.menu-items  a{
  color: rgb(255, 255, 255);
  text-decoration: none;
}
.menu-items  i{
color: rgb(255, 255, 255);
font-size: 20px;
margin: 7px;
}
#sidebar{
  margin-top: 45px;

}
#sidebar #btn{
  height: 36px;
  width: 45px; 
  color:rgb(0, 0, 0) ;
  border-color: rgb(0, 0, 0);
  background-color: rgb(247, 169, 36);
}
 .img-responsive{
  height: 260px;
  width: 450px;
  margin-top: 7px;
  margin-left: 15px;
  margin-right: 10px;
 }
 .main{
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}
.footer_container{
background-color: #343434;
height: 850px;
display: flex;

}
footer{
  position: relative;
  width: 100%;
}
.footer_content{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #343434;
   
  }
}
@media screen and (min-width: 768px) {
 #sidebar ,.btn , #xs-deliver,.btnn{
  display: none;
 }
 nav{
  display: none;
 }
 .kk{
  width: 100%;
  height: 145vh;
  background-color:  rgb(123, 2, 2) !important;
}
#header-nav{
  background-color: rgb(255, 182, 10);
  width: 100%;
  height: 166px;
  display: flex;
  flex-direction: row;
    
}

}