<div class="top-navbar">
    <div class="container-fluid p-0">
        <div class="main-menu">
            <div class="mobile-menu-header d-flex justify-content-between mb-5 pb-2 px-3 ps-3 d-block d-lg-none">
              <a href="../index.html" class="mbl-logo"><img src="../assets/images/logo/logo.svg" alt=""></a>
              <span class="rt-mobile-menu-close">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208s208-93.31 208-208S370.69 48 256 48zm86.63 272L320 342.63l-64-64l-64 64L169.37 320l64-64l-64-64L192 169.37l64 64l64-64L342.63 192l-64 64z" fill="#e84646"/></svg>
              </span>
            </div>
            <!-- /.rt-mobile-menu-close -->
            <ul class="menu-active-classes">
                <li class="active">
                    <a href="../index.html">
                        <span class="icon-box"><i class="ph-house-line"></i></span>
                        <div class="text-box">Dashboard</div>
                    </a>
                </li>
                <li class="menu-item-has-children">
                    <a href="../javascript:void(0)">
                        <span class="icon-box"><i class="ph-clipboard-text"></i></span>
                        <div class="text-box">Apps</div>
                    </a>
                    <ul class="sub-menu">
                        <li><a href="../full-calendar.html">Calendar</a></li>
                        <li><a href="../kanban-board.html">Kanban Board</a></li>
                        <li class="menu-item-has-children">
                            <a href="javascript: void(0);">File Manager</a>
                            <ul class="sub-menu">
                              <li><a href="../file-manager.html">File Manager</a></li>
                              <li><a href="../file-manager-new.html">Upload New File</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="menu-item-has-children has-megamenu">
                    <a href="javascript: void(0);">
                        <span class="icon-box"><i class="ph-circles-three-plus"></i></span>
                        <div class="text-box">Pages</div>
                    </a>
                    <div class="rt-mega-menu">
                      <div class="container">
                          <div class="row">
                              <div class="col-lg-3">
                                  <div class=" f-size-16 text-gray-800 px-3 text-capitalize">Authentication</div>
                                  <a href="../login.html">login</a>
                                  <a href="../registration.html">Registration</a>
                                  <a href="../profile.html">Profile</a>
                                  <a href="../setting.html">Setting</a>
                              </div>
                              <div class="col-lg-3">
                                  <div class=" f-size-16 text-gray-800 px-3 text-capitalize">billing</div>
                                  <a href="../billing.html">billing</a>
                                  <a href="../pricing-plans.html">pricing-plans</a>
                                  
                                  <a href="../invoice.html">Invoice</a>
                                  <a href="../invoice-detail.html">Invoice Details</a>
                              </div>
                              <div class="col-lg-3">
                                  <div class=" f-size-16 text-gray-800 px-3 text-capitalize">Components</div>
                                  <a href="../button.html">Button</a>
                                  <a href="../badge.html">Badge</a>
                                  <a href="../checkbox.html">Checkbox</a>
                                  <a href="../radio.html">Radio</a>
                                  <a href="../switch.html">Switch</a>
                                 
                              </div>
                              <div class="col-lg-3">
                                  <div class=" f-size-16 text-gray-800 px-3 text-capitalize">Components</div>
                                  <a href="../pagination.html">Pagination</a>
                                  <a href="../accordion.html">Accordion</a>
                                  <a href="../alerts.html">Alerts</a>
                                  <a href="../input.html">Input</a>
                                  <a href="../banner.html">Banner</a>
                                  <a href="../file.html">File</a>
                                 
                              </div>
                          </div>
                      </div>
                    </div>
                </li>
                <li>
                    <a href="../#">
                        <span class="icon-box"><i class="ph-palette"></i></span>
                        <div class="text-box">Style Guide</div>
                    </a>
                </li>
                
                <li >
                    <a href="../form-elements.html">
                        <span class="icon-box"><i class="ph-gear"></i></span>
                        <div class="text-box">From Elements</div>
                    </a>
                </li>
                <li class="menu-item-has-children">
                    <a href="javascript: void(0);">
                        <span class="icon-box"><i class="ph-books"></i></span>
                        <div class="text-box">Documentation</div>
                    </a>
                    <ul class="sub-menu">
                        <li><a href="../docs/index.html">Introduction</a></li>
                        <li><a href="../docs/started.html">quick start</a></li>
                          <li><a href="../docs/started.html#environment">Environments Setup</a></li>
                          <li><a href="../docs/started.html#folder ">Folder Structure</a></li>
                          <li><a href="../docs/started.html#colors ">Colors</a></li>
                          <li><a href="../docs/started.html#typography ">Typography</a></li>
                          <li><a href="../docs/started.html#icons ">Icons</a></li>
                          <li><a href="../docs/layouts.html">layout</a></li>
                          <li><a href="../docs/layouts.html#theme">Theme</a></li>
                          <li><a href="../docs/plugin.html">Map</a></li>
                          <li><a href="../docs/plugin.html#calendars">Calendar</a></li>
                          <li><a href="../docs/plugin.html#chart">Chart</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.main-menu -->
    </div>
  </div>
  