/* ===== BOTTOM NAVIGATION ===== */

.scrollBtns {
    position: fixed!important;
    bottom: 18px!important;
    left: 50%!important;
    transform: translateX(-50%)!important;
 
    width: auto!important;
}
.scrollBtns {
    opacity:0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.scrollBtns.showScrollBtns {
    opacity: 1;
    pointer-events: auto;
}
.scrollBtns.showScrollBtns i {
    color: #444!important;
    font-size: 22px !important;

    transition: all 0.28s ease!important;
}
.scrollBtns ul {
    position: relative;
    display: flex;
    gap: 12px;
width: auto!important;
    padding: 10px 14px;
    border-radius: 999px;

    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.92),
        rgba(245,245,245,0.72)
    );

    border: 1px solid rgba(0,0,0,0.06);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 16px 40px rgba(0,0,0,0.16),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

/* ===== BUTTON ===== */

.scrollBtns li {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    padding:0;
}

.scrollBtns a {
     width: 50px!important;
    height: 50px!important;

    display: flex!important;
    align-items: center!important;
    justify-content: center!important;

    border-radius: 50%!important;

    text-decoration: none!important;


    border: 1px solid rgba(0,0,0,0.05);

    box-shadow:
        0 6px 16px rgba(0,0,0,0.10),
        inset 0 1px 0 rgba(255,255,255,1);

    transition: all 0.25s ease;
}

/* ICON */

.scrollBtns i {
    color: #3f3f3f;
    font-size: 22px !important;
    transition: all 0.25s ease;
}

/* HOVER */

.scrollBtns a:hover {
    transform: translateY(-2px) scale(1.06);
    background: #f7f7f7;
    box-shadow:
        0 10px 22px rgba(0,0,0,0.16),
        inset 0 1px 0 rgba(255,255,255,1);
}

.scrollBtns a:hover i {
    transform: translateX(2px)!important;
    color: #111!important;
}
/* jemná deliaca čiara medzi šípkami */
.scrollBtns ul::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 22%;
    height: 56%;
    width: 1px;
    background: rgba(0,0,0,0.08);
}

/* decentná animácia */
.rightArws i {
    animation: softRightMove 2.2s ease-in-out infinite;
}

.leftArws i {
    animation: softLeftMove 2.2s ease-in-out infinite;
}

@keyframes softRightMove {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
}

@keyframes softLeftMove {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-3px); }
}
/* LEFT */



/* ANIMATION */

.rightArrows .arrow-second i {
    animation: arrowPulseRight 1.8s ease-in-out infinite!important;
}

.leftArrows .arrow-second_left i {
    animation: arrowPulseLeft 1.8s ease-in-out infinite!important;
}

@keyframes arrowPulseRight {

    0%,100% {
        transform: translateX(0)!important;
        opacity: 0.7!important;
    }

    50% {
        transform: translateX(4px)!important;
        opacity: 1!important;
    }
}

@keyframes arrowPulseLeft {

    0%,100% {
        transform: translateX(0)!important;
        opacity: 0.7!important;
    }

    50% {
        transform: translateX(-4px)!important;
        opacity: 1!important;
    }
}

/* REMOVE DOUBLE GAP */

.arrow-first,
.arrow-first_left {
    margin-right: -18px!important;
}

/* MOBILE ONLY */

@media (min-width: 769px) {

    .scrollBtns {
        display: block!important;
    }

}

/* SMALL MOBILE */

@media (max-width: 480px) {

    .scrollBtns {
        bottom: 12px!important;
    }

    .scrollBtns ul {
        gap: 10px!important;
        padding: 7px 10px!important;
    }

    .scrollBtns a {
        width: 44px!important;
        height: 44px!important;
    }

    .scrollBtns i {
        font-size: 18px !important;
    }

}