/*=====================================
ANIMATION.CSS
======================================*/

/* Loader */

@keyframes spin{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

/* Fade */

@keyframes fadeIn{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* Hero Content */

.hero-content{

animation:fadeIn 1.2s ease;

}

/* Floating Logo */

@keyframes floatLogo{

0%{

transform:translateY(0px);

}

25%{

transform:translateY(-10px);

}

50%{

transform:translateY(-18px);

}

75%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

.hero-logo img{

animation:none;

}

/* Pulse Glow */

@keyframes pulseGlow{

0%{

box-shadow:0 0 0 rgba(0,212,255,.1);

}

50%{

box-shadow:

0 0 25px rgba(0,212,255,.35),

0 0 60px rgba(0,212,255,.25);

}

100%{

box-shadow:0 0 0 rgba(0,212,255,.1);

}

}

.btn-primary{

animation:pulseGlow 3s infinite;

}

/* Floating Circles */

@keyframes floatCircle{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-35px);

}

100%{

transform:translateY(0px);

}

}

.circle.one{

animation:floatCircle 10s infinite linear;

}

.circle.two{

animation:floatCircle 14s infinite linear reverse;

}

.circle.three{

animation:floatCircle 18s infinite linear;

}

/* Scroll Mouse */

@keyframes scroll{

0%{

transform:translateY(0);

opacity:1;

}

100%{

transform:translateY(12px);

opacity:0;

}

}

.scroll-down span{

animation:scroll 1.6s infinite;

}

/* Cards Fade */

.rate-card,

.market-card,

.step-card,

.contact-card,

.counter-card{

animation:fadeIn 1s ease;

}

/* Hover Lift */

@keyframes lift{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

.rate-card:hover,

.market-card:hover{

animation:lift .6s ease;

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

.btn-primary,
.btn-secondary{

position:relative;

overflow:hidden;

}

.btn-primary::before,
.btn-secondary::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:linear-gradient(

90deg,

transparent,

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

transparent

);

transform:skewX(-25deg);

}

.btn-primary:hover::before,
.btn-secondary:hover::before{

animation:shine 1s linear;

}

@keyframes shine{

0%{

left:-120%;

}

100%{

left:160%;

}

}

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

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

.hero{

background-size:300% 300%;

animation:gradientMove 14s ease infinite;

}

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

@keyframes slideDown{

from{

transform:translateY(-100%);

opacity:0;

}

to{

transform:translateY(0);

opacity:1;

}

}

.header{

animation:slideDown .8s ease;

}

/*=====================================
ROTATING ICON
======================================*/

@keyframes rotateSlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

.rate-card i:hover,

.contact-card i:hover{

animation:rotateSlow 1s linear;

}

/*=====================================
FAQ
======================================*/

.faq-item{

transition:.35s;

}

.faq-item.active{

transform:scale(1.02);

}

/*=====================================
SOCIAL ICON
======================================*/

.social-links a:hover{

animation:bounce .7s;

}

@keyframes bounce{

0%{

transform:translateY(0);

}

30%{

transform:translateY(-10px);

}

60%{

transform:translateY(4px);

}

100%{

transform:translateY(0);

}

}

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

@keyframes glow{

0%{

text-shadow:0 0 5px rgba(0,212,255,.25);

}

50%{

text-shadow:

0 0 15px rgba(0,212,255,.8),

0 0 30px rgba(0,212,255,.4);

}

100%{

text-shadow:0 0 5px rgba(0,212,255,.25);

}

}

.hero h1{

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

}

/*=====================================
CARD BORDER GLOW
======================================*/

.market-card::before,

.rate-card::before{

content:"";

position:absolute;

inset:-2px;

border-radius:24px;

padding:2px;

background:linear-gradient(

135deg,

transparent,

#00d4ff,

transparent

);

opacity:0;

transition:.4s;

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

}

.market-card:hover::before,

.rate-card:hover::before{

opacity:1;

}

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

.hero-logo img{

transition:.5s;

}

.hero-logo img:hover{

transform:none;

}

/*=====================================
END
======================================*/