/* =======================================================
   CITEX GROUP - ANIMATIONS
======================================================= */

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

.show{
    animation:fadeUp .8s ease forwards;
    opacity:0;
    transform:translateY(40px);
}

@keyframes fadeUp{

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

}

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

.hero h1{
    animation:heroText 1.2s ease forwards;
    opacity:0;
    transform:translateY(30px);
}

.hero p{
    animation:heroText 1.4s ease forwards;
    opacity:0;
    transform:translateY(30px);
}

.hero-buttons{
    animation:heroText 1.6s ease forwards;
    opacity:0;
    transform:translateY(30px);
}

@keyframes heroText{

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

}

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

.project-card:hover,
.about-card:hover,
.team-card:hover{

    box-shadow:0 0 40px rgba(0,191,255,.25);

}

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

.primary-btn{
    position:relative;
    overflow:hidden;
}

.primary-btn::after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:-100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.3),transparent);
    transition:.5s;
}

.primary-btn:hover::after{
    left:100%;
}

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

#loader{
    position:fixed;
    width:100%;
    height:100vh;
    background:#050816;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
    transition:.8s;
}

.loader-logo h1{
    font-size:60px;
    color:#00bfff;
    animation:pulse 1.5s infinite;
}

.loader-logo span{
    display:block;
    text-align:center;
    letter-spacing:10px;
    color:#ffffff;
}

@keyframes pulse{

    0%{
        text-shadow:0 0 10px #00bfff;
    }

    50%{
        text-shadow:0 0 30px #00bfff;
    }

    100%{
        text-shadow:0 0 10px #00bfff;
    }

}

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

.project-card,
.about-card,
.team-card,
.stat-card{
    transition:transform .4s ease;
}

.project-card:hover,
.about-card:hover,
.team-card:hover,
.stat-card:hover{
    transform:translateY(-10px) scale(1.02);
}

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

.logo span,
.section-title h2{
    background:linear-gradient(90deg,#00bfff,#0084ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}