.juiceHeroSection {
                    position: relative;
                    overflow: hidden;
                }

                    /* Background Glow */
                    .juiceHeroSection::before {
                        content: "";
                        position: absolute;
                        width: 350px;
                        height: 350px;
                        background: rgba(255,255,255,0.1);
                        border-radius: 50%;
                        top: -100px;
                        left: -100px;
                        filter: blur(40px);
                    }

                    .juiceHeroSection::after {
                        content: "";
                        position: absolute;
                        width: 250px;
                        height: 250px;
                        background: rgba(255,255,0,0.12);
                        border-radius: 50%;
                        bottom: -80px;
                        right: -80px;
                        filter: blur(50px);
                    }

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

                .juiceHeroContainer {
                    max-width: 1280px;
                    margin: auto;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 50px;
                    position: relative;
                    z-index: 2;
                }
                .juiceHeroContent {
                    text-align: left;
                }

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

                .juiceHeroContent {
                    flex: 2;
                    color: white;
                }

                .juiceLogo {
                    font-size: 14px;
                    font-weight: bold;
                    margin-bottom: 20px;
                    letter-spacing: 2px;
                }

                .juiceHeroTitle {
                    font-size: 65px;
                    line-height: 1.1;
                    margin-bottom: 20px;
                    font-weight: 800;
                }

                .juiceHeroText {
                    max-width: 650px;
                    line-height: 1.7;
                    margin-bottom: 30px;
                    opacity: 0.9;
                    text-align: justify;
                }

                .juiceHeroBtn {
                    display: inline-block;
                    padding: 14px 30px;
                    background: #fff3b0;
                    color: #ff2f63;
                    border-radius: 50px;
                    text-decoration: none;
                    font-weight: bold;
                    transition: 0.3s;
                }

                    .juiceHeroBtn:hover {
                        transform: translateY(-5px);
                    }

                /* =========================
           PRODUCT CARDS
        ========================= */

                .juiceHeroProducts {
                    display: flex;
                    gap: 20px;
                    margin-top: 40px;
                    position: relative;
                }

                .juiceProductCard {
                    width: 110px;
                    background: rgba(255,255,255,0.95);
                    border-radius: 18px;
                    padding: 15px;
                    text-align: center;
                    transition: 0.4s;
                    position: relative;
                    overflow: hidden;
                    box-shadow: 0 20px 30px rgba(0,0,0,0.12);
                }

                    .juiceProductCard::before {
                        content: "";
                        position: absolute;
                        width: 160%;
                        height: 40px;
                        background: rgba(255,255,255,0.4);
                        transform: rotate(-45deg);
                        top: -50px;
                        left: -140%;
                        transition: 0.6s;
                    }

                    .juiceProductCard:hover::before {
                        left: 120%;
                    }

                    .juiceProductCard:hover {
                        transform: translateY(-10px);
                    }

                    .juiceProductCard img {
                        width: 60px;
                        height: 60px;
                        object-fit: cover;
                        border-radius: 10px;
                    }

                    .juiceProductCard p {
                        margin-top: 10px;
                        font-size: 13px;
                        color: #444;
                        font-weight: 600;
                    }

                /* =========================
           RIGHT IMAGE
        ========================= */

                .juiceHeroImage {
                    flex: 1;
                    position: relative;
                    text-align: center;
                }

                .juiceSplash {
                    position: absolute;
                    width: 500px;
                    height: 500px;
                    border-radius: 50%;
                    border: 25px solid rgba(255,255,255,0.15);
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    z-index: -1;
                }

              

                @keyframes floatBottle {
                    0% {
                        transform: translateY(0px) rotate(-2deg);
                    }

                    50% {
                        transform: translateY(-20px) rotate(2deg);
                    }

                    100% {
                        transform: translateY(0px) rotate(-2deg);
                    }
                }

                /* =========================
           FLOATING FRUITS
        ========================= */

               

             

                @keyframes fruitFloat {
                    0% {
                        transform: translateY(0px);
                    }

                    50% {
                        transform: translateY(-20px);
                    }

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

                /* =========================
           FOOTER WAVE
        ========================= */

                .juiceWaveFooter {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    line-height: 0;
                }

                    .juiceWaveFooter svg {
                        width: 100%;
                        height: 140px;
                    }

                    .juiceWaveFooter .shape-fill {
                        fill: rgba(255,255,255,0.15);
                    }

                /* =========================
           RESPONSIVE
        ========================= */

                @media(max-width:900px) {

                    .juiceHeroContainer {
                        flex-direction: column;
                        text-align: center;
                    }

                    .juiceHeroTitle {
                        font-size: 45px;
                    }

                    .juiceHeroProducts {
                        justify-content: center;
                        flex-wrap: wrap;
                    }

                 
                }
   
     

        /* MAIN SCENE */
        .scene {
            position: relative;
            width: 420px;
            height: 760px;
        }

        /* ORANGE GLOW */
        .glow {
            position: absolute;
            width: 320px;
            height: 320px;
            background: orange;
            border-radius: 50%;
            filter: blur(130px);
            opacity: 0.12;
            left: 50%;
            bottom: 120px;
            transform: translateX(-50%);
        }

        /* GLASS */
        .glass {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 250px;
            height: 540px;
            border: 4px solid rgba(255,255,255,0.35);
            border-top: none;
            border-radius: 0 0 55px 55px;
            overflow: hidden;
            background: rgba(255,255,255,0.05);
            backdrop-filter: blur(8px);
            box-shadow: inset 0 0 20px rgba(255,255,255,0.08), 0 0 30px rgba(255,255,255,0.08);
        }

        /* GLASS SHINE */
        .glass::before {
            content: "";
            position: absolute;
            top: 20px;
            left: 18px;
            width: 36px;
            height: 430px;
            border-radius: 30px;
            background: linear-gradient( to right, rgba(255,255,255,0.55), rgba(255,255,255,0.02) );
            filter: blur(2px);
            z-index: 50;
        }

        /* WATER */
        .water {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 72%;
            background: linear-gradient( to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0.05) );
            backdrop-filter: blur(3px);
            overflow: visible;
            animation: waterOrangeLevels 14s forwards;
            animation-delay: 6s;
        }

        /* WATER COLOR LEVELS */
        @keyframes waterOrangeLevels {

            0% {
                background: linear-gradient( to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0.05) );
            }

            10% {
                background: linear-gradient( to bottom, rgba(255,220,180,0.18), rgba(255,190,120,0.16) );
            }

            20% {
                background: linear-gradient( to bottom, rgba(255,210,150,0.28), rgba(255,170,80,0.24) );
            }

            30% {
                background: linear-gradient( to bottom, rgba(255,190,120,0.38), rgba(255,150,50,0.35) );
            }

            40% {
                background: linear-gradient( to bottom, rgba(255,175,90,0.50), rgba(255,135,25,0.48) );
            }

            50% {
                background: linear-gradient( to bottom, rgba(255,160,70,0.60), rgba(255,120,10,0.58) );
            }

            60% {
                background: linear-gradient( to bottom, rgba(255,145,50,0.70), rgba(255,105,0,0.68) );
            }

            70% {
                background: linear-gradient( to bottom, rgba(255,130,35,0.78), rgba(255,95,0,0.76) );
            }

            80% {
                background: linear-gradient( to bottom, rgba(255,120,25,0.85), rgba(255,85,0,0.82) );
            }

            90% {
                background: linear-gradient( to bottom, rgba(255,110,15,0.92), rgba(255,75,0,0.90) );
            }

            100% {
                background: linear-gradient( to bottom, rgba(255,100,0,1), rgba(220,70,0,1) );
            }
        }

        /* WATER SURFACE */
        .wave {
            position: absolute;
            top: -15px;
            left: 0;
            width: 200%;
            height: 35px;
            border-radius: 45%;
            background: rgba(255,255,255,0.28);
            animation: waveMove 5s linear infinite;
        }

        @keyframes waveMove {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        /* TABLET */
        .tablet {
            position: absolute;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
            width: 95px;
            height: 95px;
            border-radius: 50%;
            background: white;
            z-index: 120;
            box-shadow: inset -8px -8px 15px rgba(0,0,0,0.12), 0 0 30px rgba(255,255,255,0.95);
            animation: tabletDrop 6s forwards, tabletMelt 8s forwards;
            animation-delay: 0s, 6s;
        }

        /* TABLET FALL TO BOTTOM */
        @keyframes tabletDrop {

            0% {
                top: 10px;
                transform: translateX(-50%) scale(1);
            }

            60% {
                top: 560px;
            }

            80% {
                top: 580px;
            }

            90% {
                top: 630px;
                transform: translateX(-50%) scale(0.95);
            }

            100% {
                top: 650px;
                transform: translateX(-50%) scale(1);
            }
        }

        /* TABLET MELT */
        @keyframes tabletMelt {

            0% {
                transform: translateX(-50%) scale(1);
                opacity: 1;
                filter: blur(0px);
            }

            20% {
                transform: translateX(-50%) scale(0.92);
                opacity: 0.95;
            }

            40% {
                transform: translateX(-50%) scale(0.75);
                opacity: 0.75;
                filter: blur(1px);
            }

            60% {
                transform: translateX(-50%) scale(0.55);
                opacity: 0.5;
                filter: blur(3px);
            }

            80% {
                transform: translateX(-50%) scale(0.28);
                opacity: 0.2;
                filter: blur(6px);
            }

            100% {
                transform: translateX(-50%) scale(0);
                opacity: 0;
                filter: blur(10px);
            }
        }

        /* OFFER */
        .offer {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            color: white;
            font-size: 32px;
            font-weight: bold;
            opacity: 0;
            z-index: 200;
            animation: showOffer 2s forwards;
            animation-delay: 10s;
            text-shadow: 0 0 10px white, 0 0 25px orange;
        }

        @keyframes showOffer {

            from {
                opacity: 0;
                transform: translate(-50%,-40%);
            }

            to {
                opacity: 1;
                transform: translate(-50%,-50%);
            }
        }

        /* FIZZ BUBBLES */
        .fizz {
            position: absolute;
            bottom: -40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.96);
            opacity: 0;
            box-shadow: 0 0 10px white, 0 0 20px rgba(255,255,255,0.9), 0 0 35px rgba(255,255,255,0.6);
            animation: fizzRise linear infinite;
            animation-delay: 6s;
        }

        /* BUBBLE MOTION */
        @keyframes fizzRise {

            0% {
                transform: translate(0,0) scale(0.2);
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            80% {
                opacity: 1;
            }

            100% {
                transform: translate(var(--moveX), -460px) scale(1.2);
                opacity: 0;
            }
        }

        /* MANY RANDOM BUBBLES */

        .fizz:nth-child(1) {
            left: 4%;
            width: 5px;
            height: 5px;
            animation-duration: 2s;
            --moveX:-12px;
        }

        .fizz:nth-child(2) {
            left: 8%;
            width: 8px;
            height: 8px;
            animation-duration: 3s;
            --moveX:15px;
        }

        .fizz:nth-child(3) {
            left: 12%;
            width: 12px;
            height: 12px;
            animation-duration: 4s;
            --moveX:-14px;
        }

        .fizz:nth-child(4) {
            left: 16%;
            width: 6px;
            height: 6px;
            animation-duration: 2.5s;
            --moveX:10px;
        }

        .fizz:nth-child(5) {
            left: 20%;
            width: 15px;
            height: 15px;
            animation-duration: 5s;
            --moveX:-18px;
        }

        .fizz:nth-child(6) {
            left: 24%;
            width: 9px;
            height: 9px;
            animation-duration: 3.2s;
            --moveX:18px;
        }

        .fizz:nth-child(7) {
            left: 28%;
            width: 5px;
            height: 5px;
            animation-duration: 2.1s;
            --moveX:-8px;
        }

        .fizz:nth-child(8) {
            left: 32%;
            width: 11px;
            height: 11px;
            animation-duration: 4.4s;
            --moveX:16px;
        }

        .fizz:nth-child(9) {
            left: 36%;
            width: 7px;
            height: 7px;
            animation-duration: 2.8s;
            --moveX:-14px;
        }

        .fizz:nth-child(10) {
            left: 40%;
            width: 15px;
            height: 15px;
            animation-duration: 5.4s;
            --moveX:22px;
        }

        .fizz:nth-child(11) {
            left: 44%;
            width: 8px;
            height: 8px;
            animation-duration: 3s;
            --moveX:-10px;
        }

        .fizz:nth-child(12) {
            left: 48%;
            width: 6px;
            height: 6px;
            animation-duration: 2.4s;
            --moveX:10px;
        }

        .fizz:nth-child(13) {
            left: 52%;
            width: 14px;
            height: 14px;
            animation-duration: 4.9s;
            --moveX:-18px;
        }

        .fizz:nth-child(14) {
            left: 56%;
            width: 10px;
            height: 10px;
            animation-duration: 3.5s;
            --moveX:15px;
        }

        .fizz:nth-child(15) {
            left: 60%;
            width: 5px;
            height: 5px;
            animation-duration: 2.2s;
            --moveX:-5px;
        }

        .fizz:nth-child(16) {
            left: 64%;
            width: 9px;
            height: 9px;
            animation-duration: 3.1s;
            --moveX:10px;
        }

        .fizz:nth-child(17) {
            left: 68%;
            width: 12px;
            height: 12px;
            animation-duration: 4.3s;
            --moveX:-12px;
        }

        .fizz:nth-child(18) {
            left: 72%;
            width: 7px;
            height: 7px;
            animation-duration: 2.9s;
            --moveX:16px;
        }

        .fizz:nth-child(19) {
            left: 76%;
            width: 14px;
            height: 14px;
            animation-duration: 5.2s;
            --moveX:-20px;
        }

        .fizz:nth-child(20) {
            left: 80%;
            width: 8px;
            height: 8px;
            animation-duration: 3.3s;
            --moveX:12px;
        }

        .fizz:nth-child(21) {
            left: 84%;
            width: 6px;
            height: 6px;
            animation-duration: 2.5s;
            --moveX:-8px;
        }

        .fizz:nth-child(22) {
            left: 88%;
            width: 11px;
            height: 11px;
            animation-duration: 4.1s;
            --moveX:18px;
        }

        .fizz:nth-child(23) {
            left: 92%;
            width: 5px;
            height: 5px;
            animation-duration: 2s;
            --moveX:-10px;
        }

        .fizz:nth-child(24) {
            left: 96%;
            width: 9px;
            height: 9px;
            animation-duration: 3.7s;
            --moveX:14px;
        }
    
/* LEFT CONTENT */

.content{
    width:50%;
    z-index:2;
}

.tag{
    display:inline-block;
    padding:10px 22px;
    border-radius:40px;
    background:#d8b98c;
    color:#fff;
    font-size:14px;
    letter-spacing:2px;
    margin-bottom:25px;
}

.content h1{
    font-size:72px;
    line-height:82px;
    color:#3c2415;
    margin-bottom:25px;
}

.content h1 span{
    color:#b07b42;
}

.content p{
    font-size:18px;
    line-height:34px;
    color:#5c5147;
    margin-bottom:35px;
    max-width:600px;
}

/* BUTTONS */

.buttons{
    display:flex;
    gap:20px;
}

.btn{
    padding:16px 34px;
    border:none;
    border-radius:50px;
    font-size:16px;
    cursor:pointer;
    transition:0.4s;
    font-weight:600;
}

.primary{
    background:#b07b42;
    color:#fff;
    box-shadow:0 10px 25px rgba(176,123,66,0.35);
}

.primary:hover{
    transform:translateY(-5px);
}

.secondary{
    background:#fff;
    color:#3c2415;
}

.secondary:hover{
    transform:translateY(-5px);
}

/* RIGHT IMAGE */

.image-box{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* CIRCLE BACKGROUND */

/*.circle{
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    background: radial-gradient(circle, rgb(54 94 141), rgb(3 18 35));
    filter:blur(2px);
}*/

/* CUP IMAGE */

.cup-img{
    width:650px;
    position:relative;
    z-index:2;
    animation:float 5s ease-in-out infinite;
    filter:drop-shadow(0 30px 30px rgba(0,0,0,0.25));
}

/* FLOAT EFFECT */

@keyframes float{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-18px);
    }

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

/* STEAM EFFECT */

.steam{
    position:absolute;
    top:-161px;
    display:flex;
    gap:18px;
    z-index:5;
}

.steam span{
    width:18px;
    height:220px;

    background:
    linear-gradient(
    to top,
    rgba(255,255,255,0),
    rgba(255,255,255,0.7),
    rgba(255,255,255,0));

    border-radius:50%;
    filter:blur(14px);

    animation:steam 7s ease-in-out infinite;
    animation-delay:calc(var(--i) * -0.8s);
}

/* STEAM ANIMATION */

@keyframes steam{

    0%{
        transform:
        translateY(80px)
        translateX(0)
        scaleX(1);

        opacity:0;
    }

    20%{
        opacity:0.6;
    }

    50%{
        transform:
        translateY(-30px)
        translateX(12px)
        scaleX(2.5);
    }

    100%{
        transform:
        translateY(-180px)
        translateX(-10px)
        scaleX(4);

        opacity:0;
    }
}

/* FEATURES */

.features{
    width:100%;
    padding:100px 8%;
    background:#fff;
}

.features-title{
    text-align:center;
    margin-bottom:70px;
}

.features-title h2{
    font-size:48px;
    color:#3c2415;
    margin-bottom:15px;
}

.features-title p{
    color:#777;
    font-size:18px;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.card{
    background:#fff;
    padding:40px 30px;
    border-radius:25px;
    transition:0.4s;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.card:hover{
    transform:translateY(-10px);
}

.card h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #111827;
    font-weight: 600;
}

.card p{
    color:#666;
    line-height:28px;
}

/* RESPONSIVE */

@media(max-width:991px){

.hero{
    flex-direction:column;
    text-align:center;
    padding-top:120px;
}

.content{
    width:100%;
}

.image-box{
    width:100%;
    margin-top:60px;
}

.content h1{
    font-size:52px;
    line-height:62px;
}

.buttons{
    justify-content:center;
}

.cup-img{
    width:500px;
}

}

@media(max-width:600px){

.content h1{
    font-size:40px;
    line-height:50px;
}

.content p{
    font-size:16px;
    line-height:30px;
}

.cup-img{
    width:360px;
}

/*.circle{
    width:340px;
    height:340px;
}*/

}