Bootstrap 5 Navbar Section Component

<!-- Navbar 1 - HCF Bootstrap 5 Component -->
<nav class="navbar hcf-navbar navbar-expand-md bg-light">
  <div class="container">
    <a class="navbar-brand" href="#!">
      <img src="./assets/img/navbars/navbar-1/hcf-logo.svg" alt="" width="95" height="32">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" />
      </svg>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#!">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#!" id="accountDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Account</a>
            <ul class="dropdown-menu" aria-labelledby="accountDropdown">
              <li><a class="dropdown-item" href="#!">Log in</a></li>
              <li><a class="dropdown-item" href="#!">Lost Password?</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#!">Sign up</a></li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#!" id="servicesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Services</a>
            <ul class="dropdown-menu" aria-labelledby="servicesDropdown">
              <li><a class="dropdown-item" href="#!">Writing</a></li>
              <li><a class="dropdown-item" href="#!">SEO</a></li>
              <li><a class="dropdown-item" href="#!">Web Design</a></li>
              <li><a class="dropdown-item" href="#!">App Development</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#!">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#!">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

.hcf-navbar .dropdown-menu {
  border: none;
  --bs-dropdown-bg: var(--bs-light);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.hcf-navbar {
  --bs-navbar-nav-link-padding-x: 0.8rem;
}
.hcf-navbar .navbar-toggler {
  border: none;
}
@keyframes hcf-navbar-dropdown-show {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@media (min-width: 576px) {
  .hcf-navbar.navbar-expand-sm .dropdown-menu.show {
    display: none;
  }
  .hcf-navbar.navbar-expand-sm .dropdown:hover > .dropdown-menu,
  .hcf-navbar.navbar-expand-sm .dropdown:hover > .dropdown-menu.show {
    display: block !important;
    animation: hcf-navbar-dropdown-show 0.2s;
  }
}
@media (min-width: 768px) {
  .hcf-navbar.navbar-expand-md .dropdown-menu.show {
    display: none;
  }
  .hcf-navbar.navbar-expand-md .dropdown:hover > .dropdown-menu,
  .hcf-navbar.navbar-expand-md .dropdown:hover > .dropdown-menu.show {
    display: block !important;
    animation: hcf-navbar-dropdown-show 0.2s;
  }
}
@media (min-width: 992px) {
  .hcf-navbar.navbar-expand-lg .dropdown-menu.show {
    display: none;
  }
  .hcf-navbar.navbar-expand-lg .dropdown:hover > .dropdown-menu,
  .hcf-navbar.navbar-expand-lg .dropdown:hover > .dropdown-menu.show {
    display: block !important;
    animation: hcf-navbar-dropdown-show 0.2s;
  }
}
@media (min-width: 1200px) {
  .hcf-navbar.navbar-expand-xl .dropdown-menu.show {
    display: none;
  }
  .hcf-navbar.navbar-expand-xl .dropdown:hover > .dropdown-menu,
  .hcf-navbar.navbar-expand-xl .dropdown:hover > .dropdown-menu.show {
    display: block !important;
    animation: hcf-navbar-dropdown-show 0.2s;
  }
}
@media (min-width: 1400px) {
  .hcf-navbar.navbar-expand-xxl .dropdown-menu.show {
    display: none;
  }
  .hcf-navbar.navbar-expand-xxl .dropdown:hover > .dropdown-menu,
  .hcf-navbar.navbar-expand-xxl .dropdown:hover > .dropdown-menu.show {
    display: block !important;
    animation: hcf-navbar-dropdown-show 0.2s;
  }
}
.hcf-navbar.navbar-expand .dropdown-menu.show {
  display: none;
}
.hcf-navbar.navbar-expand .dropdown:hover > .dropdown-menu,
.hcf-navbar.navbar-expand .dropdown:hover > .dropdown-menu.show {
  display: block !important;
  animation: hcf-navbar-dropdown-show 0.2s;
}