.splide-progress-container {
  display: flex;
  align-items: center;
  margin-top: 1rem;
  width: 100%;
  padding-top: 1rem !important;
  padding-inline: 0px;
}

html[dir="rtl"] .splide-progress-container {
  display: flex;
  align-items: center;
  width: 100%;
  padding-top: 1rem !important;
}

.splide-progress {
  background: #e0e0e0;
  height: 6px;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  flex-grow: 1;
  text-align: end;
}
.splide-progress-bar {
  background: var(--primary-color);
  height: 100%;
  width: 0%;
  transition: width 0.5s ease;
}

.splide__arrow {
  display: flex;
  justify-content: center;
  background-color: white;
  color: var(--primary-color) !important;
  border: 2px solid var(--primary-color);
  padding: 0px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 1.125rem !important;
  font-weight: 600;
  position: relative !important;
  transform: translateY(0);
  opacity: 1;
}

.splide__arrow--prev {
  position: absolute;
  inset-inline-start: 1rem;
  top: 45%;
  height: 2.25rem;
  width: 2.25rem;
}

/* html[dir="rtl"] .splide__arrow--prev {
  position: absolute;
  inset-inline-start: 0.1rem !important;
  top: 45%;
  height: 2.25rem;
  width: 2.25rem;
}
html[dir="rtl"] .splide__arrow--next {
  position: absolute;
  inset-inline-start: 3.25rem !important;
  top: 45%;
  height: 2.25rem;
  width: 2.25rem;
} */

.splide__slide {
  border-radius: 10px;
}

.fa-chevron-right,
.fa-chevron-left {
  font-size: 1.25rem;
}

.splide__arrow--next {
  position: absolute;
  inset-inline-start: 4rem;
  top: 45%;
  height: 2.25rem;
  width: 2.25rem;
}

.splide__arrow:hover {
  background-color: var(--primary-color);
  color: white;
}

.splide-progress-container {
  display: flex;
  align-items: center;
  padding-bottom: 2rem !important;
  margin-top: 0rem;
  gap: 1rem;
}

html[dir="rtl"] .splide-progress-container {
  display: flex;
  align-items: center;

  padding-inline-start: 1rem;
  width: 99.5% !important;
}

.splide-progress {
  background: #e0e0e0;
  height: 6px;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  flex-grow: 1;
  text-align: end;
}

html[dir="rtl"] .splide-progress {
  background: #e0e0e0;
  height: 6px;
  width: 97% !important;
  border-radius: 5px;
  overflow: hidden;
  flex-grow: 1;
  text-align: end;
  margin-inline-end: 0.5rem !important;
}

.splide-progress-bar {
  background: var(--primary-color);
  height: 100%;
  width: 0%;
  transition: width 0.5s ease;
}

/* Custom style for arrows */
.splide__arrow {
  display: flex;
  justify-content: center;
  background-color: white;
  color: var(--primary-color) !important;
  border: 2px solid var(--primary-color);
  padding: 0px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 1.125rem !important;
  font-weight: 600;
  position: relative !important;
  transform: translateY(0);
  opacity: 1;
}

.splide__arrow--prev {
  inset-inline-start: 0;
}

.splide__arrow--next {
  inset-inline-start: -2%;
}

.splide__arrow:hover {
  background-color: var(--primary-color);
  color: white !important;
}