/* SCROLL ARROW */
.scroll-arrow {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #444;
    /* Dark for Sky section */
    animation: bounce 2s infinite;
    opacity: 0.8;
    transition: opacity 0.3s;
    z-index: 900;
}

.scroll-arrow:hover {
    opacity: 1;
    color: #000;
}

.scroll-arrow.arrow-white {
    color: #fff;
    /* White for Black section */
}

.scroll-arrow-up {
    top: 100px;
    bottom: auto;
    /* Transformation removed here because animation overrides it */
}

/* Rotate the icon inside the anchor instead */
.scroll-arrow-up svg {
    transform: rotate(180deg);
}

.scroll-arrow-up.arrow-white {
    color: #fff;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}