/*=========================================
        ANIMATION.CSS
        Sparo Naturals
==========================================*/


/*==========================
    Fade Up
==========================*/

.fade-up{
    opacity:0;
    transform:translateY(50px);
    transition:all .8s ease;
}

.fade-up.active{
    opacity:1;
    transform:translateY(0);
}


/*==========================
    Fade Left
==========================*/

.fade-left{
    opacity:0;
    transform:translateX(-80px);
    transition:all .8s ease;
}

.fade-left.active{
    opacity:1;
    transform:translateX(0);
}


/*==========================
    Fade Right
==========================*/

.fade-right{
    opacity:0;
    transform:translateX(80px);
    transition:all .8s ease;
}

.fade-right.active{
    opacity:1;
    transform:translateX(0);
}


/*==========================
    Zoom In
==========================*/

.zoom{
    opacity:0;
    transform:scale(.8);
    transition:all .7s ease;
}

.zoom.active{
    opacity:1;
    transform:scale(1);
}


/*==========================
    Floating Animation
==========================*/

.float{

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

}

@keyframes float{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}


/*==========================
    Pulse
==========================*/

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.05);
}

100%{
transform:scale(1);
}

}


/*==========================
    Rotate
==========================*/

.rotate{

animation:rotate 12s linear infinite;

}

@keyframes rotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}


/*==========================
    Bounce
==========================*/

.bounce{

animation:bounce 2s infinite;

}

@keyframes bounce{

0%{
transform:translateY(0);
}

25%{
transform:translateY(-8px);
}

50%{
transform:translateY(0);
}

75%{
transform:translateY(-4px);
}

100%{
transform:translateY(0);
}

}


/*==========================
    Button Hover
==========================*/

.btn{

position:relative;

overflow:hidden;

}

.btn::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

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

transition:.5s;

}

.btn:hover::before{

left:100%;

}


/*==========================
    Card Hover
==========================*/

.benefit-card,
.testimonial,
.step,
.feature{

transition:.4s;

}

.benefit-card:hover,
.testimonial:hover,
.step:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.feature:hover{

transform:scale(1.05);

}


/*==========================
    Product Hover
==========================*/

.product-image img{

transition:.5s;

}

.product-image:hover img{

transform:scale(1.08);

}


/*==========================
    Image Hover
==========================*/

.about-image{

overflow:hidden;

border-radius:25px;

}

.about-image img{

transition:.5s;

}

.about-image:hover img{

transform:scale(1.08);

}


/*==========================
    Navbar Link
==========================*/

nav ul li a{

position:relative;

}

nav ul li a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:#F28B2D;

transition:.3s;

}

nav ul li a:hover::after{

width:100%;

}


/*==========================
    Scroll Down
==========================*/

.scroll-down{

animation:scroll 2s infinite;

}

@keyframes scroll{

0%{

transform:translate(-50%,0);

}

50%{

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

}

100%{

transform:translate(-50%,0);

}

}


/*==========================
    Shine Effect
==========================*/

.shine{

position:relative;

overflow:hidden;

}

.shine::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:50%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.4),

transparent

);

transform:skewX(-25deg);

}

.shine:hover::before{

left:160%;

transition:.8s;

}


/*==========================
    Social Icons
==========================*/

.social a{

transition:.4s;

}

.social a:hover{

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

}


/*==========================
    FAQ
==========================*/

.faq-item{

transition:.4s;

}

.faq-item:hover{

box-shadow:0 15px 30px rgba(0,0,0,.08);

}


/*==========================
    Hero Text
==========================*/

.hero-left h1{

animation:slideUp 1s ease;

}

.hero-left p{

animation:fade 1.5s ease;

}

.hero-buttons{

animation:fade 2s ease;

}

@keyframes slideUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}


/*==========================
    Loading Animation
==========================*/

.loading{

animation:loading 1s linear infinite;

}

@keyframes loading{

0%{

transform:rotate(0);

}

100%{

transform:rotate(360deg);

}

}


/*==========================
    Smooth Transition
==========================*/

*{

transition:

background .3s,

color .3s,

box-shadow .3s;

}