.carousel-items {
  position: relative;
  width: 100%;
  overflow: hidden; /* Hide the overflowing slides */
}

.carousel-item {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0; /* Start invisible */
  transition: opacity 0.5s ease-in-out; /* Smooth transitions for fade */
}

.carousel-item.active {
  opacity: 1; /* Active item is fully visible */
}

.progress-bar {
  position: absolute;
  height: 100%;
  background-color: #0abdae;
  animation: progress 10s linear forwards, fadeout 0.5s linear forwards;
  animation-delay: 9.5s; /* Delay fadeout to start after progress completes */
  display: none; /* Start hidden */
}

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

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}