Improper Text Alignment and Overflow in Hero Section

[sahhoArjun097]

Description

The hero section of the Pathsphere project currently experiences issues with improper text alignment and overflow. This results in a suboptimal user experience, where important information may not be clearly visible or may appear cluttered.

Steps to Reproduce

Navigate to the home page of the Waste Management project.
Observe the hero section and note the text alignment and any content that is cut off or not displayed properly.
Resize the browser window to simulate different screen sizes to observe overflow behavior.

Expected Behavior

Text should be centrally aligned and properly formatted within the hero section.
Overflowing content should be handled gracefully, either by adjusting the font size, using ellipsis for overflow, or ensuring the container resizes appropriately to fit the text

Actual Behavior

No response

Screenshots

Additional Information

Please assign this issue to me as I would like to work on fixing it. also add the label GSSoC 2024 Extd relaevan

What browser are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Checklist

• I have checked the existing issues
• I have read the Contributing Guidelines
• I want to work on this issue. (optional)