/*=====================================

Animation CSS
Version : 1.0

======================================*/


/*==========================
Fade Up
==========================*/

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.fade-up{

opacity:0;

animation:fadeUp .9s ease forwards;

}



/*==========================
Fade Left
==========================*/

@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-70px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

.fade-left{

opacity:0;

animation:fadeLeft .9s ease forwards;

}



/*==========================
Fade Right
==========================*/

@keyframes fadeRight{

0%{

opacity:0;

transform:translateX(70px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

.fade-right{

opacity:0;

animation:fadeRight .9s ease forwards;

}



/*==========================
Zoom In
==========================*/

@keyframes zoomIn{

0%{

opacity:0;

transform:scale(.8);

}

100%{

opacity:1;

transform:scale(1);

}

}

.zoom-in{

opacity:0;

animation:zoomIn .8s ease forwards;

}



/*==========================
Rotate
==========================*/

@keyframes rotate360{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

.rotate{

animation:rotate360 10s linear infinite;

}



/*==========================
Floating Animation
==========================*/

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

.float{

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

}



/*==========================
Pulse
==========================*/

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

.pulse{

animation:pulse 2.5s infinite;

}



/*==========================
Button Hover
==========================*/

.btn-primary,
.header-btn,
.submit-btn,
.cta-btn{

transition:.35s;

}

.btn-primary:hover,
.header-btn:hover,
.submit-btn:hover,
.cta-btn:hover{

transform:translateY(-5px);

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

}



/*==========================
Cards
==========================*/

.service-card,
.about-card,
.why-card,
.process-card,
.contact-card{

transition:.4s;

}

.service-card:hover,
.about-card:hover,
.why-card:hover,
.process-card:hover,
.contact-card:hover{

transform:translateY(-10px);

}



/*==========================
Image Hover
==========================*/

.about-image img,
.logo img{

transition:.5s;

}

.about-image:hover img{

transform:scale(1.05);

}



/*==========================
Hero Image
==========================*/

.hero-image img{

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

}



/*==========================
Navigation Hover
==========================*/

nav ul li{

transition:.3s;

}

nav ul li:hover{

transform:translateY(-3px);

}



/*==========================
Gradient Animation
==========================*/

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

.gradient-bg{

background-size:300% 300%;

animation:gradientMove 8s ease infinite;

}



/*==========================
Glow
==========================*/

.glow{

box-shadow:

0 0 15px rgba(30,136,229,.3),

0 0 35px rgba(30,136,229,.2);

}



/*==========================
Mouse Scroll
==========================*/

.scroll-down{

animation:floating 2s infinite;

}



/*==========================
End Part 1
==========================*/
/*=====================================

Animation CSS
PART-2

======================================*/


/*==========================
Scroll Reveal
==========================*/

.reveal{

opacity:0;

transform:translateY(80px);

transition:1s all ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}



/*==========================
Shimmer Effect
==========================*/

@keyframes shimmer{

0%{

background-position:-500px 0;

}

100%{

background-position:500px 0;

}

}

.shimmer{

background:linear-gradient(
90deg,
#f2f2f2 25%,
#ffffff 50%,
#f2f2f2 75%
);

background-size:1000px 100%;

animation:shimmer 2s infinite linear;

}



/*==========================
Ripple Button
==========================*/

.ripple{

position:relative;

overflow:hidden;

}

.ripple span{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:rippleAnimation .7s linear;

}

@keyframes rippleAnimation{

to{

transform:scale(4);

opacity:0;

}

}



/*==========================
Glass Hover
==========================*/

.glass{

backdrop-filter:blur(12px);

transition:.4s;

}

.glass:hover{

backdrop-filter:blur(18px);

transform:translateY(-8px);

}



/*==========================
Hero Glow
==========================*/

.hero::before{

content:"";

position:absolute;

top:-250px;

right:-250px;

width:500px;

height:500px;

border-radius:50%;

background:rgba(30,136,229,.08);

filter:blur(80px);

z-index:0;

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

}

.hero{

position:relative;

overflow:hidden;

}



/*==========================
Floating Circles
==========================*/

.circle{

position:absolute;

border-radius:50%;

background:rgba(30,136,229,.08);

animation:floating 8s infinite;

pointer-events:none;

}

.circle.one{

width:120px;

height:120px;

top:80px;

left:5%;

}

.circle.two{

width:80px;

height:80px;

right:10%;

bottom:120px;

animation-delay:2s;

}

.circle.three{

width:60px;

height:60px;

top:45%;

left:40%;

animation-delay:4s;

}



/*==========================
Navbar Blur
==========================*/

header{

backdrop-filter:blur(10px);

}



/*==========================
Image Zoom
==========================*/

.service-card img{

transition:.45s;

}

.service-card:hover img{

transform:scale(1.08);

}



/*==========================
Icon Bounce
==========================*/

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

.service-card:hover .icon,

.contact-card:hover .contact-icon,

.why-card:hover .why-icon{

animation:bounce .8s;

}



/*==========================
Counter Pulse
==========================*/

.counter{

animation:pulse 3s infinite;

}



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

.faq-item{

transition:.35s;

}

.faq-item:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(0,0,0,.08);

}



/*==========================
CTA Glow
==========================*/

.cta-btn{

position:relative;

overflow:hidden;

}

.cta-btn::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(

90deg,

transparent,

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

transparent

);

transition:.7s;

}

.cta-btn:hover::before{

left:100%;

}



/*==========================
Loader Fade
==========================*/

.loader.hide{

opacity:0;

visibility:hidden;

transition:.5s;

}



/*==========================
Scroll Top
==========================*/

.scroll-top{

transition:.35s;

}

.scroll-top:hover{

transform:translateY(-6px);

}



/*==========================
Selection Animation
==========================*/

::selection{

background:#1E88E5;

color:#fff;

}



/*==========================
Animation Delay Helpers
==========================*/

.delay-1{

animation-delay:.2s;

}

.delay-2{

animation-delay:.4s;

}

.delay-3{

animation-delay:.6s;

}

.delay-4{

animation-delay:.8s;

}



/*==========================
End Animation CSS
==========================*/