/* Horizontal Scroll Widget Styles */
.horizontal-scroll-widget {
    width: 100%;
}

.horizontal-scroll-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 120px;
}

.horizontal-scroll-wrapper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 60px;
    width: 100%;
    align-items: center;
    cursor: grab; /* Indicate draggable */
    scroll-behavior: smooth; /* Enable smooth scrolling */
}

/* Hide scrollbar for Chrome, Safari, and Opera */
.horizontal-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

.scroll-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px; /* Default min-width */
    max-width: 200px;
    user-select: none;
}

.scroll-item:first-child {
    margin-left: 0; /* Ensure first item starts at the edge */
}

.scroll-item img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    /* For mobile, at least 2 items should be shown */
    .horizontal-scroll-wrapper {
        gap: 30px;
    }

    .scroll-item {
        min-width: 120px; /* Adjust item width for mobile */
    }

    .scroll-item img {
        max-height: 60px; /* Adjust image size for mobile */
    }
}

/* For Desktop: Show exactly 5 items */
@media (min-width: 768px) {
    .horizontal-scroll-wrapper {
        gap: 20px; /* Adjust gap for desktop */
    }

    .scroll-item {
        min-width: calc(100% / 5); /* Ensure 5 items fit on the screen */
    }
}

/* For larger screens, tweak the layout */
@media (min-width: 1024px) {
    .horizontal-scroll-wrapper {
        gap: 30px; /* Slightly larger gap for larger screens */
    }

    .scroll-item {
        min-width: calc(100% / 5); /* Keep 5 items on the screen */
    }
}