Fullscreen

              
                <!-- ========== HEADER ========== -->
                <header id="header" class="header header-bg-transparent header-abs-top py-3">
                  <div class="header-section navbar-expand">
                    <div id="logoAndNav" class="container px-3">
                      <!-- Nav -->
                      <nav class="navbar">
                        <!-- Logo -->
                        <a class="navbar-brand" href="#" aria-label="Front">
                          <img src="../../assets/svg/logos/logo.svg" alt="Logo">
                        </a>
                        <!-- End Logo -->

                        <!-- Fullscreen Toggle Button -->
                        <button id="headerToggler" type="button" class="navbar-toggler fullscreen-toggler btn btn-icon btn-sm btn-soft-secondary rounded-circle"
                                aria-label="Toggle navigation"
                                aria-expanded="false"
                                data-toggle="button"
                                aria-controls="headerFullscreen"
                                data-target="#headerFullscreen">
                          <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 Fullscreen Toggle Button -->
                      </nav>
                      <!-- End Nav -->

                      <!-- Navigation -->
                      <div id="headerFullscreen" class="fullscreen"
                           data-hs-header-fullscreen-options='{
                             "overlayClass": "fullscreen-overlay"
                           }'
                           aria-labelledby="headerToggler">
                        <div class="fullscreen-container">
                          <div class="container">
                            <div class="fullscreen-body">
                              <div class="row justify-content-md-between align-items-center">
                                <div id="fullscreenWrapper" class="col-md-6">
                                  <!-- List -->
                                  <ul id="fullscreenNav" class="fullscreen-nav">
                                    <!-- Home Section -->
                                    <li class="u-has-submenu fullscreen-submenu">
                                      <a class="fullscreen-nav-link" href="#homeCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeCollapse">
                                        Home
                                      </a>

                                      <ul id="homeCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
                                        <!-- Home - Classic -->
                                        <li class="u-has-submenu fullscreen-submenu">
                                          <a class="fullscreen-submenu-nav-link" href="#homeClassicSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeClassicSubNavCollapse">
                                            Classic
                                          </a>

                                          <ul id="homeClassicSubNavCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Agency</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Analytics</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Studio</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Marketing</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Advertisement</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Consulting</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Portfolio</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Software</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Business</a></li>
                                          </ul>
                                        </li>
                                        <!-- End Home - Classic -->

                                        <!-- Home - App -->
                                        <li class="u-has-submenu fullscreen-submenu">
                                          <a class="fullscreen-submenu-nav-link" href="#homeAppSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeAppSubNavCollapse">
                                            App
                                          </a>

                                          <ul id="homeAppSubNavCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-kit.html">UI Kit</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">App SaaS</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">App Workflow</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">App Payment</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">App Tool</a></li>
                                          </ul>
                                        </li>
                                        <!-- End Home - App -->

                                        <!-- Home - Onepages -->
                                        <li class="u-has-submenu fullscreen-submenu">
                                          <a class="fullscreen-submenu-nav-link" href="#homeOnepagesSubNavCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="homeOnepagesSubNavCollapse">
                                            Onepages
                                          </a>

                                          <ul id="homeOnepagesSubNavCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Corporate</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">SaaS</a></li>
                                          </ul>
                                        </li>
                                        <!-- End Home - Onepages -->
                                      </ul>
                                    </li>
                                    <!-- End Home Section -->

                                    <!-- Page Section -->
                                    <li class="u-has-submenu fullscreen-submenu">
                                      <a class="fullscreen-nav-link" href="#pagesCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="pagesCollapse">
                                        Pages
                                      </a>

                                      <ul id="pagesCollapse" class="collapse fullscreen-nav-list"
                                          data-parent="#fullscreenWrapper">
                                        <!-- Page - Company -->
                                        <li class="u-has-submenu fullscreen-submenu">
                                          <a class="fullscreen-submenu-nav-link" role="button" href="#pagesCompanyCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesCompanyCollapse">
                                            Company
                                          </a>

                                          <ul id="pagesCompanyCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">About Agency</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Services Agency</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Customers</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Customer story</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Careers</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Careers Single</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Hire Us</a></li>
                                          </ul>
                                        </li>
                                        <!-- End Page - Company -->

                                        <!-- Page - Portfolio -->
                                        <li class="u-has-submenu fullscreen-submenu">
                                          <a class="fullscreen-submenu-nav-link" role="button" href="#pagesPortfolioCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesPortfolioCollapse">
                                            Portfolio
                                          </a>

                                          <ul id="pagesPortfolioCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Grid</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Masonry</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Modern</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-branding.html">Case Studies Branding</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-product.html">Case Studies Product</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-list.html">Single Page List</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-grid.html">Single Page Grid</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-masonry.html">Single Page Masonry</a></li>
                                          </ul>
                                        </li>
                                        <!-- End Page - Portfolio -->

                                        <!-- Page - Login -->
                                        <li class="u-has-submenu fullscreen-submenu">
                                          <a class="fullscreen-submenu-nav-link" role="button" href="#pagesLoginCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesLoginCollapse">
                                            Login
                                          </a>

                                          <ul id="pagesLoginCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Login</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Signup</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Recover Account</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Login Simple</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Signup Simple</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-simple.html">Recover Account Simple</a></li>
                                          </ul>
                                        </li>
                                        <!-- End Page - Login -->

                                        <!-- Page - Contacts -->
                                        <li class="u-has-submenu fullscreen-submenu">
                                          <a class="fullscreen-submenu-nav-link" role="button" href="#pagesContactsCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesContactsCollapse">
                                            Contacts
                                          </a>

                                          <ul id="pagesContactsCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Contacts Agency</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#-up.html">Contacts Start-Up</a></li>
                                          </ul>
                                        </li>
                                        <!-- End Page - Contacts -->

                                        <!-- Page - Utilities -->
                                        <li class="u-has-submenu fullscreen-submenu">
                                          <a class="fullscreen-submenu-nav-link" role="button" href="#pagesUtilitiesCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesUtilitiesCollapse">
                                            Utilities
                                          </a>

                                          <ul id="pagesUtilitiesCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Pricing</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">FAQ</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Terms & Conditions</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Privacy & Policy</a></li>
                                          </ul>
                                        </li>
                                        <!-- End Page - Utilities -->

                                        <!-- Page - Specialty -->
                                        <li class="u-has-submenu fullscreen-submenu">
                                          <a class="fullscreen-submenu-nav-link" role="button" href="#pagesSpecialtyCollapse" data-toggle="collapse" aria-expanded="false" aria-controls="pagesSpecialtyCollapse">
                                            Specialty
                                          </a>

                                          <ul id="pagesSpecialtyCollapse" class="collapse fullscreen-submenu-list" data-parent="#fullscreenNav">
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Cover Page</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Coming Soon</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Maintenance Mode</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Status</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Invoice</a></li>
                                            <li><a class="nav-link fullscreen-submenu-list-link" href="#">Error 404</a></li>
                                          </ul>
                                        </li>
                                        <!-- End Page - Specialty -->
                                      </ul>
                                    </li>
                                    <!-- End Page Section -->

                                    <!-- Blog -->
                                    <li class="u-has-submenu fullscreen-submenu">
                                      <a class="fullscreen-nav-link" href="#blogCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="blogCollapse">
                                        Blog
                                      </a>

                                      <ul id="blogCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Journal</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Metro</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Newsroom</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Blog Profile</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Single Article</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Blog -->

                                    <!-- Shop Section -->
                                    <li class="u-has-submenu fullscreen-submenu">
                                      <a class="fullscreen-nav-link" href="#shopCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="shopCollapse">
                                        Shop
                                      </a>

                                      <ul id="shopCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Classic</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Categories</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Categories Sidebar</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Products Grid</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Products List</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Single Product</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Empty Cart</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Cart</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Checkout</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Order Completed</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Shop Section -->

                                    <!-- Demos -->
                                    <li class="u-has-submenu fullscreen-submenu">
                                      <a class="fullscreen-nav-link" href="#demosCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="demosCollapse">
                                        Demos
                                      </a>

                                      <ul id="demosCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Course</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">App Marketplace</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Help Desk</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link disabled" href="javascript:;">Account</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link disabled" href="javascript:;">Job</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link disabled" href="javascript:;">House</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Demos -->

                                    <!-- Docs Section -->
                                    <li class="u-has-submenu fullscreen-submenu">
                                      <a class="fullscreen-nav-link" href="#docsCollapse" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="docsCollapse">
                                        Docs
                                      </a>

                                      <ul id="docsCollapse" class="collapse fullscreen-nav-list" data-parent="#fullscreenWrapper">
                                        <li><a class="nav-link fullscreen-submenu-list-link" href="#">Documentation</a></li>
                                        <li><a class="nav-link fullscreen-submenu-list-link disabled" href="../../snippets/index.html">Snippets</a></li>
                                      </ul>
                                    </li>
                                    <!-- End Docs Section -->
                                  </ul>
                                  <!-- End List -->
                                </div>

                                <div class="col-md-4 d-none d-md-inline-block">
                                  <!-- Address -->
                                  <div class="mb-7">
                                    <span class="d-block text-white font-weight-bold mb-3">Address</span>

                                    <address class="mb-0">
                                      <span class="d-block text-white-70 mb-1">+1 (062) 109-9222</span>
                                      <span class="d-block text-white-70 mb-1">hello@example.com</span>
                                      <span class="d-block text-white-70 mb-1">153 Williamson Plaza, Maggieberg, MT 09514</span>
                                    </address>
                                  </div>
                                  <!-- End Address -->

                                  <!-- Social Networks -->
                                  <span class="d-block text-white font-weight-bold mb-3">Social</span>

                                  <ul class="list-inline mb-0">
                                    <li class="list-inline-item">
                                      <a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
                                        <i class="fab fa-facebook-f"></i>
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
                                        <i class="fab fa-google"></i>
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
                                        <i class="fab fa-twitter"></i>
                                      </a>
                                    </li>
                                    <li class="list-inline-item">
                                      <a class="btn btn-xs btn-icon btn-soft-light rounded-circle" href="#">
                                        <i class="fab fa-github"></i>
                                      </a>
                                    </li>
                                  </ul>
                                  <!-- End Social Networks -->
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Navigation -->
                    </div>
                  </div>
                </header>
                <!-- ========== END HEADER ========== -->
              
            
              
                <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="./assets/vendor/hs-header-fullscreen/dist/hs-header-fullscreen.min.js"></script>

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

                    $(document).on('keydown', function (e) {
                      if (e.keyCode && e.keyCode === 27) {
                        $('[aria-pressed]').attr('aria-pressed', false).removeClass('active focus');
                        $('#fullscreenNav .collapse').collapse('hide');
                      }
                    });
                  });
                </script>