.carousel-container {
            overflow: hidden;
            margin-bottom: 140px;
        }

        .carousel {
            display: flex;
            width: 200%; /* Twice the container width for looping effect */
        }

        .carousel img {
            width: 20vw;
            height: auto;
            margin: 0 1vw;

            -webkit-border-radius: var(--carousel-border-radius);
            -moz-border-radius: var(--carousel-border-radius);
            border-radius: var(--carousel-border-radius);
        }

        .carousel1 {
            margin-bottom: 2vw;
            transform: translateX(-30%); /* Start 30% to the right */
        }

        .carousel2 {
            transform: translateX(-70%); /* Start 70% to the right */
        }

        @media (max-width: 768px) {

            .carousel-container {
                margin-bottom: 120px;
            }

            .carousel1 {
                margin-bottom: 3vw;
            }

            .carousel img {
                margin: 0 1.5vw;
                width: 30vw; /* Increase image size on larger screens */
            }
        }

        @media (max-width: 640px) {

            .carousel img {
                width: 40vw; /* Increase image size on larger screens */
            }
        }

        @media (max-width: 768px) {
            .carousel1 {
                transform: translateX(-30%); /* Start 30% to the right */
            }
    
            .carousel2 {
                transform: translateX(-10%); /* Start 70% to the right */
            }
        }