<!-- Header -->
<header id="js-header" class="u-header u-header--static--lg u-header--show-hide--lg u-header--change-appearance--lg"
        data-header-fix-moment="500"
        data-header-fix-effect="slide">
  <div class="u-header__section u-header__section--light g-bg-white g-transition-0_3 g-py-10"
       data-header-fix-moment-exclude="g-bg-white g-py-10"
       data-header-fix-moment-classes="g-bg-white-opacity-0_7 u-shadow-v18 g-py-0">
    <nav class="js-mega-menu navbar navbar-expand-lg">
      <div class="container">
        <!-- Responsive Toggle Button -->
        <button class="navbar-toggler navbar-toggler-right btn g-line-height-1 g-brd-none g-pa-0 g-pos-abs g-top-3 g-right-0" type="button" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navBar"
                data-toggle="collapse"
                data-target="#navBar">
          <span class="hamburger hamburger--slider">
            <span class="hamburger-box">
              <span class="hamburger-inner"></span>
            </span>
          </span>
        </button>
        <!-- End Responsive Toggle Button -->

        <!-- Logo -->
        <a href="{{ root }}index.html" class="navbar-brand">
          <img src="{{ root }}assets/img/logo/logo-1.png" alt="Image Description">
        </a>
        <!-- End Logo -->

        <!-- Navigation -->
        <div class="collapse navbar-collapse align-items-center flex-sm-row g-pt-10 g-pt-5--lg" id="navBar">
          <ul class="navbar-nav text-uppercase g-font-weight-600 ml-auto">
            <li class="nav-item g-mx-20--lg{% if mainNavActive_1 == 'home' %} active{% endif %}">
              <a href="#!" class="nav-link px-0">Home
                {% if mainNavActive_1 == 'home' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li><li class="nav-item g-mx-20--lg{% if mainNavActive_1 == 'features' %} active{% endif %}">
              <a href="#!" class="nav-link px-0">Features
                {% if mainNavActive_1 == 'features' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item g-mx-20--lg{% if mainNavActive_1 == 'pages' %} active{% endif %}">
              <a href="#!" class="nav-link px-0">Pages
                {% if mainNavActive_1 == 'pages' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <li class="nav-item g-mx-20--lg{% if mainNavActive_1 == 'demos' %} active{% endif %}">
              <a href="#!" class="nav-link px-0">Demos
                {% if mainNavActive_1 == 'demos' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
            <!-- Mega Menu Item -->
            <li class="hs-has-mega-menu nav-item g-mx-20--lg{% if mainNavActive_1 == 'shortcodes' %} active{% endif %}"
                data-animation-in="fadeIn"
                data-animation-out="fadeOut"
                data-position="right">
              <a id="mega-menu-label-1" class="nav-link active g-px-0" href="#!" aria-haspopup="true" aria-expanded="false">Shortcodes
                {% if mainNavActive_1 == 'shortcodes' %}<span class="sr-only">(current)</span>{% endif %}
                <i class="hs-icon hs-icon-arrow-bottom g-font-size-11 g-ml-7"></i>
              </a>

              <!-- Mega Menu -->
              <div class="w-100 hs-mega-menu u-shadow-v11 font-weight-normal g-text-transform-none g-brd-top g-brd-primary g-brd-top-2 g-pa-20 g-pb-0 g-pa-0--md g-mt-17 g-mt-7--lg--scrolling" aria-labelledby="mega-menu-label-1">
                <div class="row">
                  <div class="col-md-3">
                    <ul class="nav flex-column u-nav-v1-1 u-nav-gray-light-v5 g-height-100x--md g-brd-right--md g-brd-gray-light-v4"
                        data-tabs-mobile-type="slide-up-down"
                        data-destroy-res="768"
                        data-btn-classes="btn btn-md btn-block u-btn-outline-black">
                      <li class="nav-item">
                        <a class="nav-link active g-py-10--md g-px-15--md" href="#tab-blocks"
                           role="tab"
                           data-toggle="tab">Blocks
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link g-py-10--md g-px-15--md" href="#tab-elements"
                           role="tab"
                           data-toggle="tab">Elements
                        </a>
                      </li>
                    </ul>
                  </div>

                  <div class="col-md-9">
                    <div class="tab-content">
                      <div class="tab-pane fade in active show" id="tab-blocks" role="tabpanel">
                        <div class="row align-items-stretch">
                          <div class="col-lg-3">
                            <section class="g-py-20">
                              <ul class="list-unstyled">
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">General Typography</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Headings Options</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Dividers</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Blockquote Blocks</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link active g-px-0 g-color-primary--hover">Box Shadows</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Testimonials</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Tagline Boxes</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Grid Layouts</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Alerts &amp; Messages</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Labels &amp; Badges</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Audio/Videos &amp; Images</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Paginations</a>
                                </li>
                              </ul>
                            </section>
                          </div>

                          <div class="col-lg-3 g-brd-left--lg g-brd-gray-light-v5">
                            <section class="g-py-20">
                              <ul class="list-unstyled">
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">General Typography</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Headings Options</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Dividers</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Blockquote Blocks</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Box Shadows</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Testimonials</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Tagline Boxes</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Grid Layouts</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Alerts &amp; Messages</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Labels &amp; Badges</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Audio/Videos &amp; Images</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Paginations</a>
                                </li>
                              </ul>
                            </section>
                          </div>

                          <div class="col-lg-3 g-brd-left--lg g-brd-gray-light-v5">
                            <section class="g-py-20">
                              <ul class="list-unstyled">
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">General Typography</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Headings Options</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Dividers</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Blockquote Blocks</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Box Shadows</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Testimonials</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Tagline Boxes</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Grid Layouts</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Alerts &amp; Messages</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Labels &amp; Badges</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Audio/Videos &amp; Images</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Paginations</a>
                                </li>
                              </ul>
                            </section>
                          </div>

                          <div class="col-lg-3 g-brd-left--lg g-brd-gray-light-v5">
                            <section class="g-py-20">
                              <ul class="list-unstyled">
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">General Typography</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Headings Options</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Dividers</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Blockquote Blocks</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Box Shadows</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Testimonials</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Tagline Boxes</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Grid Layouts</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Alerts &amp; Messages</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Labels &amp; Badges</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Audio/Videos &amp; Images</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Paginations</a>
                                </li>
                              </ul>
                            </section>
                          </div>
                        </div>
                      </div>

                      <div class="tab-pane fade in" id="tab-elements" role="tabpanel">
                        <div class="row align-items-stretch">
                          <div class="col-lg-4">
                            <section class="g-py-20">
                              <ul class="list-unstyled">
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">General Typography</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Headings Options</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Dividers</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Blockquote Blocks</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Box Shadows</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Testimonials</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Tagline Boxes</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Grid Layouts</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Alerts &amp; Messages</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Labels &amp; Badges</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Audio/Videos &amp; Images</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Paginations</a>
                                </li>
                              </ul>
                            </section>
                          </div>

                          <div class="col-lg-4 g-brd-left--lg g-brd-gray-light-v5">
                            <section class="g-py-20">
                              <ul class="list-unstyled">
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">General Typography</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Headings Options</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Dividers</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Blockquote Blocks</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Box Shadows</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Testimonials</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Tagline Boxes</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Grid Layouts</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Alerts &amp; Messages</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Labels &amp; Badges</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Audio/Videos &amp; Images</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Paginations</a>
                                </li>
                              </ul>
                            </section>
                          </div>

                          <div class="col-lg-4 g-brd-left--lg g-brd-gray-light-v5">
                            <section class="g-py-20">
                              <ul class="list-unstyled">
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">General Typography</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Headings Options</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Dividers</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Blockquote Blocks</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Box Shadows</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Testimonials</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Tagline Boxes</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Grid Layouts</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Alerts &amp; Messages</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Labels &amp; Badges</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Audio/Videos &amp; Images</a>
                                </li>
                                <li>
                                  <a href="#!" class="nav-link g-px-0 g-color-primary--hover">Paginations</a>
                                </li>
                              </ul>
                            </section>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- End Mega Menu -->
            </li>
            <!-- End Mega Menu Item -->
            <li class="nav-item g-ml-20--lg g-mr-0--lg{% if mainNavActive_1 == 'whats-new' %} active{% endif %}">
              <a href="#!" class="nav-link px-0">What's New
                {% if mainNavActive_1 == 'whats-new' %}<span class="sr-only">(current)</span>{% endif %}
              </a>
            </li>
          </ul>
        </div>
        <!-- End Navigation -->
      </div>
    </nav>
  </div>
</header>
<!-- End Header -->
