.medslider {
position: relative;
width: 100%;
max-width: 100%;
aspect-ratio: 600 / 464;
overflow: hidden;
}

.slides {
display: flex;
width: 100%;
height: 100%;
position: relative;
}

.slide {
min-width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}

.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}

.medslider-content {
position: absolute;
bottom: 40px;
left: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.5);
padding: 15px;
border-radius: 5px;
color: #fff;
}

.medslider-content h2 {
margin-bottom: 10px;
font-size: 20px;
color:#fff;
}

.medslider-content button {
padding: 6px 6px;
background: #0f782f;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
}

.medslider-content button:hover {
background: #02644add;
}

.controls {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}

.prevButton {
background: rgba(0, 0, 0, 0.7);
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 30%;
margin-left:10px;
}

.prevButton:hover {
background: rgba(0, 0, 0, 0.8);
}

.nextButton {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 30%;
  margin-right:30px;
  }
  
  .nextButton:hover {
  background: rgba(0, 0, 0, 0.8);
  }

@media (max-width: 575px) {
.medslider-content h2 {
font-size: 16px;
}
}