.carousel {
    position: relative;
}       
.carousel ul {
	padding: 0;
	display: flex;
	gap: 4vw;
	overflow-x: auto;
    overflow-y: hidden;
	scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    transition: scroll 0.3s ease;
}
.carousel li {
	list-style-type: none;
	border: none;
	flex: 0 0 100%;
	scroll-snap-align: start;
    min-width: 100%;
}
.carousel li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide-nav {
  position: absolute;
  bottom: 2%; 
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  display: flex;
  gap: 0.8em; /* Space between dots */
  padding: 1em 1.5em 1em 1.5em;
  background: rgba(0,0,0,0.8); /* transparent background */
  border-radius: 0;
}
/* Individual Dot */
.indicator {
  width: .8vw;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0; /* Circular dots */
  border: none;
  background: rgba(255, 255, 255, 0.5); /* Light gray inactive dot */
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition for active state */
}
/* Active Dot */
.indicator.active {
  background: white; /* White active dot */
  transform: scale(1.5); /* Slightly larger active dot */
}