Hero section description text overlaps with yellow decorative background on medium screens overlaps and update of Twitter logo in website

[pranav-n29]

🐛 Issue

In the homepage hero section, the description paragraph text overlaps with the yellow decorative background shape at certain viewport widths.

The affected text begins with:

“We are an Australian not-for-profit umbrella organization for open-source projects…”

This causes the text to appear partially under the yellow background, reducing readability.

🔍 Steps to Reproduce

1. Run the AOSSIE website locally
2. Open the homepage
3. Resize the browser to around 778–1100px width
4. Observe the description text overlapping the yellow background

❌ Actual Behavior
The hero section description text is partially covered by the yellow decorative element.

✅ Expected Behavior
The hero section text should remain fully visible and readable, without overlapping decorative background elements at any screen size.

💡 Possible Cause
The decorative background element appears to be absolutely positioned with a higher z-index, while the text container does not have sufficient spacing or layering control at medium breakpoints.

🧪 Evidence
Screenshot attached showing the overlapping text issue.

[pranav-n29]

please assign this issue to me

[pranav-n29]

Thanks for addressing this!
I originally reported the issue (#544).
I’ve tested the fix locally on medium screen sizes and it looks good to me 👍