UI/UX: Implement responsive mobile navigation menu

[prince-shakyaa]

PR Description: Implement Responsive Mobile Navigation

Goal

The goal of this PR is to provide a seamless mobile navigation experience for the FinBot CTF platform.

Problem

Previously, the platform lacked a mobile-specific navigation mechanism (like a hamburger menu). This made key pages-such as "How It Works", "Portals", and "About"inaccessible to mobile users because they were hidden to prevent header overflow. Additionally, the navigation bar was cluttered on small screens.

Solution

Implemented a modern, responsive navigation system that aligns with the platform's premium aesthetic.

1. Hamburger Menu: Added a sleek toggle button visible only on mobile devices.
2. Navigation Overlay: Created a full-screen, blurred-glass overlay (backdrop-blur-2xl) containing all primary navigation links (Home, Challenges, How It Works, Portals, About).
3. Refined Top Nav:
   • Moved primary links into the mobile menu to reduce clutter.
   • Restored the GitHub icon to the main navbar for quick access on mobile, while keeping the text label hidden.

Technical Changes

• base.html:
  • Added mobile-menu overlay structure and CSS.
  • Implemented JavaScript logic for the hamburger menu toggle.
• home.html:
  • Overrode nav blocks to hide redundant links on mobile using hidden sm:inline-flex.
  • Ensured the GitHub link remains visible as an icon across all viewports.

Screenshots

---

Verification Plan

• Verified hamburger menu opens/closes correctly on mobile breakpoints (<640px).
• Confirmed GitHub icon is visible on mobile and desktop.
• Verified all links in the mobile overlay point to the correct routes.
• Checked that navigation remains clean and functional on desktop.

fixes #489