/* ===========================================================
   V90 GLOBAL ANIMATIONS
=========================================================== */

/* ---------- Fade In ---------- */

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

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

/* ---------- Fade Left ---------- */

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

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

/* ---------- Fade Right ---------- */

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

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

/* ---------- Zoom ---------- */

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

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

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

.float{

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

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

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

@keyframes pulse{

0%{

transform:scale(1);

box-shadow:0 0 0 0 rgba(0,255,120,.5);

}

70%{

transform:scale(1.1);

box-shadow:0 0 0 15px rgba(0,255,120,0);

}

100%{

transform:scale(1);

box-shadow:0 0 0 0 rgba(0,255,120,0);

}

}

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

.glow{

animation:glow 3s infinite alternate;

}

@keyframes glow{

from{

box-shadow:

0 0 15px rgba(255,122,0,.20);

}

to{

box-shadow:

0 0 35px rgba(255,122,0,.45);

}

}

/* ===========================================================
   BUTTON SHINE
=========================================================== */

.btn-primary{

position:relative;

overflow:hidden;

}

.btn-primary::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.btn-primary:hover::after{

left:160%;

}

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

.service-card,
.stat-card,
.partner-card,
.testimonial-card,
.timeline-item,
.why-card{

transition:

transform .35s,

box-shadow .35s,

border-color .35s;

}

.service-card:hover,
.stat-card:hover,
.partner-card:hover,
.testimonial-card:hover,
.timeline-item:hover,
.why-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(0,0,0,.35);

}

/* ===========================================================
   HERO IMAGE
=========================================================== */

.glass-card{

animation:heroFloat 6s ease-in-out infinite;

}

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

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

.spin{

animation:spin 18s linear infinite;

}

@keyframes spin{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/* ===========================================================
   BACKGROUND GRADIENT
=========================================================== */

.gradient-one{

animation:moveOne 15s ease-in-out infinite alternate;

}

.gradient-two{

animation:moveTwo 18s ease-in-out infinite alternate;

}

@keyframes moveOne{

0%{

transform:translate(0,0);

}

100%{

transform:translate(-120px,100px);

}

}

@keyframes moveTwo{

0%{

transform:translate(0,0);

}

100%{

transform:translate(120px,-80px);

}

}

/* ===========================================================
   PAGE LOADER
=========================================================== */

body{

animation:pageFade .8s ease;

}

@keyframes pageFade{

from{

opacity:0;

}

to{

opacity:1;

}

}

/* ===========================================================
   SCROLLBAR
=========================================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#09101d;

}

::-webkit-scrollbar-thumb{

background:#ff7a00;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#ff9500;

}