body{
 
  margin:0;
  font-family: "Raleway" , cursive;
   overflow-x:hidden;
   max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

p{
padding: 10px 20px;
}



*{
  box-sizing:border-box;
    margin:auto;
   color:black;
  
}

  @keyframes textanime{
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }

html {
padding:1px;
overflow-x:hidden;
min-height:100%;
line-height:1.5;
font-size:0.9rem;
background-size:cover;
background-repeat: no-repeat;
font-size:20px;
}

.top-logo{
  top: -40px;
  left:-15px;
  position:absolute;
  width:300px;
  height:auto;
  margin-left:11px;
  }

  
header{ 
width:100%;
height:200px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
margin-top:-31px;
margin-bottom:20px;
background:#c49a6a;
}

header p{
color:white;   
padding-left:10px;
padding-top:5px;
text-align:center;
}

footer{
height:auto;
width:100%;   
padding:0px;
background-color:#e9dacb;
clear:both;
margin:0;
color:white;
}

footer li{
list-style:none;
color:white;
}

footer ul{
width:500px;
height:500px;
background:black;
color:white;
padding:20px;
padding-top:50px;
}

.clients {
background:#c49a6a;
height:auto;
width:100%;   
padding:0px;
background-repeat:no-repeat;
background-size: cover;
clear:both;
margin:0;  
margin-top:100px;
}

.footer-logo{
width:300px;
height:auto;  
margin-left:900px;
}

h1{
text-align:center;  
font-size:50px;
}
table{
text-align:justify;   
margin-left:900px;
font-size:25px;
}

th, td{
color:black;
}    

footer p{
color:black;  
text-align:right;
font-size:15px;  
padding-right:5px;
}


.container{
width:100%;
height:auto;
margin-top:180px;
margin-bottom:180px;
}


.menulist{
display:flex;
font-weight:900;
padding-top:60px;
margin-left:400px;
}

.menulist a{
text-decoration: none;    
font-size:20px;    
padding:2px;
gap:40px;
margin:0;
padding:0;
color:white;
transition:1s;
margin-top:500px;
}

.menulist a:hover{
border-bottom:1px white solid;  
color:#edde7b
}

.menulist li{
list-style: none; 
gap:0;margin:0;
padding:10px;
margin-top:50px;
}


.hamburger{
  width:40px;
  height:25px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right:20px;
top:1000px;
z-index: 100;
cursor: pointer;
}


.hamburger span{
position: absolute;
width: 100%;
height: 2px;
background-color: black;

}
.hamburger span:first-of-type{/* humburger menu 1st border */
top: 0;
}
.hamburger span:nth-of-type(2){/* second border */
top: 50%;
transform: translateY(-50%);
}
.hamburger span:last-of-type{/* third border */
top: auto;
bottom:0;
}


.slide-menu{

width: 100%;
height:auto;
right:0;
top:65px;
color:black;
transform: translateX(100%); 
transition: .5s;
display:block;
position:relative;
z-index:800;
background-size:cover;
background-repeat:no-repeat;
background:black;
}



.slide-menu li{
color:black;
line-height: 300%;
text-align:justify;
font-weight:bold;
padding-left:10px;
list-style:none;
}

.slide-menu a{
  font-size:30px;
color:black;
text-decoration:none;
color:white;
}

.slider-menu a:hover{
color:  #e29676; 
}

.slide-menu.active{
transform: translateX(0); 


}


#slider{
width:100%;
height:100vh; 
margin-bottom:0px;
top:0;
z-index:200;
margin-top:-570px;
opacity:90%;
}

.intro{
margin-left:400px;  
font-size:60px;
z-index:300;
position:relative;
color:white;
margin-top:200px;
font-weight: 900;
}

.introp{
font-size:20px;  
z-index:300;
color:white;
position:relative;
margin-top:50px;
margin-left:380px;
}

.learn{
width:200px;
height:50px;
color:white;
background:black;
border: black 2px dotted; 
border-radius:50px;
z-index:300;
position:relative;
padding:10px;
padding-left:40px;
padding-top:8px;
font-weight:900;
margin-top:70px;

}

.menubtn{
width:250px;
height:50px;
color:white;
font-size:17px;
background:#ea5549;
border:#ea5549 2px dotted; 
border-radius:80px;
z-index:300;
position:relative;
padding:11px;
padding-left:19px;
right:10px;
margin-top:70px;
left:-800px;
margin-bottom:100px;
top:300px;
z-index:1;
position:relative;
}

