/* Custom Scrollbar Styles */
:root {
    --scrollbar-width: 10px;
    --scrollbar-track-color: #f1f1f1;
    --scrollbar-thumb-color: #888;
    --scrollbar-thumb-hover-color: #555;
}

/* For WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-color);
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}