Cannot get rid of border (only shows on iPhone)

pic1pic2

I cannot, for the life of me, get rid of this border below my header. I’ve tried many things but it will not go away.

For some reason this only shows on iPhone, on my desktop there is no issue. I have included pics to show my problem.

Here is the link maybe the issue will also appear on your own iPhone:
https://resumerobot.netlify.app/#

Codepen:
https://codepen.io/victorcastelan7/pen/yLRVRQJ

I tried moving the header element (has a black background) inside of the main body that also has a black background but still did not work. Border still shows on my iPhone

/*GENERAL*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  font-family: "Rubik", sans-serif;
  scroll-behavior: smooth;
}

body {
  color: #212529;
  background-color: #f1f3f5;
}

h1 {
  font-size: 6.2rem;
  display: inline-block;
  font-weight: 600;
  margin-bottom: 4.8rem;
  line-height: 1.2;
}

h2 {
  color: #212529;
  font-size: 5.2rem;
  display: block;
  font-weight: 500;
  margin-bottom: 9rem;
}

h3 {
  font-size: 3.6rem;
  font-weight: 500;
}

p {
  line-height: 1.8;
}

.container {
  margin: 0 auto;
  max-width: 190rem;
  padding: 0 4.8rem;
}

/*HEADER*/

.nav {
  margin: 0 auto;
  height: 9.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 2rem;
  background-color: #000;
  padding: 0 8rem;
  max-width: 181rem;
}

.nav-logo {
  height: 4.4rem;
  filter: invert(100%);
}

.nav-links {
  display: flex;
  flex-direction: row;
  gap: 6.4rem;
  list-style: none;
}

.nav-link,
.nav-link:link,
.nav-link:visited {
  color: #f8f9fa;
  text-decoration: none;
  transition: 0.2s;
}

.nav-link:hover,
.nav-link:active {
  color: #5c7cfa;
}

.nav-cta:link,
.nav-cta:visited {
  color: #f8f9fa;
  background-color: #364fc7;
  padding: 1.6rem 3.2rem;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.2s;
}

.nav-cta:hover,
.nav-cta:active {
  background-color: #3b5bdb;
}

/*HERO*/

.hero {
  color: #f8f9fa;
  font-weight: 400;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 8rem;
  align-items: center;
  background-color: #000;
  height: calc(98vh - 9.6rem);
  height: calc(98svh - 9.6rem);
  margin-bottom: 12.8rem;
  padding: 0 5.2rem;
  border-bottom-left-radius: 150px;
  border-bottom-right-radius: 150px;
}

.hero-text-box {
  padding-bottom: 9.6rem;
}

.sub-heading {
  font-size: 2.4rem;
  margin-bottom: 6.4rem;
}

.sr-wrapper {
  display: inline-block;
}

.hero-cta:link,
.hero-cta:visited {
  font-size: 3rem;
  color: #f8f9fa;
  display: inline-block;
  background-color: #364fc7;
  padding: 1.6rem 3.2rem;
  border-radius: 40px;
  text-decoration: none;
  transition: 0.2s;
  margin-right: 3.2rem;
}

.hero-cta:hover,
.hero-cta:active {
  background-color: #3b5bdb;
}

.learn-more:link,
.learn-more:visited {
  color: #f8f9fa;
  font-size: 3.2rem;
  display: inline-block;
  padding: 1.6rem 3.2rem;
  border-radius: 40px;
  text-decoration: none;
  transition: 0.2s;
  border: 1px solid #000;
}

.learn-more:hover,
.learn-more:active {
  border: 1px solid #868e96;
}

.hero-image {
  width: 100%;
  padding-bottom: 9.6rem
}