Header with Topbar

              
                <!-- ========== HEADER ========== -->
                <header id="header" class="header">
                  <!-- Search -->
                  <div id="searchPushTop" class="search-push-top">
                    <div class="container position-relative">
                      <div class="search-push-top-content pt-3">
                        <!-- Close Button -->
                        <div class="search-push-top-close-btn">
                          <div class="hs-unfold">
                            <a class="js-hs-unfold-invoker btn btn-icon btn-xs btn-soft-secondary mt-2 mr-2" href="javascript:;"
                               data-hs-unfold-options='{
                                "target": "#searchPushTop",
                                "type": "jquery-slide",
                                "contentSelector": ".search-push-top"
                               }'>
                              <svg width="10" height="10" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                              </svg>
                            </a>
                          </div>
                        </div>
                        <!-- End Close Button -->

                        <!-- Input -->
                        <form class="input-group">
                          <input type="search" class="form-control" placeholder="Search Front" aria-label="Search Front">
                          <div class="input-group-append">
                            <button type="button" class="btn btn-primary">Search</button>
                          </div>
                        </form>
                        <!-- End Input -->

                        <!-- Content -->
                        <div class="row d-none d-md-flex mt-7">
                          <div class="col-sm-6">
                            <span class="h5">Quick Links</span>

                            <div class="row">
                              <!-- Nav Link -->
                              <div class="col-6">
                                <div class="nav nav-sm nav-x-0 flex-column">
                                  <a class="nav-link" href="#">
                                    <i class="fas fa-angle-right mr-1"></i>
                                    Search Results List
                                  </a>
                                  <a class="nav-link" href="#">
                                    <i class="fas fa-angle-right mr-1"></i>
                                    Search Results Grid
                                  </a>
                                  <a class="nav-link" href="#">
                                    <i class="fas fa-angle-right mr-1"></i>
                                    About
                                  </a>
                                  <a class="nav-link" href="#">
                                    <i class="fas fa-angle-right mr-1"></i>
                                    Services
                                  </a>
                                  <a class="nav-link" href="#">
                                    <i class="fas fa-angle-right mr-1"></i>
                                    Invoice
                                  </a>
                                </div>
                              </div>
                              <!-- End Nav Link -->

                              <!-- Nav Link -->
                              <div class="col-6">
                                <div class="nav nav-sm nav-x-0 flex-column">
                                  <a class="nav-link" href="#">
                                    <i class="fas fa-angle-right mr-1"></i>
                                    Profile
                                  </a>
                                  <a class="nav-link" href="#">
                                    <i class="fas fa-angle-right mr-1"></i>
                                    User Contacts
                                  </a>
                                  <a class="nav-link" href="#">
                                    <i class="fas fa-angle-right mr-1"></i>
                                    Reviews
                                  </a>
                                  <a class="nav-link" href="#">
                                    <i class="fas fa-angle-right mr-1"></i>
                                    Settings
                                  </a>
                                </div>
                              </div>
                              <!-- End Nav Link -->
                            </div>
                          </div>

                          <div class="col-sm-6">
                            <!-- Banner -->
                            <div class="rounded search-push-top-banner">
                              <div class="d-flex align-items-center">
                                <div class="search-push-top-banner-container">
                                  <img class="img-fluid search-push-top-banner-img" src="../../assets/img/mockups/img3.png" alt="Image Description">
                                  <img class="img-fluid search-push-top-banner-img" src="../../assets/img/mockups/img2.png" alt="Image Description">
                                </div>

                                <div>
                                  <div class="mb-4">
                                    <span class="h5">Featured Item</span>
                                    <p>Create astonishing web sites and pages.</p>
                                  </div>
                                  <a class="btn btn-xs btn-soft-success transition-3d-hover" href="javascript:;">Apply Now <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                                </div>
                              </div>
                            </div>
                            <!-- End Banner -->
                          </div>
                        </div>
                        <!-- End Content -->
                      </div>
                    </div>
                  </div>
                  <!-- End Search -->

                  <div class="header-section">
                    <!-- Topbar -->
                    <div class="container header-hide-content pt-2">
                      <div class="d-flex align-items-center">
                        <!-- Language -->
                        <div class="hs-unfold">
                          <a class="js-hs-unfold-invoker dropdown-nav-link dropdown-toggle d-flex align-items-center" href="javascript:;"
                             data-hs-unfold-options='{
                              "target": "#languageDropdown",
                              "type": "css-animation",
                              "event": "hover",
                              "hideOnScroll": "true"
                             }'>
                            <img class="dropdown-item-icon mr-2" src="../../assets/vendor/flag-icon-css/flags/4x3/us.svg" alt="SVG">
                            <span class="d-inline-block d-sm-none">US</span>
                            <span class="d-none d-sm-inline-block">United States</span>
                          </a>

                          <div id="languageDropdown" class="hs-unfold-content dropdown-menu">
                            <a class="dropdown-item active" href="#">English</a>
                            <a class="dropdown-item" href="#">Deutsch</a>
                            <a class="dropdown-item" href="#">Español‎</a>
                          </div>
                        </div>
                        <!-- End Language -->

                        <div class="ml-auto">
                          <!-- Jump To -->
                          <div class="hs-unfold d-sm-none mr-2">
                            <a class="js-hs-unfold-invoker dropdown-nav-link dropdown-toggle d-flex align-items-center" href="javascript:;"
                               data-hs-unfold-options='{
                                "target": "#jumpToDropdown",
                                "type": "css-animation",
                                "event": "hover",
                                "hideOnScroll": "true"
                               }'>
                              Jump to
                            </a>

                            <div id="jumpToDropdown" class="hs-unfold-content dropdown-menu">
                              <a class="dropdown-item" href="#">Help</a>
                              <a class="dropdown-item" href="#">Contacts</a>
                            </div>
                          </div>
                          <!-- End Jump To -->

                          <!-- Links -->
                          <div class="nav nav-sm nav-y-0 d-none d-sm-flex ml-sm-auto">
                            <a class="nav-link" href="#">Help</a>
                            <a class="nav-link" href="#">Contacts</a>
                          </div>
                          <!-- End Links -->
                        </div>

                        <ul class="list-inline ml-2 mb-0">
                          <!-- Search -->
                          <li class="list-inline-item">
                            <div class="hs-unfold">
                              <a class="js-hs-unfold-invoker btn btn-xs btn-icon btn-ghost-secondary" href="javascript:;"
                                 data-hs-unfold-options='{
                                  "target": "#searchPushTop",
                                  "type": "jquery-slide",
                                  "contentSelector": ".search-push-top"
                                 }'>
                                <i class="fas fa-search"></i>
                              </a>
                            </div>
                          </li>
                          <!-- End Search -->

                          <!-- Shopping Cart -->
                          <li class="list-inline-item">
                            <div class="hs-unfold">
                              <a class="js-hs-unfold-invoker btn btn-xs btn-icon btn-ghost-secondary" href="javascript:;"
                                 data-hs-unfold-options='{
                                  "target": "#shoppingCartDropdown",
                                  "type": "css-animation",
                                  "event": "hover",
                                  "hideOnScroll": "true"
                                 }'>
                                <i class="fas fa-shopping-cart"></i>
                              </a>

                              <div id="shoppingCartDropdown" class="hs-unfold-content dropdown-menu dropdown-menu-right text-center p-7" style="min-width: 250px;">
                                <figure class="max-w-9rem mx-auto mb-3">
                                  <img class="img-fluid" src="../../assets/svg/illustrations/empty-cart.svg" alt="SVG">
                                </figure>
                                <span class="d-block">Your Cart is Empty</span>
                              </div>
                            </div>
                          </li>
                          <!-- End Shopping Cart -->

                          <!-- Account Login -->
                          <li class="list-inline-item">
                            <div class="hs-unfold">
                              <a class="js-hs-unfold-invoker btn btn-icon btn-xs btn-ghost-secondary" href="javascript:;" data-toggle="modal" data-target="#signupModal">
                                <i class="fas fa-user-circle"></i>
                              </a>
                            </div>
                          </li>
                          <!-- End Account Login -->
                        </ul>
                      </div>
                    </div>
                    <!-- End Topbar -->

                    <div id="logoAndNav" class="container">
                      <!-- Nav -->
                      <nav class="js-mega-menu navbar navbar-expand-lg">
                        <!-- Logo -->
                        <a class="navbar-brand" href="#" aria-label="Front">
                          <img src="../../assets/svg/logos/logo.svg" alt="Logo">
                        </a>
                        <!-- End Logo -->

                        <!-- Responsive Toggle Button -->
                        <button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
                                aria-label="Toggle navigation"
                                aria-expanded="false"
                                aria-controls="navBar"
                                data-toggle="collapse"
                                data-target="#navBar">
                          <span class="navbar-toggler-default">
                            <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                              <path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
                            </svg>
                          </span>
                          <span class="navbar-toggler-toggled">
                            <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                              <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                            </svg>
                          </span>
                        </button>
                        <!-- End Responsive Toggle Button -->

                        <!-- Navigation -->
                        <div id="navBar" class="collapse navbar-collapse">
                          <div class="navbar-body header-abs-top-inner">
                            <ul class="navbar-nav">
                              <!-- Home -->
                              <li class="hs-has-mega-menu navbar-nav-item">
                                <a id="homeMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Landings</a>

                                <!-- Home - Mega Menu -->
                                <div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="homeMegaMenu">
                                  <div class="row no-gutters">
                                    <div class="col-lg-6">
                                      <!-- Banner Image -->
                                      <div class="navbar-banner" style="background-image: url(../../assets/img/750x750/img1.jpg);">
                                        <div class="navbar-banner-content">
                                          <div class="mb-4">
                                            <span class="h2 d-block text-white">Branding Works</span>
                                            <p class="text-white">Experience a level of our quality in both design & customization works.</p>
                                          </div>
                                          <a class="btn btn-primary btn-sm transition-3d-hover" href="#">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                                        </div>
                                      </div>
                                      <!-- End Banner Image -->
                                    </div>

                                    <div class="col-lg-6">
                                      <div class="row mega-menu-body">
                                        <div class="col-sm-6 mb-3 mb-sm-0">
                                          <span class="d-block h5">Classic</span>
                                          <a class="dropdown-item" href="#">Agency</a>
                                          <a class="dropdown-item" href="#">Analytics <span class="badge badge-primary badge-pill ml-2">Hot</span></a>
                                          <a class="dropdown-item" href="#">Studio</a>
                                          <a class="dropdown-item" href="#">Marketing</a>
                                          <a class="dropdown-item" href="#">Advertisement <span class="badge badge-primary badge-pill ml-2">Hot</span></a>
                                          <a class="dropdown-item" href="#">Consulting</a>
                                          <a class="dropdown-item" href="#">Portfolio</a>
                                          <a class="dropdown-item" href="#">Software</a>
                                          <a class="dropdown-item" href="#">Business</a>
                                        </div>

                                        <div class="col-sm-6">
                                          <span class="d-block h5">App</span>
                                          <div class="mb-3">
                                            <a class="dropdown-item" href="#">UI Kit</a>
                                            <a class="dropdown-item" href="#">SaaS</a>
                                            <a class="dropdown-item" href="#">Workflow</a>
                                            <a class="dropdown-item" href="#">Payment</a>
                                            <a class="dropdown-item" href="#">Tool</a>
                                          </div>

                                          <span class="d-block h5">Onepages</span>
                                          <a class="dropdown-item" href="#">Corporate</a>
                                          <a class="dropdown-item" href="#">SaaS <span class="badge badge-primary badge-pill ml-2">Hot</span></a>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <!-- End Home - Mega Menu -->
                              </li>
                              <!-- End Home -->

                              <!-- Pages -->
                              <li class="hs-has-sub-menu navbar-nav-item">
                                <a id="pagesMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="pagesSubMenu">Pages</a>

                                <!-- Pages - Submenu -->
                                <div id="pagesSubMenu" class="hs-sub-menu dropdown-menu" aria-labelledby="pagesMegaMenu" style="min-width: 230px;">
                                  <!-- Company -->
                                  <div class="hs-has-sub-menu">
                                    <a id="navLinkPagesCompany" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesCompany">Company</a>

                                    <div id="navSubmenuPagesCompany" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkPagesCompany" style="min-width: 230px;">
                                      <a class="dropdown-item" href="#">About Agency</a>
                                      <a class="dropdown-item" href="#">Services Agency</a>
                                      <a class="dropdown-item" href="#">Customers</a>
                                      <a class="dropdown-item" href="#">Customer story</a>
                                      <a class="dropdown-item" href="#">Careers</a>
                                      <a class="dropdown-item" href="#">Careers Single</a>
                                      <a class="dropdown-item" href="#">Hire Us</a>
                                    </div>
                                  </div>
                                  <!-- Company -->

                                  <!-- Portfolio -->
                                  <div class="hs-has-sub-menu">
                                    <a id="navLinkPagesPortfolio" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesPortfolio">Portfolio</a>

                                    <div id="navSubmenuPagesPortfolio" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkPagesPortfolio" style="min-width: 230px;">
                                      <a class="dropdown-item" href="#">Grid</a>
                                      <a class="dropdown-item" href="#">Masonry</a>
                                      <a class="dropdown-item" href="#">Modern</a>
                                      <div class="dropdown-divider"></div>
                                      <a class="dropdown-item" href="#">Case Studies Branding</a>
                                      <a class="dropdown-item" href="#">Case Studies Product</a>
                                      <div class="dropdown-divider"></div>
                                      <a class="dropdown-item" href="#">Single Page List</a>
                                      <a class="dropdown-item" href="#">Single Page Grid</a>
                                      <a class="dropdown-item" href="#">Single Page Masonry</a>
                                    </div>
                                  </div>
                                  <!-- End Portfolio -->

                                  <!-- Login -->
                                  <div class="hs-has-sub-menu">
                                    <a id="navLinkPagesLogin" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesLogin">Login & Signup</a>

                                    <div id="navSubmenuPagesLogin" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkPagesLogin" style="min-width: 230px;">
                                      <a class="dropdown-item" href="#">Login</a>
                                      <a class="dropdown-item" href="#">Signup</a>
                                      <a class="dropdown-item" href="#">Recover Account</a>
                                      <div class="dropdown-divider"></div>
                                      <a class="dropdown-item" href="#">Login Simple</a>
                                      <a class="dropdown-item" href="#">Signup Simple</a>
                                      <a class="dropdown-item" href="#">Recover Account Simple</a>
                                    </div>
                                  </div>
                                  <!-- Signup -->

                                  <!-- Contacts -->
                                  <div class="hs-has-sub-menu">
                                    <a id="navLinkContactsServices" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuContactsServices">Contacts</a>

                                    <div id="navSubmenuContactsServices" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkContactsServices" style="min-width: 230px;">
                                      <a class="dropdown-item" href="#">Contacts Agency</a>
                                      <a class="dropdown-item" href="#">Contacts Start-Up</a>
                                    </div>
                                  </div>
                                  <!-- Contacts -->

                                  <!-- Utilities -->
                                  <div class="hs-has-sub-menu">
                                    <a id="navLinkPagesUtilities" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesUtilities">Utilities</a>

                                    <div id="navSubmenuPagesUtilities" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkPagesUtilities" style="min-width: 230px;">
                                      <a class="dropdown-item" href="#">Pricing</a>
                                      <a class="dropdown-item" href="#">FAQ</a>
                                      <a class="dropdown-item" href="#">Terms & Conditions</a>
                                      <a class="dropdown-item" href="#">Privacy & Policy</a>
                                    </div>
                                  </div>
                                  <!-- Utilities -->

                                  <!-- Specialty -->
                                  <div class="hs-has-sub-menu">
                                    <a id="navLinkPagesSpecialty" class="hs-mega-menu-invoker dropdown-item dropdown-item-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-controls="navSubmenuPagesSpecialty">Specialty</a>

                                    <div id="navSubmenuPagesSpecialty" class="hs-sub-menu dropdown-menu" aria-labelledby="navLinkPagesSpecialty" style="min-width: 230px;">
                                      <a class="dropdown-item" href="#">Cover Page</a>
                                      <a class="dropdown-item" href="#">Coming Soon</a>
                                      <a class="dropdown-item" href="#">Maintenance Mode</a>
                                      <a class="dropdown-item" href="#">Status</a>
                                      <a class="dropdown-item" href="#">Invoice</a>
                                      <a class="dropdown-item" href="#">Error 404</a>
                                    </div>
                                  </div>
                                  <!-- Specialty -->
                                </div>
                                <!-- End Pages - Submenu -->
                              </li>
                              <!-- End Pages -->

                              <!-- Blog -->
                              <li class="hs-has-sub-menu navbar-nav-item">
                                <a id="blogMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="blogSubMenu">Blog</a>

                                <!-- Blog - Submenu -->
                                <div id="blogSubMenu" class="hs-sub-menu dropdown-menu" aria-labelledby="blogMegaMenu" style="min-width: 230px;">
                                  <a class="dropdown-item" href="#">Journal</a>
                                  <a class="dropdown-item" href="#">Metro</a>
                                  <a class="dropdown-item" href="#">Newsroom</a>
                                  <div class="dropdown-divider"></div>
                                  <a class="dropdown-item" href="#">Blog Profile</a>
                                  <a class="dropdown-item" href="#">Single Article</a>
                                </div>
                                <!-- End Submenu -->
                              </li>
                              <!-- End Blog -->

                              <!-- Shop -->
                              <li class="hs-has-mega-menu navbar-nav-item"
                                  data-hs-mega-menu-item-options='{
                                    "desktop": {
                                      "position": "right",
                                      "maxWidth": "440px"
                                    }
                                  }'>
                                <a id="shopMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Shop</a>

                                <!-- Shop - Mega Menu -->
                                <div class="hs-mega-menu dropdown-menu" aria-labelledby="shopMegaMenu">
                                  <div class="mega-menu-body">
                                    <span class="d-block h5">Shop Elements</span>

                                    <div class="row">
                                      <div class="col-sm-6">
                                        <a class="dropdown-item" href="#">Classic</a>
                                        <a class="dropdown-item" href="#">Categories</a>
                                        <a class="dropdown-item" href="#">Categories Sidebar</a>
                                        <a class="dropdown-item" href="#">Products Grid</a>
                                        <a class="dropdown-item" href="#">Products List</a>
                                      </div>

                                      <div class="col-sm-6">
                                        <a class="dropdown-item" href="#">Single Product</a>
                                        <a class="dropdown-item" href="#">Empty Cart</a>
                                        <a class="dropdown-item" href="#">Cart</a>
                                        <a class="dropdown-item" href="#">Checkout</a>
                                        <a class="dropdown-item" href="#">Order Completed</a>
                                      </div>
                                    </div>
                                  </div>

                                  <!-- Mega Menu Banner -->
                                  <div class="navbar-product-banner">
                                    <div class="d-flex align-items-end">
                                      <img class="img-fluid mr-4" src="../../assets/img/mockups/img4.png" alt="Image Description">
                                      <div class="navbar-product-banner-content">
                                        <div class="mb-4">
                                          <span class="h4 d-block text-primary">Win T-shirt</span>
                                          <p>Win one of our Front brand T-shirts.</p>
                                        </div>
                                        <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                                      </div>
                                    </div>
                                  </div>
                                  <!-- End Mega Menu Banner -->
                                </div>
                                <!-- End Shop - Mega Menu -->
                              </li>
                              <!-- End Shop -->

                              <!-- Demos -->
                              <li class="hs-has-mega-menu navbar-nav-item"
                                  data-hs-mega-menu-item-options='{
                                    "desktop": {
                                      "position": "right",
                                      "maxWidth": "900px"
                                    }
                                  }'>
                                <a id="demosMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Demos</a>

                                <!-- Demos - Mega Menu -->
                                <div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="demosMegaMenu">
                                  <div class="row no-gutters">
                                    <div class="col-lg-8">
                                      <div class="navbar-promo-card-deck">
                                        <!-- Promo Item -->
                                        <div class="navbar-promo-card navbar-promo-item">
                                          <a class="navbar-promo-link" href="#">
                                            <div class="media align-items-center">
                                              <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-67.svg" alt="SVG">
                                              <div class="media-body">
                                                <span class="navbar-promo-title">Course <span class="badge badge-success badge-pill ml-1">New</span></span>
                                                <span class="navbar-promo-text">Learn On-demand demo</span>
                                              </div>
                                            </div>
                                          </a>
                                        </div>
                                        <!-- End Promo Item -->

                                        <!-- Promo Item -->
                                        <div class="navbar-promo-card navbar-promo-item">
                                          <a class="navbar-promo-link" href="#">
                                            <div class="media align-items-center">
                                              <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-45.svg" alt="SVG">
                                              <div class="media-body">
                                                <span class="navbar-promo-title">App Marketplace</span>
                                                <span class="navbar-promo-text">Marketplace app demo</span>
                                              </div>
                                            </div>
                                          </a>
                                        </div>
                                        <!-- End Promo Item -->
                                      </div>

                                      <div class="navbar-promo-card-deck">
                                        <!-- Promo Item -->
                                        <div class="navbar-promo-card navbar-promo-item">
                                          <a class="navbar-promo-link" href="#">
                                            <div class="media align-items-center">
                                              <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-4.svg" alt="SVG">
                                              <div class="media-body">
                                                <span class="navbar-promo-title">Help Desk</span>
                                                <span class="navbar-promo-text">Help desk demo</span>
                                              </div>
                                            </div>
                                          </a>
                                        </div>
                                        <!-- End Promo Item -->

                                        <!-- Promo Item -->
                                        <div class="navbar-promo-card navbar-promo-item">
                                          <a class="navbar-promo-link disabled" href="#">
                                            <div class="media align-items-center">
                                              <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-5.svg" alt="SVG">
                                              <div class="media-body">
                                                <span class="navbar-promo-title">Account</span>
                                                <span class="navbar-promo-text">Coming soon...</span>
                                              </div>
                                            </div>
                                          </a>
                                        </div>
                                        <!-- End Promo Item -->
                                      </div>

                                      <div class="navbar-promo-card-deck">
                                        <!-- Promo Item -->
                                        <div class="navbar-promo-card navbar-promo-item">
                                          <a class="navbar-promo-link disabled" href="#">
                                            <div class="media align-items-center">
                                              <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-19.svg" alt="SVG">
                                              <div class="media-body">
                                                <span class="navbar-promo-title">Job</span>
                                                <span class="navbar-promo-text">Coming soon...</span>
                                              </div>
                                            </div>
                                          </a>
                                        </div>
                                        <!-- End Promo Item -->

                                        <!-- Promo Item -->
                                        <div class="navbar-promo-card navbar-promo-item">
                                          <a class="navbar-promo-link disabled" href="#">
                                            <div class="media align-items-center">
                                              <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-13.svg" alt="SVG">
                                              <div class="media-body">
                                                <span class="navbar-promo-title">House</span>
                                                <span class="navbar-promo-text">Coming soon...</span>
                                              </div>
                                            </div>
                                          </a>
                                        </div>
                                        <!-- End Promo Item -->
                                      </div>
                                    </div>

                                    <!-- Promo -->
                                    <div class="col-lg-4 navbar-promo d-none d-lg-block">
                                      <a class="d-block navbar-promo-inner" href="#">
                                        <div class="position-relative">
                                          <img class="img-fluid rounded mb-3" src="../../assets/img/380x227/img1.jpg" alt="Image Description">
                                        </div>
                                        <span class="navbar-promo-text font-size-1">Front makes you look at things from a different perspectives.</span>
                                      </a>
                                    </div>
                                    <!-- End Promo -->
                                  </div>
                                </div>
                                <!-- End Demos - Mega Menu -->
                              </li>
                              <!-- End Demos -->

                              <!-- Docs -->
                              <li class="hs-has-mega-menu navbar-nav-item"
                                  data-hs-mega-menu-item-options='{
                                    "desktop": {
                                      "position": "right",
                                      "maxWidth": "260px"
                                    }
                                  }'>
                                <a id="docsMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Docs</a>

                                <!-- Docs - Submenu -->
                                <div class="hs-mega-menu dropdown-menu" aria-labelledby="docsMegaMenu" style="min-width: 330px;">
                                  <!-- Promo Item -->
                                  <div class="navbar-promo-item">
                                    <a class="navbar-promo-link" href="#">
                                      <div class="media align-items-center">
                                        <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
                                        <div class="media-body">
                                          <span class="navbar-promo-title">
                                            Documentation
                                            <span class="badge badge-primary badge-pill ml-1">v3.0</span>
                                          </span>
                                          <small class="navbar-promo-text">Development guides</small>
                                        </div>
                                      </div>
                                    </a>
                                  </div>
                                  <!-- End Promo Item -->

                                  <!-- Promo Item -->
                                  <div class="navbar-promo-item">
                                    <a class="navbar-promo-link" href="#">
                                      <div class="media align-items-center">
                                        <img class="navbar-promo-icon" src="../../assets/svg/icons/icon-1.svg" alt="SVG">
                                        <div class="media-body">
                                          <span class="navbar-promo-title">Snippets</span>
                                          <small class="navbar-promo-text">Start building</small>
                                        </div>
                                      </div>
                                    </a>
                                  </div>
                                  <!-- End Promo Item -->

                                  <div class="navbar-promo-footer">
                                    <!-- List -->
                                    <div class="row no-gutters">
                                      <div class="col-6">
                                        <div class="navbar-promo-footer-item">
                                          <span class="navbar-promo-footer-text">Check what's new</span>
                                          <a class="navbar-promo-footer-text" href="#">
                                            Changelog
                                          </a>
                                        </div>
                                      </div>
                                      <div class="col-6 navbar-promo-footer-ver-divider">
                                        <div class="navbar-promo-footer-item">
                                          <span class="navbar-promo-footer-text">Have a question?</span>
                                          <a class="navbar-promo-footer-text" href="#">
                                            Contact us
                                          </a>
                                        </div>
                                      </div>
                                    </div>
                                    <!-- End List -->
                                  </div>
                                </div>
                                <!-- End Docs - Submenu -->
                              </li>
                              <!-- End Docs -->

                              <!-- Button -->
                              <li class="navbar-nav-last-item">
                                <a class="btn btn-sm btn-primary transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">
                                  Buy Now
                                </a>
                              </li>
                              <!-- End Button -->
                            </ul>
                          </div>
                        </div>
                        <!-- End Navigation -->
                      </nav>
                      <!-- End Nav -->
                    </div>
                  </div>
                </header>
                <!-- ========== END HEADER ========== -->

                <!-- ========== SECONDARY CONTENTS ========== -->
                <!-- Sign Up Modal -->
                <div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                      <!-- Header -->
                      <div class="modal-close">
                        <button type="button" class="btn btn-icon btn-sm btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
                          <svg width="10" height="10" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                            <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                          </svg>
                        </button>
                      </div>
                      <!-- End Header -->

                      <!-- Body -->
                      <div class="modal-body p-sm-5">
                        <form class="js-validate">
                          <!-- Sign in -->
                          <div id="signinModalForm">
                            <div class="text-center mb-5">
                              <h2>Sign in</h2>
                              <p>Don't have an account yet?
                                <a class="js-animation-link" href="javascript:;"
                                   data-hs-show-animation-options='{
                                       "targetSelector": "#signupModalForm",
                                       "groupName": "idForm"
                                     }'>Sign up here</a>
                              </p>
                            </div>

                            <a class="btn btn-block btn-white mb-2" href="#">
                                <span class="d-flex justify-content-center align-items-center">
                                  <img class="avatar avatar-xss mr-2" src="../../assets/svg/brands/google.svg" alt="Image Description">
                                  Sign in with Google
                                </span>
                            </a>

                            <a class="js-animation-link btn btn-block btn-primary mb-2" href="#"
                               data-hs-show-animation-options='{
                                   "targetSelector": "#signinWithEmailModalForm",
                                   "groupName": "idForm"
                                 }'>Sign in with Email</a>
                          </div>
                          <!-- End Sign in -->

                          <!-- Sign in with Modal -->
                          <div id="signinWithEmailModalForm" style="display: none; opacity: 0;">
                            <div class="text-center mb-5">
                              <h2>Sign in</h2>
                              <p>Don't have an account yet?
                                <a class="js-animation-link" href="javascript:;"
                                   data-hs-show-animation-options='{
                                       "targetSelector": "#signupModalForm",
                                       "groupName": "idForm"
                                     }'>Sign up here</a>
                              </p>
                            </div>

                            <!-- Form Group -->
                            <div class="js-form-message form-group">
                              <label class="input-label" for="signinModalFormSrEmail">Your email</label>
                              <input type="email" class="form-control" name="email" id="signinModalFormSrEmail" placeholder="email@address.com" aria-label="email@address.com" required data-msg="Please enter a valid email address.">
                            </div>
                            <!-- End Form Group -->

                            <!-- Form Group -->
                            <div class="js-form-message form-group">
                              <label class="input-label" for="signinModalFormSrPassword">
                                  <span class="d-flex justify-content-between align-items-center">
                                    Password
                                    <a class="js-animation-link link text-muted" href="javascript:;"
                                       data-hs-show-animation-options='{
                                         "targetSelector": "#forgotPasswordModalForm",
                                         "groupName": "idForm"
                                       }'>Forgot Password?</a>
                                  </span>
                              </label>
                              <input type="password" class="form-control" name="password" id="signinModalFormSrPassword" placeholder="8+ characters required" aria-label="8+ characters required" required data-msg="Your password is invalid. Please try again.">
                            </div>
                            <!-- End Form Group -->

                            <button type="submit" class="btn btn-block btn-primary">Sign in</button>
                          </div>
                          <!-- End Sign in with Modal -->

                          <!-- Sign up -->
                          <div id="signupModalForm" style="display: none; opacity: 0;">
                            <div class="text-center mb-5">
                              <h2>Sign up</h2>
                              <p>Already have an account?
                                <a class="js-animation-link" href="javascript:;"
                                   data-hs-show-animation-options='{
                                       "targetSelector": "#signinModalForm",
                                       "groupName": "idForm"
                                     }'>Sign in here</a>
                              </p>
                            </div>

                            <a class="btn btn-block btn-white mb-2" href="#">
                                <span class="d-flex justify-content-center align-items-center">
                                  <img class="avatar avatar-xss mr-2" src="../../assets/svg/brands/google.svg" alt="Image Description">
                                  Sign up with Google
                                </span>
                            </a>

                            <a class="js-animation-link btn btn-block btn-primary mb-2" href="#"
                               data-hs-show-animation-options='{
                                   "targetSelector": "#signupWithEmailModalForm",
                                   "groupName": "idForm"
                                 }'>Sign up with Email</a>

                            <div class="text-center mt-3">
                              <p class="font-size-1 mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
                            </div>
                          </div>
                          <!-- End Sign up -->

                          <!-- Sign up with Modal -->
                          <div id="signupWithEmailModalForm" style="display: none; opacity: 0;">
                            <div class="text-center mb-5">
                              <h2>Sign up</h2>
                              <p>Already have an account?
                                <a class="js-animation-link" href="javascript:;"
                                   data-hs-show-animation-options='{
                                       "targetSelector": "#signinModalForm",
                                       "groupName": "idForm"
                                     }'>Sign in here</a>
                              </p>
                            </div>

                            <!-- Form Group -->
                            <div class="js-form-message form-group">
                              <label class="input-label" for="signupModalFormSrEmail">Your email</label>
                              <input type="email" class="form-control" name="email" id="signupModalFormSrEmail" placeholder="email@address.com" aria-label="email@address.com" required data-msg="Please enter a valid email address.">
                            </div>
                            <!-- End Form Group -->

                            <!-- Form Group -->
                            <div class="js-form-message form-group">
                              <label class="input-label" for="signupModalFormSrPassword">Password</label>
                              <input type="password" class="form-control" name="password" id="signupModalFormSrPassword" placeholder="8+ characters required" aria-label="8+ characters required" required data-msg="Your password is invalid. Please try again.">
                            </div>
                            <!-- End Form Group -->

                            <!-- Form Group -->
                            <div class="js-form-message form-group">
                              <label class="input-label" for="signupModalFormSrConfirmPassword">Confirm password</label>
                              <input type="password" class="form-control" name="confirmPassword" id="signupModalFormSrConfirmPassword" placeholder="8+ characters required" aria-label="8+ characters required" required data-msg="Password does not match the confirm password.">
                            </div>
                            <!-- End Form Group -->

                            <button type="submit" class="btn btn-block btn-primary">Sign up</button>

                            <div class="text-center mt-3">
                              <p class="font-size-1 mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
                            </div>
                          </div>
                          <!-- End Sign up with Modal -->

                          <!-- Forgot Password -->
                          <div id="forgotPasswordModalForm" style="display: none; opacity: 0;">
                            <div class="text-center mb-5">
                              <h2>Forgot password?</h2>
                              <p>Enter the email address you used when you joined and we'll send you instructions to reset your password.</p>
                            </div>

                            <!-- Form Group -->
                            <div class="js-form-message form-group">
                              <label class="input-label" for="resetPasswordSrEmail" tabindex="0">
                                <span class="d-flex justify-content-between align-items-center">
                                  Your email
                                  <a class="js-animation-link d-flex align-items-center link text-muted" href="javascript:;"
                                     data-hs-show-animation-options='{
                                       "targetSelector": "#signinModalForm",
                                       "groupName": "idForm"
                                     }'>
                                    <i class="fas fa-angle-left mr-2"></i> Back to Sign in
                                  </a>
                                </span>
                              </label>
                              <input type="email" class="form-control" name="email" id="resetPasswordSrEmail" tabindex="1" placeholder="Enter your email address" aria-label="Enter your email address" required data-msg="Please enter a valid email address.">
                            </div>
                            <!-- End Form Group -->

                            <button type="submit" class="btn btn-block btn-primary">Submit</button>
                          </div>
                          <!-- End Forgot Password -->
                        </form>
                      </div>
                      <!-- End Body -->

                      <!-- Footer -->
                      <div class="modal-footer d-block text-center py-sm-5">
                        <small class="text-cap mb-4">Trusted by the world's best teams</small>

                        <div class="w-85 mx-auto">
                          <div class="row justify-content-between">
                            <div class="col">
                              <img class="img-fluid" src="../../assets/svg/brands/gitlab-gray.svg" alt="Image Description">
                            </div>
                            <div class="col">
                              <img class="img-fluid" src="../../assets/svg/brands/fitbit-gray.svg" alt="Image Description">
                            </div>
                            <div class="col">
                              <img class="img-fluid" src="../../assets/svg/brands/flow-xo-gray.svg" alt="Image Description">
                            </div>
                            <div class="col">
                              <img class="img-fluid" src="../../assets/svg/brands/layar-gray.svg" alt="Image Description">
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Footer -->
                    </div>
                  </div>
                </div>
                <!-- End Sign Up Modal -->
                <!-- ========== END SECONDARY CONTENTS ========== -->
              
            
              
                <link rel="stylesheet" href="./assets/vendor/@fortawesome/fontawesome-free/css/all.css">
                <link rel="stylesheet" href="./assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="./assets/vendor/hs-header/dist/hs-header.min.js"></script>
                <script src="./assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
                <script src="./assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
                <script src="./assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
                <script src="./assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>

                <!-- JS Front -->

                <!-- JS Plugins Init. -->
                <script>
                  $(document).on('ready', function () {
                    // INITIALIZATION OF HEADER
                    // =======================================================
                    var header = new HSHeader($('#header')).init();


                    // INITIALIZATION OF HSMEGAMENU COMPONENT
                    // =======================================================
                    var megaMenu = new HSMegaMenu($('.js-mega-menu')).init();


                    // INITIALIZATION OF UNFOLD
                    // =======================================================
                    var unfold = new HSUnfold('.js-hs-unfold-invoker').init();


                    // INITIALIZATION OF FORM VALIDATION
                    // =======================================================
                    $('.js-validate').each(function() {
                      $.HSCore.components.HSValidation.init($(this), {
                        rules: {
                          confirmPassword: {
                            equalTo: '#signupPassword'
                          }
                        }
                      });
                    });


                    // INITIALIZATION OF SHOW ANIMATIONS
                    // =======================================================
                    $('.js-animation-link').each(function () {
                      var showAnimation = new HSShowAnimation($(this)).init();
                    });
                  });
                </script>