.gallery-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.gallery-slider {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px; /* Space for scrollbar */
}

/* Hide default scrollbar */
.gallery-slider::-webkit-scrollbar {
    display: none;
}

/* Custom scrollbar styles */
.gallery-scrollbar {
    position: relative;
    width: 100%;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    margin-top: 10px;
}

.scrollbar-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.scrollbar-thumb {
    position: absolute;
    height: 100%;
    width: 20%; /* Will be updated by JavaScript */
    background-color: #333;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.scrollbar-thumb:hover {
    background-color: #555;
}

.gallery-card {
    flex: 0 0 auto;
    width: 300px; /* Or your preferred width */
    margin-right: 20px;
}