iOS меню и текст в центре экрана

Question

Я просто пытаюсь получить этот результат с помощью меню и текста, который имеет изображение:

Это код, который я Я использую для этого (с React. js и styled-components):

import React from "react";
import styled from "styled-components";

const Wrapper = styled.div`
  background-image: url("https://viamilanpv.com/Mobile.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 736px;

  @media (min-width: 768px) {
    background-image: url("https://viamilanpv.com/Background.jpg");
    height: 1708px;
  }
`;

const NavBar = styled.nav`
  display: flex;
  justify-content: space-between;
  background-color: transparent;
  padding: 1em 2em;
  z-index: 1;

  @media (min-width: 768px) {
    padding: 1em 8em;
  }
`;

const Logo = styled.img`
  width: 38px;

  @media (min-width: 768px) {
    width: 48px;
  }
`;

const Title = styled.h1`
  font-size: 30px;
  color: #1d2556;
  text-align: center;
  font-family: "Gordita-Medium", sans-serif;
  font-weight: 500;

  @media (min-width: 768px) {
    padding-top: 1em;
    font-size: 90px;
  }
`;

const Section = styled.section`
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 400px;
  color: #1d2556;
  font-size: 20px;
  padding: 1em 2em;

  @media (min-width: 768px) {
    padding: 1em 8em;
    font-size: 38px;
  }
`;

const Footer = styled.footer`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2em 2em;
  background-color: #eeeeee;

  & > span {
    font-size: 0.8em;
  }

  @media (min-width: 768px) {
    padding: 2em 8em;

    & > span {
      font-size: 1em;
    }
  }
`;

const Facebook = styled.img`
  margin-right: 1em;
`;

const index = () => {
  return (
    <>
      <Wrapper>
        <NavBar>
          <Logo src="https://viamilanpv.com/LOGO.svg" alt="alt" />
        </NavBar>
        <Title>A better way to living</Title>
      </Wrapper>
      <Section>
        Vía Milan website is coming soon. For more information contact us:
        sales@viamilan.mx
      </Section>
      <Footer>
        <span>Copyright © Vía Milan 2020</span>
        <div>
          <a target="_blank" rel="noopener noreferrer" href="">
            <Facebook src="https://viamilanpv.com/Facebook.svg" alt="Facebook" />
          </a>
          <a
            target="_blank"
            rel="noopener noreferrer"
            href="https://www.instagram.com/viamilanpv/"
          >
            <img src="https://viamilanpv.com/Instagram.svg" alt="Instagram" />
          </a>
        </div>
      </Footer>
    </>
  );
};

export default index;

PD: Если вы используете Next. js, просто скопируйте и вставьте этот код как маршрут.

Итак, это результат iOS устройства в Chrome:

И Safari:

Как я могу решить это? Спасибо!