.mobile-section-swipe-indicator {
    position: fixed;
    left: 50%;
    bottom: 25px;
    width: 36px;
    height: 36px;
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
    z-index: 99999;
    transition: opacity .2s ease;
}

.mobile-section-swipe-indicator.visible {
    opacity: 1;
}

.mobile-section-swipe-indicator::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(30,45,30,.35);
    border-radius: 50%;
}

.mobile-section-swipe-indicator span {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 3px;
    height: 45%;
    background: #1e2d1e;
    transform-origin: bottom center;
    transform: translateX(-50%) scaleY(0);
    transition: transform .05s linear;
}

.mobile-section-swipe-indicator.up span::after,
.mobile-section-swipe-indicator.down span::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 9px;
    height: 9px;
    border-top: 3px solid #1e2d1e;
    border-left: 3px solid #1e2d1e;
}

.mobile-section-swipe-indicator.up span::after {
    top: 0;
    transform: translate(-50%, 0) rotate(45deg);
}

.mobile-section-swipe-indicator.down span::after {
    bottom: 0;
    transform: translate(-50%, 0) rotate(-135deg);
}

@media screen and (min-width: 768px) {
    .mobile-section-swipe-indicator {
        display: none;
    }
}