Add responsive design utilities for various devices

[Dippp10-ally]

🧭 Navbar Improvement / Fix

✨ What’s Changed?

This PR improves the navbar to enhance responsiveness, usability, and overall UI consistency across different screen sizes.

---

📱 Improvements Made

• Fixed layout alignment issues on tablet and mobile screens
• Improved responsiveness across all breakpoints
• Added/updated mobile-friendly navigation behavior (hamburger menu if applicable)
• Fixed spacing, overflow, and wrapping issues
• Enhanced hover and active states for better UX
• Ensured consistent styling across desktop, tablet, and mobile views

---

🎯 Why this change?

The previous navbar had responsiveness and usability issues on smaller devices, which affected navigation experience. This update ensures a smoother, more accessible, and modern navigation system.

---

🔍 Screenshots (Before vs After)

Before	After

---

🧪 Testing Done

• Tested on mobile screen sizes
• Tested on tablet resolutions
• Verified desktop layout consistency
• Checked navigation interactions and hover states

---

📌 Related Issue

Closes #154

---

✅ Checklist

• Code follows project style guidelines
• Self-review completed
• No new warnings introduced
• Responsive behavior tested
• UI works across all screen sizes

[Dippp10-ally]

@sathwikshetty33 ji , do assign labels called as gssoc:approved , level:intermediate , type:feature , quality:exceptional to above pull request number 155 also....do merge above pull request number 155 also.......