* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        justify-content: center;
        align-items: center;
    }

    /* Scoped styles for the carousel container (flex applied here only) */
    .custom-carousel-container {
        width: 60%;
        /* Set container width */
        max-width: 2000px;
        /* Optional: cap the maximum width */
        /* Maintain a consistent aspect ratio */
        height: 100%;
        overflow: hidden;
        /* Hide anything outside the container */
        border: 5px solid #333;
        border-radius: 40px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .custom-carousel-container .carousel {
        display: flex;
        /* Arrange images horizontally */
        transition: transform 1s ease;
        /* Smooth transition between images */
        width: 100%;
        /* Take up the full width of the container */
        height: 100%;
        /* Take up the full height of the container */
        transform: translateX(0);
        /* Initial position */
    }

    .custom-carousel-container .carousel img {
        width: 100%;
        /* Each image takes up the full width of the container */
        height: 100%;
        /* Each image takes up the full height of the container */
        object-fit: cover;
        /* Ensure the image fills the space without stretching */
        flex-shrink: 0;
        /* Prevent the image from shrinking */
        border-radius: 20px;
    }



    .custom-carousel-container .dots {
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
        /* Ensure the dots are centered */
        width: 100%;
        /* Ensures the container has enough width for all dots */
    }


    .custom-carousel-container .dot {
        width: 15px;
        height: 15px;
        background-color: #bbb;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .custom-carousel-container .dot.active {
        background-color: #333;
    }

    /* Responsive adjustments specific to carousel */
    @media (max-width: 768px) {
        .custom-carousel-container {
            width: 80%;
            height: 1vh;
            
        }
    }

    @media (max-width: 480px) {
        .custom-carousel-container {
            max-width: 200%;
            height: 20vh;
        }

        .custom-carousel-container .dot {
            width: 10px;
            height: 10px;
        }