/*=========================================
        FADE UP
=========================================*/

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(60px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

.fade-up{

animation:fadeUp 1s ease forwards;

}

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

@keyframes fadeLeft{

0%{
opacity:0;
transform:translateX(-80px);
}

100%{
opacity:1;
transform:translateX(0);
}

}

.fade-left{

animation:fadeLeft 1s ease forwards;

}

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

@keyframes fadeRight{

0%{
opacity:0;
transform:translateX(80px);
}

100%{
opacity:1;
transform:translateX(0);
}

}

.fade-right{

animation:fadeRight 1s ease forwards;

}

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

@keyframes zoomIn{

0%{
opacity:0;
transform:scale(.8);
}

100%{
opacity:1;
transform:scale(1);
}

}

.zoom{

animation:zoomIn .8s ease forwards;

}

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

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

.service-card i,
.contact-card i,
.why-card i{

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

}

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

.btn-primary{
    position:relative;
    overflow:hidden;
}

.btn-primary:hover{
    filter:brightness(1.08);
}
/*=========================================
        CARD GLOW
=========================================*/

.service-card,
.why-card,
.pricing-card,
.testimonial-card{

transition:.4s;

}

.service-card:hover,
.why-card:hover,
.pricing-card:hover,
.testimonial-card:hover{

box-shadow:

0 15px 40px rgba(43,141,255,.20),

0 0 35px rgba(43,141,255,.18);

}

/*=========================================
        HERO BACKGROUND
=========================================*/

.hero{

background-size:cover;

animation:heroZoom 18s linear infinite alternate;

}

@keyframes heroZoom{

0%{

background-size:100%;

}

100%{

background-size:110%;

}

}

/*=========================================
        SPIN
=========================================*/

@keyframes rotate{

100%{

transform:rotate(360deg);

}

}

.loader-circle{

width:80px;

height:80px;

border:5px solid rgba(255,255,255,.2);

border-top:5px solid #2B8DFF;

border-radius:50%;

animation:rotate 1s linear infinite;

}

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

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(43,141,255,.7);

}

70%{

box-shadow:0 0 0 18px rgba(43,141,255,0);

}

100%{

box-shadow:0 0 0 0 rgba(43,141,255,0);

}

}

.btn-primary{

animation:pulse 3s infinite;

}

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

.about-left img{

transition:.5s;

}

.about-left img:hover{

transform:scale(1.05);

}

/*=========================================
        SOCIAL ICONS
=========================================*/

.footer-social a{

transition:.35s;

}

.footer-social a:hover{

transform:translateY(-8px) rotate(360deg);

}