.scroll-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2em;
    width: 1.2em;
    font-size: 22px;
    color: white;
    border-radius: 2em;
    border: solid 2px;
    transition: .4s;
    margin-top: 1rem;
}

.scroll-icon:hover {
    background-color: #090F36;
    color: #fff;
}

.scroll-icon::after {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #fff;
    border-radius: 50%;
    animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

@keyframes scroll-icon {
    0% { transform: translateY(-12px); opacity: 0; }
    30%, 70% { opacity: 1; }
    100% { transform: translateY(12px); opacity: 0; }
}