html, body{
overflow-x:hidden;
}
  /* ===== HERO ANIMATIONS ===== */

.hero-left,
.hero-right{
opacity:0;
transition:all .9s cubic-bezier(.22,.61,.36,1);
will-change:transform,opacity;
}

.hero-left{
transform:translateX(-500px);
}

.hero-right{
transform:translateX(500px);
}

.hero-show{
opacity:1;
transform:translateX(0);
}

 /* ===== Paralax ===== */

.hero{
    position:relative;
    height:60vh;

    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    text-align:center;
    overflow:hidden; /* important */
    z-index:1;
}

.p-display{
position:relative;
z-index:2;
margin-top:-1px;
background:#fff;
}
/* overlay like premium sites */
.hero::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.45);
}

.hero-content{
max-width:900px;
width:100%;
margin:auto;
padding:0 20px;
text-align:center;
position:relative;
z-index:3;
}
.hero-content h1{
white-space:normal;
word-break:keep-all;
overflow-wrap:break-word;
    font-size:60px;
    font-weight:700;
}



/* ===== SECOND PARALLAX ===== */

.parallax-bottom{
position:relative;
height:70vh;
  background:#000;

background-size:cover;
background-position:center;
background-attachment:fixed;
display:flex;
align-items:center;
justify-content:center;
color:white;
text-align:center;
}

.parallax-bottom::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:150%;
background:rgba(0,0,0,0.45);
}

/* inverted divider */

.divider-inverted{
position:absolute;
top:-40px;
left:0;
width:100%;
line-height:0;
}

.divider-inverted svg{
width:100%;
height:140px;
display:block;
}

.divider-inverted polygon{
fill:#ffffff;
}

.hero-sub{
font-size:18px;
line-height:26px;
max-width:600px;
margin:auto;
}

/* SVG divider */
.section-divider{
position:absolute;
bottom:-25px;
left:0;
width:100%;
max-width:100%;
overflow:hidden;
line-height:0;
z-index:5;

}

.section-divider svg{
width:100%;
max-width:100%;
height:140px;
display:block;
}

.section-divider polygon{
    fill: #ffffff;
  
}


/* ===== CARD ANIMATIONS ===== */

/* animation base */
.fade-left,
.fade-right,
.fade-top,
.fade-bottom{
opacity:0;
transition:all .6s cubic-bezier(.22,.61,.36,1);
will-change:transform,opacity;
}

.fade-left{ transform:translateX(-320px); }
.fade-right{ transform:translateX(320px); }
.fade-top{ transform:translateY(-320px); }
.fade-bottom{ transform:translateY(320px); }

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

/* PRODUCT CARD */

.product-box{
background:#fff;
border:1px solid #e8e8e8;
border-radius:12px;
padding:15px;
transition:all .35s ease;
position:relative;
text-align:center;
}

.product-box:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,0.12);
border-color:#e5e5e5;
}

/* SALE LABEL */

.sale-badge{
position:absolute;
top:12px;
left:12px;
background:#27ae60;
color:#fff;
font-size:11px;
padding:5px 10px;
border-radius:20px;
font-weight:600;
z-index:5;
letter-spacing:0.5px;
}

/* IMAGE */

.product-img{
height:280px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:10px;
position:relative;
z-index:1;
overflow:hidden; /* keeps zoom inside */
}

.product-img img{
max-width:110%;
max-height:260px;
object-fit:contain;
transition:transform .35s ease;
will-change: transform;
}

.product-img img{
transition: transform .35s ease;
}

/* zoom when hovering image or card */

.product-box:hover .product-img img,
.product-img:hover img{
transform:scale(1.25);
}

/* PRODUCT NAME */

.product-info h5{
font-size:18px;
font-weight:600;
margin:0;
}
.product-info{
position:relative;
z-index:5;
background:#fff; /* prevents image showing through */
padding-top:8px;
}
/* MOBILE */

@media (max-width:991px){

.product-img{
height:200px;
}

.product-img img{
max-height:180px;
}

.product-info h5{
font-size:16px;
}

}

@media (max-width:576px){

.fade-left,
.fade-right,
.fade-top,
.fade-bottom{
opacity:0;
transition:all .6s cubic-bezier(.22,.61,.36,1);
}

.fade-left{ transform:translateX(-80px); }
.fade-right{ transform:translateX(80px); }
.fade-top{ transform:translateY(-80px); }
.fade-bottom{ transform:translateY(80px); }

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


.product-animate{
opacity:0;
transform:translateX(-80px);
transition:all .5s ease;
}

/* alternate direction */
.product-animate:nth-child(even){
transform:translateX(80px);
}

.product-animate.show{
opacity:1;
transform:translateX(0);
}

}
/* ===== PARALLAX MOBILE FIX ===== */



/* ===== SVG MOBILE ===== */

@media (max-width:768px){

.section-divider{
bottom:-20px;
} 

.section-divider svg{
height:80px;
}

.divider-inverted{
top:-15px;
}

.divider-inverted svg{
height:80px;
}


.parallax-bottom{
    margin-bottom: -230px;
}
}


/* hero content*/

@media (max-width:768px){

.hero{
height:auto;
min-height:65vh;
padding:90px 20px 120px;
display:flex;
align-items:center;
justify-content:center;
}

.hero-left,
.hero-right{
opacity:0;
transition:all .9s cubic-bezier(.22,.61,.36,1);
will-change:transform,opacity;
}

.hero-left{
transform:translateX(-80px);
}

.hero-right{
transform:translateX(80px);
}

.hero-show{
opacity:1;
transform:translateX(0);
}

.hero-content{
padding:0 20px;
}

.hero-content h1{
font-size:30px;
line-height:1.25;
letter-spacing:0.5px;
margin-bottom:14px;
word-break:normal;
overflow-wrap:normal;

}

.hero-sub{
font-size:15px;
line-height:22px;
max-width:320px;
}
}
/* ===== STAGGER ANIMATION ===== */