@keyframes slideUp{

0%{

opacity:0;

transform:translateY(80px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeIn{

0%{

opacity:0;

}

100%{

opacity:1;

}

}

@keyframes float{

0%{

transform:

translateY(0)

rotate(0deg);

}

50%{

transform:

translateY(-18px)

rotate(8deg);

}

100%{

transform:

translateY(0)

rotate(0deg);

}

}
@keyframes bubbles{

0%{

transform:translateY(0);

opacity:0;

}

30%{

opacity:1;

}

100%{

transform:translateY(-420px);

opacity:0;

}

}

@keyframes twinkle{

0%{

opacity:.2;

transform:scale(.9);

}

50%{

opacity:1;

transform:scale(1.2);

}

100%{

opacity:.2;

transform:scale(.9);

}

}

@keyframes heroZoom{

0%{

transform:scale(1);

}

100%{

transform:scale(1.08);

}

}

@keyframes bounce{

0%,20%,50%,80%,100%{

transform:translate(-50%,0);

}

40%{

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

}

60%{

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

}

}



@keyframes rise{

0%{

transform:translateY(0);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:translateY(-900px);

opacity:0;

}

}

@keyframes pulseLightning{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

@keyframes modalFloat{

    0%{

        transform:
        translateY(0px)
        rotate(0deg);

    }

    25%{

        transform:
        translateY(-12px)
        rotate(4deg);

    }

    50%{

        transform:
        translateY(-20px)
        rotate(-3deg);

    }

    75%{

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

    }

    100%{

        transform:
        translateY(0px)
        rotate(0deg);

    }

}

.bubble-premium{

    animation:
    modalFloat 9s ease-in-out infinite;

}

.bubble-clean{

    animation:
    modalFloat 7s ease-in-out infinite;

}

.bubble-truck{

    animation:
    modalFloat 11s ease-in-out infinite;

}

.bubble-fold{

    animation:
    modalFloat 8s ease-in-out infinite;

}

.bubble-love{

    animation:
    modalFloat 10s ease-in-out infinite;

}

.bubble-leaf{

    animation:
    modalFloat 6s ease-in-out infinite;

}

@keyframes bubblePop{

    0%{

        transform:scale(1);
        opacity:1;
        filter:blur(0);

    }

    35%{

        transform:scale(1.35);

    }

    60%{

        transform:scale(.85);

    }

    100%{

        transform:scale(2.2);
        opacity:0;
        filter:blur(8px);

    }

}

.bubble-popup{

    transform:scale(.4);

    transition:

        opacity .35s,

        transform .35s;

}


.bubble-popup.show{

    opacity:1;

    visibility:visible;

    transform:scale(1);

}

@keyframes particleBurst{

    0%{

        transform:
        translate(0,0)
        scale(1);

        opacity:1;

    }

    100%{

        transform:
        translate(var(--x),var(--y))
        scale(0);

        opacity:0;

    }

}

@keyframes ripple{

    from{

        transform:scale(.3);

        opacity:1;

    }

    to{

        transform:scale(5);

        opacity:0;

    }

}


/*=========================================================
                PREMIUM BUTTONS
=========================================================*/

@keyframes shine{

    to{

        left:160%;

    }

}

/*=========================================================
                Auth Header
=========================================================*/
@keyframes floatingLogo{

    50%{

        transform:

        translateY(-8px);

    }

}

.auth-header{

    animation:fadeUp .5s .1s both;

}

.input-group:nth-child(1){

    animation:fadeUp .5s .25s both;

}

.input-group:nth-child(2){

    animation:fadeUp .5s .35s both;

}

.login-btn-custom{

    animation:fadeUp .5s .45s both;

}

.auth-links{

    animation:fadeUp .5s .55s both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:

        translateY(25px);

    }

    to{

        opacity:1;

        transform:

        translateY(0);

    }

}


@media (max-width:768px){
    
.glass-circle.one{

    animation: floatBubble 7s ease-in-out infinite;

}

.glass-circle.two{

    animation:floatBubble 4s ease-in-out infinite;

}

.glass-circle.three{

    animation: floatBubble 8s ease-in-out infinite;

}

@keyframes floatBubble{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


}

/*=========================================================
        CUSTOM SCROLL ANIMATIONS
=========================================================*/

[data-aos]{

    opacity:0;

    transition:

        opacity .8s ease,

        transform .8s ease;

    will-change:

        opacity,

        transform;

}

/* fade up */

[data-aos="fade-up"]{

    transform:translateY(70px);

}

/* fade down */

[data-aos="fade-down"]{

    transform:translateY(-70px);

}

/* fade left */

[data-aos="fade-left"]{

    transform:translateX(70px);

}

/* fade right */

[data-aos="fade-right"]{

    transform:translateX(-70px);

}

/* zoom */

[data-aos="zoom-in"]{

    transform:scale(.85);

}

/* animated */

[data-aos].animate{

    opacity:1;

    transform:none;

}

/*=========================================
        FLOATING ANIMATION
=========================================*/

@keyframes floatCard{

    0%,100%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

}

.card1{

    animation:floatCard 4s ease-in-out infinite;

}

.card2{

    animation:floatCard 5s ease-in-out infinite;

}

.card3{

    animation:floatCard 4.5s ease-in-out infinite;

}

.card4{

    animation:floatCard 5.5s ease-in-out infinite;

}

/*=========================================
        REWARD WHEEL
=========================================*/

@keyframes spinWheel{

    0%{

        transform:translate(-50%,-50%) rotate(0deg);

    }

    45%{

        transform:translate(-50%,-50%) rotate(360deg);

    }

    55%{

        transform:translate(-50%,-50%) rotate(360deg);

    }

    100%{

        transform:translate(-50%,-50%) rotate(720deg);

    }

}

/* Desktop wheel */
.reward-wheel-home{
    animation: spinWheel 12s linear infinite;
}

/* Mobile wheel */
.reward-wheel-home .mobile-wheel{
    animation: spinWheel 12s linear infinite;
}

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

@keyframes pulseButton{

    0%,100%{

        box-shadow:

        0 15px 40px rgba(0,0,0,.15);

    }

    50%{

        box-shadow:

        0 20px 50px rgba(255,255,255,.55);

    }

}

.reward-home-btn{

    animation:pulseButton 3s infinite;

}

.reward-home-btn{

    position:relative;

    overflow:hidden;

}

.reward-home-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.8),

        transparent

    );

    transform:skewX(-30deg);

}

.reward-home-btn:hover::before{

    animation:shine .9s;

}

@keyframes shine{

    to{

        left:160%;

    }

}

.reward-home-section::before{

    animation:bgMove 10s linear infinite alternate;

}

@keyframes bgMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-25px);

    }

}

