/* =====================================
   animation.css
   Sai Swami Computer
======================================*/


/* Fade Up */

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(60px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

.fade-up{
animation:fadeUp .8s ease forwards;
}


/* Fade Down */

@keyframes fadeDown{

0%{
opacity:0;
transform:translateY(-60px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

.fade-down{
animation:fadeDown .8s ease forwards;
}


/* Fade Left */

@keyframes fadeLeft{

0%{
opacity:0;
transform:translateX(-70px);
}

100%{
opacity:1;
transform:translateX(0);
}

}

.fade-left{
animation:fadeLeft .8s ease forwards;
}


/* Fade Right */

@keyframes fadeRight{

0%{
opacity:0;
transform:translateX(70px);
}

100%{
opacity:1;
transform:translateX(0);
}

}

.fade-right{
animation:fadeRight .8s ease forwards;
}


/* Zoom */

@keyframes zoomIn{

0%{
opacity:0;
transform:scale(.7);
}

100%{
opacity:1;
transform:scale(1);
}

}

.zoom{
animation:zoomIn .8s ease forwards;
}


/* Floating */

@keyframes floating{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0px);
}

}

.float{
animation:floating 3s ease-in-out infinite;
}


/* Pulse */

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}

.pulse{
animation:pulse 2s infinite;
}


/* Rotate */

@keyframes rotate{

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

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

}

.rotate{
animation:rotate 12s linear infinite;
}


/* Glow */

@keyframes glow{

0%{
box-shadow:0 0 10px rgba(255,255,255,.2);
}

50%{
box-shadow:0 0 30px rgba(255,204,0,.8);
}

100%{
box-shadow:0 0 10px rgba(255,255,255,.2);
}

}

.glow{
animation:glow 2s infinite;
}


/* Gradient Animation */

@keyframes gradient{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

.gradient-bg{

background:linear-gradient(
-45deg,
#003366,
#0d6efd,
#00b4d8,
#003366
);

background-size:400% 400%;

animation:gradient 10s ease infinite;

}


/* Shine Effect */

@keyframes shine{

0%{
left:-100%;
}

100%{
left:120%;
}

}

.shine{

position:relative;

overflow:hidden;

}

.shine::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:50%;

height:100%;

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

transform:skewX(-30deg);

animation:shine 3s infinite;

}


/* Bounce */

@keyframes bounce{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-18px);
}

}

.bounce{
animation:bounce 2s infinite;
}


/* Hero Background Animation */

@keyframes heroMove{

0%{
background-position:center top;
}

50%{
background-position:center center;
}

100%{
background-position:center top;
}

}

.hero{
animation:heroMove 12s ease infinite;
}


/* Card Hover */

.card,
.product,
.service-card,
.gallery-card{

transition:.35s;

}

.card:hover,
.product:hover,
.service-card:hover,
.gallery-card:hover{

transform:translateY(-10px) scale(1.03);

}


/* Button Animation */

.btn{

transition:.3s;

}

.btn:hover{

transform:translateY(-4px);

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

}


/* WhatsApp Floating */

.whatsapp{

animation:floating 2.5s infinite;

}


/* Scroll Reveal */

.hidden{

opacity:0;

transform:translateY(50px);

transition:all .8s;

}

.show{

opacity:1;

transform:translateY(0);

}


/* Loader */

.loader{

width:80px;

height:80px;

border-radius:50%;

border:8px solid #eee;

border-top:8px solid #003366;

animation:rotate 1s linear infinite;

}