Mobile/Tablet menu overlapping with home page text and images stretched

My homepage looks completely messed up when viewing on mobile or template, but fine on desktop.

Here’s how it’s supposed to look (how it currently looks on desktop): https://ibb.co/Mk9Skn0

But on mobile and tablet the header is overlapping with my home page text and the images are stretched: https://ibb.co/B6bjtty

I have Astra theme and prior to this happening, I was trying to disable transparent heading on mobile because it was slightly overlapping with my homepage text.

I had went to Appearance -> Customize -> Header -> Transparent Header and saw that it had been enabled on both Desktop+Mobile. Once I changed to just “Desktop” I noticed this weird behavior so I tried reverting it but it’s still looking messed up.

It only seems limited to the homepage and not the other pages on my website.

Help will be greatly appreciated!

The page I need help with: [log in to see the link]