.back-to-top {

  position: fixed;
  right: 20px;
  bottom: 20px;
  height: 50px;
  text-decoration: none;
  font-size: 100%;
  line-height: 1.5rem;
  padding: 0 0 0 35px;
  transform:rotate(90deg);
  border-top: solid 1px;
  z-index:200;
}
  
.back-to-top::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0px;
  width: 15px;
  border-top: solid 1px;
  transform:rotate(60deg);
  transform-origin: left top;
  }
  
    
  @media screen and (max-width: 478px) {
 .back-to-top{
  font-size:20px;   
 }}

.offer{
margin-top:30px;
margin-bottom:30px;
text-align:center;
}

figure.snip1139 {
position: relative;
overflow: hidden;
margin: 10px;
min-width: 520px;
max-width: 510px;
width: 100%;
color: #333;
text-align: left;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
border:black solid 2px;
border-radius: 8px;
margin-left:500px;
}
figure.snip1139 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: all 0.35s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
figure.snip1139 img {
max-width: 100%;
vertical-align: middle;
}
figure.snip1139 blockquote {
position: relative;
background-color: white;
padding: 25px 50px 25px 50px;
font-size: 0.8em;
font-weight: 500;
text-align: left;
margin: 0;
line-height: 1.6em;
font-style: italic;
}
figure.snip1139 blockquote:before,
figure.snip1139 blockquote:after {
font-family: 'FontAwesome';
content: "\201D";
position: absolute;
font-size: 50px;
font-style: normal;
color:#ea5549;
}
figure.snip1139 blockquote:before {
top: 25px;
left: 20px;
}
figure.snip1139 blockquote:after {
content: "\201D";
right: 20px;
bottom: 0;
color:#ea5549;
}
figure.snip1139 .arrow {
top: 100%;
width: 0;
height: 0;
border-left: 0 solid transparent;
border-right: 25px solid transparent;
border-top: 25px solid #ffffff;
margin: 0;
position: absolute;
}
figure.snip1139 .author {
position: absolute;
bottom: 0;
width: 100%;
padding: 5px 25px;
color: black;
background-color: #ffffff;
margin: 0;
text-transform: uppercase;
}
figure.snip1139 .author h5 {
opacity: 0.8;
margin: 0;
font-weight: 800;
}
figure.snip1139 .author h5 span {
font-weight: 400;
text-transform: none;
padding-left: 5px;
}

.clients{
width:100%;
height:auto;
display:flex;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
padding-bottom:-200px;
}

.clients h1{
color:white; 
margin-right:400px;
padding:30px;
margin-bottom:100px;
margin-top:100px;
}

.foodie{
display:flex;
gap:8px;
}  

.foodie h1{
margin-bottom:200px;  
}
.foodie img{
width:300px;
height:300px;
background-repeat: no-repeat;
background-size:cover;
border-radius:10px;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}


.foodie {
position: relative;
display: flex;
}

.ourstory{
position: relative;  
z-index: 0;
overflow: hidden;
margin-bottom:100px;
}

.ourstory img{
width:500px;
height:500px;
margin-left:450px;  
margin-top:50px;
margin-bottom:100px;
border-radius:500px;
box-shadow:0 0 5px rgba(0, 0, 0, 0.15);
}





.storeinfo{ background: -webkit-linear-gradient(left, #cfffe2 40%, transparent 60%);
 background: -moz-linear-gradient(left, rgb(230, 255, 207) 40%, transparent 60%); 
 background: linear-gradient(left, rgb(234, 255, 207) 40%, transparent 60%);
  background-repeat: no-repeat;
   background-size: 200% .8em; 
   background-position: 100% .5em; 
   transition: 2s;
}


   .storeinfo.is-active{ background-position: 0% .5em; }


.foodie img:hover{
opacity:50%;  
transition: 1s;

}
.foodie li{
list-style: none;  
display:flex;
text-align:justify;
}

.foodie ul{
display:flex;  
gap:15px;
margin-bottom:100px;
}  

.colorchange{
color:black;
transition:2s;
}

.colorchange.is-active{
color:#7b5544;
}

.headercus{
margin-top:100px;
margin-bottom:100px;
color:white;
font-size:40px;
}  

.headercus span{
color:black;
padding:5px;  
}

.cusbg{
background-image:url(downloads/sznnspice.png);
background-repeat: no-repeat;
background-size:contain;
}