/* Add padding to the carousel container to make space for the controls */
.carousel {
  padding-left: 50px; /* Space for the left control */
  padding-right: 50px; /* Space for the right control */
}

/* Override default positioning and use negative margins to pull the controls out */
.carousel-control-prev,
.carousel-control-next {
  position: absolute; /* Keep absolute position relative to the carousel container */
  top: 50%;
  transform: translateY(-50%);
  width: auto; /* Revert to auto width for smaller size */
}

.carousel-control-prev {
  left: 0px; /* Move 50px to the left of the padded container */
}

.carousel-control-next {
  right: 0px; /* Move 50px to the right of the padded container */
}

/* Optional: style the icons to ensure they are visible outside the image */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #333; /* Example background color */
  padding: 10px;
  border-radius: 50%;
}

img {
  width: 100%;
}