/*
 * Carousel CSS
 * src: 
 * vers: 1.0
 */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll on the body */
}

.scroll-container {
    width: 100%;
    overflow: hidden; /* Hide overflow */
    border: 1px solid #ccc; /* Optional: Add a border */
    padding: 10px 0; /* Optional: Add some vertical padding */
    position: relative; /* Position relative for button placement */
    margin-bottom: 20px; /* Space between carousels */
}

.scroll-content {
    display: flex; /* Use flexbox for horizontal layout */
    transition: transform 0.5s ease; /* Smooth transition */
    width: calc(200px * 30); /* Adjust based on the number of images (including duplicates) */
}

.scroll-content img {
    width: 100px;
    height: 50px;
    margin: 5px;
}

.button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1; /* Ensure buttons are above the images */
}

.prev {
    left: 10px; /* Position left button */
}

.next {
    right: 10px; /* Position right button */
}

._img { 
    border: 1px solid black; 
    padding: 3px; 
    border-radius: 5%; 
}
.bl_img { 
    border: 1px solid white; 
    padding: 3px; 
    border-radius: 5%; 
}

.scroll-content .space {
    width: 100px;
    height: 50px;
    margin: 5px;
    display: inline-block;
}