[UI]: Improper heading and logo alignment on mobile view

Current Behavior

On mobile viewports (tested at ~412px width, Galaxy A51/71), the hero section's two-column desktop layout (badge icon + text) on this page does not collapse into a proper single-column, centered layout. The badge icon sits in a narrow left column while the subtitle ("Showcasing Your Achievements as a User and a Contributor") and the large heading ("Layer5 Recognition Program") remain left-indented in the right column, starting at the same x-offset as the icon's column. Since the icon is much shorter than the text block, the heading ends up floating left with a large empty gap beside it, breaking visual alignment with the centered paragraph and image directly below it.
https://badges.layer5.io/

Expected Behavior

On mobile, the layout should stack vertically and center all elements consistently: the badge icon centered above (or the icon and heading arranged in a way that doesn't leave a large left-column gap), followed by the centered subtitle and centered heading, matching the alignment style used for the paragraph and image content further down the page.

Screenshots/Logs

Environment

• Host OS: Mac Linux Windows
• Platform: Docker or Kubernetes
• Meshery Server Version: stable-v
• Meshery Client Version: stable-v

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack