/* Container setup */
.slider {
  width: calc(100% - 16px);
  margin: 45px 8px 60px 8px;
  position: relative;
  overflow-x: hidden;
}

/* Slider wrapper */
.slider__wrapper {
  display: flex;
  transition: transform 0.6s ease; /* Smooth sliding animation */
}

/* Individual slider item */
.slider__item {
  flex: 1 0 calc(33.33% - 5px); /* Adjust for margin */
  margin-right: 8px;
  box-sizing: border-box;
}

.slider__item:last-child {
  margin-right: 0;
}

/* Image container */
.slider__image-container {
  overflow: hidden; /* Ensures the scaled image doesn't overflow */
  border-radius: 7px; /* Rounded corners */
  position: relative;
  width: 100%; /* Ensure the container takes full width */
  height: auto; /* Let height adjust naturally based on the image */
}

/* Text container */
.slider__text-container {
  padding: 8px 24px;
}

/* Image styling */
.slider__image-container img {
  width: 100%;
  height: auto; /* Maintain the aspect ratio of the image */
  object-fit: cover; /* Ensure the image maintains aspect ratio */
  transition: transform 0.3s ease-out; /* Smooth transition for scaling */
  transform: scale(1); /* Default scale (100%) */
  border-radius: 7px;
  display: block; /* Remove any space below the image */
}

/* Hover effect: scales the image on hover */
.slider__item:hover .slider__image-container img {
  transform: scale(1.1); /* Scale image to 110% on hover */
}

/* Navigation arrows */
.slider__arrow {
  background: #17181D;
  cursor: pointer;
  border:none;
  width: 50px;
  height:50px;
  font-size: 16px;
  border-radius: 360px;
  position: absolute; /* Position them absolutely */
  top:calc(50% - 70px); /* Center them vertically */
}

.slider__arrow i{
  color:#fff;
}

.slider__arrow--prev {
  left:8px; /* Position the left arrow */
}

.slider__arrow--next {
  right:8px; /* Position the right arrow */
}