/*==================================
FADE ANIMATIONS
==================================*/

.fade-up{

opacity:0;

transform:translateY(70px);

transition:

opacity .9s ease,

transform .9s ease;

}

.fade-up.active{

opacity:1;

transform:translateY(0);

}



.fade-down{

opacity:0;

transform:translateY(-70px);

transition:

opacity .9s ease,

transform .9s ease;

}

.fade-down.active{

opacity:1;

transform:translateY(0);

}



.fade-left{

opacity:0;

transform:translateX(-70px);

transition:

opacity .9s ease,

transform .9s ease;

}

.fade-left.active{

opacity:1;

transform:translateX(0);

}



.fade-right{

opacity:0;

transform:translateX(70px);

transition:

opacity .9s ease,

transform .9s ease;

}

.fade-right.active{

opacity:1;

transform:translateX(0);

}



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

.zoom-in{

opacity:0;

transform:scale(.85);

transition:

opacity .8s ease,

transform .8s ease;

}

.zoom-in.active{

opacity:1;

transform:scale(1);

}



/*==================================
ROTATE EFFECT
==================================*/

.rotate-up{

opacity:0;

transform:

perspective(1000px)

rotateX(15deg)

translateY(50px);

transition:1s;

}

.rotate-up.active{

opacity:1;

transform:

perspective(1000px)

rotateX(0)

translateY(0);

}



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

.float{

animation:

floating 5s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}



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

.pulse{

animation:

pulse 2s infinite;

}

@keyframes pulse{

0%{

box-shadow:

0 0 0 0

rgba(201,162,39,.45);

}

70%{

box-shadow:

0 0 0 18px

rgba(201,162,39,0);

}

100%{

box-shadow:

0 0 0 0

rgba(201,162,39,0);

}

}



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

.image-hover{

overflow:hidden;

border-radius:24px;

}

.image-hover img{

transition:

transform .8s ease;

}

.image-hover:hover img{

transform:scale(1.08);

}









































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

.tilt-card{

transform-style:preserve-3d;

transition:

transform .45s ease,

box-shadow .45s ease;

will-change:transform;

}

.tilt-card:hover{

transform:

perspective(1200px)

rotateX(4deg)

rotateY(-4deg)

translateY(-10px);

box-shadow:

0 30px 70px rgba(0,0,0,.12);

}


/*==================================
GLASS SHINE
==================================*/

.glass{

position:relative;

overflow:hidden;

}

.glass::before{

content:"";

position:absolute;

top:-120%;

left:-50%;

width:60%;

height:250%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transform:rotate(25deg);

transition:1s;

}

.glass:hover::before{

left:150%;

}


/*==================================
HERO CONTENT
==================================*/

.hero-content{

animation:

heroFade 1.2s ease;

}

@keyframes heroFade{

0%{

opacity:0;

transform:

translateY(60px);

}

100%{

opacity:1;

transform:

translateY(0);

}

}


/*==================================
NAVBAR
==================================*/

.header{

animation:

navDrop .8s ease;

}

@keyframes navDrop{

from{

opacity:0;

transform:

translateY(-80px);

}

to{

opacity:1;

transform:

translateY(0);

}

}


/*==================================
BUTTON HOVER
==================================*/

.btn{

overflow:hidden;

position:relative;

}

.btn::after{

content:"";

position:absolute;

top:0;

left:-120%;

width:120%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transition:.6s;

}

.btn:hover::after{

left:120%;

}


/*==================================
IMAGE FADE
==================================*/

.slider img{

animation:

imageFade .9s;

}

@keyframes imageFade{

from{

opacity:.2;

transform:scale(1.05);

}

to{

opacity:1;

transform:scale(1);

}

}


/*==================================
COUNTER POP
==================================*/

.counter-card{

animation:

counterFloat 5s ease-in-out infinite;

}

.counter-card:nth-child(2){

animation-delay:.5s;

}

.counter-card:nth-child(3){

animation-delay:1s;

}

@keyframes counterFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}


/*==================================
ICON FLOAT
==================================*/

.feature-card i,

.benefit-card i,

.contact-card i,

.mission-card i{

animation:

iconFloat 4s ease-in-out infinite;

}

@keyframes iconFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}


/*==================================
SLIDER DOT
==================================*/

.slider-dot.active{

animation:

dotPulse 1.5s infinite;

}

@keyframes dotPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.3);

}

100%{

transform:scale(1);

}

}


/*==================================
PERFORMANCE
==================================*/

.hero,

.page-hero,

.slider img,

.tilt-card,

.btn{

backface-visibility:hidden;

transform:translateZ(0);

will-change:transform,opacity;

}