/* Services Carousel Widget Styles */

/* Hide default Swiper elements that we are overriding or don't want */
.vc-services-carousel-widget .swiper-button-next,
.vc-services-carousel-widget .swiper-button-prev {
   background: transparent;
   display: none; /* We use custom buttons outside */
}

/* Custom controls styling helper if needed, though Tailwind handles most */
.vc-services-controls-wrapper .swiper-button-next, 
.vc-services-controls-wrapper .swiper-button-prev {
     display: flex;
     position: static; /* Override swiper absolute positioning */
     width: auto;
     height: auto;
     margin: 0;
     color: inherit;
}

.vc-services-controls-wrapper .swiper-button-next::after, 
.vc-services-controls-wrapper .swiper-button-prev::after {
    display: none; /* Hide default Swiper arrows content property */
}

.vc-services-carousel-widget-container {
    position: relative;
    padding-bottom: 0;
}

/* Swiper Slide Sizing */
.vc-services-carousel-widget .swiper-slide {
    height: auto;
}

/* Pagination specific tweaks */
.vc-services-controls-wrapper .swiper-pagination-fraction {
    position: static;
    width: auto;
    bottom: auto;
    left: auto;
    line-height: 1;
}

.vc-slide-action-link {
    border-bottom: 1px solid #fff;
    padding-bottom: 2px;
    line-height: 1.2;
}
.vc-slide-action-link:hover {
    border-bottom: 1px solid #fff;
    color: #fff;
    opacity: 0.8;
}

/* Ensure the swiper container doesn't overlap the outside controls excessively or allows overflowing if design requires */
.vc-services-carousel-widget {
     overflow: visible; 
}
.vc-services-carousel-box {
    padding-bottom: 100px;
}
.vc-services-controls-wrapper {
    padding-right: 40px;
}
.vc-services-controls-wrapper svg {
    stroke: #000000;
    color: #000000;
    width: 15px;
    height: 15px;
}