Carousel widget – bullet as a rectangle with animation

selector .swiper-pagination-bullets {
  bottom: 0px !important;
  right: 60px !important;
  left: auto !important;
  width: auto !important;
  display: flex !important;
  justify-content: flex-end;
  gap: 20px;
  align-items: center;
}

/* Style each bullet as a rectangle */
selector .swiper-pagination-bullet {
  width: 30px!important;
  height: 10px!important;
  border: 2px solid white;
  border-radius: 20px;
  opacity: 0.5;
  transition: all 0.3s ease;
  margin: 0 !important;
}

/* Active bullet: solid white rectangle */
selector .swiper-pagination-bullet-active {
  background: white;
  opacity: 1;
  width: 90px!important;
  height: 10px!important;
}

selector .swiper-wrapper {
  transition: none !important;
}

/* Fade all slides to hidden by default */
selector .swiper-slide {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

/* Show only the active slide */
selector .swiper-slide-active {
  opacity: 1;
  z-index: 2;
}


@media only screen and (max-width:767px) {
selector .swiper-pagination-bullets {
  gap: 12px;
  right: 30px !important;
}


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

/* Active bullet: solid white rectangle */
selector .swiper-pagination-bullet-active {
  width: 55px!important;
  height: 6px!important;
}
}