.hero-controls {
    bottom: 92px;
}

.hero-arrow {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #b8d544;
    box-shadow: 0 8px 20px rgba(7, 54, 92, 0.24);
    color: #07365c;
    font-size: 1.15rem;
    font-weight: 700;
    transition: transform 0.2s ease, background 0.2s ease;
}

.hero-arrow:hover {
    background: #d1e867;
    transform: translateY(-2px);
}

@media (max-width: 680px) {
    .hero-slide .hero-copy {
        padding-bottom: 116px;
    }

    .hero-controls {
        bottom: 82px;
    }
}