@theme {
  --color-pri: "#f28292";
}
:root {
  --color-pri: "#f28292";
}

/* Make the progress bar thinner and control its position */
.mySwiper4 .swiper-pagination-progressbar {
  @apply absolute bottom-2 left-1/2 -translate-x-1/2;
  width: 60%; /* You can adjust this width */
  height: 4px; /* Thickness of the progress bar */
  background-color: #e5e7eb; /* Tailwind's gray-200 */
  border-radius: 9999px;
  overflow: hidden;
}

.mySwiper4 .swiper-pagination-progressbar-fill {
  @apply bg-pri; /* Replace with your theme's primary color class */
  border-radius: 9999px;
}