/*=========================================================
  ANIMATIONS.CSS
  PART 01
  GLOBAL KEYFRAMES LIBRARY
  Andcytron Systems Pvt Ltd
==========================================================*/


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

@keyframes fadeIn{
    from{opacity:0;}
    to{opacity:1;}
}

@keyframes fadeOut{
    from{opacity:1;}
    to{opacity:0;}
}


/*=========================================================
  SLIDE
==========================================================*/

@keyframes slideUp{

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

to{
opacity:1;
transform:translateY(0);
}

}

@keyframes slideDown{

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

to{
opacity:1;
transform:translateY(0);
}

}

@keyframes slideLeft{

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

to{
opacity:1;
transform:translateX(0);
}

}

@keyframes slideRight{

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

to{
opacity:1;
transform:translateX(0);
}

}


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

@keyframes zoomIn{

from{
opacity:0;
transform:scale(.8);
}

to{
opacity:1;
transform:scale(1);
}

}

@keyframes zoomOut{

from{
opacity:1;
transform:scale(1);
}

to{
opacity:0;
transform:scale(.8);
}

}


/*=========================================================
  ROTATION
==========================================================*/

@keyframes rotateClockwise{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}

@keyframes rotateAntiClockwise{

from{
transform:rotate(360deg);
}

to{
transform:rotate(0deg);
}

}


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

@keyframes float{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

@keyframes floatLarge{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}


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

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.05);
}

100%{
transform:scale(1);
}

}

@keyframes pulseGlow{

0%{

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

}

50%{

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

}

100%{

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

}

}


/*=========================================================
  BOUNCE
==========================================================*/

@keyframes bounce{

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

25%{
transform:translateY(-10px);
}

50%{
transform:translateY(0);
}

75%{
transform:translateY(-5px);
}

}


/*=========================================================
  SHAKE
==========================================================*/

@keyframes shake{

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

20%{
transform:translateX(-5px);
}

40%{
transform:translateX(5px);
}

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

80%{
transform:translateX(4px);
}

}


/*=========================================================
  HEARTBEAT
==========================================================*/

@keyframes heartbeat{

0%,100%{
transform:scale(1);
}

25%{
transform:scale(1.08);
}

50%{
transform:scale(.96);
}

75%{
transform:scale(1.05);
}

}


/*=========================================================
  GLASS SHIMMER
==========================================================*/

@keyframes shimmer{

0%{
background-position:-300px 0;
}

100%{
background-position:300px 0;
}

}


/*=========================================================
  SHINE EFFECT
==========================================================*/

@keyframes shine{

0%{
left:-120%;
}

100%{
left:140%;
}

}


/*=========================================================
  GRADIENT
==========================================================*/

@keyframes gradientMove{

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

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

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

}


/*=========================================================
  MORPHING BLOB
==========================================================*/

@keyframes blob{

0%{
border-radius:45% 55% 60% 40%;
transform:translate(0,0);
}

25%{
border-radius:60% 40% 45% 55%;
transform:translate(10px,-10px);
}

50%{
border-radius:50% 50% 35% 65%;
transform:translate(0,-20px);
}

75%{
border-radius:35% 65% 55% 45%;
transform:translate(-10px,-10px);
}

100%{
border-radius:45% 55% 60% 40%;
transform:translate(0,0);
}

}


/*=========================================================
  WAVE
==========================================================*/

@keyframes wave{

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

15%{
transform:rotate(14deg);
}

30%{
transform:rotate(-8deg);
}

45%{
transform:rotate(14deg);
}

60%{
transform:rotate(-4deg);
}

75%{
transform:rotate(10deg);
}

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

}


/*=========================================================
  MARQUEE
==========================================================*/

@keyframes marquee{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}


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

@keyframes counterGlow{

0%{
text-shadow:none;
}

50%{
text-shadow:
0 0 18px rgba(0,122,255,.35);
}

100%{
text-shadow:none;
}

}


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

@keyframes ripple{

0%{

transform:scale(.3);

opacity:.6;

}

100%{

transform:scale(2);

opacity:0;

}

}


/*=========================================================
  LOADER SPIN
==========================================================*/

@keyframes spin{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}


/*=========================================================
  DOT LOADER
==========================================================*/

@keyframes dots{

0%,80%,100%{
transform:scale(0);
}

40%{
transform:scale(1);
}

}


