.arrow-container-mobile {
    visibility: hidden;
    animation: none;
    transition: none;
}
.arrow-container {
    visibility: hidden;
    transition: none;
    opacity: 1;
}
.visible .arrow-container {
    visibility: visible;
    animation: bounceUpDown 5s alternate;
    transition: all 0.3s;
    position: absolute;
    right: 50%;
    top: 20%;
    margin-top: 118px;
    transform: translateY(-30px);
    opacity: 0;
}
.arrow {
    position: absolute;
    width: 24px;
    height: 124px;
}
.circle {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fff;
    transform: translateY(-12px);
}
.circle.center {
    transform: translateY(88px);
}
.branch {
    position: absolute;
    width: 24px;
    height: 100px;
    background-color: #fff;
}
.arrow.left {
    transform: translateX(26.870057685088806px) rotate(45deg);
}
.arrow.right {
    transform: translateX(-26.870057685088806px) rotate(-45deg);
}
.hidden {
    opacity: 0;
}

@media screen and (max-width: 450px) {
    .arrow-container, .visible .arrow-container {
        visibility: hidden;
    }
    .visible .arrow-container-mobile {
        visibility: visible;
        animation: bounceLeftRight 5s alternate;
        transition: all 0.3s;
        position: absolute;
        right: 40%;
        margin-top: 118px;
        transform: translateX(-30px) rotate(-90deg);
        opacity: 0;
    }
}

@keyframes bounceLeftRight {
    0% {
        transform: translateX(0) rotate(-90deg);
        opacity: 1;
    }
    20% {
        transform: translateX(-30px) rotate(-90deg);
        opacity: 1;

    }
    40% {
        transform: translateX(0) rotate(-90deg);
        opacity: 1;
    }
    60% {
        transform: translateX(-30px) rotate(-90deg);
        opacity: 1;
    }
    80% {
        transform: translateX(0) rotate(-90deg);
        opacity: 1;
    }
    100% {
        transform: translateX(-30px) rotate(-90deg);
        opacity: 0;
    }
}

@keyframes bounceUpDown {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    20% {
        transform: translateY(-30px);
        opacity: 1;
    }
    40% {
        transform: translateY(0);
        opacity: 1;
    }
    60% {
        transform: translateY(-30px);
        opacity: 1;
    }
    80% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-30px);
        opacity: 0;
    }
}