/*==========================================================
LAS BILLING WEBSITE
Animations
Version : 2.0
==========================================================*/

/*==========================================================
1. FADE UP
==========================================================*/

.fade-up{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/*==========================================================
2. FADE DOWN
==========================================================*/

.fade-down{

    opacity:0;

    transform:translateY(-50px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.fade-down.show{

    opacity:1;

    transform:translateY(0);

}

/*==========================================================
3. FADE LEFT
==========================================================*/

.fade-left{

    opacity:0;

    transform:translateX(-60px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}

/*==========================================================
4. FADE RIGHT
==========================================================*/

.fade-right{

    opacity:0;

    transform:translateX(60px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

/*==========================================================
5. ZOOM IN
==========================================================*/

.zoom-in{

    opacity:0;

    transform:scale(.8);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.zoom-in.show{

    opacity:1;

    transform:scale(1);

}

/*==========================================================
6. ZOOM OUT
==========================================================*/

.zoom-out{

    opacity:0;

    transform:scale(1.15);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.zoom-out.show{

    opacity:1;

    transform:scale(1);

}

/*==========================================================
7. BLUR
==========================================================*/

.blur-in{

    opacity:0;

    filter:blur(12px);

    transition:

        opacity .8s ease,

        filter .8s ease;

}

.blur-in.show{

    opacity:1;

    filter:blur(0);

}

/*==========================================================
8. ROTATE
==========================================================*/

.rotate-in{

    opacity:0;

    transform:rotate(-12deg);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.rotate-in.show{

    opacity:1;

    transform:rotate(0);

}

/*==========================================================
9. DELAY
==========================================================*/

.delay-100{

    transition-delay:.1s;

}

.delay-200{

    transition-delay:.2s;

}

.delay-300{

    transition-delay:.3s;

}

.delay-400{

    transition-delay:.4s;

}

.delay-500{

    transition-delay:.5s;

}

/*==========================================================
10. DURATION
==========================================================*/

.duration-fast{

    transition-duration:.4s;

}

.duration-normal{

    transition-duration:.8s;

}

.duration-slow{

    transition-duration:1.2s;

}

/*==========================================================
11. FLOATING
==========================================================*/

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

.floating{

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

}

/*==========================================================
12. HERO GLOW
==========================================================*/

@keyframes heroGlow{

    0%{

        transform:scale(1);

        opacity:.5;

    }

    50%{

        transform:scale(1.12);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:.5;

    }

}

.hero-glow{

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

}

/*==========================================================
13. DASHBOARD
==========================================================*/

.dashboard-preview{

    animation:

        floating 7s ease-in-out infinite;

}

/*==========================================================
14. FLOATING CARD
==========================================================*/

.customer-card{

    animation:

        floating 4s ease-in-out infinite;

}

.payment-card{

    animation:

        floating 5s ease-in-out infinite;

}

.online-card{

    animation:

        floating 6s ease-in-out infinite;

}

/*==========================================================
15. BUTTON
==========================================================*/

.btn-primary{

    transition:

        .35s ease;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:

        0 20px 40px rgba(37,99,235,.35);

}

.btn-outline{

    transition:.35s;

}

.btn-outline:hover{

    transform:translateY(-4px);

}

/*==========================================================
16. CARD
==========================================================*/

.card{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.card:hover{

    transform:translateY(-10px);

}

/*==========================================================
17. IMAGE
==========================================================*/

.image-hover img{

    transition:

        transform .6s ease;

}

.image-hover:hover img{

    transform:scale(1.08);

}

/*==========================================================
18. ICON
==========================================================*/

.icon-box{

    transition:.35s;

}

.icon-box:hover{

    transform:rotate(8deg) scale(1.08);

}

/*==========================================================
19. NAVBAR
==========================================================*/

.nav-link{

    transition:

        color .3s ease;

}

.nav-link::after{

    transition:

        width .3s ease;

}

/*==========================================================
20. SECTION
==========================================================*/

.section-header{

    transition:.5s;

}

/*==========================================================
21. SHINE EFFECT
==========================================================*/

.shine{

    position:relative;

    overflow:hidden;

}

.shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

    transform:skewX(-25deg);

}

.shine:hover::before{

    left:150%;

    transition:1s;

}

/*==========================================================
22. GLOW HOVER
==========================================================*/

.glow-hover{

    transition:.35s;

}

.glow-hover:hover{

    box-shadow:

        0 0 50px rgba(37,99,235,.28);

}

/*==========================================================
23. GRADIENT BORDER
==========================================================*/

.gradient-border{

    position:relative;

    overflow:hidden;

}

.gradient-border::after{

    content:"";

    position:absolute;

    inset:-2px;

    background:linear-gradient(

        90deg,

        #2563EB,

        #7C3AED,

        #2563EB

    );

    background-size:300%;

    z-index:-1;

    animation:borderMove 6s linear infinite;

}

@keyframes borderMove{

    from{

        background-position:0;

    }

    to{

        background-position:300%;

    }

}

/*==========================================================
24. PULSE
==========================================================*/

@keyframes pulseGlow{

    0%{

        box-shadow:0 0 0 rgba(37,99,235,.2);

    }

    50%{

        box-shadow:0 0 35px rgba(37,99,235,.35);

    }

    100%{

        box-shadow:0 0 0 rgba(37,99,235,.2);

    }

}

.pulse-glow{

    animation:pulseGlow 2.8s infinite;

}

/*==========================================================
25. BACKGROUND BLOB
==========================================================*/

@keyframes blob{

    0%{

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

    }

    33%{

        transform:translate(35px,-45px) scale(1.05);

    }

    66%{

        transform:translate(-30px,25px) scale(.95);

    }

    100%{

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

    }

}

.blob{

    animation:blob 14s ease-in-out infinite;

}

/*==========================================================
26. GRADIENT BACKGROUND
==========================================================*/

.gradient-bg{

    background:linear-gradient(

        -45deg,

        #070B14,

        #08111F,

        #0F172A,

        #111827

    );

    background-size:400%;

    animation:gradientMove 18s ease infinite;

}

@keyframes gradientMove{

    0%{

        background-position:0 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0 50%;

    }

}

/*==========================================================
27. ICON ROTATE
==========================================================*/

.rotate-hover{

    transition:.35s;

}

.rotate-hover:hover{

    transform:rotate(180deg);

}

/*==========================================================
28. SCALE
==========================================================*/

.scale-hover{

    transition:.35s;

}

.scale-hover:hover{

    transform:scale(1.06);

}

/*==========================================================
29. OPACITY
==========================================================*/

.opacity-hover{

    transition:.35s;

}

.opacity-hover:hover{

    opacity:.75;

}

/*==========================================================
30. ANIMATION DELAY
==========================================================*/

.animate-delay-1{

    animation-delay:.1s;

}

.animate-delay-2{

    animation-delay:.2s;

}

.animate-delay-3{

    animation-delay:.3s;

}

.animate-delay-4{

    animation-delay:.4s;

}

.animate-delay-5{

    animation-delay:.5s;

}

/*==========================================================
31. SCROLL REVEAL
==========================================================*/

.reveal{

    opacity:0;

    transform:translateY(80px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}

/*==========================================================
32. STAGGER
==========================================================*/

.stagger>*{

    opacity:0;

    transform:translateY(40px);

}

.stagger.show>*{

    opacity:1;

    transform:translateY(0);

}

.stagger.show>*:nth-child(1){

    transition:.4s;

}

.stagger.show>*:nth-child(2){

    transition:.6s;

}

.stagger.show>*:nth-child(3){

    transition:.8s;

}

.stagger.show>*:nth-child(4){

    transition:1s;

}

.stagger.show>*:nth-child(5){

    transition:1.2s;

}

.stagger.show>*:nth-child(6){

    transition:1.4s;

}

/*==========================================================
33. NAVBAR
==========================================================*/

.navbar{

    transition:

        background .35s,

        box-shadow .35s,

        padding .35s;

}

/*==========================================================
34. DASHBOARD
==========================================================*/

.dashboard-preview{

    transition:

        transform .5s ease;

}

.dashboard-preview:hover{

    transform:

        translateY(-8px)

        scale(1.02);

}

/*==========================================================
35. COUNTER
==========================================================*/

.counter{

    transition:.5s;

}

.counter.finished{

    color:var(--primary);

}

/*==========================================================
36. IMAGE REVEAL
==========================================================*/

.image-reveal{

    overflow:hidden;

}

.image-reveal img{

    transform:scale(1.15);

    transition:1.2s;

}

.image-reveal.show img{

    transform:scale(1);

}

/*==========================================================
37. LOADER EXIT
==========================================================*/

#loader.hidden{

    animation:

        loaderOut .6s forwards;

}

@keyframes loaderOut{

    to{

        opacity:0;

        visibility:hidden;

    }

}

/*==========================================================
38. CTA
==========================================================*/

.cta-box{

    transition:.45s;

}

.cta-box:hover{

    transform:translateY(-6px);

}

/*==========================================================
39. PRICING
==========================================================*/

.pricing-card{

    transition:

        transform .35s,

        box-shadow .35s;

}

.pricing-card:hover{

    transform:translateY(-12px);

}

/*==========================================================
40. FAQ
==========================================================*/

.faq-item{

    transition:

        background .3s,

        border-color .3s,

        transform .3s;

}

.faq-item:hover{

    transform:translateX(5px);

}

/*==========================================================
41. HERO BACKGROUND
==========================================================*/

.hero::before{

    animation:heroBackgroundMove 18s ease-in-out infinite;

}

@keyframes heroBackgroundMove{

    0%{

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

    }

    25%{

        transform:translate(-20px,-30px) scale(1.05);

    }

    50%{

        transform:translate(20px,15px) scale(.95);

    }

    75%{

        transform:translate(-10px,25px) scale(1.03);

    }

    100%{

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

    }

}

/*==========================================================
42. SCROLL PROGRESS
==========================================================*/

#scroll-progress{

    transition:width .15s linear;

}

/*==========================================================
43. BACK TO TOP
==========================================================*/

#backToTop{

    transition:

        opacity .35s,

        transform .35s,

        background .35s;

}

#backToTop:hover{

    transform:

        translateY(-5px)

        scale(1.05);

}

/*==========================================================
44. ROTATE
==========================================================*/

.rotate-slow{

    animation:rotateSlow 30s linear infinite;

}

@keyframes rotateSlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==========================================================
45. BOUNCE
==========================================================*/

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

.bounce{

    animation:bounce 2s infinite;

}

/*==========================================================
46. PARALLAX
==========================================================*/

.parallax{

    transition:

        transform .15s linear;

    will-change:transform;

}

/*==========================================================
47. RIPPLE
==========================================================*/

.ripple{

    position:relative;

    overflow:hidden;

}

.ripple::after{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-radius:50%;

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

    top:50%;

    left:50%;

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

    transition:.5s;

}

.ripple:hover::after{

    width:350px;

    height:350px;

}

/*==========================================================
48. ICON FLOAT
==========================================================*/

.icon-float{

    animation:

        floating 3s ease-in-out infinite;

}


/*==========================================================
49. PERFORMANCE
==========================================================*/

.card,

.dashboard-preview,

.hero-glow,

.floating-card,

.cta-box{

    will-change:

        transform,

        opacity;

}

/*==========================================================
50. REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

    }

}

/*==========================================================
51. FINAL
==========================================================*/

.animate{

    opacity:1;

}

.no-animation{

    animation:none !important;

    transition:none !important;

}