<!-- ======= Header ======= -->
<header id="header" class="header d-flex align-items-center fixed-top">
    <div class="container-fluid container-xl d-flex align-items-center justify-content-between">

      <a href="index.php" class="logo d-flex align-items-center">
        <!-- Uncomment the line below if you also wish to use an image logo -->
        <img src="assets/img/favicon.png" alt="">       
      </a>

      <nav id="navbar" class="navbar">
        <ul>
          <li><a href="./index.php?page=tournaments">TOURNAMENTS</a></li>
       
          <li><a href="./index.php?page=matokeo">MATOKEO</a></li>
  
         <li><a href="./index.php?page=about">IJUE NDONDO CUP</a></li>
          <li><a href="./index.php?page=category">HABARI</a></li>
          <li><a href="./index.php?page=contact">MAWASILIANO</a></li>
          <li><a href="./ndondo_cup/register.php" target="_blank">JISAJILI</a></li>
        </ul>
      </nav><!-- .navbar -->

      <div class="position-relative">
        <a href="https://www.facebook.com/NdondoCup?mibextid=ZbWKwL" class="mx-2"><span class="bi-facebook" target="_blank" style="color:#93d19b"></span></a>
        <a href="https://x.com/NdondoCup?t=LSFLUrvupRpFppICi0RLmw&s=08" class="mx-2 social-icon"><span class="bi-twitter" target="_blank" style="color:#93d19b"> </span></a>
        <a href="https://www.instagram.com/ndondo_cup?igsh=MWU3Mm5jeGNsd2pmeA==" class="mx-2 social-icon"><span class="bi-instagram" target="_blank" style="color:#93d19b"></span></a>

        <a href="#" class="mx-2 js-search-open" style="color:#93d19b"><span class="bi-search"></span></a>
        <i class="bi bi-list mobile-nav-toggle social-icon"></i>

        <!-- ======= Search Form ======= -->
        <div class="search-form-wrap js-search-form-wrap">
          <form action="search.php" class="search-form">
            <span class="icon bi-search"></span>
            <input type="text" placeholder="Search" class="form-control" id="search-input">
            <button class="btn js-search-close"><span class="bi-x"></span></button>
          </form>
        </div><!-- End Search Form -->

      </div>

    </div>

  </header><!-- End Header -->