/* Slider Container */
.slider {
  width: 100%;
  position: relative;
}

/* Image Carousel */
.slider .image-carousel {
  position: relative;
  width: 100%;
  height: 25vh;
  overflow: hidden;
}

/* Image Styling */
.slider .image-carousel img {
  position: absolute;
  top: 0; /* Ensures all images are aligned to the top */
  left: 0; 
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.slider .image-carousel img:nth-child(0) {
  opacity: 1;
}

/* Active Image */
.slider .image-carousel img.active {
  opacity: 1;
}

/* Dots */
.slider .dots {
  display: none;
  justify-content: center;
  padding: 10px 0;
}

.slider .dot {
  background: gray;
  cursor: pointer;
  width: 10px;
  height: 2px;
  margin: 0 6px;
}

.slider .dot.active-dot {
  background: var(--oscar-color);
  cursor: default;
}


/* Responsive Adjustments */
@media (min-width: 30em) {
  .slider .image-carousel {
    height: 25vh; 
  }
}


@media (min-width: 45em) {
  .slider .image-carousel {
    height: 30vh; 
  }

  .slider .dots {
    display: flex;
  }

}

@media (min-width: 60em) {
  .slider .image-carousel {
    height: 35vh; 
  }

  .slider .dot {
    width: 12px;
    height: 2px;
    margin: 0 5px;
  }
}


@media (min-width: 75em) {
  .slider .image-carousel {
    height: 40vh; /* Reduce height */
  }
}

@media (min-width: 100em) {
  .slider .image-carousel {
    height: 45vh; /* Reduce height */
  }

  .slider .dot {
    width: 14px;
    height: 2px;
    margin: 0 4px;
  }
}