/*********************************************
 * Services section
**********************************************/
.twc-services-section {position:relative;}
.twc-services-section__nav-line-wrapper {
    --ss-height-content-nav:35px;
    width:100%;
    position:relative; transition:var(--twc-transition);
}
.twc-services-section__nav-button ul {list-style:none; margin:0; width:100%;}
.twc-services-section__nav-button ul li {padding:0;}
.twc-services-section__nav-item-inner {
    position:relative; background-color:rgba(0, 0, 0, 0);
    font-weight:500; font-size:var(--twc-size-16); color:var(--twc-color-heading);
}
.twc-services-section__nav-item-inner span {transition:var(--twc-transition);}
.dot-circle {
    width:12px; height:12px; border-radius:50%; border:1px solid var(--twc-color-primary);
    background:#fff; font-size:0;
}
.dot-title {
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:30px; opacity:0;
}
.twc-services-section__nav-button ul li.active .dot-circle,
.twc-services-section__nav-button ul li.is-chosen .dot-circle,
.twc-services-section__nav-button ul li button:hover .dot-circle {background:var(--twc-color-primary);}
.twc-services-section__nav-button ul li.active .dot-title {opacity:1;}

/* Line */
.twc-services-section__nav-line {
    position:absolute; left:0; top:50%; transform:translateY(-50%);
    height:2px; font-size:0;
}
.twc-services-section__nav-line.fixed {width:100%; background:rgba(112, 112, 112, .1);}
.twc-services-section__nav-line.changed {
    width:60px; background:var(--twc-color-primary);
    transition:var(--twc-transition);
}

/* Button arrow */
.twc-services-section__button {margin-left:35px;}
.twc-services-section__button .flickity-button {
    --flkt-btn-size:40px;
    --flkt-icon-size:14px;
    position:relative; top:0; left:auto; right:auto; transform:translateY(0);
    margin-left:25px;
}
.twc-services-section__button button span {font-size:0;}

/* Slider */
.twc-services-section__items-slider {
    --ss-slide-width:500px;
    position:relative;
}
.twc-services-section__items-slider:after {
    content:""; display:block;
    width:80px; height:100%; background:linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%);
    position:absolute; top:0; right:0;
}
.twc-services-section__item {width:var(--ss-slide-width); padding-left:1px;}
.twc-services-section__item:last-child {width:100%;}
.twc-services-section__item-inner {display:block;}
.twc-services-section__item-title {--twc-color-heading:var(--twc-color-primary);}
.twc-services-section__item-excerpt {color:rgba(29, 27, 27, .6); max-width:430px; padding-right:20px;}
.twc-services-section__item-button span {transition:var(--twc-transition);}

/* Avoid layout shift */
.twc-services-section__items-slider:not(.flickity-enabled) .twc-services-section__item:not(:first-child) {display:none;}


/*********************************************
 * Services section Responsive
**********************************************/
@media only screen and (max-width:1024px) {
    .twc-services-section__button {margin-left:0;}
}
@media only screen and (max-width:767px) {
    .twc-services-section__intro {text-align:center;}
    .twc-services-section__items-slider {
        --ss-slide-width:100%;
        text-align:center;
    }
    .twc-services-section__item-excerpt {max-width:100%;}

    /* Slider */
    .twc-services-section__items-slider:after {display:none;}

    /* Button arrow */
    .twc-services-section__button .flickity-button {
        --flkt-btn-size:50px;
        position:absolute; bottom:0; top:auto; z-index:5;
    }
    .twc-services-section__button .flickity-button.previous {left:0; margin-left:0;}
    .twc-services-section__button .flickity-button.next {right:0;}

    /* Nav */
    .twc-services-section__nav-button {
        width:var(--twc-100vw); margin-left:calc(-1 * var(--twc-gap-side));
        padding-top:40px; overflow:hidden;
    }
    .twc-services-section__nav-button ul {width:calc(var(--twc-100vw) * 2);}
    .twc-services-section__nav-button ul li {width:calc(var(--twc-100vw) * .4);}
    .twc-services-section__nav-item-inner {margin:auto;}
    .dot-title {white-space:nowrap}
}