html{
scroll-behavior:smooth;
}
.hero-lock{
overflow:hidden;
height:100vh;
}
 *{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

:root{
    --slide-bg:#fedf00;
    --slide-text:#ED3139;
}
.hero, .hero-wrapper {
    background-color: var(--slide-bg);
    color: var(--slide-text);
}
body{
background:#000;
color:#fff;
overflow-x:hidden;

}
.target-can{
opacity:0;
transition:0.4s;
width:200px;
height:250px;
}
.ab-price{
        font-size: 18px;
    }
.cup{
opacity:0;
transition:0.6s;
}
.video-can{
    width:200px;
}
.flying-can{
position:fixed;
width:250px;
pointer-events:none;
z-index:9999;
}

.fade-text{
opacity:0;

}

.old-price {
    text-decoration: line-through;
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
}

.new-price {
    color: var(--slide-text);
    font-size: 17px;
    font-weight: 800;
    padding-left: 8px;
}

.price-box {
  padding: 5px 0px;
  border-radius: 8px;
  display: inline-flex;
}

.hero.animate .fade-text{
animation:priceFade 3s ease-in-out forwards;
animation-delay:0.8s;
}
@keyframes fadeIn{

0%{
opacity:0;
}

100%{
opacity:1;
}

}
.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0px 8%;

    background:var(--slide-bg) !important;
}

.logo img{
width:120px;
height:auto;
display:block;
}

.nav{
display:flex;
gap:80px;
}

.nav a{
text-decoration:none;
color:var(--slide-text);
font-size:16px;
}

.icons{
display:flex;
align-items:center;
gap:25px;
}

.cart{
font-size:22px;
cursor:pointer;
}

.hamburger{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
}

.hamburger span{
width:25px;
height:3px;
background:var(--slide-text);
display:block;
}


/* HERO */



.hero-text{
max-width:500px;
}

.hero-text h1{
font-size:70px;
color:var(--slide-text);
margin-bottom:20px;
}
.main-container{
    max-width: 84%;
    margin: auto;
}
.hero-text p{
line-height:20px;
margin-bottom:25px;
color:var(--slide-text);
font-size:13px;
}