/*=========================================================
  PROGRESS BAR
==========================================================*/

@keyframes progress{

0%{
width:0;
}

100%{
width:100%;
}

}


/*=========================================================
  TYPEWRITER CURSOR
==========================================================*/

@keyframes blink{

0%,100%{
opacity:1;
}

50%{
opacity:0;
}

}


/*=========================================================
  SCROLL INDICATOR
==========================================================*/

@keyframes scroll{

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

40%{
opacity:1;
}

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

}


/*=========================================================
  BACK TO TOP
==========================================================*/

@keyframes backTop{

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

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

}


/*=========================================================
  HERO BACKGROUND
==========================================================*/

@keyframes heroZoom{

0%{
transform:scale(1);
}

100%{
transform:scale(1.08);
}

}


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

/*=========================================================
    ANIMATIONS.CSS
    PART 1
    FADE ANIMATIONS
==========================================================*/

/*=========================================================
    KEYFRAMES
==========================================================*/

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-50px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(50px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeRotate {
    from {
        opacity: 0;
        transform: rotate(-8deg) scale(.95);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/*=========================================================
    BASE ANIMATION CLASS
==========================================================*/

.animate{
    animation-duration:.8s;
    animation-fill-mode:both;
    animation-timing-function:ease;
}

/*=========================================================
    STANDARD FADE
==========================================================*/

.fade-in{
    animation-name:fadeIn;
}

.fade-up{
    animation-name:fadeInUp;
}

.fade-down{
    animation-name:fadeInDown;
}

.fade-left{
    animation-name:fadeInLeft;
}

.fade-right{
    animation-name:fadeInRight;
}

.fade-scale{
    animation-name:fadeScale;
}

.fade-rotate{
    animation-name:fadeRotate;
}

/*=========================================================
    DURATION UTILITIES
==========================================================*/

.duration-300{ animation-duration:.3s; }
.duration-500{ animation-duration:.5s; }
.duration-700{ animation-duration:.7s; }
.duration-1000{ animation-duration:1s; }
.duration-1500{ animation-duration:1.5s; }
.duration-2000{ animation-duration:2s; }

/*=========================================================
    DELAY UTILITIES
==========================================================*/

.delay-100{ animation-delay:.1s; }
.delay-200{ animation-delay:.2s; }
.delay-300{ animation-delay:.3s; }
.delay-400{ animation-delay:.4s; }
.delay-500{ animation-delay:.5s; }
.delay-600{ animation-delay:.6s; }
.delay-700{ animation-delay:.7s; }
.delay-800{ animation-delay:.8s; }
.delay-900{ animation-delay:.9s; }
.delay-1000{ animation-delay:1s; }

/*=========================================================
    STAGGER HELPERS
==========================================================*/

.stagger>*{
    opacity:0;
}

.stagger>*:nth-child(1){
    animation:fadeInUp .8s ease forwards;
    animation-delay:.1s;
}

.stagger>*:nth-child(2){
    animation:fadeInUp .8s ease forwards;
    animation-delay:.2s;
}

.stagger>*:nth-child(3){
    animation:fadeInUp .8s ease forwards;
    animation-delay:.3s;
}

.stagger>*:nth-child(4){
    animation:fadeInUp .8s ease forwards;
    animation-delay:.4s;
}

.stagger>*:nth-child(5){
    animation:fadeInUp .8s ease forwards;
    animation-delay:.5s;
}

.stagger>*:nth-child(6){
    animation:fadeInUp .8s ease forwards;
    animation-delay:.6s;
}

.stagger>*:nth-child(7){
    animation:fadeInUp .8s ease forwards;
    animation-delay:.7s;
}

.stagger>*:nth-child(8){
    animation:fadeInUp .8s ease forwards;
    animation-delay:.8s;
}

/*=========================================================
    HERO ANIMATION HELPERS
==========================================================*/

.hero-title{
    animation:fadeInDown 1s ease forwards;
}

.hero-subtitle{
    animation:fadeInUp 1s ease .2s forwards;
    opacity:0;
}

.hero-buttons{
    animation:fadeInUp 1s ease .4s forwards;
    opacity:0;
}

/*=========================================================
    SECTION REVEAL
==========================================================*/

.section-hidden{
    opacity:0;
    transform:translateY(60px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.section-visible{
    opacity:1;
    transform:translateY(0);
}

/*=========================================================
    HOVER FADE
==========================================================*/

.hover-fade{
    transition:opacity .35s ease;
}

.hover-fade:hover{
    opacity:.85;
}

/*=========================================================
    IMAGE FADE
==========================================================*/

.image-fade{
    overflow:hidden;
}

.image-fade img{
    transition:
        opacity .35s ease,
        transform .5s ease;
}

.image-fade:hover img{
    opacity:.9;
    transform:scale(1.04);
}

/*=========================================================
    ACCESSIBILITY
==========================================================*/

@media (prefers-reduced-motion: reduce){

.animate,
.fade-in,
.fade-up,
.fade-down,
.fade-left,
.fade-right,
.fade-scale,
.fade-rotate,
.hero-title,
.hero-subtitle,
.hero-buttons,
.stagger>*{

    animation:none !important;
    transition:none !important;
    opacity:1 !important;
    transform:none !important;

}

.section-hidden{
    opacity:1;
    transform:none;
}

}

/*=========================================================
    END FADE ANIMATIONS
==========================================================*/
/*=========================================================
    ANIMATIONS.CSS
    PART 02
    SLIDE ANIMATIONS
==========================================================*/

/*=========================================================
    KEYFRAMES
==========================================================*/

/* Slide Up */

@keyframes slideUp{

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

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

}

/* Slide Down */

@keyframes slideDown{

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

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

}

/* Slide Left */

@keyframes slideLeft{

0%{
opacity:0;
transform:translate3d(-80px,0,0);
}

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

}

/* Slide Right */

@keyframes slideRight{

0%{
opacity:0;
transform:translate3d(80px,0,0);
}

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

}

/* Slide Up Small */

@keyframes slideUpSmall{

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

100%{
opacity:1;
transform:none;
}

}

/* Slide Down Small */

@keyframes slideDownSmall{

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

100%{
opacity:1;
transform:none;
}

}

/* Slide In From Bottom */

@keyframes slideBottom{

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

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

}

/* Slide Out Bottom */

@keyframes slideOutBottom{

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

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

}

/* Slide In From Left */

@keyframes slidePanelLeft{

0%{
transform:translateX(-100%);
}

100%{
transform:translateX(0);
}

}

/* Slide Out Left */

@keyframes slidePanelLeftOut{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-100%);
}

}

/* Slide In From Right */

@keyframes slidePanelRight{

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

100%{
transform:translateX(0);
}

}

/* Slide Out Right */

@keyframes slidePanelRightOut{

0%{
transform:translateX(0);
}

100%{
transform:translateX(100%);
}

}

/*=========================================================
    BASE CLASSES
==========================================================*/

.slide-up{
animation:slideUp .8s ease forwards;
}

.slide-down{
animation:slideDown .8s ease forwards;
}

.slide-left{
animation:slideLeft .8s ease forwards;
}

.slide-right{
animation:slideRight .8s ease forwards;
}

.slide-up-small{
animation:slideUpSmall .5s ease forwards;
}

.slide-down-small{
animation:slideDownSmall .5s ease forwards;
}

.slide-bottom{
animation:slideBottom .6s ease forwards;
}

/*=========================================================
    HERO ANIMATIONS
==========================================================*/

.hero-title{

animation:
slideDown 1s ease forwards;

}

.hero-subtitle{

opacity:0;

animation:
slideUp .9s ease .25s forwards;

}

.hero-buttons{

opacity:0;

animation:
slideUp .9s ease .45s forwards;

}

.hero-image{

opacity:0;

animation:
slideLeft 1s ease .3s forwards;

}

/*=========================================================
    SERVICE CARDS
==========================================================*/

.service-card{

transition:
transform .35s ease,
box-shadow .35s ease;

}

.service-card:hover{

transform:
translateY(-12px);

}

/*=========================================================
    PRODUCT CARDS
==========================================================*/

.product-card{

transition:
transform .4s ease;

}

.product-card:hover{

transform:
translateY(-10px);

}

/*=========================================================
    FEATURE CARDS
==========================================================*/

.feature-card{

transition:
transform .35s ease;

}

.feature-card:hover{

transform:
translateY(-8px);

}

/*=========================================================
    NAVIGATION
==========================================================*/

.dropdown-menu{

animation:
slideDownSmall .35s ease;

transform-origin:top;

}

.mobile-menu{

animation:
slidePanelRight .45s ease forwards;

}

.mobile-menu.hide{

animation:
slidePanelRightOut .4s ease forwards;

}

/*=========================================================
    SIDEBAR
==========================================================*/

.sidebar{

animation:
slidePanelLeft .45s ease forwards;

}

.sidebar.hide{

animation:
slidePanelLeftOut .4s ease forwards;

}

/*=========================================================
    MODALS
==========================================================*/

.modal.show{

animation:
slideBottom .45s ease;

}

.modal.hide{

animation:
slideOutBottom .35s ease;

}

/*=========================================================
    TIMELINE
==========================================================*/

.timeline-item{

opacity:0;

}

.timeline-item.show{

animation:
slideRight .8s ease forwards;

}

/*=========================================================
    BLOG CARDS
==========================================================*/

.blog-card{

transition:
transform .35s ease;

}

.blog-card:hover{

transform:
translateY(-8px);

}

/*=========================================================
    PORTFOLIO
==========================================================*/

.portfolio-card{

transition:
transform .35s ease;

}

.portfolio-card:hover{

transform:
translateY(-10px);

}

/*=========================================================
    STAGGER EFFECT
==========================================================*/

.stagger-slide>*{

opacity:0;

}

.stagger-slide>*:nth-child(1){

animation:
slideUp .7s ease .1s forwards;

}

.stagger-slide>*:nth-child(2){

animation:
slideUp .7s ease .2s forwards;

}

.stagger-slide>*:nth-child(3){

animation:
slideUp .7s ease .3s forwards;

}

.stagger-slide>*:nth-child(4){

animation:
slideUp .7s ease .4s forwards;

}

.stagger-slide>*:nth-child(5){

animation:
slideUp .7s ease .5s forwards;

}

.stagger-slide>*:nth-child(6){

animation:
slideUp .7s ease .6s forwards;

}

/*=========================================================
    DURATION UTILITIES
==========================================================*/

.slide-fast{
animation-duration:.35s !important;
}

.slide-normal{
animation-duration:.6s !important;
}

.slide-slow{
animation-duration:1s !important;
}

.slide-extra-slow{
animation-duration:1.5s !important;
}

/*=========================================================
    DELAY UTILITIES
==========================================================*/

.slide-delay-1{animation-delay:.1s;}
.slide-delay-2{animation-delay:.2s;}
.slide-delay-3{animation-delay:.3s;}
.slide-delay-4{animation-delay:.4s;}
.slide-delay-5{animation-delay:.5s;}
.slide-delay-6{animation-delay:.6s;}
.slide-delay-7{animation-delay:.7s;}
.slide-delay-8{animation-delay:.8s;}
.slide-delay-9{animation-delay:.9s;}
.slide-delay-10{animation-delay:1s;}

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

.reveal-slide{

opacity:0;

transform:
translateY(50px);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal-slide.active{

opacity:1;

transform:
translateY(0);

}

/*=========================================================
    REDUCED MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){

.slide-up,
.slide-down,
.slide-left,
.slide-right,
.slide-bottom,
.hero-title,
.hero-subtitle,
.hero-buttons,
.hero-image,
.timeline-item.show,
.dropdown-menu,
.mobile-menu,
.sidebar,
.modal{

animation:none !important;

transform:none !important;

opacity:1 !important;

transition:none !important;

}

}

/*=========================================================
    END SLIDE ANIMATIONS
==========================================================*/
/*=========================================================
    ANIMATIONS.CSS
    PART 03
    ZOOM ANIMATIONS
==========================================================*/

/*=========================================================
    KEYFRAMES
==========================================================*/

/* Zoom In */

@keyframes zoomIn{

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

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

}

/* Zoom Out */

@keyframes zoomOut{

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

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

}

/* Zoom In Small */

@keyframes zoomInSmall{

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

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

}

/* Zoom Out Small */

@keyframes zoomOutSmall{

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

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

}

/* Zoom From Center */

@keyframes zoomCenter{

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

70%{
opacity:1;
transform:scale(1.05);
}

100%{
transform:scale(1);
}

}

/* Pulse Zoom */

@keyframes zoomPulse{

0%,100%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

}

/* Floating Zoom */

@keyframes zoomFloat{

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

50%{
transform:translateY(-12px) scale(1.03);
}

}

/*=========================================================
    BASE CLASSES
==========================================================*/

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

.zoom-out{
animation:zoomOut .6s ease forwards;
}

.zoom-small{
animation:zoomInSmall .5s ease forwards;
}

.zoom-center{
animation:zoomCenter .9s ease forwards;
}

.zoom-pulse{
animation:zoomPulse 3s infinite ease-in-out;
}

.zoom-float{
animation:zoomFloat 5s infinite ease-in-out;
}

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

.hero-image{

animation:
zoomCenter 1.2s ease forwards;

}

/*=========================================================
    SERVICE CARDS
==========================================================*/

.service-card{

transition:
transform .35s ease,
box-shadow .35s ease;

}

.service-card:hover{

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

}

/*=========================================================
    PRODUCT CARDS
==========================================================*/

.product-card{

transition:
transform .4s ease,
box-shadow .4s ease;

}

.product-card:hover{

transform:
translateY(-12px)
scale(1.02);

}

/*=========================================================
    PORTFOLIO ITEMS
==========================================================*/

.portfolio-card{

overflow:hidden;

}

.portfolio-card img{

transition:
transform .6s ease;

}

.portfolio-card:hover img{

transform:scale(1.12);

}

/*=========================================================
    BLOG IMAGES
==========================================================*/

.blog-card img{

transition:
transform .6s ease;

}

.blog-card:hover img{

transform:scale(1.08);

}

/*=========================================================
    TEAM MEMBERS
==========================================================*/

.team-card img{

transition:
transform .5s ease;

}

.team-card:hover img{

transform:scale(1.05);

}

/*=========================================================
    TECHNOLOGY ICONS
==========================================================*/

.tech-icon{

transition:
transform .3s ease;

}

.tech-icon:hover{

transform:
scale(1.15);

}

/*=========================================================
    CLIENT LOGOS
==========================================================*/

.client-logo{

transition:
transform .35s ease;

}

.client-logo:hover{

transform:
scale(1.08);

}

/*=========================================================
    BUTTONS
==========================================================*/

.btn{

transition:
transform .3s ease,
box-shadow .3s ease;

}

.btn:hover{

transform:
scale(1.05);

}

/*=========================================================
    MODALS
==========================================================*/

.modal.show{

animation:
zoomCenter .45s ease;

}

.modal.hide{

animation:
zoomOutSmall .3s ease;

}

/*=========================================================
    IMAGES
==========================================================*/

.zoom-image{

overflow:hidden;

}

.zoom-image img{

transition:
transform .8s ease;

}

.zoom-image:hover img{

transform:
scale(1.15);

}

/*=========================================================
    FEATURED PRODUCT
==========================================================*/

.featured-banner img{

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

}

/*=========================================================
    AVATARS
==========================================================*/

.avatar{

transition:
transform .3s ease;

}

.avatar:hover{

transform:
scale(1.08);

}

/*=========================================================
    ICON BOXES
==========================================================*/

.icon-box{

transition:
transform .3s ease;

}

.icon-box:hover{

transform:
scale(1.08);

}

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

.stagger-zoom>*{

opacity:0;

}

.stagger-zoom>*:nth-child(1){

animation:
zoomIn .7s ease .1s forwards;

}

.stagger-zoom>*:nth-child(2){

animation:
zoomIn .7s ease .2s forwards;

}

.stagger-zoom>*:nth-child(3){

animation:
zoomIn .7s ease .3s forwards;

}

.stagger-zoom>*:nth-child(4){

animation:
zoomIn .7s ease .4s forwards;

}

.stagger-zoom>*:nth-child(5){

animation:
zoomIn .7s ease .5s forwards;

}

.stagger-zoom>*:nth-child(6){

animation:
zoomIn .7s ease .6s forwards;

}

/*=========================================================
    SPEED UTILITIES
==========================================================*/

.zoom-fast{
animation-duration:.35s !important;
}

.zoom-normal{
animation-duration:.7s !important;
}

.zoom-slow{
animation-duration:1.2s !important;
}

/*=========================================================
    DELAY UTILITIES
==========================================================*/

.zoom-delay-1{animation-delay:.1s;}
.zoom-delay-2{animation-delay:.2s;}
.zoom-delay-3{animation-delay:.3s;}
.zoom-delay-4{animation-delay:.4s;}
.zoom-delay-5{animation-delay:.5s;}
.zoom-delay-6{animation-delay:.6s;}
.zoom-delay-7{animation-delay:.7s;}
.zoom-delay-8{animation-delay:.8s;}

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

.reveal-zoom{

opacity:0;

transform:
scale(.92);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal-zoom.active{

opacity:1;

transform:
scale(1);

}

/*=========================================================
    ACCESSIBILITY
==========================================================*/

@media(prefers-reduced-motion:reduce){

.zoom-in,
.zoom-out,
.zoom-small,
.zoom-center,
.zoom-pulse,
.zoom-float,
.hero-image,
.featured-banner img,
.stagger-zoom>*,
.modal{

animation:none !important;

transform:none !important;

transition:none !important;

opacity:1 !important;

}

}

/*=========================================================
    END ZOOM ANIMATIONS
==========================================================*/
/*=========================================================
    ANIMATIONS.CSS
    PART 04
    ROTATE ANIMATIONS
==========================================================*/


/*=========================================================
    KEYFRAMES
==========================================================*/

/*---------------------------------------------------------
    Rotate Clockwise
---------------------------------------------------------*/

@keyframes rotateClockwise{

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

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

}

/*---------------------------------------------------------
    Rotate Counter Clockwise
---------------------------------------------------------*/

@keyframes rotateCounterClockwise{

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

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

}

/*---------------------------------------------------------
    Rotate In
---------------------------------------------------------*/

@keyframes rotateIn{

0%{

opacity:0;

transform:
rotate(-180deg)
scale(.4);

}

100%{

opacity:1;

transform:
rotate(0deg)
scale(1);

}

}

/*---------------------------------------------------------
    Rotate Out
---------------------------------------------------------*/

@keyframes rotateOut{

0%{

opacity:1;

transform:
rotate(0deg)
scale(1);

}

100%{

opacity:0;

transform:
rotate(180deg)
scale(.4);

}

}

/*---------------------------------------------------------
    Swing
---------------------------------------------------------*/

@keyframes swing{

20%{

transform:rotate(12deg);

}

40%{

transform:rotate(-10deg);

}

60%{

transform:rotate(6deg);

}

80%{

transform:rotate(-4deg);

}

100%{

transform:rotate(0deg);

}

}

/*---------------------------------------------------------
    Wobble Rotate
---------------------------------------------------------*/

@keyframes wobbleRotate{

0%,100%{

transform:rotate(0deg);

}

25%{

transform:rotate(4deg);

}

50%{

transform:rotate(-4deg);

}

75%{

transform:rotate(2deg);

}

}

/*---------------------------------------------------------
    Flip X
---------------------------------------------------------*/

@keyframes flipX{

0%{

transform:perspective(400px) rotateX(0deg);

}

100%{

transform:perspective(400px) rotateX(360deg);

}

}

/*---------------------------------------------------------
    Flip Y
---------------------------------------------------------*/

@keyframes flipY{

0%{

transform:perspective(400px) rotateY(0deg);

}

100%{

transform:perspective(400px) rotateY(360deg);

}

}


/*=========================================================
    UTILITY CLASSES
==========================================================*/

.rotate{

animation:
rotateClockwise 6s linear infinite;

}

.rotate-reverse{

animation:
rotateCounterClockwise 6s linear infinite;

}

.rotate-in{

animation:
rotateIn .8s ease forwards;

}

.rotate-out{

animation:
rotateOut .6s ease forwards;

}

.swing{

animation:
swing .8s ease;

}

.wobble{

animation:
wobbleRotate 1s ease;

}

.flip-x{

animation:
flipX .9s ease;

}

.flip-y{

animation:
flipY .9s ease;

}


/*=========================================================
    TECHNOLOGY ICONS
==========================================================*/

.tech-icon{

transition:
transform .35s ease;

}

.tech-icon:hover{

transform:
rotate(15deg)
scale(1.1);

}


/*=========================================================
    SERVICE ICONS
==========================================================*/

.service-icon{

transition:
transform .35s ease;

}

.service-card:hover .service-icon{

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

}


/*=========================================================
    FEATURE ICONS
==========================================================*/

.feature-icon{

transition:
transform .35s ease;

}

.feature-card:hover .feature-icon{

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

}


/*=========================================================
    PRODUCT ICONS
==========================================================*/

.product-icon{

transition:
transform .4s ease;

}

.product-card:hover .product-icon{

transform:
rotate(10deg)
scale(1.1);

}


/*=========================================================
    CLIENT LOGOS
==========================================================*/

.client-logo{

transition:
transform .35s ease;

}

.client-logo:hover{

transform:
rotate(2deg)
scale(1.05);

}


/*=========================================================
    SOCIAL ICONS
==========================================================*/

.social-icon{

transition:
all .35s ease;

}

.social-icon:hover{

transform:
rotate(360deg)
scale(1.15);

}


/*=========================================================
    BUTTON ICONS
==========================================================*/

.btn i,
.btn svg{

transition:
transform .35s ease;

}

.btn:hover i,
.btn:hover svg{

transform:
rotate(12deg);

}


/*=========================================================
    HERO ILLUSTRATIONS
==========================================================*/

.hero-illustration{

animation:
rotateClockwise 40s linear infinite;

}

.hero-ring{

animation:
rotateCounterClockwise 35s linear infinite;

}


/*=========================================================
    AI CIRCLES
==========================================================*/

.ai-circle{

animation:
rotateClockwise 18s linear infinite;

}

.ai-circle-small{

animation:
rotateCounterClockwise 12s linear infinite;

}


/*=========================================================
    LOADER
==========================================================*/

.loader{

animation:
rotateClockwise 1s linear infinite;

}


/*=========================================================
    DASHBOARD WIDGETS
==========================================================*/

.dashboard-widget:hover{

transform:
rotate(1deg)
translateY(-6px);

}


/*=========================================================
    TIMELINE ICONS
==========================================================*/

.timeline-icon{

transition:
transform .35s ease;

}

.timeline-item:hover .timeline-icon{

transform:
rotate(360deg);

}


/*=========================================================
    PORTFOLIO CARDS
==========================================================*/

.portfolio-card{

transition:
transform .4s ease;

}

.portfolio-card:hover{

transform:
rotate(-1deg)
translateY(-10px);

}


/*=========================================================
    BLOG CARDS
==========================================================*/

.blog-card:hover{

transform:
rotate(.6deg)
translateY(-8px);

}


/*=========================================================
    MODALS
==========================================================*/

.modal.show{

animation:
rotateIn .45s ease;

}

.modal.hide{

animation:
rotateOut .3s ease;

}


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

.stagger-rotate>*{

opacity:0;

}

.stagger-rotate>*:nth-child(1){

animation:
rotateIn .7s ease .1s forwards;

}

.stagger-rotate>*:nth-child(2){

animation:
rotateIn .7s ease .2s forwards;

}

.stagger-rotate>*:nth-child(3){

animation:
rotateIn .7s ease .3s forwards;

}

.stagger-rotate>*:nth-child(4){

animation:
rotateIn .7s ease .4s forwards;

}

.stagger-rotate>*:nth-child(5){

animation:
rotateIn .7s ease .5s forwards;

}

.stagger-rotate>*:nth-child(6){

animation:
rotateIn .7s ease .6s forwards;

}


/*=========================================================
    SPEED UTILITIES
==========================================================*/

.rotate-fast{

animation-duration:1.5s !important;

}

.rotate-normal{

animation-duration:4s !important;

}

.rotate-slow{

animation-duration:8s !important;

}

.rotate-extra-slow{

animation-duration:20s !important;

}


/*=========================================================
    HOVER UTILITIES
==========================================================*/

.hover-rotate:hover{

transform:rotate(8deg);

}

.hover-rotate-left:hover{

transform:rotate(-8deg);

}

.hover-spin:hover{

transform:rotate(360deg);

transition:
transform .6s ease;

}


/*=========================================================
    ACCESSIBILITY
==========================================================*/

@media (prefers-reduced-motion: reduce){

.rotate,
.rotate-reverse,
.rotate-in,
.rotate-out,
.swing,
.wobble,
.flip-x,
.flip-y,
.hero-illustration,
.hero-ring,
.ai-circle,
.ai-circle-small,
.loader,
.stagger-rotate>*{

animation:none !important;

transition:none !important;

transform:none !important;

opacity:1 !important;

}

}

/*=========================================================
    END ROTATE ANIMATIONS
==========================================================*/