<!--Header Start-->
 <header class="z-index-fixed header-transparent header-absolute-top">
  <nav class="navbar navbar-expand-lg navbar-light border-bottom">
   <div class="container position-relative">
    <a class="navbar-brand" href="index.html">
     <img src="assets/img/logo/logo.svg" alt="" class="img-fluid">
    </a>
 <div class="d-flex align-items-center navbar-no-collapse-items order-lg-last">
   <button class="navbar-toggler order-last" type="button" data-bs-toggle="collapse"
      data-bs-target="#mainNavbarTheme" aria-controls="mainNavbarTheme" aria-expanded="false"
      aria-label="Toggle navigation">
     <span class="navbar-toggler-icon">
       <i> </i>
     </span>
   </button>
 <div class="nav-item me-3 ms-lg-5 me-lg-0 dropdown position-static">
  <a href="#" data-bs-toggle="dropdown" class="btn p-0 width-3x height-3x flex-center btn-dark rounded-circle position-relative">
   <svg viewBox="0 0 24 24" class="" width="24" height="24" fill="currentColor">
    <circle cx="6" cy="19" r="2"> </circle>
     <circle cx="16" cy="19" r="2"> </circle>
     <path d="M19.997 7H7.13l-.885-2.352A1 1 0 0 0 5.308 4H2v2h2.628L5 7l2.368 7.103a2 2 0 0 0 2.53
      1.265l8.734-2.912A2 2 0 0 0 20 10.557z">
      </path>
    </svg>
    <span class="cart-number width-2x height-2x small bg-white rounded-circle text-body shadow flex-center position-absolute end-0 top-0 me-n2 mt-n2">3  
    </a>
    <div class="dropdown-menu top-100 me-lg-n2 shadow-lg dropdown-menu-end width-320 mt-2 mt-lg-0">
   <ul class="list-unstyled mb-0">
       <li class="d-flex align-items-center p-3 pb-0">
         <div class="me-0">
           <a href="#!"> <img src="assets/img/shop/backpack2.jpg" class="height-10x hover-lift hover-shadow w-auto rounded-3" alt="">
         </div>
        <div class="flex-grow-1 px-4 mb-3">
           <a href="#!" class="text-dark d-block lh-sm fw-semibold mb-2">Laptop backpack water proof
           <p class="mb-0 small"> <small class="text-muted">$ </small> <strong>49.00 x 1

        </div>
        <div class="d-block text-end">
           <a href="#!" class="text-muted">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bx bx-x" viewBox="0 0 16 16">
             <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646
              2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
            </svg>
           </a>
         </div>
      </li>
      <li class="d-flex p-3 align-items-center">
            <div class="me-0">
              <a href="#!"> <img src="assets/img/shop/jacket1.jpg" class="height-10x hover-lift hover-shadow w-auto rounded-3" alt=""> </a>
            </div>
            <div class="flex-grow-1 px-4 mb-3">
              <a href="#!" class="text-dark d-block lh-sm fw-semibold mb-2">Brown denim jacket for mens </a>
                   <p class="mb-0 small"> <small class="text-muted">$ </small> <strong>64.00 </strong> x  <strong>1 </strong> </p>
            </div>
        <div class="d-block text-end">
                 <a href="#!" class="text-muted">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bx bx-x" viewBox="0 0 16 16">
                      <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5
                      0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                     </svg>
                 </a>
             </div>
     </li>
        <li class="d-flex p-3 justify-content-between align-items-center">
           <span class="font-weight-normal">Subtotal </span>
           <span class="text-dark fw-bold">$113.00 </span>
        </li>
     <li class="p-3">
        <div class="text-center mb-2 d-grid">
          <a href="#!" class="btn btn-light btn-hover-arrow">
            <span>View Cart </span>
          </a>
        </div>
         <div class="d-grid">
           <a href="#!" class="btn btn-primary btn-hover-arrow">
         <span class="btn-animated-visible">Checkout </span>
        </a>
       </div>
    </li>
   </ul>
  </div>
 </div> 
</div>
  <div class="collapse navbar-collapse" id="mainNavbarTheme">
    <!--Navbar items-->
     <ul class="navbar-nav ms-auto">
       <li class="nav-item">
         <a class="nav-link" href="#">Home</a>
       </li>
       <li class="nav-item">
        <a class="nav-link" href="#">About</a>
       </li>
       <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown Nav</a>
         <div class="dropdown-menu dropdown-menu-end">
         <a href="#" class="dropdown-item">Dropdown item</a>
         <a href="#" class="dropdown-item">Dropdown item</a>
         <a href="#" class="dropdown-item">Dropdown item</a>
         <a href="#" class="dropdown-item">Dropdown item</a>
        </div>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Projects</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Contact</a>
       </li>
     </ul>
   </div>
  </div>
 </nav>
</header>