.swiper-slider-hero {
  width: 100%;
}

.swiper-slider-hero .swiper-wrapper {
  height: 704px;
}

.swiper-slider-hero .swiper-wrapper > div{
  border-radius: 35px
}

.swiper-slider-hero .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.swiper-pagination-slider-hero {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  z-index: 99 !important;
  position: relative;
}

.swiper-slider-hero .swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  background-color: #ccc !important;
  border-radius: 50% !important;
  opacity: 1 !important;
  display: inline-block !important;
  transition: all 0.3s ease-in-out !important;
  position: relative;
  overflow: hidden;
}

.swiper-slider-hero .swiper-pagination-bullet::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background-color: #1d4ed8;
  transition: none;
  border-radius: inherit;
}

.swiper-slider-hero .swiper-pagination-bullet-active {
  width: 24px !important;
  border-radius: 999px !important;
  transition: all 0.3s ease-in-out !important;
}

.swiper-slider-hero .swiper-pagination-bullet-active::before {
  animation: fillBar 5s linear forwards;
}

@keyframes fillBar {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}