/* Ribbon Image Height */
#ribbonCarousel .carousel-item img {
  height: 500px;
  object-fit: cover;
  border-radius: 10px;
}

/* SLEEK PREVIEW BUTTONS: Removes dark box, adds subtle shadow */
#modalCarousel .carousel-control-prev-icon,
#modalCarousel .carousel-control-next-icon {
    background-color: transparent; 
    width: 3.5rem;
    height: 3.5rem;
    /* This shadow makes the white arrow visible on white images */
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.7)); 
}

/* Ensure the arrows stay visible */
#modalCarousel .carousel-control-prev,
#modalCarousel .carousel-control-next {
    opacity: 0.9;
    width: 10%;
}

/* Update this in your CSS */
.carousel-section .container-fluid { 
  max-width: 1000px; /* Change this number to any width you like */
  margin: 0 auto;    /* This keeps it centered */
  padding: 0 15px;   /* Adds a little breathing room on the sides */
}