Refactor Hero component background div for responsiveness

[nancy-verma780]

Target Issue

Closes #316

Description

This PR resolves the mobile UI bug where the hero section content (heading title, subtitle description, and statistics metrics) was visually obscured and overlapped by the large 3D background graphic on smaller screens and mobile viewports.

Changes Made

• Updated the HeaderScene 3D wrapper container div with responsive Tailwind CSS breakpoints (md:).
• Retained full-screen layout parity for desktop layouts (md:inset-0 md:opacity-80 md:h-full).
• Shifted the 3D graphic canvas safely downward (top-[35%]) and constrained its viewport scaling properties (h-[45vh]) specifically on mobile viewports under 768px.
• Reduced the mobile canvas transparency layers (opacity-30) to elevate contrast and maximize text readability against the changing themes.

Verification Steps

1. Opened the local build inside the Chrome responsive design inspector tool.
2. Simulated viewports at a narrow breakpoint (~400px width).
3. Verified that the main hero content, stats, and call-to-action buttons sit perfectly clear of any overlapping background graphical elements.