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

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}

.hero-right img{

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

}



@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0px);

    }

}

.hero-left{

    animation:fadeUp 1s ease;

}



.card{

    animation:fadeUp 1s ease;

}



@keyframes glow{

    0%{

        box-shadow:0 0 10px rgba(37,99,235,.3);

    }

    50%{

        box-shadow:0 0 30px rgba(37,99,235,.7);

    }

    100%{

        box-shadow:0 0 10px rgba(37,99,235,.3);

    }

}

.primary{

    animation:glow 3s infinite;

}



/* Floating Particles */

.particle{

    position:fixed;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#3b82f6;

    opacity:.25;

    pointer-events:none;

    animation:particleMove linear infinite;

}

@keyframes particleMove{

    from{

        transform:translateY(100vh);

    }

    to{

        transform:translateY(-120vh);

    }

}