/* Apply custom scrollbar to all elements with overflow */
* {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #4e4e4e #e0e0e0; /* Thumb and track colors for Firefox */
}

/* WebKit-based browsers */
*::-webkit-scrollbar {
    width: 10px; /* Width of the entire scrollbar */
    height: 10px; /* Height for horizontal scrollbar */
}

/* Scrollbar Track */
*::-webkit-scrollbar-track {
    background: #e0e0e0; /* Lighter background for the track */
    border-radius: 10px; /* Rounded corners for the track */
    margin: 2px; /* Space around the track for a floating effect */
}

/* Scrollbar Thumb */
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #6b6b6b, #4e4e4e); /* Gradient for the thumb */
    border-radius: 10px; /* Rounded corners for the thumb */
    border: 2px solid #e0e0e0; /* Space around the thumb */
    transition: background 0.3s ease; /* Smooth transition for color change */
}

/* Thumb hover effect */
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #4e4e4e, #3b3b3b); /* Darker gradient on hover */
}

/* Thumb active (when clicked or dragged) */
*::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #3b3b3b, #2c2c2c); /* Even darker gradient when active */
}

/* Customization for horizontal scrollbars */
*::-webkit-scrollbar-thumb-horizontal {
    background: linear-gradient(90deg, #6b6b6b, #4e4e4e); /* Horizontal gradient for thumb */
}

*::-webkit-scrollbar-thumb-horizontal:hover {
    background: linear-gradient(90deg, #4e4e4e, #3b3b3b); /* Horizontal gradient on hover */
}

*::-webkit-scrollbar-thumb-horizontal:active {
    background: linear-gradient(90deg, #3b3b3b, #2c2c2c); /* Horizontal gradient when active */
}

/* Smooth scrolling effect */
html {
    scroll-behavior: smooth;
}