Fix hero section layout responsiveness on mobile screens

[Prakash1185]

Problem

• The hero section layout was not responsive on mobile screen sizes.
• There was an overflow in x direction in mobile screens.

What Changes

• Centered logo and content on mobile screens
• Changed to vertical stack layout for small devices
• Logo size reduced from 17rem to 12rem on mobile

Screenshots

Before

After

[Copilot]

Pull request overview

This PR fixes mobile responsiveness issues in the hero section of the homepage by implementing proper responsive CSS styles for small screens.

Changes:

• Added mobile-specific layout styles within the @media screen and (max-width:30em) breakpoint
• Implemented vertical stack layout using flexbox for mobile devices with centered content
• Reduced hero logo size from 17rem to 12rem on mobile screens

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Inconsistent indentation: This media query has extra leading spaces compared to other media queries in the file (e.g., line 138). For consistency, remove the extra leading spaces to match the indentation of other media queries.

Suggested change

	@media screen and (max-width:30em) {
	@media screen and (max-width:30em) {

[Prakash1185]

Hi @cxzl25 ,
I’ve fixed the indentation issue pointed out by Copilot and updated the PR accordingly.

Please let me know if this looks good.

[Prakash1185]

Hi @SteNicholas ,
This PR fixes the responsiveness of hero section on smaller screens. Please look into this PR.
Thank You.