html {
    overflow: overlay !important; /* Makes the scrollbar an overlay */
}

body {
    margin: 0 !important; /* Ensure no unintended layout shifts */
}


/* WebKit Browsers */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

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

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

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

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-color) #f1f1f1;
}