How to change menu to responsive bootstrap menu

I want to use bootstrap 5 responsive menu in the example shown in codepen, i tried few thing but it keeps breaking one way or the way.

https://codepen.io/KGuide/pen/WNogyyV

I want to use bootstrap menu and replace the current one, so that menu is responsive with animation on hover for large screens.

<nav class="navbar navbar-expand-lg navbar-light p-5">
            <div class="container">
              <a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png"/></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" 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="#">Offers</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">Disabled</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>

console.clear();
  const nav  = document.querySelector(".nav-container");
  const blob = document.querySelector(".nav-container svg");
  
  gsap.set(blob, {xPercent: -50, x:innerWidth / 2});
  
  nav.addEventListener("mousemove", function(e){
    gsap.to(blob, {duration: 0.2, x: e.clientX, overwrite: 'auto'});
  });
    nav.addEventListener("mouseleave", function(e){
    gsap.to(blob, {duration:0.1, x: innerWidth / 2, overwrite: `auto`});
    
  });

  body{font-family: "Open Sans Condensed"; background: black;}
  h1 {font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600;}
  .c-hotel  h3 {font-size: 1.2em; font-weight: 600;}
  .logo {max-width: 160px;}

  .nav-container nav {
    display: flex;
    justify-content: space-around;
    background:white;
    height:100px;
  }
  .nav-container nav a {
    color: black;
    text-decoration: none;
    font-size: 20px;
    font-family:"Roboto";
    font-weight: 600;
    color: #358E9D;
    text-transform: uppercase;
    padding: 10px 20px 20px 20px;
    line-height: 70px;
  }
  .nav-container{position: relative;}
  .nav-container svg{
    position: absolute;
    top:100%;
    left:0;
    height:20px;
    z-index: 1;
  }
  .nav-container path{
    fill:white;

  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Roboto:wght@300&display=swap" rel="stylesheet">

<div class="containerx nav-container">
  <nav>
    <a href="#">HOME</a>
    <a href="#">DINE</a>
    <a href="#"><img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" /></a>
    <a href="#">HOTELS</a>
    <a href="#">CONTACT</a>
  </nav>
  <svg viewBox="0 0 200 20">
    <path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 120 0 200 0 Z"></path>
  </svg>
</div>

<!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
<!-- <nav class="navbar navbar-expand-lg navbar-light p-5">
            <div class="container">
              <a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png"/></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" 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="#">Offers</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">Disabled</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav> -->

<div class="container-fluid mb-3 mt-0 p-0">
  <div class="row gx-0">
    <div class="col-lg-6 col-md-6 mb-sm-4 mb-md-0 mb-lg-0 border-0">
      <div class="card bg-dark text-white text-center shadow-sm  rounded-0">
        <img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
        <div class="card-img-overlay d-flex align-items-center">
          <h2 class="card-title text-center w-100 "> HEADING ONE</h2>
        </div>
      </div>
    </div>
    <div class="col-lg-6 col-md-6">
      <div class="card bg-dark text-white text-center shadow-sm  rounded-0 border-0">
        <img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
        <div class="card-img-overlay">
          <h2 class="card-title">HEADING TWO</h2>
          <!-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
        </div>
      </div>
    </div>
  </div>
</div>

from How to change menu to responsive bootstrap menu