/*********************************************
 * Navigation Horizontal
**********************************************/
/* list */
.vii-nav {
    z-index:21;
}
.vii-nav .flickity-viewport {z-index:1;}
.vii-nav_wrap {
    padding-left:var(--vii-gap-side);
    padding-right:var(--vii-gap-side);
    border-bottom:1px solid var(--vii-color-light-gray-10);
}
/* avoid CLS */
.vii-nav_ul {min-height:65px;}

/* blur layer */
.vii-nav_ul.is-draggable::before,
.vii-nav_ul.is-draggable::after {
    --gradient-color:var(--vii-color-white);
    --flkt-border-w:0;

    content:""; display:block;
    width:100px; background:linear-gradient(to right, var(--gradient-color) 0%, rgba(238, 241, 245, 0) 100%);
    position:absolute; top:0;bottom:1px; z-index:10;
    border-radius:0;transform:none; pointer-events:none;

}
.vii-nav_ul.is-draggable::before {left:0;}
.vii-nav_ul.is-draggable::after {right:0; transform:scaleX(-1);}
.vii-nav_ul.is-draggable:has(.flickity-prev-next-button[disabled="true"])::before,
.vii-nav_ul.is-draggable:has(.flickity-prev-next-button[disabled="true"])::after {
    display:none;
}

/* button arrow to slide */
.vii-nav_ul .flickity-prev-next-button {
    --flkt-icon-size:16px;
    --flkt-border-w:0;

    z-index:3;width:30px;height:30px; opacity:0;
}

.vii-nav_ul:hover .flickity-prev-next-button,
.vii-nav_ul:focus .flickity-prev-next-button {
    opacity:1;
}

.vii-nav_ul .flickity-prev-next-button:disabled {opacity:0;pointer-events:none;}
.vii-nav_ul .flickity-prev-next-button.next {right:-40px;}
.vii-nav_ul .flickity-prev-next-button.previous {left:-40px;}

/* item */
.vii-nav ul .vii-nav--list-item {padding:0;margin-right:56px; width:fit-content;}
.vii-nav--list-item .vii-nav--list-item__link {padding:20px 0;line-height:1.4; position:relative;}
.vii-nav--list-item .vii-nav--list-item__link:after {
    content:""; position:absolute; bottom:0; left:0; width:0; height:2px;transition:all 0.3s ease;
}

/* hover, active, focus */
.vii-nav--list-item.active .vii-nav--list-item__link,
.vii-nav--list-item .vii-nav--list-item__link.active,
.vii-nav--list-item .vii-nav--list-item__link:hover,
.vii-nav--list-item .vii-nav--list-item__link:focus {color:var(--vii-color-blue);}
.vii-nav--list-item.active .vii-nav--list-item__link::after,
.vii-nav--list-item .vii-nav--list-item__link.active::after,
.vii-nav--list-item .vii-nav--list-item__link:hover::after,
.vii-nav--list-item .vii-nav--list-item__link:focus::after {background-color:var(--vii-color-blue);width:100%;}

/*********************************************
 * Responsive Navigation Horizontal
**********************************************/
@media screen and (max-width:1180px) {
    .vii-nav_ul.flickity-enabled.is-draggable {
        margin-left:calc(-1 * var(--vii-gap-side) - 0.5px);
        margin-right:calc(-1 * var(--vii-gap-side));
        padding-left:var(--vii-gap-side);
    }
    .vii-nav_ul .flickity-prev-next-button {display:none;}
}