@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

@keyframes rotateRing{

from{

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

}

to{

transform:
translate(-50%,-50%)
rotate(360deg);

}

}

.ring1{

animation:rotateRing 35s linear infinite;

}

.ring2{

animation:rotateRing 50s linear infinite reverse;

}

.ring3{

animation:rotateRing 70s linear infinite;

}

.card-web{

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

}

.card-ai{

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

}

.card-growth{

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

}

.card-commerce{

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

}

.card-cloud{

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

}

.card-rating{

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

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

.hero-left > *,
.floating-card{

opacity:0;

transform:translateY(35px);

transition:all .8s ease;

}

.hero-left > *.show,
.floating-card.show{

opacity:1;

transform:translateY(0);

}/*======================================
ABOUT FADE
======================================*/

.about-left,
.stat-card,
.small-card,
.about-banner{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.about-left.show,
.stat-card.show,
.small-card.show,
.about-banner.show{

opacity:1;

transform:translateY(0);

}