/* Banner Carousel Styles */

/* Container for the banner carousel */
.banner-carousel-container {
    max-width: 800px;
    /* Limit the width to make it smaller */
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(0, 204, 0, 0.3);
}

/* Banner images */
.banner-img {
    width: 100%;
    height: 300px;
    /* Set a fixed height to make them smaller */
    object-fit: contain;
    /* Show complete image without cropping */
    border-radius: 13px;
    /* Slightly less than container for inner rounding */
}

/* Carousel controls styling */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    opacity: 0.8;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 204, 0, 0.8);
    border-radius: 50%;
    padding: 10px;
}

/* Indicators */
.carousel-indicators button {
    background-color: rgba(0, 204, 0, 0.5);
    border: 1px solid #00cc00;
}

.carousel-indicators .active {
    background-color: #00cc00;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .banner-carousel-container {
        max-width: 100%;
        margin: 0;
        border-radius: 10px;
    }

    .banner-img {
        height: 250px;
        /* Adjusted height for better visibility on mobile */
        object-fit: contain;
        /* Show complete image without cropping */
    }
}