#hero {

    position: relative;

    align-items: center;

    background-color: var(--color-primary);


}

.hero-container {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-lg);

}

.hero-h1 {

    width: 100%;
    max-width: 720px;
    text-align: center;

    line-height: 1.1;

    font-family: var(--font-family);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-xl);
    color: var(--color-secondary);

}

.hero-subtitle {
    
    width: 100%;
    max-width: 720px;
    text-align: center;

    line-height: 1.5;

    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-lg);
    color: var(--color-bg);

}

.hero-button {

    background-color: var(--color-secondary);
    color: var(--color-text);

}

.hero-chevron-icon {

    position: absolute;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);

    font-size: var(--font-size-lg);
    color: var(--color-bg);

    animation: float 1.5s ease-in-out infinite alternate;

}


/* ANIMATIONS */
@keyframes float {

    0%, 100% {

        transform: translateX(-50%) translateY(0);

    }

    50% {

        transform: translateX(-50%) translateY(calc(-1 * var(--space-sm)));

    }

}