[BUG] Mobile navigation menu overlaps page content on screens below 480px width

[abhinavkhedwal4-maker]

Summary [required]

This PR fixes a mobile layout bug where the fixed navigation bar (position: fixed) overlaps the top of the main page content on viewports narrower than 480px. Because fixed elements are removed from the normal document flow, the main content (including the entry form fields) was sliding underneath the navbar, making them hidden on smaller mobile screens like the iPhone SE (375px). This change introduces an isolated media query at the base of the stylesheet to gracefully shift the layout down and clear the navbar bounds on small screens.

Related Issue [required]

Closes #1266

Type of Change [required]

• Bug fix — resolves a broken behaviour
• Feature — adds new functionality
• Data — adds new projects to data/projects.json
• Documentation — updates docs, README, or code comments only
• Style — CSS or visual changes only, no logic change
• Refactor — restructures code without changing behaviour
• Test — adds or updates tests

What Was Changed [required]

File	Change made
static/style.css	Appended a @media screen and (max-width: 480px) rule targeting main, .container, .main-content, .hero, and form elements to safely inject padding-top: 70px !important, preserving top form field visibility on mobile layouts.

How to Test This PR [required]

1. Clone this branch: git checkout fix/mobile-nav-1266
2. Run the application locally: python app.py
3. Open http://127.0.0.1:5000 in your web browser.
4. Toggle Chrome DevTools (F12), switch to device inspection mode, and select iPhone SE (375px) or any width lower than 480px.
5. Verify that the top form elements are cleanly pushed down below the header bar and are fully visible and clickable.

Test Results [required]

[vercel]

@abhinavkhedwal4-maker is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.