Fix Navbar Responsiveness on Medium Screens

[divysaxena24]

🧩 Description

This pull request fixes the issue where the navbar shrinks and overlaps with other UI elements on medium-sized screens (768px – 1024px).
The fix ensures that the navbar remains fully responsive and maintains a clean layout across devices.

---

✅ Changes Made

• Adjusted CSS media queries for the @media (max-width: 1024px) breakpoint.
• Implemented a hamburger menu toggle for medium and smaller screens.
• Updated padding and margins for navbar items to prevent overlap.
• Improved overall navbar alignment and spacing for better readability.

---

🧪 Steps to Verify

1. Run the project locally or open the deployed preview.
2. Resize the browser window between 768px and 1024px.
3. Confirm that:
   • Navbar does not shrink or overlap.
   • Hamburger menu appears as expected.
   • Navigation remains fully functional.

---

🚀 Additional Context

This fix improves UI/UX responsiveness on tablets and small laptops.
It’s submitted under GSSoC ’25 contribution for responsive design improvements.

[gaincyst]

@divysaxena24 Solve the conflict and share the output and mention the issue number