.wrapper-scroll{

    position: relative;

    width: 100vw;
    height: 12svh;

    top: 0;
    margin-bottom: 3svh;

    background-color: transparent;
    /*background-color: #660000;*/

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}


@media (max-width: 768px) {

    .wrapper-scroll{

        height: 20svh;
    }
}



.wrapper-scroll-inner{

    position: relative;

    height: 75px;
    border: solid 2px rgb(225, 225, 225);
    width: 36px;
    border-radius: 18px;
}

.wrapper-scroll-inner::before{

    height: 75px;

    content: "";
    position: absolute;
    top: 11px;
    left: 11px;
    translate: 0 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgb(225, 225, 225);
    animation: fallingDown 3000ms infinite;
}

@keyframes fallingDown{

    0% {
            opacity: 0;
    }

    40% {
            opacity: 1;
    }

    80% {
            transform: translateY(40px);
            opacity: 0;
    }

    100% {
            opacity: 0;
    }
}