/*=========================================
        MEMBERSHIP CARD FLOAT
=========================================*/

@keyframes floatMembership{

    0%,100%{

        transform:
        translate(-50%,-50%)
        translateY(0)
        rotate(-2deg);

    }

    50%{

        transform:
        translate(-50%,-50%)
        translateY(-15px)
        rotate(2deg);

    }

}

.membership-card{

    animation:floatMembership 6s ease-in-out infinite;

}

/*=========================================
        BENEFIT CARD FLOAT
=========================================*/

@keyframes floatBenefit{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

.card-a{

    animation:floatBenefit 4s ease-in-out infinite;

}

.card-b{

    animation:floatBenefit 5s ease-in-out infinite;

}

.card-c{

    animation:floatBenefit 4.5s ease-in-out infinite;

}

.card-d{

    animation:floatBenefit 5.5s ease-in-out infinite;

}

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

@keyframes memberPulse{

    0%,100%{

        box-shadow:
        0 15px 40px rgba(0,0,0,.18);

    }

    50%{

        box-shadow:
        0 20px 60px rgba(255,215,0,.45);

    }

}

.subscription-home-btn{

    animation:memberPulse 3s infinite;

}

.subscription-home-btn{

    position:relative;

    overflow:hidden;

}

.subscription-home-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.8),

            transparent

        );

    transform:skewX(-30deg);

}

.subscription-home-btn:hover::before{

    animation:memberShine .9s;

}

@keyframes memberShine{

    to{

        left:160%;

    }

}

.subscription-home-section::before{

    animation:bgGlow 12s ease-in-out infinite alternate;

}

@keyframes bgGlow{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-25px);

    }

}

/*=========================================
        FLOATING EXPRESS CARDS
=========================================*/

@keyframes floatExpress{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

.card-one{

    animation:floatExpress 4s ease-in-out infinite;

}

.card-two{

    animation:floatExpress 5s ease-in-out infinite;

}

.card-three{

    animation:floatExpress 4.5s ease-in-out infinite;

}

.card-four{

    animation:floatExpress 5.5s ease-in-out infinite;

}

/*=========================================
        LIGHTNING PULSE
=========================================*/

@keyframes pulseLightning{

    0%,100%{

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

        box-shadow:

            0 25px 60px rgba(0,0,0,.15);

    }

    50%{

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

        box-shadow:

            0 35px 90px rgba(255,193,7,.45);

    }

}

.express-center{

    animation:pulseLightning 3s ease-in-out infinite;

}

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

@keyframes expressPulse{

    0%,100%{

        box-shadow:

            0 20px 45px rgba(0,0,0,.18);

    }

    50%{

        box-shadow:

            0 20px 55px rgba(255,193,7,.45);

    }

}

.express-btn{

    animation:expressPulse 3s infinite;

}