<header id="site-header" class="fixed-top">
  <div class="container">
    <nav class="navbar navbar-expand-lg stroke px-0">
      <h1> <a class="navbar-brand" href="/" style="vertical-align: middle; font-size:large;">
          <img src="assets/images/logo.png" alt="Your logo" title="Your logo" style="height:35px;" /> <?= $main_name; ?>
        </a></h1>
      <button class="navbar-toggler  collapsed bg-gradient" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
        <span class="navbar-toggler-icon fa icon-close fa-times"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="/">Home</a>
          </li>
          <li class="nav-item @@contact__active">
            <a class="nav-link" href="about">About</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Personal &nbsp;<i class="fa fa-angle-down"></i></a>
            <ul class="dropdown-menu dropdown-content">
              <li><a href="credit-cards">Credit Cards</a></li>
              <li><a href="current-accounts">Current Accounts</a></li>
              <li><a href="savings-accounts">Savings Accounts</a></li>
              <li><a href="personal-loans">Personal Loans</a></li>
              <li><a href="mortgages">Mortgages</a></li>
              <li><a href="personal-insurance">Personal Insurance</a></li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Business &nbsp;<i class="fa fa-angle-down"></i></a>
            <ul class="dropdown-menu dropdown-content">
              <li><a href="bank-cards">Bank Cards</a></li>
              <li><a href="deposit">Deposit</a></li>
              <li><a href="foreign-drafts">Foreign Drafts</a></li>
              <li><a href="interest-checking">Interest Checking</a></li>
              <li><a href="electronic-banking">Electronic Banking</a></li>
              <li><a href="investment">Investment</a></li>
              <li><a href="money-market">Money Market</a></li>
              <li><a href="small-business">Small Business</a></li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Private &nbsp;<i class="fa fa-angle-down"></i></a>
            <ul class="dropdown-menu dropdown-content">
              <li><a href="banking-services">Banking Services</a></li>
              <li><a href="insurance">Insurance</a></li>
              <li><a href="offshore-and-migrant">Offshore & Migrant</a></li>
            </ul>
          </li>
          <li class="nav-item @@contact__active">
            <a class="nav-link" href="faqs">FAQs</a>
          </li>
          <li class="nav-item @@contact__active">
            <a class="nav-link" href="contact">Contact</a>
          </li>
        </ul>
        <a href="account/"><button class="btn btn-primary btn-md navbar-btn">Online Banking <i class="fa fa-angle-double-right"></i></button></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
      <!-- toggle switch for light and dark theme -->
      <div class="mobile-position">
        <nav class="navigation">
          <div class="theme-switch-wrapper">
            <label class="theme-switch" for="checkbox">
              <input type="checkbox" id="checkbox">
              <div class="mode-container">
                <i class="gg-sun"></i>
                <i class="gg-moon"></i>
              </div>
            </label>
          </div>
        </nav>
      </div>
      <!-- //toggle switch for light and dark theme -->
    </nav>
  </div>
</header>
