Opened up a website for my mum but overlay image and textbox aren't responsive on first page on mobile due to textbox clashing with image

That is basically the issue, here is the website. I made the image responsive of my mum but I found out the issue is the text-box is not revealed on 700px less. Also the overlay image needs to show the logo as the screen gets thinner. https://healthierdimensions.com/

Here is everything to do with the overlay image.

}
.background-image-holder img {
  display: none;
}
.background-image-holder.fadeIn {
  opacity: 1;
}
.parallax > .background-image-holder,
.parallax .slides li > .background-image-holder {
  height: 100vh;
  top: -50vh;
  transition: all 0s ease !important;
  transition: opacity 0.3s ease !important;
  -webkit-transform-style: preserve-3d;
}
.parallax:first-child .slides li > .background-image-holder,
.parallax:first-child .background-image-holder {
  top: 0;
}
.main-container > a:first-child + .parallax .background-image-holder {
  top: 0;
}
@media all and (max-width: 767px) {
  .parallax > .background-image-holder,
  .parallax .slides li > .background-image-holder {
    top: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
} 

and I think this is for the text box, the text box just get's pushed further down the page as the screen thins out. Appreciate any help!

.feature-2 i {
  display: block;
  width: 80px;
  max-width:100%;
  height: 80px;
  text-align: center;
  line-height: 80px;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 24px;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
}