/* Main container for the horizontal scroller */
.Image-wrapper-new {
    display: flex;
    gap: 10px; /* Spacing between images */
    overflow-x: auto; /* Enable horizontal scrolling */
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth; /* Smooth scrolling effect */
    padding: 10px; /* Optional: Add padding around the scroller */
    -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices */
    background-color: #f9f9f9; /* Optional: Background for the scroller */
    border-radius: 8px; /* Optional: Rounded corners for the container */
    margin-bottom: 10px;
}

/* Allow dragging on the scroller */
/*.Image-wrapper-new:active {
    cursor: pointer;*/ /* Change cursor when actively dragging */
/*}*/

/* Custom Scrollbar (for WebKit browsers like Chrome, Edge, Safari) */
.Image-wrapper-new::-webkit-scrollbar {
    height: 15px; /* Thickness of the scrollbar */
    background-color: #f0f0f0; /* Track background color */
    margin-right:10px;
    margin-left:10px;
}

.Image-wrapper-new::-webkit-scrollbar-thumb {
    background-color: #212121; /* Thumb color */
    border-radius: 50px; /* Rounded corners for the thumb */
    /*border: 2px solid #e0e0e0;*/ /* Optional: Adds a border around the thumb */
}

.Image-wrapper-new::-webkit-scrollbar-thumb:hover {
    background-color: #212121; /* Thumb color on hover */
}

.Image-wrapper-new::-webkit-scrollbar-track {
    background-color: #e0e0e0; /* Track color */
    border-radius: 50px; /* Rounded corners for the track */
    margin-left: 10px;
    margin-right: 10px;
}

/* Individual image wrapper */
.wrapper-images {
    flex: 0 0 auto; /* Prevent images from shrinking */
    max-width: 360px; /* Ensure images fit within their container */
    /*overflow: hidden;*/ /* Hide overflowing parts of the image */
    touch-action: pan-x; /* Allow horizontal touch scrolling */
    overflow: auto;
}

/* Styling for images */
.wrapper-images img {
    display: block;
    max-width: 100%; /* Ensure images don't exceed container width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Optional: Rounded corners for the images */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Shadow effect for styling */
    pointer-events: none; /* Disable pointer events on the images */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .Image-wrapper-new {
        gap: 5px; /* Reduce spacing between images on smaller screens */
    }
}