.carousel{
    width: 100%;
    padding: 50px;
}

.carousel-control-prev,
.carousel-control-next {
  width: 10%;  
}
 
.carousel-control-prev {
  left: -50px; /* Move the left arrow outside the carousel */
}

.carousel-control-next {
  right: -50px; /* Move the right arrow outside the carousel */
}

.carousel-indicators li {
  background-color: #ffffff82;  
}

.carousel-indicators .active {
  background-color: #ffc107; /* Highlight the active indicator */
}

@media (max-width: 1100px) {
    .carousel-control-prev,
    .carousel-control-next {
    width: 16%;  
    }

    .carousel{ 
      padding: 20px;
    }
}

@media (max-width: 600px) {
    .carousel{
        display: none;
    }
}