/* For Webkit browsers like Chrome, Safari */
::-webkit-scrollbar {
    width: 10px; /* width of the scrollbar */
    height: 10px; /* height of the scrollbar */
}

::-webkit-scrollbar-thumb {
    background-color: #666; /* darker color of the scrollbar */
    border-radius: 10px; /* rounded edges of the scrollbar */
    border: 2px solid transparent; /* border for neatness */
    background-clip: padding-box; /* neat padding inside scrollbar */
}

/* Hover effects for the scrollbar */
::-webkit-scrollbar:hover {
    width: 12px; /* wider scrollbar on hover */
    height: 12px; /* wider scrollbar on hover */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #444; /* darker color on hover for better visibility */
}

/* Add arrows on hover */
::-webkit-scrollbar-button {
    background-color: transparent; /* make buttons invisible by default */
}

::-webkit-scrollbar:hover::-webkit-scrollbar-button {
    background-color: #555; /* visible arrows when scrollbar is hovered */
}

::-webkit-scrollbar-button:single-button {
    background-color: #a3a3a3; /* arrow buttons visible on hover */
    height: 15px; /* small size for arrow buttons */
}