Ascension Hero Text out of place on mobile screens

Hello,?

I tweaked my Ascension header with Additional CSS to decrease the width, and I moved the hero text around as well. I’m afraid my CSS for this may have been a little slap-dash, but it worked.

I knew changing the hero would make it not responsive, however I can’t seem to find a way to move the text so that it isn’t out of place on a mobile screen. The hero text is too high, with one line above the hero image and overlaying our logo.?I’m viewing the site on my iPhone Xs, if that makes a difference.

I’ve tried to move the mobile hero text with:

@media only screen and (max-width: 42em) {
.hero .widget.widget_text p {
font-size: 1.8em;
}
}

but adding any padding or positioning is only moving the button, not the text. Any help is appreciated! Thanks in advance

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