.price{
font-size:22px;
margin-bottom:20px;
opacity:0;
transform:translateX(-80px);
}
.hero.animate .price{
animation:priceFade 3s ease-in-out forwards;
animation-delay:0s;
}
.price-btn{
    padding: 10px 34px;
    min-width: 150px;
    height: 48px;

    border-radius: 50px;

    border: 2px solid var(--slide-text);

    background: var(--slide-bg);

    color: var(--slide-text);

    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 600;

    cursor: pointer;

    /* screenshot jaisa thick bottom shadow */
    box-shadow: 0 7px 0 var(--slide-text);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.price-btn:hover{
    transform: translateY(3px);
    box-shadow: 0 4px 0 var(--slide-text);
}

.price-btn:active{
    transform: translateY(6px);
    box-shadow: 0 1px 0 var(--slide-text);
}
.hero.animate .price-btn{
animation:priceFade 3s ease-in-out forwards;
animation-delay:0s;
}
@keyframes priceFade{

0%{
opacity:0;
transform:translateX(-80px);
}

100%{
opacity:1;
transform:translateX(0);
}

}

button{
padding:12px 30px;
border:none;
background:#c9c6c6;
color:black;
font-weight:600;
border-radius:6px;
cursor:pointer;
}

.hero-img img{
width:260px;
}



.hero *{
will-change: transform, opacity;
}
/* RIGHT SIDE */

.hero-right{
position:relative;
width:34%;
display:flex;
flex-direction:column;
align-items:center;
}

/* ABOUT TEXT */
.heading-wrap{
overflow:hidden;
height:90px;
}

.heading{
font-size:70px;
color:var(--slide-text);
transform:translateY(120%);
opacity:0;
}

.hero.animate .heading{
animation:headingReveal 3s ease-in-out forwards;
animation-delay:0s;
}
.content p,
.content .explore-btn{
opacity:0;
transform:translateX(-80px);
}

/* Jab section visible ho tab animation chale */
.clean-sins.animate p,
.clean-sins.animate .explore-btn{
animation:priceFade 1.8s ease-in-out forwards;
animation-delay:0.3s;
}
/* Default hidden state */
.clean-sins h2,
.clean-sins p,
.clean-sins .explore-btn,
.clean-sins .shirt,
.clean-sins .cap,
.clean-sins .cup{
opacity:0;
transform:translateY(60px);
}

.clean-sins.animate h2{
animation:fadeUp 1s ease forwards;
animation-delay:0.1s;
text-align:center;
}

.clean-sins.animate .explore-btn{
    padding:10px 34px;
    min-width:150px;
    height:48px;

    border-radius:50px;

    border:2px solid #ED3139;

    background:#fedf00;

    color:#ED3139;

    font-family:'Poppins',sans-serif;
    font-size:17px;
    font-weight:700;

    cursor:pointer;

    box-shadow:0 7px 0 #ED3139;

    outline:none;

    margin:25px auto 0;
    display:block;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.clean-sins.animate .shirt{
animation:fadeUp 1.2s ease forwards;
animation-delay:0.3s;
}

.clean-sins.animate .cap{
animation:fadeUp 1.2s ease forwards;
animation-delay:0.5s;
}

.clean-sins.animate .cup{
animation:fadeUp 1.2s ease forwards;
animation-delay:0.7s;
}

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

0%{
transform:translateY(120%);
opacity:0;
}

100%{
transform:translateY(0);
opacity:1;
}

}
.product-info{
position:absolute;
top:-50px;
/*left:50%;*/
text-align:center;
max-width:220px;
transform:translateX(-50%);
animation:fadeDown 1s ease forwards;
}

.product-info h3{
font-size:18px;
margin-bottom:5px;
letter-spacing:1px;
}

.product-info p{
font-size:14px;
color:var(--slide-text);
}

/* CANS */

.cans{
display:flex;
gap:40px;
align-items:center;
margin-top:80px;
}

.can{
width:380px !important;
}

@keyframes textFade{

0%{
opacity:0;
transform:translateY(-40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}
.can1{
opacity:0;
transform:translateY(-100px) rotate(-180deg);
}
.hero.animate .can1{
animation:canPop 3s ease-out forwards;
}

@keyframes canPop{

0%{
opacity:0;
transform:scale(0.8) translateY(20px);
}

60%{
opacity:1;
transform:scale(1.05) translateY(0);
}

100%{
opacity:1;
transform:scale(1);
}

}
.can2{
opacity:0;
transform:translateX(200px);
width:250px;
height:auto;
object-fit:contain;
}

.video-target{
position:absolute;
right:220px;
top:60px;
width:220px;
height:300px;
}

.flying-video{
position:fixed;
width:220px;
pointer-events:none;
z-index:9999;
will-change:transform;
}
#heroVideo{
position:relative;
z-index:5;
will-change:transform;
}

.hero.animate .can2{
animation:slideRight 3s ease-in-out forwards;
animation-delay:0s;

}
@keyframes slideRight{

0%{
opacity:0;
transform:translateX(200px);
}

100%{
opacity:1;
transform:translateX(0);
}

}

/* ANIMATIONS */

@keyframes fadeDown{

0%{
opacity:0;
transform:translateY(-40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

@keyframes canDrop{

0%{
opacity:0;
transform:translateY(-100px);
}

100%{
opacity:1;
transform:translateY(0);
}

}
/* NAV ANIMATION */

@keyframes navFade{

0%{
opacity:0;
transform:translateY(-40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}
.hero-wrapper{
    height:170vh;
    width:100%;
    margin:auto;
    position:relative;
    z-index:10;
}

.hero{
    position:sticky;
    top:0;
    height:100vh;
    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:40px 8%;
    padding-top:100px;

    background:var(--slide-bg) !important;

    z-index:10 !important;
}

.hero.animate .product-info{
animation:fadeDown 1s ease forwards;
}
.heading,
.price,
.can1,
.can2,
.product-info{
opacity:0;
}

.products{
    position:relative;
    z-index:1;

    width:100vw;
    margin-left:calc(50% - 50vw);

    overflow:hidden;
    padding:80px 8%;

    background:#ffffff !important;
    color:#000000;
}
.view-all-btn{
    position:absolute;
    right:0;
    top:0;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-width:180px;
    height:48px;

    padding:10px 28px;

    border-radius:50px;

    border:2px solid #ED3139;

    background:#ED3139;

    color:#ffffff;

    text-decoration:none;

    font-family:'Poppins',sans-serif;
    font-size:16px;
    font-weight:700;

    box-shadow:0 7px 0 #9f1820;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
.view-all-btn:hover{
    background:#ED3139;
    color:#ffffff;

    transform:translateY(3px);
    box-shadow:0 4px 0 #9f1820;
}
.view-all-btn .arrow{
    display:inline-block;
    transition:0.3s;
    margin-left:5px;
}

.view-all-btn:hover .arrow{
    transform:translateX(5px);
}
.section-title{
    position: relative;
    text-align: center;
    margin-bottom: 200px;
}

.section-title h2{
letter-spacing:2px;
    font-weight:900;
    font-size:48px;
    line-height:1;
    color:#000000;
    margin-bottom:15px;

}

.section-title p{
    color:#000000;
    font-size:17px;
    font-weight:500;
}

/* GRID */

.product-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:60px;

}

/* CARD */

.product-card{

color:white;

}
#heroCan{
position:relative;
 z-index:9999 !important;
}

.flying-can{
position:fixed;
width:250px;
pointer-events:none;
z-index:999;
transition:transform 0.1s linear;
}

.flying-can video{
  width:100%;
height:auto;  

}
    
    
    
/* IMAGE */
.features{
    max-width:90%;
    margin:auto;
    padding:20px 20px;
}

.features-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:30px;
    text-align:center;
}

.feature-item p{
    color:white;
    font-size:13px;
    text-align:left;
    /*margin-bottom:8px;*/
}

.feature-item h3{
    color:#fff;
    font-size:15px;
    font-weight:400;
    text-align:left;
}
.product-img{

background:#bfbfbf;
border-radius:20px;
height:220px;
display:flex;
align-items:center;
justify-content:center;
margin-top: -60px;
margin-bottom:20px;

}

.product-img img {
    width: 290px;
    position: relative;
    bottom: 50px;
}

/* STARS */

.stars{

color:#FFD84C;
margin-bottom:10px;
font-size:18px;

}

/* TEXT */

.product-card h3{
color:#000000 !important;
    font-size:22px;
    font-weight:800;
    margin-bottom:10px;
}

.product-card p{
color:#333333;
    font-size:14px;
    line-height:1.6;
    margin-bottom:15px;

}

/* BOTTOM */

.product-bottom{

display:flex;
justify-content:space-between;
align-items:center;

}

.product-bottom .price{

font-size:18px;

}

/* SHARE */

.share{

display:flex;
gap:8px;

}

.share{
    display:flex;
    gap:10px;
}

.share i{
    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#ED3139;
    color:#ffffff;

    padding:0;
    border-radius:50%;

    font-size:14px;
    cursor:pointer;

    transition:0.2s ease;
}

.share i:hover{
    transform:translateY(-3px);
}
.products .product-card{
    color:#000000;
}
/* MOBILE */
.clean-sins{
  padding:80px 8%;
  color:#fff;
}

.container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
}

.content{
  max-width:500px;
}

.content h2{
    letter-spacing:2px;
    font-weight:900;
    margin-bottom:25px;
    font-size:48px;
    line-height:1;
    color:#ffffff;
}

.content p{
     line-height: 20px;
    margin-bottom: 25px;
    color: white;
    font-size: 14px;
    text-align: center;
}

.explore-btn{
    margin-top:25px;

    padding:10px 34px;
    min-width:150px;
    height:48px;

    border-radius:50px;

    border:2px solid #ED3139;

    background:#fedf00;

    color:#ED3139;

    font-family:'Poppins',sans-serif;
    font-size:17px;
    font-weight:700;

    cursor:pointer;

    box-shadow:0 7px 0 #ED3139;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.explore-btn:hover{
    transform:translateY(3px);
    box-shadow:0 4px 0 #ED3139;
}

.explore-btn:active{
    transform:translateY(6px);
    box-shadow:0 1px 0 #ED3139;
}
.visual{
  position:relative;
  width:500px;
  height:400px;
}

.bg-text {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 70px;
    line-height: 80px;
    font-weight: 800;
    color: #ffb400;
    opacity: 0.9;
    text-align: end;
    -webkit-text-stroke:1px #ffffff;

}

.shirt{
  position:absolute;
  width:260px;
  right:220px;
  top:20px;
  rotate: 25deg;
}

.cap {
    position: absolute;
    width: 150px;
    right: 170px;
    top: 80px;
    rotate: 35deg;
}

.cup {
    position: absolute;
    width: 90px;
    bottom: 0;
    right: 250px;
    rotate: -20deg;
}

.last-hero-section{
height:700px;
background:#000;
color:#fff;
position:relative;
overflow:hidden;
padding: 35px;
}



.last-hero-bg-text{
position:absolute;
font-size:180px;
font-weight:100;
color:transparent;
-webkit-text-stroke:2px #ffffff;
text-align:center;
background:linear-gradient(#ffffff,#ffffff);
background-clip:text;
-webkit-background-clip:text;
letter-spacing:35px;
background-size:0% 100%;
background-repeat:no-repeat;
font-family:'Anton', sans-serif;
transition:background-size 0.2s linear;
}




.last-hero-bg-text.last-hero-bottom{
bottom:50px;
transform:rotate(180deg) scaleY(1.3);
}

.last-hero-bg-text.last-hero-top{
top:50px;
transform:scaleY(1.3);

}



/* Products */

.last-hero-products{
position:absolute;
top:calc(50% + -30px);
left:50%;
transform:translate(-50%,-50%);
text-align:center;
}

.last-hero-products img{
position:absolute;
}

/* Images Position */

.last-hero-tshirt{
width: 450px;
    left: -400px;
    z-index: 2;
    top: -220px;
    rotate: 20deg;
}

.last-hero-cap{
width: 180px;
    top: -100px;
    left: -100px;
    z-index: 3;
    rotate: 20deg;
}

.last-hero-cup{
width: 100px;
    top: 90px;
    left: -122px;
    z-index: 2;
    rotate: -20deg;
}
/* Button */

.last-hero-explore{
position:absolute;
top:180px;
left:-300px;
z-index:111;

padding: 6px 20px;
    border-radius: 12px;
    border: 1.5px solid #000;
    background: #E5E5E5;
    color: #000;
    font-weight: 400;
    cursor: pointer;
    height: 38px;
    font-size: 15px;
    outline: 1px solid #d9d9d987;
    outline-offset: 1px;
}

/* Bottom Icons */

.last-hero-icons{
position:absolute;
right:40px;
bottom:0px;
display:flex;
gap:15px;
}

.last-hero-icons img{
width:45px;
height:45px;
border-radius:17px;
}
/* Responsive */

/* =========================================================
   REAL VIBES / TESTIMONIAL SECTION
========================================================= */

.real-vibes-section {

    width: 100%;

    position: relative;

    overflow: hidden;

    padding: 100px 0 120px;

    background: #FEDF00;

    color: #111;

}


/* =========================================================
   HEADER
========================================================= */

.real-vibes-header {

    position: relative;

    z-index: 5;

    width: 90%;

    max-width: 1100px;

    margin: 0 auto 65px;

    text-align: center;

}


.real-vibes-kicker {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 7px 18px;

    background: #ED3139;

    color: #fff;

    border-radius: 50px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 22px;

}


.real-vibes-header h2 {

    margin: 0;

    font-size: clamp(52px, 7vw, 92px);

    line-height: .85;

    letter-spacing: -4px;

    font-weight: 900;

    text-transform: uppercase;

    color: #111;

}


.real-vibes-header h2 span {

    color: #ED3139;

}


.real-vibes-header p {

    max-width: 520px;

    margin: 22px auto 0;

    font-size: 14px;

    line-height: 1.6;

    font-weight: 500;

    color: #222;

}


/* =========================================================
   SLIDER
========================================================= */

.real-vibes-slider {

    width: 100%;

    overflow: hidden;

    position: relative;

    z-index: 5;

}


.real-vibes-track {

    display: flex;

    gap: 28px;

    width: max-content;

    padding: 20px 6% 35px;

}


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

.real-vibe-card {

    position: relative;

    width: 360px;

    min-height: 350px;

    flex-shrink: 0;

    padding: 32px 30px 28px;

    background: #fff;

    border: 2px solid #111;

    border-radius: 25px;

    box-shadow: 10px 10px 0 #ED3139;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.real-vibe-card:nth-child(2n) {

    transform: translateY(22px);

    box-shadow: 10px 10px 0 #00B8EB;

}


.real-vibe-card:nth-child(3n) {

    box-shadow: 10px 10px 0 #111;

}


.real-vibe-card:hover {

    transform: translateY(-10px);

    box-shadow: 10px 18px 0 #ED3139;

}


.real-vibe-card:nth-child(2n):hover {

    transform: translateY(10px);

    box-shadow: 10px 18px 0 #00B8EB;

}


/* =========================================================
   TOP
========================================================= */

.real-vibe-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

}


.real-vibe-quote {

    font-family: Georgia, serif;

    font-size: 75px;

    line-height: .6;

    font-weight: 900;

    color: #ED3139;

}


.real-vibe-rating {

    color: #ED3139;

    font-size: 17px;

    letter-spacing: 2px;

    padding-top: 4px;

}


/* =========================================================
   REVIEW
========================================================= */

.real-vibe-review {

    margin: 20px 0 30px;

    font-size: 15px;

    line-height: 1.75;

    font-weight: 500;

    color: #222;

}


/* =========================================================
   PERSON
========================================================= */

.real-vibe-person {

    display: flex;

    align-items: center;

    gap: 13px;

    padding-top: 20px;

    border-top: 2px dashed #111;

}


.real-vibe-image {

    width: 58px;

    height: 58px;

    flex-shrink: 0;

    border-radius: 50%;

    padding: 3px;

    background: #ED3139;

    border: 2px solid #111;

    overflow: hidden;

}


.real-vibe-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;

}


.real-vibe-name {

    min-width: 0;

}


.real-vibe-name h3 {

    margin: 0;

    font-size: 17px;

    font-weight: 900;

    color: #111;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.real-vibe-name span {

    display: block;

    margin-top: 3px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #ED3139;

}


.real-vibe-check {

    margin-left: auto;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #111;

    color: #FEDF00;

    font-size: 15px;

    font-weight: 900;

}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.real-vibes-section::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: #ED3139;

    top: -230px;

    left: -180px;

    opacity: .95;

}


.real-vibes-section::after {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background: #00B8EB;

    right: -130px;

    bottom: -130px;

}


/* =========================================================
   BIG BACKGROUND TEXT
========================================================= */

.real-vibes-bg-text {

    position: absolute;

    left: 50%;

    bottom: 5px;

    transform: translateX(-50%);

    width: max-content;

    font-size: clamp(55px, 10vw, 150px);

    font-weight: 900;

    line-height: 1;

    letter-spacing: -5px;

    color: transparent;

    -webkit-text-stroke: 2px rgba(0,0,0,.08);

    white-space: nowrap;

    pointer-events: none;

    z-index: 1;

}


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

@media (max-width: 768px) {

    .real-vibes-section {

        padding: 70px 0 90px;

    }


    .real-vibes-header {

        width: 88%;

        margin-bottom: 40px;

    }


    .real-vibes-header h2 {

        font-size: 48px;

        letter-spacing: -2px;

    }


    .real-vibes-header p {

        font-size: 13px;

    }


    .real-vibes-track {

        gap: 20px;

        padding: 15px 25px 30px;

    }


    .real-vibe-card {

        width: 300px;

        min-height: 330px;

        padding: 27px 23px 24px;

        border-radius: 21px;

        box-shadow: 7px 8px 0 #ED3139;

    }


    .real-vibe-card:nth-child(2n) {

        transform: translateY(15px);

        box-shadow: 7px 8px 0 #00B8EB;

    }


    .real-vibe-review {

        font-size: 13px;

        line-height: 1.7;

    }


    .real-vibe-quote {

        font-size: 65px;

    }


    .real-vibe-rating {

        font-size: 15px;

    }


    .real-vibes-bg-text {

        font-size: 60px;

    }

}


@media (max-width: 480px) {

    .real-vibe-card {

        width: 285px;

    }

}


.glass-box {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Images */
.platform-img {
  width: 55px;
  height: 55px;
  border-radius: 10px;
  transition: all 0.3s ease;
  opacity: 1;
}

/* Hover effect */
.platform-img:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* =========================================================
   INSTAGRAM SHOWCASE
========================================================= */

.instagram-showcase {

    position: relative;

    width: 100vw;

    margin-left: calc(50% - 50vw);

    padding: 110px 0 90px;

    background: #000;

    color: #fff;

    overflow: hidden;

    isolation: isolate;

}


/* =========================================================
   BACKGROUND TEXT
========================================================= */

.instagram-bg-text {

    position: absolute;

    top: 35px;

    left: 50%;

    transform: translateX(-50%);

    font-size: clamp(90px, 18vw, 260px);

    line-height: .8;

    font-weight: 900;

    letter-spacing: -12px;

    white-space: nowrap;

    color: transparent;

    -webkit-text-stroke: 2px rgb(255 255 255 / 13%);

    pointer-events: none;

    z-index: -1;

}


/* =========================================================
   HEADING
========================================================= */

.instagram-heading {

    position: relative;

    z-index: 3;

    width: 90%;

    max-width: 1050px;

    margin: 0 auto 60px;

    text-align: center;

}


.instagram-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 7px 17px;

    border: 1px solid #FEDF00;

    border-radius: 50px;

    color: #FEDF00;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.instagram-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #ED3139;

    box-shadow: 0 0 12px #ED3139;

}


.instagram-heading h2 {

    margin: 25px 0 15px;

    font-size: clamp(45px, 6vw, 82px);

    line-height: .9;

    font-weight: 900;

    letter-spacing: -4px;

    text-transform: uppercase;

    color: #fff;

}


.instagram-heading h2 span {

    color: #FEDF00;

}


.instagram-heading p {

    max-width: 540px;

    margin: 0 auto;

    color: rgba(255,255,255,.65);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   INSTAGRAM GRID
========================================================= */

.instagram-carousel {

    position: relative;

    width: 100%;

    z-index: 4;

}


.instagram-grid {

    width: 100%;

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 5px;

}


/* =========================================================
   IMAGE CARD
========================================================= */

.instagram-card {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #111;

    cursor: pointer;

}


.instagram-card::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    border: 0 solid #FEDF00;

    transition: .35s ease;

    pointer-events: none;

}


.instagram-card img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.22,.61,.36,1),
        filter .5s ease;

}


