/* CSS Reset */
* {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}
.role{
  max-width: 280px;
  margin-bottom:-300px;
  margin-top: -150px;
  position: relative;
  z-index: 1;
  float: left;
}
.role1{
  max-width: 280px;
  margin-bottom:-300px;
  margin-top: -150px;
  position: relative;
  z-index: 1;
  float: right;
}
#navbar {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0px;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
}

#navbar::before {
  content: "";
  background-color: black;
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  top: 0;
  left: 0;
}

/* navigation bar logo and image */


#logo {
  margin: 10px;
}
#logo img {
  height: 50px;
  margin: 2px 3px;
}
#logo img:hover {
  cursor: pointer;
  opacity: 0.8;
}

/* navigation bar list styling */

#navbar ul {
  display: flex;
}
#navbar ul li {
  list-style: none;
  font-size: 1.4rem;
}
#navbar ul li a {
  color: white;
  display: block;
  text-decoration: none;
  padding: 12px 34px;
  border-radius: 20px;
}
#navbar ul li a:hover {
  color: black;
  background-color: white;
}

.contain
{
  display: flex;
  justify-content: center;
  align-items: center;
  font-family:  "Nunito";
}
.contain a
{
  text-decoration: none;
  color: white;
}

.container:hover,
.container1:hover
{
  background-image: linear-gradient(to top, #ff2908 0%, #ed400b 100%);
  transition: 0.2s;

}


.container {
  padding: 8px 20px;
  background-color: black;
  margin: 17px;
  margin-top: 42px;
list-style: none;
  font-size: 1.4rem;
  border-radius: 4px;
}



.container1 {
  padding: 8px 20px;
  background-color: black;
  margin: 17px;
  margin-top: 42px;
  list-style: none;
  border-radius: 4px;
  font-size: 1.4rem;
}

/* home section */

#home {
  display: flex;
  flex-direction: column;
  padding: 3px 200px;
  height: 550px;
  justify-content: center;
  align-items: center;
}

#home::before {
  content: "";
  background: url("../food.jpg") no-repeat center center/cover;
  z-index: -1;
  opacity: 0.89;
  position: absolute;
  top: 0px;
  left: 0px;
  height: 642px;
  width: 100%;
}

#home h1 {
  color: white;
  text-align: center;
}

#home p {
  color: white;
  text-align: center;
  font-size: 1.3rem;
}
.btn {
  padding: 6px 20px;
  border: 2px solid white;
  background-color: brown;
  color: white;
  margin: 17px;
  margin-top: 22px;
opacity: 0.7;
  font-size: 1.4rem;
  border-radius: 10px;
}
.btn:hover
{
  cursor: pointer;
  opacity: 1.6;
  

}


/* concept section */

.concept

{
    display: flex;
    justify-content: center;
    text-align: center;
    background: url("../sushireal.webp");
    height: 750px;


}
.concept1
{
    
    width: 750px;
    height: 470px;
    margin-top: 125px; 
    margin-right:  91px;
    background-color: rgba(243, 239, 239, 0.5);
    

}
.concept h2
{
    font-family: futura-lt-w01-book,sans-serif;
    font-size: 4.3rem;
}

.concept p
{
    text-align: center;
    font-size: 2.3em;
}

/* Menu Section */

#menu-container
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 680px;

}
#menu-container::before
{
  content: '';
  background: url("../menu.webp") no-repeat center center/cover;
  position: absolute;
  width: 100%;
  height: 681px;
  z-index: -1;
  
}

#menu-container h1
{
    font-size: 5.6rem;
    font-family: 'bree-serif',Arial, Helvetica, sans-serif;
    
    
}

#menu {
  display: flex;
  justify-content: center;
  text-align: center;
  
}

#menu .box {
  margin: 10px;
  padding: 12px;
  border-radius: 23px;
  width: 400px;
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%); 
}

.more
{
  display: flex;
align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  top: 32px;
  
}

#option1
{
  background-color: cyan;
  border-radius: 4px;
  color: #fff;
  background: #4154f1;
  box-shadow: 0px 5px 25px rgb(65 84 241 / 40%);
  width: 300px;
  height: 65px;
  padding-top: 22px;
  font-size: 1.3rem;
  font-weight: bold;
  font-family:  "Nunito", sans-serif;
  border-radius: 10px;

  
}
#option1:hover
{
  cursor: pointer;
  opacity: 0.9;
  transition: 0.3s;
}

#menu .box img {
  height: 160px;
  display: block;
  margin: auto;


}
.box-img
{
color: black;
text-decoration: none;
}
#menu .box img:hover
{
  opacity: 0.8;
  cursor: pointer;
  transition: 0.4s;

}
#box3 img {
  width: 256px;
}

#box h1 {
  font-size: 1.9rem;
}

#menu p {
  text-align: center;
}

/* Client Section */

#clients
{
  position: relative;
}
#clients h1
{
  font-size: 5.3rem;
  margin-left: 42px;
}
#clients::before
{
  content: '';
  background: url('../clients.jpg') no-repeat center center/cover;
  position: absolute;
  width: 100%;
  height:104%;
  z-index: -1;
  opacity: 0.75;
}
#clients-container
{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 24px;

}

#clients img
{
  height: 150px;
  margin: 0px 42px;
  margin-bottom: 82px;

}
#clients img:hover
{
  opacity: 0.8;
  cursor: pointer;
  transition: 0.4s;

}

/* Order Section */

#order
{
  height: 700px;
  background-color: black;
color: white;
}
#order1
{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 42px;
}

