/* ==========================================================
   AxisNet.org
   Animation Stylesheet
   assets/css/animation.css
========================================================== */

/* ===============================
   GLOBAL TRANSITION
================================= */

*{
    transition:all .3s ease;
}

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

.fade-in{
    animation:fadeIn .8s ease forwards;
}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

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

.fade-up{

    animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

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

.fade-down{

    animation:fadeDown .8s ease forwards;

}

@keyframes fadeDown{

    from{

        opacity:0;
        transform:translateY(-40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

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

.fade-left{

    animation:fadeLeft .8s ease forwards;

}

@keyframes fadeLeft{

    from{

        opacity:0;
        transform:translateX(-40px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

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

.fade-right{

    animation:fadeRight .8s ease forwards;

}

@keyframes fadeRight{

    from{

        opacity:0;
        transform:translateX(40px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

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

.zoom-in{

    animation:zoomIn .7s ease forwards;

}

@keyframes zoomIn{

    from{

        opacity:0;
        transform:scale(.8);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

/* ===============================
   FLOATING
================================= */

.float{

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

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

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

.shake:hover{

    animation:shake .5s;

}

@keyframes shake{

0%{transform:translateX(0);}
20%{transform:translateX(-5px);}
40%{transform:translateX(5px);}
60%{transform:translateX(-5px);}
80%{transform:translateX(5px);}
100%{transform:translateX(0);}

}

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

.bounce{

    animation:bounce 2s infinite;

}

@keyframes bounce{

0%,20%,50%,80%,100%{

transform:translateY(0);

}

40%{

transform:translateY(-15px);

}

60%{

transform:translateY(-8px);

}

}

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

.rotate:hover{

    transform:rotate(8deg);

}

/* ===============================
   BUTTON EFFECT
================================= */

.btn{

    transition:.3s;

}

.btn:hover{

    transform:translateY(-4px);

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

}

/* ===============================
   CARD EFFECT
================================= */

.card,
.service-box{

    transition:.35s;

}

.card:hover,
.service-box:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,0,0,.15);

}

/* ===============================
   IMAGE EFFECT
================================= */

.img-hover{

    overflow:hidden;

    border-radius:18px;

}

.img-hover img{

    transition:.5s;

}

.img-hover:hover img{

    transform:scale(1.08);

}

/* ===============================
   ICON EFFECT
================================= */

.service-box i{

    transition:.3s;

}

.service-box:hover i{

    transform:scale(1.2);

    color:#ffc107;

}

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

.navbar{

    animation:slideDown .6s ease;

}

@keyframes slideDown{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

}

/* ===============================
   HERO TITLE
================================= */

.hero h1{

    animation:fadeLeft .8s ease;

}

.hero p{

    animation:fadeUp 1s ease;

}

.hero .btn{

    animation:zoomIn 1s ease;

}

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

.loader{

    width:55px;
    height:55px;

    border-radius:50%;

    border:5px solid #ececec;

    border-top:5px solid #6f2dbd;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ===============================
   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;

}

/* ===============================
   AOS OVERRIDE
================================= */

[data-aos]{

    transition-duration:.8s !important;

}