/* =========================================================
   HOVER
========================================================= */

.instagram-hover {

    position: absolute;

    inset: 0;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0,0,0,.48);

    opacity: 0;

    transition: .35s ease;

}


.instagram-hover span {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #FEDF00;

    color: #111;

    font-size: 25px;

    font-weight: 900;

    transform: scale(.5) rotate(-20deg);

    transition: .35s ease;

}


.instagram-card:hover img {

    transform: scale(1.09);

    filter: saturate(1.15);

}


.instagram-card:hover .instagram-hover {

    opacity: 1;

}


.instagram-card:hover .instagram-hover span {

    transform: scale(1) rotate(0);

}


.instagram-card:hover::before {

    border-width: 5px;

}


/* =========================================================
   COLOUR ACCENTS
========================================================= */

.instagram-card:nth-child(1) {

    box-shadow: inset 0 7px 0 #ED3139;

}


.instagram-card:nth-child(2) {

    box-shadow: inset 0 7px 0 #FEDF00;

}


.instagram-card:nth-child(3) {

    box-shadow: inset 0 7px 0 #00B8EB;

}


.instagram-card:nth-child(4) {

    box-shadow: inset 0 7px 0 #ED3139;

}


.instagram-card:nth-child(5) {

    box-shadow: inset 0 7px 0 #FEDF00;

}


