/*=========================================================
 SURYA LIGHTS
 ANIMATIONS
=========================================================*/

/*=========================================================
 KEYFRAMES
=========================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes zoomOut{

    from{

        opacity:0;

        transform:scale(1.15);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes rotate360{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.06);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================================================
 ANIMATION CLASSES
=========================================================*/

.fade-up{

    animation:fadeUp .8s ease both;

}

.fade-down{

    animation:fadeDown .8s ease both;

}

.fade-left{

    animation:fadeLeft .8s ease both;

}

.fade-right{

    animation:fadeRight .8s ease both;

}

.zoom-in{

    animation:zoomIn .8s ease both;

}

.zoom-out{

    animation:zoomOut .8s ease both;

}

.float{

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

}

.pulse{

    animation:pulse 2s infinite;

}

.bounce{

    animation:bounce 2s infinite;

}

.rotate{

    animation:rotate360 8s linear infinite;

}

/*=========================================================
 HERO FLOATING CARDS
=========================================================*/

.card-1{

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

}

.card-2{

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

}

.card-3{

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

}

.card-4{

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

}

.card-5{

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

}

.card-6{

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

}

/*=========================================================
 SCROLL INDICATOR
=========================================================*/

.scroll-indicator i{

    animation:bounce 2s infinite;

}

/*=========================================================
 PRELOADER
=========================================================*/

.loader{

    animation:spin 1s linear infinite;

}

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

.btn{

    transition:all .35s ease;

}

.btn:hover{

    transform:translateY(-4px);

}

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

.product-card,
.category-card,
.why-card,
.process-card,
.testimonial-card{

    transition:all .35s ease;

}

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

.product-image img,
.category-image img{

    transition:transform .45s ease;

}

/*=========================================================
 REVEAL ANIMATION
=========================================================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*=========================================================
 DELAYS
=========================================================*/

.delay-1{

    animation-delay:.2s;

}

.delay-2{

    animation-delay:.4s;

}

.delay-3{

    animation-delay:.6s;

}

.delay-4{

    animation-delay:.8s;

}