Header 4

              
                <!-- ========== { HEADER }==========  -->
                <header>
                  <!-- Navbar -->
                  <nav id="main-nav" class="main-nav navbar navbar-expand-lg hover-navbar fixed-top navbar-light bg-white-lg-down">
                    <div class="container">
                      <a class="navbar-brand main-logo" href="#">
                        <span class="h2 text-body fw-bold mt-2">Up<span class="text-primary">gency</span></span>
                        <!-- <img class="logo-dark" src="src/img-min/logo/logo.png" alt="Logo dark"> -->
                      </a>

                      <!-- navbar toggler -->
                      <button class="navbar-toggler" type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#navbarTogglerDemo"
                        aria-controls="navbarTogglerDemo"
                        aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>

                      <!-- collapse menu -->
                      <div class="collapse navbar-collapse" id="navbarTogglerDemo">
                        <ul class="navbar-nav mx-auto mt-2 mt-lg-0">
                          <li class="nav-item">
                            <a class="nav-link active" href="#hero">Home</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#features">Features</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#pricing">Pricing</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#faq">Faq</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#reviews">Reviews</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#contact">Contacts</a>
                          </li>
                        </ul>

                        <div class="d-grid d-lg-block my-3 my-lg-0 ms-0 ms-lg-4">
                          <a class="btn btn-primary btn-sm" target="_blank" rel="noopener" href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 512 512"><circle cx="176" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="400" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="48 80 112 80 160 352 416 352" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M160,288H409.44a8,8,0,0,0,7.85-6.43l28.8-144a8,8,0,0,0-7.85-9.57H128" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                            Buy Now
                          </a>
                        </div>
                      </div><!-- end collapse menu -->
                    </div>
                  </nav><!-- End Navbar -->
                </header><!-- end header -->
              
            

Don't forget to add scrollspy in body like following tutorial Scrollspy docs