@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500&display=swap');

body{margin: 0; padding: 0; background: #E2DFD7; color: #fff; font-family: "Inter", Arial, sans-serif; text-align: center; position: relative; z-index: 0;}
a {cursor: pointer;}
.mobile {display: none;}

@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}
@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@keyframes hideName {0% {opacity: 1;} 100% {opacity: 0;}}
@keyframes moveName {0% {bottom: 0;} 100% {bottom: 40%;}}
@keyframes showName {0% {opacity: 0;} 100% {opacity: 1; }}

@keyframes full {
    0% {opacity: 1; bottom:0px;}
    25% {opacity: 0; bottom:0px;}
    50% {opacity: 0; bottom:40%;}
    100% {opacity: 1; bottom:40%;}
}

header {position: absolute; top: 0; left: 0; width: 100%; z-index: 5; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 100%);}
header .empty {width: 40px;}
header .container {padding: 15px; display: flex; justify-content: space-between; position: relative;}
header .logo {padding-top: 7px;}
header .logo svg {height: 32px; width: auto;}
header .whatsapp {display: block; width: 40px; padding: 10px; box-sizing: border-box;}

.intro {height: 450px; overflow: hidden; position: relative; z-index: 1; background: rgba(160,158,153,0.9);}
.intro .deg {animation: fade-in 1.2s ease-in .1s both; position: absolute; bottom: 0; left: 0; width: 100%; height: 70%; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);}
.intro .cover {object-fit: cover; width: 100%;}
.intro h1 {animation: fade-in .9s ease-in .1s both; font-size: 42px; font-weight: 200;  transition: ease .2s; position: absolute; bottom: 50%; transform: translateY(50%); left: 0; width: 100%; text-align: center; color: #fff; margin: 0px;}

.options {margin-top: -90px; z-index: 2;}
.options .container {padding: 0px 15px; max-width: 1200px; margin: auto;}
/*.categories {display: flex; gap: 12px;}*/
h2 {font-size: 16px; font-weight: 400; color: #fff; margin-bottom: 20px; position: relative; z-index: 1; animation: fade-in 1s ease-in 1.7s both;}
.categories {animation: fade-in-bottom .8s ease-in 1s both;}
.product-cat {border-radius: 6px; overflow: hidden; position: relative; background: rgba(160,158,153,0.9);}
.product-cat .deg {transition: all ease-in-out .3s; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: rgb(160,158,153); background: linear-gradient(0deg, rgba(160,158,153,0.9) 0%, rgba(0,0,0,0) 100%);}
.product-cat .name {transition: all 1s; font-weight: 500; box-sizing: border-box; position: absolute; bottom:0px; left: 0; font-size: 16px; padding: 17px 5px; z-index: 2; width: 100%; text-align: center; color: #fff; margin: 0px;}
.product-cat .over {position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; opacity: 0; background: rgba(160,158,153, .9);}
.product-cat figure {margin: 0px; padding: 0px;}

.product-cat figure img {z-index: -1; display: block; width: 100%;  max-width: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;}
.product-cat:hover figure img { z-index: 1; -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);}

.product-cat:hover .deg {opacity: 0;}
.product-cat:hover .over {opacity: 1;}
.product-cat:hover .name {animation: full 0.5s ease-in-out;  animation-fill-mode: forwards;}

footer {display: flex; justify-content: space-between; padding: 15px; border-top: 1px solid rgba(0,0,0,.1); margin-top: 40px;}
footer .copy {color: rgba(0, 0, 0, .3); font-size: 12px;}
footer .logo-zurbrand g {fill: rgba(0, 0, 0, .3);}

#menu-toggle {cursor: pointer; display: block; padding: 20px; height: 17px;width: 26px;position: absolute;top: 5px;left: 5px; display: flex;flex-direction: column;justify-content: space-between;}
#menu-toggle .line {display: block;height: 2px;width: 100%;background: #fff;}

#menu {position: fixed; margin: 0px; color: #000;
top: 0;
left: -350px; z-index: 20;
width: 350px;
height: 100%;
padding: 10px 30px; padding-top: 70px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
transition: all 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
text-align: center;
background: rgba(255, 255, 255, .9); -webkit-font-smoothing: antialiased;}
#menu ul {margin: 0px; padding: 0px; list-style-type: none;}
#menu li {padding: 10px 0; font-size: 19px;}
#menu a {text-decoration: none; color: #232323;transition: color 0.3s ease;}
#menu a:hover {color: #000;}
#menu #menu-btnclose {position: absolute; right: 15px; top: 15px; padding: 5px; display: block; cursor: pointer;}

body.menu-open #menu {left: 0;}

#menu-overlay {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0; 
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease; 
}
.menu-open #menu-overlay {opacity: 1; visibility: visible;}

@media screen and (max-width: 767px) {

.desktop {display: none;}
.mobile {display: inherit;}

header .container {padding-top: 20px;}
header .logo {padding-top: 0px;}
header .logo svg {height: 34px;}
header .whatsapp svg {height: 24px;}

#menu-toggle {left: 0px; top: 12px;}

.intro .deg {height: 80%;}
.intro h1 {line-height: 1.05em;}
.intro h1 span {display: block;}

.options .container {padding: 0px; position: relative;}

.swiper-categories {position: relative;}
.options .container .swiper-pagination {position: absolute; bottom: -30px; animation: fade-in 1.2s ease-in 1.8s both; z-index: 1;}
.options .container .swiper-pagination-bullet-active {background-color: rgba(0, 0, 0, .7);}

}