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

*{
    transition:
    background .35s ease,
    color .35s ease,
    border .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}

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

.fade-up{
    animation:fadeUp .8s ease both;
}

@keyframes fadeUp{

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

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

}

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

.fade-left{

    animation:fadeLeft .8s ease both;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

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

.fade-right{

    animation:fadeRight .8s ease both;

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

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

.zoom{

    animation:zoom .8s ease both;

}

@keyframes zoom{

    from{

        opacity:0;

        transform:scale(.8);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

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

.float{

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

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.btn-primary{

    position:relative;

}

.btn-primary::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:60px;

    background:linear-gradient(
    90deg,
    #315CFF,
    #2ED3FF,
    #6A5CFF);

    z-index:-1;

    opacity:0;

    transition:.4s;

}

.btn-primary:hover::before{

    opacity:1;

    filter:blur(10px);

}

/*==============================================
        CARD HOVER
==============================================*/

.service-card:hover,
.stat-card:hover,
.feature-box:hover,
.why-card:hover{

    transform:

    translateY(-15px)

    scale(1.02);

}

/*==============================================
        IMAGE HOVER
==============================================*/

.hero-image img:hover{

    transform:

    scale(1.05)

    rotate(-2deg);

}

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

.service-icon,
.why-icon{

    transition:.4s;

}

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

    transform:rotate(360deg);

}

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

.social-icons a:hover,
.footer-social a:hover{

    transform:

    translateY(-8px)

    rotate(360deg);

}

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

.nav-link{

    overflow:hidden;

}

.nav-link::before{

    content:"";

    position:absolute;

    left:-100%;

    bottom:-8px;

    width:100%;

    height:2px;

    background:#2ED3FF;

    transition:.4s;

}

.nav-link:hover::before{

    left:0;

}

/*==============================================
        SCROLL DOWN
==============================================*/

.scroll-down{

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,100%{

        transform:translate(-50%,0);

    }

    50%{

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

    }

}

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

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(49,92,255,.6);

    }

    100%{

        box-shadow:0 0 0 25px rgba(49,92,255,0);

    }

}

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

.rotate{

    animation:rotate 18s linear infinite;

}

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

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

.gradient-animation{

    background:

    linear-gradient(

    90deg,

    #ffffff,

    #2ED3FF,

    #6A5CFF,

    #ffffff);

    background-size:300%;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:textMove 8s linear infinite;

}

@keyframes textMove{

    from{

        background-position:0;

    }

    to{

        background-position:300%;

    }

}

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

#backToTop{

    animation:upDown 3s infinite;

}

@keyframes upDown{

    50%{

        transform:translateY(-6px);

    }

}