/*=========================================================
 Padamnabh Tech Pvt. Ltd.
 animations.css
=========================================================*/


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

.hero{

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:radial-gradient(circle,#00d4ff40,transparent 70%);

    top:-250px;

    left:-250px;

    animation:heroGlow 10s linear infinite;

    z-index:0;

}

.hero::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    background:radial-gradient(circle,#2563eb30,transparent 70%);

    bottom:-280px;

    right:-280px;

    animation:heroGlow2 12s linear infinite;

    z-index:0;

}

.hero>*{

    position:relative;

    z-index:2;

}


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

.particle{

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    background:#00d4ff;

    opacity:.18;

    animation:floatParticle 18s linear infinite;

}

.particle:nth-child(2){

    left:15%;

    animation-duration:16s;

}

.particle:nth-child(3){

    left:35%;

    animation-duration:20s;

}

.particle:nth-child(4){

    left:55%;

    animation-duration:23s;

}

.particle:nth-child(5){

    left:78%;

    animation-duration:19s;

}


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

.hero-image img{

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

}


/*=========================================================
 BUTTON SHINE
=========================================================*/

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:rgba(255,255,255,.35);

    transform:skewX(-25deg);

}

.btn:hover::before{

    left:160%;

    transition:1s;

}


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

.feature-card,
.service-card,
.industry-card,
.workflow-card,
.testimonial-card,
.stats-card{

    transition:.4s;

}

.feature-card:hover,
.service-card:hover,
.industry-card:hover,
.workflow-card:hover,
.testimonial-card:hover,
.stats-card:hover{

    transform:translateY(-12px);

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

}


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

.service-card{

    overflow:hidden;

}

.service-card img{

    transition:.6s;

}

.service-card:hover img{

    transform:scale(1.08);

}


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

.feature-icon{

    transition:.4s;

}

.feature-card:hover .feature-icon{

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

}


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

.logo img{

    animation:logoPulse 4s infinite;

}


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

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}


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

.fade-left{

    opacity:0;

    transform:translateX(-80px);

    transition:1s;

}

.fade-left.active{

    opacity:1;

    transform:translateX(0);

}


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

.fade-right{

    opacity:0;

    transform:translateX(80px);

    transition:1s;

}

.fade-right.active{

    opacity:1;

    transform:translateX(0);

}


/*=========================================================
 SCALE IN
=========================================================*/

.scale-up{

    opacity:0;

    transform:scale(.85);

    transition:.8s;

}

.scale-up.active{

    opacity:1;

    transform:scale(1);

}


/*=========================================================
 GLOW BORDER
=========================================================*/

.glow{

    position:relative;

}

.glow::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:linear-gradient(

        90deg,

        #00d4ff,

        #2563eb,

        #00d4ff

    );

    z-index:-1;

    background-size:300%;

    animation:borderGlow 6s linear infinite;

}


/*=========================================================
 COUNTER POP
=========================================================*/

.counter{

    animation:counterPulse 2s infinite;

}


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

.cta{

    animation:ctaBackground 8s infinite alternate;

}


/*=========================================================
 FOOTER LINKS
=========================================================*/

.footer a{

    transition:.35s;

}

.footer a:hover{

    padding-left:8px;

}


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

.loader-logo{

    animation:loaderRotate 8s linear infinite;

}


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

@keyframes heroGlow{

    0%{

        transform:rotate(0deg);

    }

    100%{

        transform:rotate(360deg);

    }

}

@keyframes heroGlow2{

    0%{

        transform:rotate(360deg);

    }

    100%{

        transform:rotate(0deg);

    }

}

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes floatParticle{

    0%{

        transform:translateY(100vh);

        opacity:0;

    }

    20%{

        opacity:.18;

    }

    80%{

        opacity:.18;

    }

    100%{

        transform:translateY(-120vh);

        opacity:0;

    }

}

@keyframes logoPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes borderGlow{

    0%{

        background-position:0%;

    }

    100%{

        background-position:300%;

    }

}

@keyframes counterPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes ctaBackground{

    from{

        background-position:left;

    }

    to{

        background-position:right;

    }

}

@keyframes loaderRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*=========================================================
 SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#2563eb;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#0f4dcf;

}


/*=========================================================
 TEXT SELECTION
=========================================================*/

::selection{

    background:#2563eb;

    color:#ffffff;

}


/*=========================================================
 END animations.css
=========================================================*/