/*======================================================
ANIMATION.CSS
Premium Government Template
======================================================*/

/*======================================================
GLOBAL TRANSITION
======================================================*/

*{

transition:
background .35s ease,
color .35s ease,
border-color .35s ease,
box-shadow .35s ease,
transform .35s ease,
opacity .35s ease;

}

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

.fade-in{

animation:fadeIn .8s ease forwards;

}

.fade-up{

opacity:0;

transform:translateY(40px);

animation:fadeUp .8s ease forwards;

}

.fade-down{

opacity:0;

transform:translateY(-40px);

animation:fadeDown .8s ease forwards;

}

.fade-left{

opacity:0;

transform:translateX(-40px);

animation:fadeLeft .8s ease forwards;

}

.fade-right{

opacity:0;

transform:translateX(40px);

animation:fadeRight .8s ease forwards;

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

@keyframes fadeUp{

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeDown{

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeLeft{

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

to{

opacity:1;

transform:translateX(0);

}

}

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

.zoom-in{

animation:zoomIn .8s ease forwards;

}

.zoom-out{

animation:zoomOut .8s ease forwards;

}

@keyframes zoomIn{

0%{

opacity:0;

transform:scale(.8);

}

100%{

opacity:1;

transform:scale(1);

}

}

@keyframes zoomOut{

0%{

opacity:0;

transform:scale(1.2);

}

100%{

opacity:1;

transform:scale(1);

}

}

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

.rotate{

animation:rotate360 10s linear infinite;

}

@keyframes rotate360{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

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

.float{

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

}

.float-slow{

animation:floatingSlow 8s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

@keyframes floatingSlow{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

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

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

box-shadow:0 0 0 0 rgba(1,43,109,.5);

}

70%{

transform:scale(1.03);

box-shadow:0 0 0 18px rgba(1,43,109,0);

}

100%{

transform:scale(1);

box-shadow:0 0 0 0 rgba(1,43,109,0);

}

}

/*======================================================
RIPPLE BUTTON
======================================================*/

.ripple{

position:relative;

overflow:hidden;

}

.ripple::after{

content:"";

position:absolute;

left:50%;

top:50%;

width:0;

height:0;

background:rgba(255,255,255,.35);

border-radius:50%;

transform:translate(-50%,-50%);

transition:.6s;

}

.ripple:hover::after{

width:420px;

height:420px;

}

/*======================================================
SHIMMER
======================================================*/

.shimmer{

position:relative;

overflow:hidden;

}

.shimmer::before{

content:"";

position:absolute;

top:0;

left:-150%;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

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

transparent

);

transform:skewX(-25deg);

}

.shimmer:hover::before{

animation:shimmer 1.1s;

}

@keyframes shimmer{

100%{

left:180%;

}

}

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

.bounce{

animation:bounce 1.2s infinite;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/*======================================================
BLINK
======================================================*/

.blink{

animation:blink 1.4s infinite;

}

@keyframes blink{

0%,100%{

opacity:1;

}

50%{

opacity:.35;

}

}

/*======================================================
GRADIENT ANIMATION
======================================================*/

.gradient-bg{

background:

linear-gradient(

-45deg,

#012B6D,

#004EA3,

#C99A2E,

#012B6D

);

background-size:400% 400%;

animation:gradientMove 12s ease infinite;

}

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

/*======================================================
HOVER LIFT
======================================================*/

.hover-lift{

transition:.35s;

}

.hover-lift:hover{

transform:translateY(-10px);

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

}
/*======================================================
 REVEAL ON SCROLL
======================================================*/

.reveal{

opacity:0;

transform:translateY(80px);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

.reveal-left{

opacity:0;

transform:translateX(-80px);

transition:.8s;

}

.reveal-left.active{

opacity:1;

transform:translateX(0);

}

.reveal-right{

opacity:0;

transform:translateX(80px);

transition:.8s;

}

.reveal-right.active{

opacity:1;

transform:translateX(0);

}

/*======================================================
 GLASS REFLECTION
======================================================*/

.glass{

position:relative;

overflow:hidden;

backdrop-filter:blur(20px);

}

.glass::before{

content:"";

position:absolute;

left:-180%;

top:0;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

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

transparent

);

transform:skewX(-25deg);

transition:1s;

}

.glass:hover::before{

left:180%;

}

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

.glow-card{

transition:.4s;

}

.glow-card:hover{

box-shadow:

0 0 0 1px rgba(1,43,109,.1),

0 25px 60px rgba(1,43,109,.18);

}

/*======================================================
 BORDER GRADIENT
======================================================*/

.border-gradient{

position:relative;

border-radius:24px;

}

.border-gradient::before{

content:"";

position:absolute;

inset:-2px;

background:

linear-gradient(

45deg,

#012B6D,

#C99A2E,

#012B6D

);

background-size:300% 300%;

animation:borderGradient 6s linear infinite;

z-index:-1;

border-radius:inherit;

}

@keyframes borderGradient{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

/*======================================================
 IMAGE PARALLAX
======================================================*/

.parallax{

overflow:hidden;

}

.parallax img{

transition:transform 6s linear;

}

.parallax:hover img{

transform:scale(1.15);

}

/*======================================================
 ROTATE HOVER
======================================================*/

.rotate-hover{

transition:.35s;

}

.rotate-hover:hover{

transform:rotate(8deg);

}

/*======================================================
 ICON POP
======================================================*/

.icon-pop{

transition:.35s;

}

.icon-pop:hover{

transform:scale(1.2);

}

/*======================================================
 SHADOW FLOAT
======================================================*/

.shadow-float{

transition:.35s;

}

.shadow-float:hover{

transform:translateY(-12px);

box-shadow:

0 35px 70px rgba(0,0,0,.16);

}

/*======================================================
 WAVE
======================================================*/

.wave{

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

transform-origin:70% 70%;

}

@keyframes waveMove{

0%{transform:rotate(0deg);}

20%{transform:rotate(14deg);}

40%{transform:rotate(-8deg);}

60%{transform:rotate(14deg);}

80%{transform:rotate(-4deg);}

100%{transform:rotate(0deg);}

}

/*======================================================
 SCALE IN
======================================================*/

.scale-in{

animation:scaleIn .7s ease;

}

@keyframes scaleIn{

0%{

opacity:0;

transform:scale(.7);

}

100%{

opacity:1;

transform:scale(1);

}

}

/*======================================================
 ROTATE IN
======================================================*/

.rotate-in{

animation:rotateIn .8s ease;

}

@keyframes rotateIn{

0%{

opacity:0;

transform:rotate(-15deg) scale(.9);

}

100%{

opacity:1;

transform:rotate(0) scale(1);

}

}

/*======================================================
 SLIDE UP
======================================================*/

.slide-up{

animation:slideUp .8s ease;

}

@keyframes slideUp{

0%{

opacity:0;

transform:translateY(100px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/*======================================================
 SKELETON
======================================================*/

.skeleton{

background:

linear-gradient(

90deg,

#ececec,

#f7f7f7,

#ececec

);

background-size:300% 100%;

animation:skeleton 1.4s infinite;

}

@keyframes skeleton{

0%{

background-position:100% 0;

}

100%{

background-position:-100% 0;

}

}

/*======================================================
 BACKGROUND FLOAT
======================================================*/

.background-float{

background-size:200% 200%;

animation:bgFloat 18s linear infinite;

}

@keyframes bgFloat{

0%{

background-position:0% 0%;

}

50%{

background-position:100% 100%;

}

100%{

background-position:0% 0%;

}

}

/*======================================================
 DELAY UTILITIES
======================================================*/

.delay-1{animation-delay:.1s;}
.delay-2{animation-delay:.2s;}
.delay-3{animation-delay:.3s;}
.delay-4{animation-delay:.4s;}
.delay-5{animation-delay:.5s;}
.delay-6{animation-delay:.6s;}
.delay-7{animation-delay:.7s;}
.delay-8{animation-delay:.8s;}
.delay-9{animation-delay:.9s;}
.delay-10{animation-delay:1s;}

/*======================================================
 DURATION UTILITIES
======================================================*/

.speed-fast{

animation-duration:.4s;

}

.speed-normal{

animation-duration:.8s;

}

.speed-slow{

animation-duration:1.5s;

}

.speed-xslow{

animation-duration:3s;

}