.slider-container {
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  max-height: 400px;
  box-sizing: border-box;
  margin-top: 0.50rem; /* ✅ Added top margin for spacing */

  border-bottom: 1px solid red; /* ✅ Added red bottom border */
}



.slides {
display: flex;
transition: transform 0.5s ease-in-out;
width: 100%;
}

.slides img {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  object-fit: fill;  /* ✅ Stretches image, no cropping, but may distort */
}

button.prev,
button.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.4);
color: white;
border: none;
font-size: 2rem;
padding: 0.2rem 0.6rem;
cursor: pointer;
border-radius: 3px;
user-select: none;
z-index: 1;
}

button.prev:hover,
button.next:hover {
background-color: rgba(0, 0, 0, 0.7);
}

button.prev {
left: 10px;
}

button.next {
right: 10px;
}

/* dots */
.dots {
text-align: center;
padding: 10px 0;
}

.dot {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 6px;
background-color: #bbb;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s;
}

.dot.active {
background-color: #E10600;
}