/* =========================================================
   ARROWS
========================================================= */

.instagram-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    width: 55px;

    height: 55px;

    border-radius: 50%;

    border: 2px solid #111;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #FEDF00;

    color: #111;

    font-size: 24px;

    font-weight: 900;

    box-shadow: 0 6px 0 #ED3139;

    opacity: 1;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.instagram-prev {

    left: 25px;

}


.instagram-next {

    right: 25px;

}


.instagram-arrow:hover {

    transform: translateY(calc(-50% + 3px));

    box-shadow: 0 3px 0 #ED3139;

}


.instagram-arrow span {

    line-height: 1;

}


/* =========================================================
   FOLLOW CTA
========================================================= */

.instagram-follow {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    margin-top: 55px;

}


.instagram-follow > span {

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

    color: rgba(255,255,255,.55);

}


.instagram-follow-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    min-width: 160px;

    height: 48px;

    padding: 10px 25px;

    justify-content: center;

    border-radius: 50px;

    border: 2px solid #FEDF00;

    background: #FEDF00;

    color: #111;

    text-decoration: none;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1px;

    box-shadow: 0 6px 0 #ED3139;

    transition: .2s ease;

}


.instagram-follow-btn span {

    font-size: 18px;

}


.instagram-follow-btn:hover {

    color: #111;

    transform: translateY(3px);

    box-shadow: 0 3px 0 #ED3139;

}


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

@media (max-width: 900px) {

    .instagram-showcase {

        padding: 80px 0 70px;

    }


    .instagram-heading {

        margin-bottom: 40px;

    }


    .instagram-heading h2 {

        font-size: 48px;

        letter-spacing: -2px;

    }


    .instagram-grid {

        grid-template-columns: repeat(3, 1fr);

    }


    .instagram-card:nth-child(n+4) {

        display: none;

    }


    .instagram-arrow {

        width: 45px;

        height: 45px;

        font-size: 19px;

    }


    .instagram-prev {

        left: 12px;

    }


    .instagram-next {

        right: 12px;

    }

}


@media (max-width: 600px) {

    .instagram-showcase {

        padding: 70px 0 60px;

    }


    .instagram-bg-text {

        top: 80px;

        font-size: 100px;

        letter-spacing: -5px;

    }


    .instagram-heading {

        width: 88%;

    }


    .instagram-heading h2 {

        font-size: 42px;

        line-height: .92;

    }


    .instagram-heading p {

        font-size: 12px;

    }


    .instagram-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 4px;

    }


    .instagram-card:nth-child(n+3) {

        display: none;

    }


    .instagram-arrow {

        width: 40px;

        height: 40px;

        font-size: 17px;

        box-shadow: 0 4px 0 #ED3139;

    }


    .instagram-prev {

        left: 8px;

    }


    .instagram-next {

        right: 8px;

    }


    .instagram-follow {

        flex-direction: column;

        gap: 15px;

        margin-top: 40px;

    }

}

@media (max-width: 900px){
.platform-img {
    width: 50px;
  }
  .container{
    flex-direction:column;
    text-align:center;
  }

  .visual{
    width:100%;
    height:350px;
  }

  .bg-text{
    font-size:50px;
    text-align:center;
    left:0;
    right:0;
  }

  .shirt{
    right:50%;
    transform:translateX(50%);
  }

  .cap{
    right:30%;
  }

  .cup{
    right:45%;
  }
}
@media(max-width:768px){

.nav{
position:absolute;
top:80px;
left:0;
background:var(--slide-bg);
width:100%;
flex-direction:column;
align-items:center;
gap:30px;
padding:40px 0;
display:none;
}

.nav.active{
display:flex;
}

.hamburger{
display:flex;
}



.hero-text h1{
font-size:45px;
}

.hero-img{
margin-top:40px;
}
.logo img{
width:150px;
}
@media(max-width:900px){
.col-lg-2-4 {
    width: 33.33%;
  }
.product-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){
.col-lg-2-4 {
    width: 50%;
  }
.product-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:26px;

}

}
}



/* =========================================
   SINGLE HERO + HEADER BACKGROUND
========================================= */

body::before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;

    background:var(--slide-bg);

    z-index:0;
    pointer-events:none;
}

/* =========================================
   SLIDE CONTENT EXIT
========================================= */

/* =========================================
   HERO SLIDE EXIT
========================================= */

