html{scroll-behavior:smooth;}

.hero-bg{
background-size:cover;
background-position:center 40%;
background-repeat:no-repeat;
}

.fade{
opacity:0;
transform:translateY(40px);
transition:.8s;
}

.fade.show{
opacity:1;
transform:translateY(0);
}

.sideMenu{
position:fixed;
top:0;
left:0;
transform:translateX(-100%);
width:260px;
height:100%;
background:white;
box-shadow:0 0 25px rgba(0,0,0,.2);
transition:.35s;
z-index:999;
padding:25px;
}

.sideMenu.open{
transform:translateX(0);
}

.overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.4);
opacity:0;
pointer-events:none;
transition:.3s;
z-index:998;
}

.overlay.show{
opacity:1;
pointer-events:auto;
}

.menuLink{
position:relative;
}

.menuLink::after{
content:'';
position:absolute;
bottom:-4px;
left:0;
width:0;
height:2px;
background:#ef4444;
transition:.3s;
}

.menuLink:hover::after{
width:100%;
}

.mobileMenu{
position:fixed;
bottom:0;
left:0;
right:0;
background:white;
border-top:1px solid #eee;
display:flex;
justify-content:space-around;
padding:12px;
z-index:997;
}

@media(min-width:768px){
.mobileMenu{display:none;}
}

.dropdown{
opacity:0;
pointer-events:none;
transform:translateY(10px);
transition:.25s;
}

.dropdown.show{
opacity:1;
pointer-events:auto;
transform:translateY(0);
}

.submenu{
left:100%;
top:0;
opacity:0;
pointer-events:none;
transform:translateX(10px);
transition:.25s;
}

.group:hover .submenu{
opacity:1;
pointer-events:auto;
transform:translateX(0);
}

.mobileSubMenu{
max-height:0;
overflow:hidden;
opacity:0;
transition:max-height .35s ease, opacity .25s ease;
}

.mobileSubMenu.open{
max-height:300px;
opacity:1;
}

.mobileProductList{
max-height:0;
overflow:hidden;
opacity:0;
transition:max-height .35s ease, opacity .25s ease;
}

.mobileProductList.open{
max-height:500px;
opacity:1;
}

/* mobile bottom */

.mobileMenu{
position:fixed;
bottom:0;
left:0;
right:0;
background:white;
border-top:1px solid #eee;
display:flex;
justify-content:space-around;
padding:12px;
z-index:997;
}

@media(min-width:768px){
.mobileMenu{
display:none;
}
}

.fade {
  animation: fadeUp 0.8s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}