.slider-wrapper {
  width: 600px; /* or match your image width */
  overflow: hidden;
  margin: 20px auto;
  position: relative;
  border: 2px solid #aaa;
}

.slides {
  display: flex;
  transition: transform 0.4s ease;
}


.slides img {
  width: 600px; /* match wrapper width */
  height: 400px;
  object-fit: cover;
  flex-shrink: 0;
}

button {
  padding: 10px 20px;
  margin: 10px;
  font-size: 16px;
  cursor: pointer;
}

.dots {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin-top: 10px;
}
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: grey;
    cursor: pointer;
    opacity: 0.5;
}
.dot.active{
     background-color: black;
     opacity: 1;
}