.hero.slide-exit .hero-text{
    opacity:0 !important;
    transform:translateX(-100px) !important;
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.hero.slide-exit .hero-right{
    opacity:0 !important;
    transform:translateX(100px) !important;
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

/* ================================
   FLYING CAN - FINAL FIX
================================ */

.clean-sins {
    position: relative !important;
    z-index: 20 !important;
    overflow: visible !important;
}

.clean-sins .container {
    position: relative;
    z-index: 20 !important;
    overflow: visible !important;
}

.clean-sins .visual {
    position: relative;
    z-index: 50 !important;
    overflow: visible !important;
}

.clean-sins .video-target {
    position: absolute !important;
    z-index: 99999 !important;
    overflow: visible !important;
    pointer-events: none;
}

#heroVideo {
    position: relative;
    z-index: 99999 !important;
}




/* =========================================================
   FLAVOUR SHOWCASE - FINAL FIX
========================================================= */

.flavor-showcase {
    position: relative;
    width: 100%;
    height: 800px;
    min-height: 800px;
    overflow: hidden;
    isolation: isolate;

    background: var(--flavor-bg, #eadcff);
    transition: background 0.6s ease;
}


/* =========================================================
   FULL BACKGROUND IMAGE
========================================================= */

.flavor-showcase-bg-image {
    opacity: 0.16;
    z-index: -3;
    transition: background-image 0.6s ease,
                opacity 0.5s ease;
}


/* IMPORTANT:
   Overlay ab fixed purple nahi rahega
*/
.flavor-showcase-overlay {
    position: absolute;
    inset: 0;

    background: rgba(255, 255, 255, 0.18);

    z-index: -2;

    transition:
        background 0.6s ease;
}


/* =========================================================
   TOP DESCRIPTION
========================================================= */

.flavor-showcase-top-text {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);

    width: 850px;
    max-width: 90%;

    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
    color: #111;

    text-align: center;

    padding-bottom: 25px;
}


/* =========================================================
   MAIN AREA
========================================================= */

.flavor-showcase-main {
    position: relative;
    width: 100%;
    height: 100%;

    padding-top: 28px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    z-index: 5;
}


/* =========================================================
   BIG FLAVOUR
========================================================= */

.flavor-showcase-title {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 94vw;

    margin: 0;
    padding: 0 15px;
    margin-top:10px;
    font-size: clamp(70px, 9vw, 140px);
    line-height: 0.85;
    font-weight: 900;
    letter-spacing: -5px;

    text-transform: uppercase;
    text-align: center;

    color: var(--flavor-text, #6A32B8);

    white-space: nowrap;
    overflow: hidden;

    transition:
        color 0.5s ease,
        transform 0.6s ease,
        opacity 0.4s ease;
}


/* =========================================================
   CAN AREA
========================================================= */

.flavor-showcase-product-area {
    position: relative;

    width: 620px;
    height: 255px;

    margin-top: 5px;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 5;
}


/* BACKGROUND IMAGE BEHIND CAN */

.flavor-showcase-product-bg {
    position: absolute;

    width: 620px;
    height: 255px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0.65;

    z-index: 1;

    transition:
        background-image 0.6s ease,
        transform 0.7s ease,
        opacity 0.5s ease;
}


/* =========================================================
   MAIN CAN - BIGGER
========================================================= */

.flavor-showcase-main-can {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 350px;
    max-height: 450px;

    object-fit: contain;

    transform:
        translate(-50%, -50%)
        translateY(-12px)
        scale(1);

    z-index: 10;

    filter:
        drop-shadow(0 18px 15px rgba(0,0,0,0.30));

    transition:
        transform 0.65s cubic-bezier(.22,.61,.36,1),
        opacity 0.4s ease;
}


/* =========================================================
   PRODUCT NAME
========================================================= */

.flavor-showcase-product-name {
    position: relative;
    z-index: 7;

    width: 100%;
    max-width: 92vw;

    margin: 4px 0 0;
    padding: 0 10px;

    font-family: 'Poppins', sans-serif;
    font-size: clamp(48px, 5.8vw, 80px);
    line-height: 0.88;
    font-weight: 900;
    letter-spacing: -3px;

    text-transform: uppercase;
    text-align: center;

    color: var(--flavor-text, #6A32B8);

    white-space: nowrap;
    overflow: hidden;

    transition:
        color 0.5s ease,
        transform 0.6s ease,
        opacity 0.4s ease;
}


/* =========================================================
   PRODUCT INFO
   FIXED POSITION - NO OVERLAP
========================================================= */

.flavor-showcase-info {
    position: absolute;

    left: 50%;
    top: 535px;

    transform: translateX(-50%);

    width: 420px;
    max-width: 90%;

    display: flex;
    flex-direction: column;
    align-items: center;

    z-index: 15;

    padding-bottom: 25px;
}


/* DROPDOWNS */

.flavor-showcase-dropdown {
    width: 100%;
    margin-bottom: 12px;
}

.flavor-showcase-select-row {
    width: 100%;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid rgba(0,0,0,0.25);

    font-size: 13px;
    color: #222;

    cursor: pointer;
}


/* =========================================================
   PACK
========================================================= */

.flavor-showcase-pack {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 4px;
    margin-bottom: 14px;
}

.flavor-pack-btn {
    padding: 10px 24px;
    min-width: 150px;
    height: 48px;

    border-radius: 50px;

    border: 2px solid var(--flavor-text);

    background: var(--flavor-bg);

    color: var(--flavor-text);

    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    box-shadow: 0 7px 0 var(--flavor-text);

    outline: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.flavor-pack-btn:hover {
    transform: translateY(3px);
    box-shadow: 0 4px 0 var(--flavor-text);
}

.flavor-pack-btn:active {
    transform: translateY(6px);
    box-shadow: 0 1px 0 var(--flavor-text);
}

.flavor-pack-btn.active {
    background: var(--flavor-text);
    color: var(--flavor-bg);
}


/* =========================================================
   PRICE
========================================================= */

.flavor-showcase-price {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-bottom: 15px;

    font-size: 13px;
}

.flavor-showcase-old-price {
    color: #777;
    text-decoration: line-through;
    font-size: 13px;
}

.flavor-showcase-current-price {
    color: #111;
    font-size: 14px;
    font-weight: 800;
}


/* =========================================================
   CART
========================================================= */

.flavor-showcase-cart {
    padding: 10px 34px;
    min-width: 220px;
    height: 48px;

    border-radius: 50px;

    border: 2px solid var(--flavor-text);

    background: var(--flavor-bg);

    color: var(--flavor-text);

    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    box-shadow: 0 7px 0 var(--flavor-text);

    outline: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.flavor-showcase-cart:hover {
    transform: translateY(3px);
    box-shadow: 0 4px 0 var(--flavor-text);
}

.flavor-showcase-cart:active {
    transform: translateY(6px);
    box-shadow: 0 1px 0 var(--flavor-text);
}


/* =========================================================
   DETAILS
========================================================= */

.flavor-showcase-details {
    margin-top: 10px;

    color: #ed3139;

    font-size: 14px;

    text-decoration: underline;
    font-weight: 500;
}


/* =========================================================
   NEXT PRODUCT
========================================================= */

.flavor-showcase-next {
    position: absolute;

    right: 3%;
    top: 29%;

    width: 120px;
    height: 150px;

    padding: 0;

    border: none;
    background: transparent;

    cursor: pointer;

    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* NEXT CAN */

.flavor-showcase-next img {
    width: 82px;
    height: 130px;

    object-fit: contain;

    filter:
        drop-shadow(0 8px 8px rgba(0,0,0,0.25));
}


/* ARROW */

.flavor-showcase-arrow {
    position: absolute;

    left: -5px;
    top: 50%;

    transform: translateY(-50%);

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;

    border-radius: 50%;

    color: #222;

    font-size: 19px;
    font-weight: 600;

    box-shadow:
        0 3px 10px rgba(0,0,0,0.10);

    z-index: 3;
}


/* =========================================================
   SLIDE ANIMATION
========================================================= */

.flavor-showcase.is-changing
.flavor-showcase-title {
    opacity: 0;
    transform:
        translateY(-25px)
        scale(0.96);
}

.flavor-showcase.is-changing
.flavor-showcase-product-name {
    opacity: 0;
    transform:
        translateY(25px)
        scale(0.96);
}

.flavor-showcase.is-changing
.flavor-showcase-main-can {
    opacity: 0;

    transform:
        translate(-50%, -50%)
        translateX(90px)
        rotate(8deg)
        scale(0.92);
}

.flavor-showcase.is-changing
.flavor-showcase-product-bg {
    opacity: 0.15;

    transform:
        translate(-50%, -50%)
        scale(1.05);
}


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

@media (max-width: 768px) {

    .flavor-showcase {
        height: 760px;
        min-height: 760px;
        margin-bottom: 40px;
    }

    .flavor-showcase-main {
        padding-top: 50px;
    }

    .flavor-showcase-title {
        font-size: clamp(52px, 12vw, 72px);
        max-width: 96vw;
        letter-spacing: -3px;
    }

    .flavor-showcase-product-area {
        width: 92%;
        height: 180px;
    }

    .flavor-showcase-product-bg {
        width: 92%;
        height: 180px;
    }

    .flavor-showcase-main-can {
        width: 145px;
        max-height: 220px;
    }

    .flavor-showcase-product-name {
        font-size: clamp(38px, 9vw, 52px);
        max-width: 94vw;
    }

    .flavor-showcase-info {
        top: 510px;
        bottom: auto;
        width: 88%;
        max-width: 400px;
    }

}

@media (max-width: 480px) {

    .flavor-showcase {
        height: 740px;
        min-height: 740px;
    }

    .flavor-showcase-title {
        font-size: 52px;
        letter-spacing: -2px;
    }

    .flavor-showcase-product-area {
        height: 155px;
    }

    .flavor-showcase-product-bg {
        height: 150px;
    }

    .flavor-showcase-main-can {
        width: 115px;
        max-height: 180px;
    }

    .flavor-showcase-product-name {
        font-size: 35px;
    }

    .flavor-showcase-info {
        top: 500px;
        width: 88%;
    }

}


/* =========================================
   BRAND MOSAIC / STORY SECTION
========================================= */

.brand-mosaic {
    width: 100%;
    padding: 6px;
    background: #ffffff;
    overflow: hidden;
}


/* =========================================
   3 x 3 GRID
========================================= */

.brand-mosaic-grid {
    width: 100%;
    display: grid;

    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 450px);

    gap: 6px;
}


/* =========================================
   COMMON CARD
========================================= */

.mosaic-card {
    position: relative;

    width: 100%;
    height: 450px;

    overflow: hidden;

    border-radius: 12px;

    isolation: isolate;
}


/* =========================================
   IMAGE CARD
========================================= */

.mosaic-image-card {
    position: relative;
    background: #ffffff;
}

.mosaic-image-card img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.7s ease;
}

.mosaic-image-card:hover img {
    transform: scale(1.04);
}


/* =========================================
   IMAGE CARD OVERLAY
========================================= */

.mosaic-overlay {
    position: absolute;

    inset: 0;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-direction: column;

    padding: 30px 20px 45px;

    text-align: center;
}


/* =========================================
   CENTER CARD
========================================= */

.mosaic-featured {
    position: relative;

    width: 100%;
    height: 450px;

    overflow: hidden;

    border-radius: 12px;

    background: linear-gradient(
        180deg,
        #FEDF00 0%,
        #ED3139 100%
    );

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    align-items: center;
}


/* =========================================
   CENTER IMAGE
========================================= */

.featured-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 1;
}

.featured-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* =========================================
   CENTER BUTTON AREA
========================================= */

.featured-content {
    position: absolute;

    inset: 0;

    z-index: 5;

    width: 100%;
    height: 100%;

    padding: 30px 20px 45px;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-direction: column;
}


/* =========================================
   TEXT CARD
   NO TEXT - ONLY BUTTON
========================================= */

.mosaic-text-card {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    text-align: center;

    padding: 30px 20px 45px;
}

.mosaic-text-content {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-direction: column;
}


/* =========================================
   REMOVE ALL UNUSED TEXT
========================================= */

.mosaic-overlay h2,
.mosaic-text-content h2,
.mosaic-text-content p,
.featured-content h2,
.featured-content p {
    display: none;
}


/* =========================================
   THEME COLORS
========================================= */

.red-theme {
    background: #ED3139;
    color: #ffffff;
}

.yellow-theme {
    background: #FEDF00;
    color: #ED3139;
}

.blue-theme {
    background: #00B8EB;
    color: #ffffff;
}


/* =========================================
   BUTTON
========================================= */

.mosaic-btn {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 220px;
    height: 58px;

    padding: 10px 30px;

    border-radius: 50px;

    border: 2px solid currentColor;

    background: var(--btn-bg);
    color: var(--btn-color);

    text-decoration: none;

    font-family: 'Poppins', sans-serif;

    font-size: 17px;
    font-weight: 700;

    text-transform: lowercase;

    box-shadow: 0 8px 0 var(--btn-shadow);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.3s ease;

    z-index: 10;
}


/* =========================================
   RED THEME BUTTON
========================================= */

.red-theme .mosaic-btn {
    --btn-bg: #FEDF00;
    --btn-color: #ED3139;
    --btn-shadow: #ED3139;
}


/* =========================================
   YELLOW THEME BUTTON
========================================= */

.yellow-theme .mosaic-btn {
    --btn-bg: #ED3139;
    --btn-color: #FEDF00;
    --btn-shadow: #ED3139;
}


/* =========================================
   BLUE THEME BUTTON
========================================= */

.blue-theme .mosaic-btn {
    --btn-bg: #FEDF00;
    --btn-color: #00B8EB;
    --btn-shadow: #007FAF;
}


/* =========================================
   CENTER BUTTON
========================================= */

.mosaic-featured .mosaic-btn {
    --btn-bg: #FEDF00;
    --btn-color: #ED3139;
    --btn-shadow: #ED3139;
}


/* =========================================
   BUTTON HOVER
========================================= */

.mosaic-btn:hover {
    transform: translateY(4px);

    box-shadow: 0 4px 0 var(--btn-shadow);
}


/* =========================================
   BUTTON ACTIVE
========================================= */

.mosaic-btn:active {
    transform: translateY(7px);

    box-shadow: 0 1px 0 var(--btn-shadow);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .brand-mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 400px);
    }

    .mosaic-card,
    .mosaic-featured {
        height: 400px;
    }

    .mosaic-overlay,
    .featured-content,
    .mosaic-text-card {
        padding-bottom: 40px;
    }

}


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

@media (max-width: 600px) {

    .brand-mosaic {
        padding: 4px;
    }

    .brand-mosaic-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(9, 430px);

        gap: 5px;
    }

    .mosaic-card,
    .mosaic-featured {
        width: 100%;
        height: 430px;

        min-height: 430px;

        border-radius: 9px;
    }

    .mosaic-overlay {
        padding: 25px 15px 40px;
    }

    .featured-content {
        padding: 25px 15px 40px;
    }

    .mosaic-text-card {
        padding: 25px 15px 40px;
    }

    .mosaic-btn {
        min-width: 200px;
        height: 54px;

        padding: 8px 25px;

        font-size: 15px;
    }

}


