<div class="dark-bg p-2 above-nav w-100 text-light">
  <div class="container">
    <div class="row g-3 d-flex justify-content-between align-items-center">
      <div class="col-md-4">
        <p class="m-0 "><i class="fa-regular fa-envelope me-2"></i><a class="text-light no-underline" href="mailto: {{SITEVARS->email}} ">{{SITEVARS->email}} </a> </p>
      </div>
      <div class="col-md-4">
        <p class="m-0"><i class="fa-solid fa-location-dot me-2"></i> Sinamangal -9, Kathmandu, Nepal</p>
      </div>
      <div class="col-md-4">
        <p class="float-md-end m-0 socials-head">Follow Us -
            <a href="https://www.facebook.com" class="no-underline"><i class="fa-brands fa-facebook me-3 ms-2"></i></a>
            <a href="https://www.instagram.com" class="no-underline"><i class="fa-brands fa-instagram me-3"></i></a>
            <a class="text-light learn-more no-underline" href="tel:{{SITEVARS->phone}}">Call Now <i class="ms-2 fa-solid fa-phone"></i></a>
        </p>
    </div>
    
    </div>
  </div>
</div>


<nav class="navbar navbar-expand-lg" id="navbar_top">
  <div class="container">
    <div class="row g-3 d-flex align-items-center justify-content-between">
      <div class="col-md-2 col-6">
        <a class="navbar-brand" href="{{site_url()}}">
          <!-- <img src="{{('target/img/logo.png')}}" alt="Logo" width="90%" height="auto" class="d-inline-block align-text-top logo"> -->
          <img src="{{site_url(SITEVARS->primary_logo)}}" alt="Logo" width="90%" height="auto" class="d-inline-block align-text-top logo">
        </a>

      </div>
      <div class="col-md-9 col-lg-9 col-6">
        <button class="navbar-toggler float-end bg-transparent" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon float-end"><i class="fa-solid fa-bars custom-text"></i></span>
        </button>
        <div class="collapse navbar-collapse d-flex justify-content-md-end d-none d-lg-block" id="navbarTogglerDemo01">
          {{MPCMS::showMenu('header-menu')}}
        </div>
      </div>
      <div class="offcanvas offcanvas-end text-bg-dark d-xs-block d-sm-block d-md-block d-lg-none d-xl-none" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
        <div class="offcanvas-header">
          <a class="navbar-brand" href="">
            <img src="{{site_url(SITEVARS->primary_logo)}}" alt="Logo" width="90%" height="auto" class="d-inline-block align-text-top logo p-5 pb-0">
          </a> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          {{MPCMS::showMenu('header-menu')}}
        </div>
      </div>
</nav>

<style>
  .no-underline {
    text-decoration: none;
}

</style>