/*==================================================
ESBC 2.0
ANIMATIONS
==================================================*/

/*==============================
GLOBAL TRANSITIONS
==============================*/

*{

    transition:
    color .3s ease,
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;

}

/*==============================
SECTION FADE
==============================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.fade-up.active{

    opacity:1;

    transform:translateY(0);

}

/*==============================
FADE LEFT
==============================*/

.fade-left{

    opacity:0;

    transform:translateX(-60px);

    transition:.8s ease;

}

.fade-left.active{

    opacity:1;

    transform:translateX(0);

}

/*==============================
FADE RIGHT
==============================*/

.fade-right{

    opacity:0;

    transform:translateX(60px);

    transition:.8s ease;

}

.fade-right.active{

    opacity:1;

    transform:translateX(0);

}

/*==============================
ZOOM
==============================*/

.zoom{

    opacity:0;

    transform:scale(.85);

    transition:.8s ease;

}

.zoom.active{

    opacity:1;

    transform:scale(1);

}

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

.float{

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

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

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

.btn-primary:hover{

    animation:pulse .8s;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.06);

}

100%{

transform:scale(1);

}

}

/*==============================
CARD HOVER
==============================*/

.contact-card:hover,

.testimonial-card:hover{

    animation:lift .35s forwards;

}

@keyframes lift{

from{

transform:translateY(0);

}

to{

transform:translateY(-12px);

}

}

/*==============================
SOCIAL ROTATION
==============================*/

.social-links a:hover{

animation:spin .6s linear;

}

@keyframes spin{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

/*==============================
GALLERY ZOOM
==============================*/

.gallery-item{

overflow:hidden;

}

.gallery-item img{

transition:transform .7s ease;

}

.gallery-item:hover img{

transform:scale(1.12);

}

/*==============================
ICON BOUNCE
==============================*/

.service-card i:hover,

.why-card i:hover,

.contact-card i:hover{

animation:bounce .6s;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

25%{

transform:translateY(-8px);

}

50%{

transform:translateY(0);

}

75%{

transform:translateY(-4px);

}

}

/*==============================
SCROLL TOP
==============================*/

.scroll-top{

transition:.35s;

}

.scroll-top:hover{

transform:translateY(-8px);

}

/*==============================
WHATSAPP
==============================*/

.whatsapp-float{

animation:whatsapp 2.5s infinite;

}

@keyframes whatsapp{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.6);

}

70%{

box-shadow:0 0 0 18px rgba(37,211,102,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}

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

.about-image img,

.gallery-item img{

transition:.6s ease;

}

.about-image:hover img,

.gallery-item:hover img{

transform:scale(1.08);

}

/*==============================
SMOOTH LOADER
==============================*/

.loader{

animation:fadeLoader .6s ease;

}

@keyframes fadeLoader{

from{

opacity:0;

}

to{

opacity:1;

}

}