/* =========================================
   QUICK COMMERCE SECTION
========================================= */

.quick-commerce-section {
    width: 100%;
    padding: 80px 6%;
    background: #000000;
    overflow: hidden;
}


.quick-commerce-wrap {
    width: 100%;
    max-width: 1400px;
    min-height: 420px;

    margin: auto;
    padding: 55px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 70px;

    background: #ffffff;

    border-radius: 30px;

    position: relative;
    overflow: hidden;

    box-shadow:
        0 15px 0 #ED3139;
}


/* =========================================
   DECORATIVE CIRCLE
========================================= */

.quick-commerce-wrap::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    bottom: -230px;

    border-radius: 50%;

    background: #FEDF00;

    z-index: 0;
}


/* =========================================
   LEFT CONTENT
========================================= */

.quick-commerce-content {
    position: relative;
    z-index: 2;

    width: 48%;
}


.quick-commerce-tag {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 7px 18px;

    border-radius: 50px;

    background: #ED3139;
    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 22px;
}


.quick-commerce-content h2 {
    margin: 0 0 20px;

    font-family: 'Poppins', sans-serif;

    font-size: clamp(40px, 5vw, 72px);

    line-height: 0.95;

    font-weight: 900;

    letter-spacing: -3px;

    text-transform: uppercase;

    color: #111111;
}


.quick-commerce-content h2 span {
    color: #ED3139;
}


.quick-commerce-content p {
    max-width: 500px;

    margin: 0 0 28px;

    color: #333333;

    font-size: 15px;

    line-height: 1.6;

    font-weight: 500;
}


/* =========================================
   CTA BUTTON
========================================= */

.quick-commerce-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-width: 170px;
    height: 50px;

    padding: 10px 28px;

    border-radius: 50px;

    border: 2px solid #ED3139;

    background: #FEDF00;

    color: #ED3139;

    text-decoration: none;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;
    font-weight: 800;

    box-shadow: 0 7px 0 #ED3139;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.quick-commerce-btn:hover {
    color: #ED3139;

    transform: translateY(3px);

    box-shadow: 0 4px 0 #ED3139;
}


.quick-commerce-btn span {
    font-size: 20px;

    transition: transform 0.3s ease;
}


.quick-commerce-btn:hover span {
    transform: translateX(5px);
}


