Improve mobile responsiveness and layout consistency

[Adithyakp86]

Description

This Pull Request addresses the issue regarding mobile responsiveness and layout consistency across all project pages. It introduces a refined global typography hierarchy, fixes major header overflow bugs on mobile, resolves CSS class collisions on the Hub page, and ensures responsive forms and containers on all screens.

Fixes / Resolved Issues

• Fixes header menu overflow and viewport overlap on small screens (mobile/tablet).
• Resolves global body and .container Flexbox collisions in views/navbar.ejs (Hub page) that were breaking the global header and footer placement.
• Resolves container stretching on the Contact page, centering and styling the form beautifully.
• Corrects missing HTML classes and unifies typography with consistent premium background gradients for page titles.

---

Detailed Key Changes

1. Global Styles & Responsiveness (public/styles.css)

• Sticky Navigation: Converted .main-header to position: sticky and removed the hardcoded padding-top: 80px from body. The layout now flows dynamically and prevents content overlapping.
• Mobile Header Auto-Height: Set header height to auto and added flexible wrapping on navigation items at (max-width: 768px) so links scale elegantly on smaller screens.
• Global Typography System: Added standard, clean font styling for all headings (h1 through h6) and created a reusable .gradient-text style class for primary page titles.
• Consolidated Media Queries: Merged overlapping media query blocks into a single cohesive layout section for simpler maintenance.

2. Page-Specific Layout Alignments (views/)

• Landing Page (views/index.ejs): Added the missing <div class="welcome-section"> wrapper container, resolving a bug where the landing page title and intro paragraph did not receive the beautiful gradient styling.
• About Page (views/about.ejs): Simplified page code by migrating local heading styles to use the new global .gradient-text helper class.
• Portfolio Page (views/portfolio.ejs): Added the .gradient-text class to the portfolio title for visual branding consistency across pages.
• Contact Page (views/contact.ejs): Wrapped the page components in .contact-container as originally intended by the styles, limiting the form width on desktop screens to a readable 600px and making the form inputs and buttons fully responsive on mobile viewports.
• Hub Collection Page (views/navbar.ejs): Removed destructive overrides on body, *, and .container tags. Introduced scoped card classes (.hub-card and .nav-grid) to allow the page to inherit global header/footer formatting while retaining its distinct card layout.

---

How This Was Tested

• Desktop Layouts: Validated that all container layouts remain centered and correctly padded.
• Responsive Sizing: Tested viewport wrapping using developer tools down to mobile widths (320px - 768px), verifying that the logo, nav menu, grids, cards, and forms wrap cleanly without visual bugs or horizontal scrolling.
• Integrity Checks: Confirmed page routing operates normally.