/* ===========================
   ANIMATED BACKGROUND
=========================== */

.hero{
    position:relative;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:#8b5cf6;
    border-radius:50%;
    filter:blur(160px);
    opacity:.25;
    top:-180px;
    left:-120px;
    animation:floatGlow 8s ease-in-out infinite;
}

.hero::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:#a855f7;
    border-radius:50%;
    filter:blur(140px);
    opacity:.18;
    bottom:-150px;
    right:-120px;
    animation:floatGlow2 10s ease-in-out infinite;
}

@keyframes floatGlow{

0%{
transform:translate(0,0);
}

50%{
transform:translate(60px,40px);
}

100%{
transform:translate(0,0);
}

}

@keyframes floatGlow2{

0%{
transform:translate(0,0);
}

50%{
transform:translate(-50px,-40px);
}

100%{
transform:translate(0,0);
}

}

.hero-content{
    position:relative;
    z-index:2;
}