/* =========================================
   PLATFORM AREA
========================================= */

.quick-commerce-platforms {
    position: relative;
    z-index: 2;

    width: 48%;

    display: flex;

    flex-direction: column;

    gap: 15px;
}


/* =========================================
   PLATFORM CARD
========================================= */

.quick-platform {
    width: 100%;

    min-height: 90px;

    padding: 12px 18px;

    display: flex;

    align-items: center;

    gap: 18px;

    position: relative;

    border-radius: 18px;

    text-decoration: none;

    border: 2px solid #111111;

    color: #111111;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.quick-platform:hover {
    transform: translateX(-8px);

    box-shadow: 7px 7px 0 #111111;
}


/* =========================================
   PLATFORM COLORS
========================================= */

.quick-platform-yellow {
    background: #FEDF00;
}


.quick-platform-red {
    background: #ED3139;
    color: #ffffff;
}


.quick-platform-blue {
    background: #00B8EB;
}


/* =========================================
   LOGO BOX
========================================= */

.quick-platform-logo {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #ffffff;

    border-radius: 14px;

    overflow: hidden;

    border: 2px solid #111111;
}


.quick-platform-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* =========================================
   PLATFORM TEXT
========================================= */

.quick-platform-info {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.quick-platform-info small {
    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

    opacity: 0.75;
}


.quick-platform-info strong {
    font-size: 22px;

    font-weight: 900;

    letter-spacing: 1px;
}


/* =========================================
   ARROW
========================================= */

.quick-platform-arrow {
    margin-left: auto;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: #111111;

    font-size: 20px;

    font-weight: 800;

    border: 2px solid #111111;

    transition: transform 0.3s ease;
}


.quick-platform:hover .quick-platform-arrow {
    transform: rotate(45deg);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .quick-commerce-section {
        padding: 60px 4%;
    }

    .quick-commerce-wrap {
        padding: 40px;

        gap: 40px;
    }

    .quick-commerce-content h2 {
        font-size: 48px;
    }

}


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

@media (max-width: 768px) {

    .quick-commerce-section {
        padding: 50px 15px;
    }

    .quick-commerce-wrap {

        padding: 35px 22px;

        flex-direction: column;

        align-items: stretch;

        gap: 40px;

        border-radius: 22px;

        box-shadow: 0 10px 0 #ED3139;
    }


    .quick-commerce-content,
    .quick-commerce-platforms {
        width: 100%;
    }


    .quick-commerce-content {
        text-align: center;
    }


    .quick-commerce-tag {
        font-size: 10px;

        margin-bottom: 18px;
    }


    .quick-commerce-content h2 {
        font-size: 42px;

        letter-spacing: -2px;
    }


    .quick-commerce-content p {
        font-size: 13px;

        margin-left: auto;
        margin-right: auto;
    }


    .quick-commerce-btn {
        margin: auto;
    }


    .quick-platform {
        min-height: 80px;

        padding: 10px 14px;

        gap: 14px;
    }


    .quick-platform-logo {
        width: 54px;
        height: 54px;

        border-radius: 12px;
    }


    .quick-platform-info strong {
        font-size: 18px;
    }


    .quick-platform-info small {
        font-size: 8px;
    }


    .quick-platform-arrow {
        width: 36px;
        height: 36px;

        font-size: 17px;
    }

}

/* =========================================
   QUICK COMMERCE SECTION
========================================= */

.quick-commerce-section {
    width: 100%;
    padding: 80px 6%;
    background: #000000;
    overflow: hidden;
}


.quick-commerce-wrap {
    width: 100%;
    max-width: 1400px;
    min-height: 420px;

    margin: auto;
    padding: 55px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 70px;

    background: #ffffff;

    border-radius: 30px;

    position: relative;
    overflow: hidden;

    box-shadow:
        0 15px 0 #ED3139;
}


/* =========================================
   DECORATIVE CIRCLE
========================================= */

.quick-commerce-wrap::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    bottom: -230px;

    border-radius: 50%;

    background: #FEDF00;

    z-index: 0;
}


/* =========================================
   LEFT CONTENT
========================================= */

.quick-commerce-content {
    position: relative;
    z-index: 2;

    width: 48%;
}


.quick-commerce-tag {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 7px 18px;

    border-radius: 50px;

    background: #ED3139;
    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 22px;
}


.quick-commerce-content h2 {
    margin: 0 0 20px;

    font-family: 'Poppins', sans-serif;

    font-size: clamp(40px, 5vw, 72px);

    line-height: 0.95;

    font-weight: 900;

    letter-spacing: -3px;

    text-transform: uppercase;

    color: #111111;
}


.quick-commerce-content h2 span {
    color: #ED3139;
}


.quick-commerce-content p {
    max-width: 500px;

    margin: 0 0 28px;

    color: #333333;

    font-size: 15px;

    line-height: 1.6;

    font-weight: 500;
}


/* =========================================
   CTA BUTTON
========================================= */

.quick-commerce-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-width: 170px;
    height: 50px;

    padding: 10px 28px;

    border-radius: 50px;

    border: 2px solid #ED3139;

    background: #FEDF00;

    color: #ED3139;

    text-decoration: none;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;
    font-weight: 800;

    box-shadow: 0 7px 0 #ED3139;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.quick-commerce-btn:hover {
    color: #ED3139;

    transform: translateY(3px);

    box-shadow: 0 4px 0 #ED3139;
}


.quick-commerce-btn span {
    font-size: 20px;

    transition: transform 0.3s ease;
}


.quick-commerce-btn:hover span {
    transform: translateX(5px);
}


/* =========================================
   PLATFORM AREA
========================================= */

.quick-commerce-platforms {
    position: relative;
    z-index: 2;

    width: 48%;

    display: flex;

    flex-direction: column;

    gap: 15px;
}


/* =========================================
   PLATFORM CARD
========================================= */

.quick-platform {
    width: 100%;

    min-height: 90px;

    padding: 12px 18px;

    display: flex;

    align-items: center;

    gap: 18px;

    position: relative;

    border-radius: 18px;

    text-decoration: none;

    border: 2px solid #111111;

    color: #111111;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.quick-platform:hover {
    transform: translateX(-8px);

    box-shadow: 7px 7px 0 #111111;
}


/* =========================================
   PLATFORM COLORS
========================================= */

.quick-platform-yellow {
    background: #FEDF00;
}


.quick-platform-red {
    background: #ED3139;
    color: #ffffff;
}


.quick-platform-blue {
    background: #00B8EB;
}


/* =========================================
   LOGO BOX
========================================= */

.quick-platform-logo {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #ffffff;

    border-radius: 14px;

    overflow: hidden;

    border: 2px solid #111111;
}


.quick-platform-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* =========================================
   PLATFORM TEXT
========================================= */

