/*==================================================
QMS Corporate Website
animations.css
==================================================*/

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

@keyframes fadeInUp{

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

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

}

/*==============================
Fade In Down
==============================*/

@keyframes fadeInDown{

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

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

}

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

@keyframes fadeInLeft{

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

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

}

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

@keyframes fadeInRight{

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

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

}

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

@keyframes zoomIn{

0%{

opacity:0;

transform:scale(.8);

}

100%{

opacity:1;

transform:scale(1);

}

}

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

@keyframes loaderRotate{

100%{

transform:rotate(360deg);

}

}

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

@keyframes scrollWheel{

0%{

opacity:0;

transform:translate(-50%,0);

}

50%{

opacity:1;

}

100%{

opacity:0;

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

}

}

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

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

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

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

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

@keyframes rotate{

100%{

transform:rotate(360deg);

}

}

/*==============================
Wave
==============================*/

@keyframes wave{

0%{

transform:translateX(0);

}

50%{

transform:translateX(25px);

}

100%{

transform:translateX(0);

}

}

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

@keyframes gradient{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

/*==============================
Shine
==============================*/

@keyframes shine{

100%{

left:130%;

}

}

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

@keyframes ripple{

0%{

transform:scale(.2);

opacity:1;

}

100%{

transform:scale(2.5);

opacity:0;

}

}

/*==============================
Hero Shapes
==============================*/

.hero-shape-one{

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

}

.hero-shape-two{

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

}

/*==============================
Buttons
==============================*/

.btn-primary-custom{

animation:fadeInUp .8s ease;

}

.btn-primary-custom:hover{

transform:translateY(-6px);

}

.btn-secondary-custom:hover{

transform:translateY(-6px);

}

.btn-outline-custom:hover{

transform:translateY(-6px);

}

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

.card-custom,
.service-card,
.expertise-card,
.training-card,
.consultancy-card,
.contact-card{

transition:.45s;

}

.card-custom:hover,
.service-card:hover,
.expertise-card:hover,
.training-card:hover,
.consultancy-card:hover,
.contact-card:hover{

transform:translateY(-10px);

}

/*==============================
Glass Card
==============================*/

.glass-card{

transition:.45s;

}

.glass-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-xl);

}

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

.service-icon,
.expertise-icon{

transition:.5s;

}

.service-card:hover .service-icon,
.expertise-card:hover .expertise-icon{

transform:rotate(12deg) scale(1.08);

}

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

.training-image img,
.about-image img{

transition:.8s;

}

.training-card:hover img,
.about-image:hover img{

transform:scale(1.05);

}

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

.navbar{

transition:.35s;

}

.header.scrolled{

animation:fadeInDown .4s;

}

/*==============================
Footer Social
==============================*/

.footer-social a{

transition:.35s;

}

.footer-social a:hover{

transform:translateY(-8px) rotate(360deg);

}

/*==============================
Back To Top
==============================*/

.back-top{

transition:.35s;

}

.back-top:hover{

transform:translateY(-6px);

}

/*==============================
Animation Utility Classes
==============================*/

.fade-up{

animation:fadeInUp 1s both;

}

.fade-down{

animation:fadeInDown 1s both;

}

.fade-left{

animation:fadeInLeft 1s both;

}

.fade-right{

animation:fadeInRight 1s both;

}

.zoom-in{

animation:zoomIn .8s both;

}

.float{

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

}

.rotate{

animation:rotate 12s linear infinite;

}

.pulse{

animation:pulse 2s infinite;

}

/*==============================
Delay Classes
==============================*/

.delay-1{

animation-delay:.2s;

}

.delay-2{

animation-delay:.4s;

}

.delay-3{

animation-delay:.6s;

}

.delay-4{

animation-delay:.8s;

}

.delay-5{

animation-delay:1s;

}

/*==============================
Hide Before Animation
==============================*/

[data-animate]{

opacity:0;

}

[data-animate].active{

opacity:1;

}

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