/* ==========================================================
MetaTechX LLP
animations.css
Professional Animation Library
========================================================== */

/* ===============================
GLOBAL TRANSITIONS
================================ */

*{

transition:

background .35s ease,

color .35s ease,

border .35s ease,

transform .35s ease,

box-shadow .35s ease;

}

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

.fade-in{

animation:fadeIn .8s ease forwards;

}

@keyframes fadeIn{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

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

.fade-left{

animation:fadeLeft .8s ease forwards;

}

@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

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

.fade-right{

animation:fadeRight .8s ease forwards;

}

@keyframes fadeRight{

0%{

opacity:0;

transform:translateX(60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

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

.zoom{

animation:zoom .6s ease;

}

@keyframes zoom{

0%{

transform:scale(.8);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}

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

.float{

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

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

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

.rotate{

animation:rotate360 15s linear infinite;

}

@keyframes rotate360{

100%{

transform:rotate(360deg);

}

}

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

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

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

.glow{

animation:glow 2.5s infinite;

}

@keyframes glow{

0%{

box-shadow:0 0 0 rgba(255,152,0,.2);

}

50%{

box-shadow:

0 0 35px rgba(255,152,0,.55);

}

100%{

box-shadow:0 0 0 rgba(255,152,0,.2);

}

}

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

.btn-primary{

position:relative;

overflow:hidden;

}

.btn-primary:after{

content:"";

position:absolute;

left:50%;

top:50%;

width:0;

height:0;

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

border-radius:50%;

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

transition:.6s;

}

.btn-primary:hover:after{

width:350px;

height:350px;

}

/* ===============================
SERVICE CARD
================================ */

.service-card:hover{

transform:

translateY(-12px)

scale(1.02);

box-shadow:

0 20px 40px

rgba(0,0,0,.30);

}

/* ===============================
FEATURE CARD
================================ */

.feature-card:hover{

transform:translateY(-8px);

}

/* ===============================
STAT CARD
================================ */

.stat:hover{

transform:

translateY(-8px)

rotate(.5deg);

}

/* ===============================
FORM INPUT
================================ */

input:focus,

select:focus,

textarea:focus{

transform:scale(1.02);

}

/* ===============================
LOADING SPINNER
================================ */

.loader-circle{

animation:

spin 1s linear infinite,

pulse 2s infinite;

}

/* ===============================
CERTIFICATE
================================ */

.certificate{

animation:

certificateReveal

1s ease;

}

@keyframes certificateReveal{

0%{

opacity:0;

transform:

scale(.9)

rotateX(20deg);

}

100%{

opacity:1;

transform:

scale(1)

rotateX(0);

}

}

/* ===============================
MODAL
================================ */

.modal-content{

animation:modalOpen .45s ease;

}

@keyframes modalOpen{

0%{

opacity:0;

transform:

translateY(60px)

scale(.8);

}

100%{

opacity:1;

transform:

translateY(0)

scale(1);

}

}

/* ===============================
WHATSAPP
================================ */

.whatsapp-float{

animation:

bounce 2.5s infinite;

}

@keyframes bounce{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

/* ===============================
SCROLL BUTTON
================================ */

#scrollTop:hover{

transform:

translateY(-6px)

scale(1.1);

}

/* ===============================
HERO IMAGE
================================ */

.hero-image{

animation:

heroFloat

6s ease-in-out infinite;

}

@keyframes heroFloat{

0%{

transform:

translateY(0)

rotate(0);

}

50%{

transform:

translateY(-18px)

rotate(1deg);

}

100%{

transform:

translateY(0)

rotate(0);

}

}

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

.navbar{

animation:

navbarSlide

1s ease;

}

@keyframes navbarSlide{

0%{

transform:translateY(-80px);

}

100%{

transform:translateY(0);

}

}

/* ===============================
PAGE
================================ */

body{

animation:

pageLoad

1s ease;

}

@keyframes pageLoad{

0%{

opacity:0;

}

100%{

opacity:1;

}

}

/* ===============================
SCROLL REVEAL
================================ */

.reveal{

opacity:0;

transform:translateY(40px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/* ===============================
HOVER ICON
================================ */

.service-card i{

transition:.35s;

}

.service-card:hover i{

transform:

scale(1.25)

rotate(8deg);

}

/* ===============================
FOOTER LINKS
================================ */

.footer-grid a{

position:relative;

}

.footer-grid a:after{

content:"";

position:absolute;

left:0;

bottom:-4px;

height:2px;

width:0;

background:#ff9800;

transition:.35s;

}

.footer-grid a:hover:after{

width:100%;

}

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