.quick-platform-info {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.quick-platform-info small {
    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

    opacity: 0.75;
}


.quick-platform-info strong {
    font-size: 22px;

    font-weight: 900;

    letter-spacing: 1px;
}


/* =========================================
   ARROW
========================================= */

.quick-platform-arrow {
    margin-left: auto;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: #111111;

    font-size: 20px;

    font-weight: 800;

    border: 2px solid #111111;

    transition: transform 0.3s ease;
}


.quick-platform:hover .quick-platform-arrow {
    transform: rotate(45deg);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .quick-commerce-section {
        padding: 60px 4%;
    }

    .quick-commerce-wrap {
        padding: 40px;

        gap: 40px;
    }

    .quick-commerce-content h2 {
        font-size: 48px;
    }

}


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

@media (max-width: 768px) {

    .quick-commerce-section {
        padding: 50px 15px;
    }

    .quick-commerce-wrap {

        padding: 35px 22px;

        flex-direction: column;

        align-items: stretch;

        gap: 40px;

        border-radius: 22px;

        box-shadow: 0 10px 0 #ED3139;
    }


    .quick-commerce-content,
    .quick-commerce-platforms {
        width: 100%;
    }


    .quick-commerce-content {
        text-align: center;
    }


    .quick-commerce-tag {
        font-size: 10px;

        margin-bottom: 18px;
    }


    .quick-commerce-content h2 {
        font-size: 42px;

        letter-spacing: -2px;
    }


    .quick-commerce-content p {
        font-size: 13px;

        margin-left: auto;
        margin-right: auto;
    }


    .quick-commerce-btn {
        margin: auto;
    }


    .quick-platform {
        min-height: 80px;

        padding: 10px 14px;

        gap: 14px;
    }


    .quick-platform-logo {
        width: 54px;
        height: 54px;

        border-radius: 12px;
    }


    .quick-platform-info strong {
        font-size: 18px;
    }


    .quick-platform-info small {
        font-size: 8px;
    }


    .quick-platform-arrow {
        width: 36px;
        height: 36px;

        font-size: 17px;
    }

}






/* =========================================================
   SINNERS MERCH SECTION
========================================================= */

.sin-merch-section {
    position: relative;
    width: 100%;
    padding: 100px 5% 90px;
    background: #FEDF00;
    overflow: hidden;
}


/* =========================================================
   BACKGROUND TEXT
========================================================= */

.sin-merch-bg-text {
    position: absolute;
    top: 35px;
    right: -30px;

    font-family: 'Anton', sans-serif;
    font-size: clamp(180px, 25vw, 420px);
    font-weight: 900;
    line-height: .7;

    color: transparent;
    -webkit-text-stroke: 3px rgba(237,49,57,.12);

    pointer-events: none;
    user-select: none;

    transform: rotate(-4deg);
}


/* =========================================================
   CONTAINER
========================================================= */

.sin-merch-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.sin-merch-header {

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 55px;
    gap: 30px;
}


.sin-merch-mini {

    display: inline-block;

    padding: 7px 14px;

    background: #111;
    color: #FEDF00;

    border-radius: 30px;

    font-family: 'Poppins', sans-serif;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 2px;
}


.sin-merch-header h2 {

    margin: 14px 0 0;

    font-family: 'Anton', sans-serif;

    font-size: clamp(65px, 9vw, 130px);

    line-height: .75;

    letter-spacing: -4px;

    color: #111;
}


.sin-merch-header h2 span {
    color: #ED3139;
}


.sin-merch-header p {

    margin: 0 0 8px;

    font-family: 'Poppins', sans-serif;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.4;

    text-align: right;

    color: #111;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.sin-merch-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.sin-merch-card {

    position: relative;

    min-height: 540px;

    padding: 22px;

    border: 3px solid #111;

    border-radius: 28px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    box-shadow: 8px 8px 0 #111;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.sin-merch-card:hover {

    transform: translateY(-10px) rotate(-1deg);

    box-shadow: 13px 15px 0 #111;
}


/* =========================================================
   CARD COLORS
========================================================= */

.merch-red {

    background: #ED3139;

    color: #fff;
}


.merch-yellow {

    background: #FEDF00;

    color: #111;
}


.merch-blue {

    background: #00B8EB;

    color: #fff;
}


.merch-dark {

    background: #111;

    color: #FEDF00;
}


/* =========================================================
   NUMBER
========================================================= */

.merch-number {

    position: absolute;

    top: 20px;
    left: 22px;

    font-family: 'Anton', sans-serif;

    font-size: 18px;

    opacity: .7;

    z-index: 3;
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.merch-product-image {

    width: 100%;
    height: 330px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 35px 20px 10px;

    position: relative;
}


.merch-product-image::before {

    content: "";

    position: absolute;

    width: 245px;
    height: 245px;

    border-radius: 50%;

    background: rgba(255,255,255,.25);

    z-index: 0;
}


.merch-product-image img {

    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    filter: drop-shadow(8px 12px 0 rgba(17,17,17,.25));

    transition:
        transform .45s ease;
}


.sin-merch-card:hover .merch-product-image img {

    transform:
        scale(1.08)
        rotate(-4deg)
        translateY(-8px);
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.merch-product-info {

    position: relative;

    z-index: 3;

    padding-top: 12px;
}


.merch-category {

    display: block;

    margin-bottom: 7px;

    font-family: 'Poppins', sans-serif;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

    opacity: .75;
}


.merch-product-info h3 {

    margin: 0 0 18px;

    font-family: 'Anton', sans-serif;

    font-size: clamp(34px, 3vw, 48px);

    line-height: .85;

    letter-spacing: -1px;
}


/* =========================================================
   PRICE + BUTTON
========================================================= */

.merch-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;
}


.merch-bottom strong {

    font-family: 'Poppins', sans-serif;

    font-size: 20px;

    font-weight: 900;

    white-space: nowrap;
}


/* =========================================================
   MERCH BUTTON
========================================================= */

.merch-btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 135px;

    height: 48px;

    padding: 8px 17px;

    border-radius: 50px;

    border: 2px solid currentColor;

    background: #fff;

    color: #111;

    text-decoration: none;

    font-family: 'Poppins', sans-serif;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: .5px;

    box-shadow: 5px 5px 0 #111;

    transition: .25s ease;
}


.merch-btn span {

    margin-left: 8px;

    font-size: 16px;
}


.merch-btn:hover {

    transform: translateY(4px);

    box-shadow: 2px 2px 0 #111;
}


/* RED */

.merch-red .merch-btn {

    background: #FEDF00;

    color: #ED3139;

    border-color: #111;
}


/* YELLOW */

.merch-yellow .merch-btn {

    background: #ED3139;

    color: #FEDF00;

    border-color: #111;
}


/* BLUE */

.merch-blue .merch-btn {

    background: #FEDF00;

    color: #00B8EB;

    border-color: #111;
}


/* DARK */

.merch-dark .merch-btn {

    background: #00B8EB;

    color: #111;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.sin-merch-footer {

    margin-top: 60px;

    padding-top: 25px;

    border-top: 3px solid #111;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    font-family: 'Poppins', sans-serif;
}


.sin-merch-footer span {

    font-size: 13px;

    font-weight: 700;
}


.sin-merch-footer strong {

    font-family: 'Anton', sans-serif;

    font-size: 38px;

    line-height: 1;

    color: #ED3139;
}


.sin-merch-footer a {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 13px 25px;

    border-radius: 50px;

    background: #111;

    color: #FEDF00;

    text-decoration: none;

    font-size: 12px;

    font-weight: 900;

    transition: .25s ease;
}


.sin-merch-footer a:hover {

    background: #ED3139;

    color: #fff;

    transform: translateY(-3px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .sin-merch-grid {

        grid-template-columns: repeat(2, 1fr);
    }

    .sin-merch-card {

        min-height: 520px;
    }

}


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

@media (max-width: 600px) {

    .sin-merch-section {

        padding: 70px 18px 60px;
    }


    .sin-merch-header {

        display: block;

        margin-bottom: 40px;
    }


    .sin-merch-header h2 {

        font-size: 70px;

        letter-spacing: -2px;
    }


    .sin-merch-header p {

        margin-top: 25px;

        text-align: left;

        font-size: 14px;
    }


    .sin-merch-grid {

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .sin-merch-card {

        min-height: 500px;

        border-radius: 22px;
    }


    .merch-product-image {

        height: 300px;
    }


    .merch-product-info h3 {

        font-size: 42px;
    }


    .sin-merch-footer {

        flex-direction: column;

        align-items: flex-start;

        margin-top: 45px;
    }


    .sin-merch-footer strong {

        font-size: 42px;
    }


    .sin-merch-bg-text {

        font-size: 180px;

        top: 80px;
    }

}