.scroll-down-btn {
    background-color: #0b194e;
    color: #fff;
    border: 0;
    cursor: pointer
}
.scroll-down-btn {
    position: fixed;
    bottom: 30px;
    right: 5%;
    width: 70px;
    height: 70px;
    font-size: 26px;
    border-radius: 50%;
    box-shadow: 0 4px 10px #00000030;
    z-index: 999;
    transition: background-color .3s ease,transform .2s ease,opacity .3s ease;
    opacity: 0;
    pointer-events: none
}

.scroll-down-btn.show {
    opacity: 1;
    pointer-events: auto
}
.scroll-down-btn:focus-visible,.scroll-down-btn:hover {
    color: #0b194e;
    outline: 0;
    border: 2px solid #ffe066;
    transition: background-color .25s,color .2s,transform .2s,box-shadow .25s,filter .2s,border .2s
}
.scroll-down-btn:focus-visible,.scroll-down-btn:hover {
    background-color: #fc0;
    box-shadow: 0 10px 28px rgba(255,204,0,.22),0 2px 8px #0b194e22;
    filter: brightness(1.1)
}

@media (max-width: 720px) {
    .scroll-down-btn{
        width: 60px;
        height: 60px;
        display: flex; /* By default, it's visible and laid out */
        left: 50%;
        transform: translate(-50%);
        flex-direction: column;
        justify-content: center;
        opacity: 0.5; /* Base opacity when visible */

        /* Add transition for a smooth show/hide effect */
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        visibility: visible; /* Initially visible */
        pointer-events: auto; /* Initially clickable */

        /* IMPORTANT: Remove the !important here. It's not needed and can cause issues. */
        /* opacity: 0.8 !important; <--- REMOVE THIS LINE */
    }

    /* New class to hide the button */
    .scroll-down-btn.hide {
        opacity: 0 !important; /* Force invisible with !important here for strong hiding */
        visibility: hidden !important; /* Hide from screen readers and layout */
        pointer-events: none !important; /* Make it unclickable */
    }
}

@media (max-width: 1696px) {
    .scroll-down-btn{
        width: 60px;
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        right: 5%;
    }

}