/*==================================================
            TENCRETE ANIMATIONS
===================================================*/

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

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@keyframes floatCard{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}

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

@keyframes glow{

    0%{

        box-shadow:0 0 10px rgba(59,130,246,.3);

    }

    50%{

        box-shadow:0 0 35px rgba(34,211,238,.7);

    }

    100%{

        box-shadow:0 0 10px rgba(59,130,246,.3);

    }

}

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

@keyframes gradientMove{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}
/*==============================
        BUTTON HOVER
==============================*/

.primary-btn{

    position:relative;

    overflow:hidden;

}

.primary-btn::before{

    content:"";

    position:absolute;

    width:0;

    height:100%;

    left:0;

    top:0;

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

    transition:.5s;

}

.primary-btn:hover::before{

    width:100%;

}

.primary-btn:hover{

    transform:translateY(-5px);

}

/*==============================
        SERVICE CARD
==============================*/

.service-card{

    transition:.4s;

}

.service-card:hover{

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

}

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

.project-card img{

    transition:.6s;

}

.project-card:hover img{

    transform:scale(1.08);

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


@keyframes loading{

    to{

        width:100%;

    }

}
/*==============================
        CURSOR GLOW
==============================*/

/*==============================
        SECTION ANIMATION
==============================*/

.animate{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.animate.show{

    opacity:1;

    transform:translateY(0);

}

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

.hero-left{

    animation:fadeIn 1s ease;

}

.hero-right{

    animation:fadeIn 1.2s ease;

}

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

.floating-card{

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

}

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

.primary-btn{

    animation:glow 4s infinite;

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

.hero-bg{

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        #0B1120,
        #111827,
        #1E3A8A,
        #0B1120
    );

    background-size:400% 400%;

    animation:gradientMove 12s ease infinite;

    z-index:-3;

}

/*==============================
        GRID EFFECT
==============================*/

.hero-grid{

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);

    background-size:40px 40px;

    z-index:-2;

    opacity:.4;

}