Implement custom scrollbar styles in globals.css

[Papia-tech]

Description

This PR introduces a custom, slim, and modern scrollbar UI for the application to improve overall visual consistency across different pages. The new scrollbar dynamically adapts to both light and dark themes, featuring fully rounded edges and interactive hover states that match the platform's primary accent colors. It also includes comprehensive cross-browser fallbacks to ensure a uniform user experience on Chrome, Safari, Edge, and Firefox.

• Fixes [FEATURE] Enhance Scrollbar UI for Better Visual Consistency #92

Type of Change

• New feature (e.g., new page, component, or functionality)
• Bug fix (non-breaking change that fixes an issue)
• UI/UX improvement (design, layout, or styling updates)
• Performance optimization (e.g., code splitting, caching)
• Documentation update (README, contribution guidelines, etc.)
• Other (please specify):

Changes Made

• Global Scrollbar Sizing: Configured a consistent, elegant width (8px vertical / 10px horizontal) for Webkit-based browsers.
• Light Theme Integration: Implemented a clean, transparent track with a soft grey thumb that transitions to the brand's active green color on hover.
• Firefox Fallback Support: Added scrollbar-width and scrollbar-color properties mapping directly to the theme configurations for parity in Firefox.
• Cleanup: Fixed a minor syntax formatting issue at the bottom of custom.css to prevent style breakdown.

Screenshot

Screen.Recording.2026-05-20.085154.mp4

[vercel]

@Papia-tech is attempting to deploy a commit to the PushkarScripts Team on Vercel.

A member of the Team first needs to authorize it.

[Papia-tech]

Hello @pushkarscripts , could you please review and merge this PR when you get time? Thank you!