Responsive Website Layout Overhaul

I want the interface rebuilt into a modern, clean design that keeps every element perfectly aligned and crystal-clear on phones, tablets, and desktops alike.

Current pain points
• Elements drift out of place on larger screens.
• The mobile view is unreliable—menus shift, images resize unpredictably, and some sections vanish entirely.

Scope of work
• Re-structure the Home page plus all Product/Service pages so grids, typography and imagery lock into position responsively.
• Replace any fragile, hard-coded widths with fluid CSS or a lightweight framework such as Bootstrap 5 or Tailwind (your call, so long as it stays lean).
• Refactor HTML for semantic correctness, improving accessibility and SEO in the process.
• Test across the latest versions of Chrome, Safari, Firefox, Edge and native iOS/Android browsers.

Deliverables
1. Fully responsive templates for the Home and Product/Service pages.
2. Updated CSS/SCSS files, clearly commented.
3. A brief hand-off document summarising key classes, media-query breakpoints and any helper utilities you introduced.

Acceptance criteria
• No element overlaps or misaligns at 320 px, 768 px, 1024 px and 1440 px widths.
• Google Lighthouse mobile score ≥ 90.
• All interactive components remain keyboard accessible.

When you respond, let me know which framework (or vanilla CSS) you’d prefer and share a quick example of a project where you solved similar responsive headaches.