.component-container {
    background-image: url("../img/top-section-separator.jpg");
    background-size: cover;
    background-position: center 10px;
    padding: 20px 0;
    text-align: center;
    background-color: black;
}

/* Ensure the carousel stays centered and contained */
#carouselExample {
    position: relative;
    width: 90%;
    max-width: 1200px; /* Prevent excessive stretching */
    margin: auto;
    overflow: hidden;
}

    /* Flex container for images */
    #carouselExample .carousel-track {
        display: flex;
        gap: 10px; /* Adds space between thumbnails */
        transition: transform 0.5s ease-in-out;
    }

    /* Style individual thumbnails */
    #carouselExample .carousel-thumbnail {
        flex: 0 0 20%; /* Default: 5 images per row */
        max-width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

        /* Style images to ensure they stay thumbnail-sized */
        #carouselExample .carousel-thumbnail img {
            width: 100%;
            height: auto; /* Keeps them thumbnail-sized */
            border-radius: 8px;
            object-fit: contain; /* Ensures cropping instead of stretching */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

/* Responsive adjustments */

/* Medium screens: Show 4 images */
@media (max-width: 1024px) {
    #carouselExample .carousel-thumbnail {
        flex: 0 0 25%;
    }

        #carouselExample .carousel-thumbnail img {
            height: 180px;
        }
}

/* Tablet screens: Show 3 images */
@media (max-width: 768px) {
    #carouselExample .carousel-thumbnail {
        flex: 0 0 33.33%;
    }

        #carouselExample .carousel-thumbnail img {
            height: 160px;
        }
}

/* Small screens: Show 2 images */
@media (max-width: 600px) {
    #carouselExample .carousel-thumbnail {
        flex: 0 0 50%;
    }

        #carouselExample .carousel-thumbnail img {
            height: 140px;
        }
}

/* Extra small screens: Show 1 image */
@media (max-width: 400px) {
    #carouselExample .carousel-thumbnail {
        flex: 0 0 100%;
    }

        #carouselExample .carousel-thumbnail img {
            height: 120px;
        }
}

/* Custom arrows */
.custom-carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10; /* Ensure the arrows are on top */
}

/* Position arrows */
.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

/* Ensure arrows are initially hidden */
.custom-carousel-control {
    display: none;
}