.hero {
    margin-bottom: 32px
}

.hero .container {
    display: flex;
    flex-direction: column;
    align-items: center
}

.background_shadow {
    z-index: -2;
    position: absolute;
    overflow: visible;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background: radial-gradient(90% 100% at 50% 0%, rgba(56, 91, 179, .4), rgba(255, 255, 255, 0))
}

.hero_title {
    text-align: center;
    font-size: 64px;
    font-weight: 600;
    line-height: 120%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(80deg, #f8f6f2, #f8f6f2, rgb(133, 135, 153));
    opacity: 0;
    animation: textReveal .4s .4s forwards
}

.hero_suphead {
    margin-bottom: 24px;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 9999px;
    background: rgba(80, 80, 80, .4);
    border: 1px solid rgba(120, 120, 120, .4);
    box-shadow: 0 12px 12px #00000014;
    opacity: 0;
    animation: textReveal .4s .2s forwards
}

.hero_subhead {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 20px;
    color: #b4bdd0;
    line-height: 150%;
    opacity: 0;
    animation: textReveal .4s .6s forwards
}

.hero_button {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 48px;
    padding: 12px 24px;
    border-radius: 16px;
    background: linear-gradient(to right, #385bb3, rgb(95, 187, 207));
    transition: .3s ease;
    opacity: 0;
    animation: fadeIn .4s .8s ease forwards
}

.hero_button:active {
    scale: .95
}

.hero_button img {
    rotate: -90deg
}

@keyframes gradientAnim {
    0% {
        background-position: 1000% 0%
    }

    to {
        background-position: 0% 0%
    }
}

@keyframes textReveal {
    0% {
        opacity: 0;
        transform: translateY(-30px)
    }

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

@keyframes arrowSpring {
    0%, 10%, 20% {
        rotate: 0deg
    }

    5%, 15% {
        rotate: 20deg
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeInBg {
    0% {
        opacity: 0
    }

    to {
        opacity: .7
    }
}

@media screen and (max-width: 800px) {
    .hero_title {
        font-size: 44px
    }

    .hero_title br {
        display: none
    }

    .hero_subhead {
        font-size: 18px;
        display: flex
    }
}

@media screen and (max-width: 640px) {
    .hero_subhead br {
        display: none
    }
}

@media screen and (max-width: 540px) {
    .hero {
        padding-top: 48px;
        margin-bottom: 32px
    }
}

@media screen and (max-width: 420px) {
    .hero_title {
        font-size: 38px
    }
}

@media screen and (max-width: 374px) {
    .hero_title {
        font-size: 32px
    }
}