.take
{
  display: flex;
align-items: center;
  justify-content: center;
  text-align: center;
}
#option
{
  background: #4154f1;
  box-shadow: 0px 5px 25px rgb( 256 256 256 / 30%);
  width: 300px;
  height: 65px;
  padding-top: 22px;
  font-size: 1.3rem;
  font-weight: bold;
  font-family: sans-serif;
  border-radius: 10px;
  
}

#option:hover
{
  cursor: pointer;
  opacity: 0.9;
  transition: 0.3s;
}

#order h1
{
  font-family: futura-lt-w01-book,sans-serif;
  font-size: 3.3rem;
  padding-top: 52px;
}
#order h2
{
  margin-top: 44px;
  font-family: futura-lt-w01-book,sans-serif;
  font-size: 2.3rem;
}

#order img
{
  height: 250px;
width:400px;
padding: 12px;
cursor: pointer;

}
#order img:hover
{
  
cursor: pointer;
opacity: 0.6;
transition: 0.4s;


}

#eatsure
{
  width: 250px;
  height: 200px;
}

/* Contact Section */

#contact
{
  position: relative;
  height: 750px;
}

#contact::before
{
  content: ' ';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.7;
  background: url("../contact.jpg") no-repeat center center/cover;
}
#contact-box
{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 24px;
}

#contact-box form
{
  width: 40%;
 
}
#contact-box label
{
  font-size: 1.3rem;
  
}

#contact-box input,
#contact-box textarea
{
  width: 100%;
  padding: 0.5rem 0rem;
  margin: 10px;
  border-radius: 5px;
  font-size: 1.1rem;
  border: 1px solid black;
  

}
#field
{
  box-sizing: border-box;
  padding: 10px 30px;
  margin: 22px;
  background: #E0EAFC;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #CFDEF3, #E0EAFC);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #CFDEF3, #E0EAFC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  

}

#legend
{
  font-size: 1.5rem;
  font-weight: bold;
}


/* footer section */
footer
{
 display: flex;
 justify-content: center;
 align-items: center;
 color: white;
 font-size: 1.3rem;
 font-weight: bold;
   
  
}
footer::before
{
  content: ' ';
  background: url("https://static.wixstatic.com/media/90e93e_b77662fbdfb04017bffec8f8ed073784~mv2.jpg/v1/fill/w_1899,h_99,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/90e93e_b77662fbdfb04017bffec8f8ed073784~mv2.jpg");
  width: 100%;
  height: 10%;
  z-index: -1;
  position: absolute;

}
/* Utility classes */

.h-primary {
  font-size: 2.9rem;
  padding: 12px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.h-secondary {
  font-size: 1.9rem;
  padding: 12px;
  font-family: "Times New Roman", Times, serif;
}
.center {
  text-align: center;
}


@media (min-width: 0px) and (max-width: 600px) {
  /* Navigation Section */
#navbar
{
    flex-direction: column;
   
}
#navbar ul li a
{
    font-size: 1rem;
    padding: 12px 17px;
}

/* Home section */
#home
{
    height: 385px;
    padding: 2px 85px;
}
#home p
{
    text-align: justify;
    margin-top: 7px;
}
#home h1
{
    /* margin-bottom: 1em; */
    font-size: 1.8rem;
    padding: 10px;
    margin-top: 22px;
}
.contain
{
    /* position: relative;
    bottom: 3.5em; */
    padding: 2px 10px ;
    font-size: 3rem;
}
.container
{
    position: relative;
    bottom:  32px;
}
.container1
{
    position: relative;
    bottom:  32px;
}




#home p
{
    font-size: 0.9rem;
    /* height: 50px;
    position: relative;
    bottom: 2em;
    width: 100%; */
    

}
.btn
{
    font-size: 1.2rem;
    /* position: relative;
    margin-bottom: 2.5em; */
    padding: px 8px;
}
#home::before
{
    height: 530px;
}

/* Concept section */

.concept {
  margin-top: 21px;
  height: 470px;
}
.concept p
{
   font-size: 1.3rem;
   text-align: center;
}
.concept1
{
    /* width: 750px;
    height: 345px;
    margin-top: 28%;
    margin-left: 13%; */
    width: 391px;
    height: 292px;
    margin-top: 100px;
   margin-right: 0px;
 
    
}
.concept h2
{
   
    font-size: 2.3rem;
    /* margin-top: -44px; */
    
}
/* Menu section */

#menu
{
flex-direction: column;
height: 818px;

}

#menu-container
{
height: 1140px;
}
#menu-container::before
{
   
height: 1140px;
}


#menu .box
{
    width: 312px;
    height: 30%;
  padding: 5px;
}
#menu .box img
{
  height: 40%;
}
#box3 img {
    width: 55%;
}


/* Clients Section */
#clients-container
{
    /* overflow: hidden; */
    flex-wrap: wrap;
}

#clients h1
{
    font-size: 3.3rem;
}
#clients img{
    width: 81px;
    padding: 6px;
    height: auto;
}
#oplus
{
    background-color: white;
}
/* order section */
#order1
{
    flex-wrap: wrap;
}
#order h1
{
    font-size: 2.3rem;
}
#order h2
{
    font-size: 1.8rem;
}
#order img
{
    height: 110px;
    width: 100%;
}

#option
{
    width: 50%;
}
/* Contact Us section */
#contact-box form
{
    width: 80%;
}
/* #field
{
    width: 345px;
    margin: 0px;
    margin-right: 12px;

    
} */
/* Footer section */

}