 <!-- side bar start -->
  <div class="offcanvas sidebar-offcanvas offcanvas-start" tabindex="-1" id="offcanvasLeft">
    <div class="offcanvas-header sidebar-header">
      <div class="sidebar-logo">
        <img class="img-fluid logo" src="assets/images/logo/logo.png" alt="logo" />
      </div>
      <div class="balance">
        <img class="img-fluid balance-bg" src="assets/images/background/auth-bg.jpg" alt="auth-bg" />
        <h5>Balance</h5>
        <h2>
            <?php echo $site['currency']." ".($userbalance['balance'] + $userbalance['withdrawable_balance']);?></h2>
      </div>
    </div>
    <div class="offcanvas-body">
      <div class="sidebar-content">
        <ul class="link-section">
          <li>
            <a href="dashboard" class="pages">
              <i class="sidebar-icon" data-feather="credit-card"></i>
              <h3>Dashboard</h3>
            </a>
          </li>
          <li>
            <a href="saving-plans" class="pages">
              <i class="sidebar-icon" data-feather="repeat"></i>
              <h3>My Plans</h3>
            </a>
          </li>
          <li>
            <a href="my-referrals" class="pages">
              <i class="sidebar-icon" data-feather="users"></i>
              <h3>My Referrals</h3>
            </a>
          </li>
          <li>
            <a href="transaction-history" class="pages">
              <i class="sidebar-icon" data-feather="file-text"></i>
              <h3>Transactions</h3>
            </a>
          </li>

          <li>
            <a href="profile" class="pages">
              <i class="sidebar-icon" data-feather="user"></i>
              <h3>Profile</h3>
            </a>
          </li>
          <li>
                          <a href="https://wa.me/<?php echo preg_replace('/[^0-9]/', '', $site['site_phone']);?>?text=Hello%2C%20I%20need%20customer%20support" target="_blank"class="pages">

              <i class="sidebar-icon text-success" data-feather="phone"></i>
              <h3>Support</h3>
            </a>
          </li>

          <li>
            <a href="logout" class="pages">
              <i class="sidebar-icon" data-feather="log-out"></i>
              <h3>Log out</h3>
            </a>
          </li>
        </ul>
        <div class="mode-switch">
          <ul class="switch-section">
            <li style="display: none">
              <h3>RTL</h3>
              <div class="switch-btn">
                <input id="dir-switch" type="checkbox" />
              </div>
            </li>
            <li>
              <h3>Dark</h3>
              <div class="switch-btn">
                <input id="dark-switch" type="checkbox" />
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- side bar end -->

  <!-- header start -->
  <header class="section-t-space">
    <div class="custom-container">
      <div class="header-panel">
        <a class="sidebar-btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft">
          <i class="menu-icon" data-feather="menu"></i>
        </a>
        <img class="img-fluid logo" src="assets/images/logo/logo.png" alt="logo" />

        <a href="notification.html" class="notification" style="display: none">
          <i class="notification-icon" data-feather="bell"></i>
        </a>
      </div>
    </div>
  </header>
  <!-- header end -->