/* Center carousel and adjust size */

.carousel {
    max-width: 800px;  
    margin: auto;      
    border-radius: 5px; 
    overflow: visible;
    padding: 20px;
    z-index: 3;
    /* box-shadow: 0px 4px 8px rgba(23, 115, 235, 0.5); */
    filter: drop-shadow(0px 4px 8px rgba(23, 115, 235, 0.5));


   

}

/* Adjust images inside the carousel */
.carousel img {
    height: 400px; 
    object-fit:cover; 
    border-radius: 5px;
    width: 100%; 
    max-width: 100%;
   
    
}

/* Custom styling for previous and next buttons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); 
    border-radius: 50%;
    padding: 10px;
   

}

/* Button hover effect */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Add some transition effects */
.carousel-item {
    transition: transform 0.5s ease-in-out;
}

/* Optional: Add indicators styling */
.carousel-indicators [data-bs-target] {
    background-color: #007bff; /* Blue color */
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Make the carousel responsive */
@media (max-width: 768px) {
    .carousel img {
        height: 250px; /* Smaller height for mobile */
    }
}