Why is some of the text not showing ( Bootstrap )

Question

I'm still new to web development and bootstrap, and I have a small question. In under header, "The First" isn't showing for some reason. I tried overflow wrap and everything yet nothing is working. Is it related to bootstrap or related to my code? Thank you guys, and sorry for the disturbance. Here is the link for the codepen because it wont show here.

https://codepen.io/hnaboulsi/project/editor/XgeQap

body {
  height: 100%;
  font-size: 1rem;
}

.navbar-brand {
  font-family: 'Syne Mono', monospace;
  color: black;
  size: 0.5rem;
}

header {
  width: 100%;
  height: 100vh;
  background: rgb(237, 104, 104);
  background: linear-gradient(90deg, rgba(237, 104, 104, 1) position: relative;
  overflow: hidden;
  z-index: 2;
}

.navbar-color {
  background: rgb(237, 104, 104);
  background: linear-gradient(90deg, rgba(237, 104, 104, 1) 0%, rgba(232, 118, 118, 1) 50%, rgba(236, 159, 159, 1) 100%);
}

.nav-link {
  color: white;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-color bg-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"></a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!--Header-->
<header>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <h1>The First lorem lorem lorem lorem lorem loerem lorem lorem lorem lorem lorem lorem</h2>
      </div>
      <div class="col-md-6">
        <img src="/images/Online shopping _Outline.svg" alt="">
      </div>
    </div>
  </div>
</header>