Solved Alignment issue across all devices

Hi there,

I am working on a site that uses the full-width image in full-screen mode. On the banner is some text which I am having trouble getting to look right across all devices. The client wants to have the main text as a headline, then the rest of the text smaller and closer to the bottom of the image. I have used the following css in the Custom CSS/Main Element section:
margin: auto;
width: 100%;
text-align: center;

...and then padding in the actual text to separate the sections like so:
<p style="padding-bottom: 100px;"><em>here</em> is where<br /> change happens.<br /> <em>now</em> is the time.</p>
<p style="font-size: 18px; line-height: 1.6em;">Affordable gestalt therapy<br /> in Castlemaine and Carlton North.<br /> Appointments conducted in person, online, or by telephone.</p>

It looks right on most screens, but when the client views it on a mobile in landscape or a smaller screen size (see image) the text goes off the image and over the text section below (obviously due to the padding I have added).

Can you suggest any advice on a better way of doing it?

Many thanks in advance

 

https://www.hereandnowcounselling.com.au/

Thank you!

 

Hi - I know on 'most' devices it looks fine, but if you go landscape on a phone or reduce the screen size, the text goes off the image - like in the screenshot.

Thank you!

 

Thank you so much for your help! I really appreciate you taking the time to look at it and show me your findings!