Customization for Carousel Pagination

selector .swiper-pagination-bullets {
width: auto !important;
padding: 10.5px;
display: flex !important;
justify-content: flex-end;
gap: 10px;
align-items: center;
background: var(--e-global-color-accent);
}

/* Style each bullet as a rectangle

*/selector .swiper-pagination-bullet {
width: 25px!important;
height: 10px!important;
border-radius: 0px;
opacity: 0.8;
transition: all 0.3s ease;
margin: 0 !important;
}

/* Active bullet: solid white rectangle */

selector .swiper-pagination-bullet-active {
background: var(--e-global-color-secondary);
opacity: 1;
width: 35px!important;
height: 10px!important;
}

selector .swiper-pagination-bullet:hover {
background: var(--e-global-color-primary);
opacity:1;
}

@media only screen and (max-width:767px) {
selector .elementor-swiper-button i.eicon-chevron-left,
selector .elementor-swiper-button i.eicon-chevron-right {
padding: 8px !important;
}

selector .swiper-pagination-bullets {
padding: 8px;
gap: 8px;
}

/* Style each bullet as a rectangle */

selector .swiper-pagination-bullet {
width: 8px!important;
height: 8px!important;
}

/* Active bullet: solid white rectangle */

selector .swiper-pagination-bullet-active {
width: 15px!important;
height: 8px!important;
}
}