Fix mobile responsive UI for about page stats section #170

[Kondareddy1209]

🐛 Issue

Fixes #170

📝 Description

Fixed mobile responsive layout issues in the about page where stats cards and other content were getting cut off or improperly displayed on mobile devices.

🔧 Changes Made

• Stats Section: Changed grid layout from 2 columns to single column on mobile
• Responsive Breakpoints: Added comprehensive media queries for 768px and 480px
• Typography: Adjusted font sizes for better readability on small screens
  • Hero title: 3rem → 2rem (tablet) → 1.6rem (mobile)
  • Stats numbers: 3rem → 2.5rem (tablet) → 2rem (mobile)
  • Section headers: 2.3rem → 1.8rem (tablet) → 1.5rem (mobile)
• Spacing: Added proper padding and margins to prevent content cutoff
• Grid Layouts: All feature, vision-mission, and team grids now display as single column on mobile
• Timeline: Adjusted to left-aligned layout on mobile devices
• Icons & Images: Scaled down appropriately for smaller screens

📱 Mobile Improvements

Before:

• Stats cards were cut off on mobile
• Content overflowing on small screens
• Poor spacing and readability

After:

• Clean single-column layout
• All content visible and properly spaced
• Improved readability with adjusted font sizes
• Better user experience on all mobile devices

✅ Testing Checklist

• Tested on mobile devices (< 768px)
• Tested on small phones (< 480px)
• All stats cards display properly
• No content cutoff issues
• Smooth animations work on mobile
• All sections are properly visible
• Timeline displays correctly on mobile

🔗 Related Issues

Closes #170

Screenshots

Before

After

[github-actions]

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them 🙌🏼.