{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set title = "Shortcodes" %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
    {% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
    {% include "html/assets/include/nunjucks/partials/core-css.njk" %}
    {% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
    {% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
    <link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">

    {% include "html/assets/include/nunjucks/partials/css/css-showcode.njk" %}

    {% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
    {% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
  </head>

  <body class="u-body--header-side-push-left u-body--header-side-opened u-has-sidebar-navigation g-overflow-x-hidden">
    <main>
      {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

      {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %}

      <!-- Content -->
      <section class="container-fluid g-px-0">
        <!-- Reusable UI Components -->
        <section class="container-fluid g-px-50 g-pt-70 g-pb-70">
          <div class="row justify-content-start align-items-center g-mx-minus-25">
            <div class="col-md-6 col-lg-5 flex-md-unordered g-px-25 g-mb-30">
              <span class="d-block g-color-blue-gradient-opacity-v1 g-font-weight-600 g-line-height-1 g-font-size-60 mb-4">1610+</span>
              <h2 class="h2 g-color-black mb-3">Reusable UI Components</h2>
              <p class="lead mb-4">Unify's 1610+ easy to use and customizable UI elements make it most customizable theme on the market. Build websites like a Lego!</p>

              <ul class="list-unstyled g-color-black mb-0">
                <li class="g-py-10">
                  <span class="align-middle text-center g-color-blue-gradient-opacity-v1 g-font-size-25 mr-4">
                    <i class="icon-finance-090 u-line-icon-pro"></i>
                  </span>
                  Premium Items
                </li>
                <li class="g-py-10">
                  <span class="align-middle text-center g-color-blue-gradient-opacity-v1 g-font-size-25 mr-4">
                    <i class="icon-communication-130 u-line-icon-pro"></i>
                  </span>
                  Customized Libraries
                </li>
                <li class="g-py-10">
                  <span class="align-middle text-center g-color-blue-gradient-opacity-v1 g-font-size-25 mr-4">
                    <i class="icon-finance-254 u-line-icon-pro"></i>
                  </span>
                  Info Graphics
                </li>
              </ul>
            </div>

            <div class="col-md-6 flex-md-first g-px-25 g-mb-30">
              <img class="img-fluid" src="{{ root }}assets/img-temp/1500x1040/img1.png" alt="Image Description">
            </div>
          </div>
        </section>
        <!-- End Reusable UI Components -->

        <hr class="g-brd-gray-light-v4 my-0">

        <!-- Promo Blocks -->
        <section id="promoblocks" class="container-fluid g-bg-secondary g-px-50 g-py-100">
          <!-- Heading -->
          <div class="text-center mx-auto g-max-width-645 g-mb-70">
            <h2 class="g-color-primary g-font-weight-700 g-font-size-80 g-line-height-1 text-uppercase mb-3">30+</h2>
            <h2 class="h2 g-color-black mb-4">Promo Blocks</h2>
            <p class="lead g-color-gray-dark-v4 mb-0">Transform your static screens into clickable, interactive prototypes in 5 minutes.</p>
            <p class="lead g-color-gray-dark-v4 mb-0">Receive the power to customize even tiniest details of your website appearance!</p>
          </div>
          <!-- End Heading -->

          <div class="row g-mx-minus-25">
            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img1.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-1.html">Promo Demo 1</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-1.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img2.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-2.html">Promo Demo 2</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-2.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img3.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-3.html">Promo Demo 3</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-3.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img4.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-4.html">Promo Demo 4</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-4.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img5.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-5.html">Promo Demo 5</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-5.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img6.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-6.html">Promo Demo 6</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-6.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img7.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-7.html">Promo Demo 7</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-7.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img8.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-8.html">Promo Demo 8</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-8.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img9.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-9.html">Promo Demo 9</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-9.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img10.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-10.html">Promo Demo 10</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-10.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img11.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-11.html">Promo Demo 11</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-11.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img12.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-12.html">Promo Demo 12</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-12.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img13.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-13.html">Promo Demo 13</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-13.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img14.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-14.html.html">Real Promo Demo 14</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-14.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img15.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-15.html">Promo Demo 15</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-15.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img16.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-16.html">Promo Demo 16</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-16.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img17.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-17.html">Promo Demo 17</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-17.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img18.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-18.html">Promo Demo 18</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-18.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img19.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-19.html">Promo Demo 19</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-19.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img20.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-20.html">Promo Demo 20</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-20.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img21.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-21.html">Promo Demo 21</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-21.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img22.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-22.html">Promo Demo 22</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-22.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img23.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-23.html">Promo Demo 23</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-23.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img24.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-24.html">Promo Demo 24</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-24.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img25.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-25.html">Promo Demo 25</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-25.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img26.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-26.html">Promo Demo 26</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-26.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img27.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-27.html">Promo Demo 27</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-27.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img28.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-28.html">Promo Demo 28</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-28.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img29.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-29.html">Promo Demo 29</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-29.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img30.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-30.html">Promo Demo 30</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-30.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img31.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-31.html">Promo Demo 31</a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-31.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img32.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-32.html">
                      Promo Demo 32
                    </a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-32.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img33.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-33.html">
                      Promo Demo 33
                    </a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-33.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>

            <div class="col-sm-6 col-lg-3 g-px-25 g-mb-70">
              <!-- Promo Blocks -->
              <div class="text-center u-block-hover">
                <img class="img-fluid u-shadow-v21 rounded g-mb-30" src="promo/assets/img-temp/600x295/img34.jpg" alt="Image Description">
                <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="shortcode-blocks-promo-demo-34.html">
                      Promo Demo 34 <span class="u-label u-label--sm g-bg-lightred text-uppercase rounded g-ml-10">New</span>
                    </a>
                  </h3>
                <a class="u-link-v2" target="_blank" href="promo/shortcode-blocks-promo-demo-34.html"></a>
              </div>
              <!-- End Promo Blocks -->
            </div>
          </div>

          <div class="text-center">
            <a class="btn u-btn-outline-primary g-font-weight-600 g-font-size-13 text-uppercase rounded g-px-30 g-py-15" target="_blank" href="https://wrapbootstrap.com/theme/unify-responsive-website-template-WB0412697?ref=htmlstream">Purchase Now</a>
          </div>
        </section>
        <!-- End Promo Blocks -->

        <hr class="g-brd-gray-light-v4 my-0">

        <!-- Carefully Customized LIbraries -->
        <section class="container-fluid g-px-50 g-py-70">
          <div class="row justify-content-start align-items-center g-mx-minus-25">
            <div class="col-md-6 col-lg-5 flex-md-unordered g-px-25 g-mb-30">
              <span class="d-block g-color-blue-gradient-opacity-v1 g-font-weight-600 g-line-height-1 g-font-size-60 mb-4">45+</span>
              <h2 class="h2 g-color-black mb-3">Carefully Customized Libraries</h2>
              <p class="lead mb-4">The most powerful and premium plugins that are extended with data attributes. Transform your static screens into clickable, interactive prototypes in under 5 minutes with the power to customize even tiniest details of your website appearance, like:</p>

              <ul class="list-unstyled g-color-black mb-0">
                <li class="g-py-10">
                  <span class="align-middle text-center g-color-blue-gradient-opacity-v1 g-font-size-25 mr-4">
                    <i class="icon-music-015 u-line-icon-pro"></i>
                  </span>
                  Video Background
                </li>
                <li class="g-py-10">
                  <span class="align-middle text-center g-color-blue-gradient-opacity-v1 g-font-size-25 mr-4">
                    <i class="icon-real-estate-027 u-line-icon-pro"></i>
                  </span>
                  Google Maps
                </li>
                <li class="g-py-10">
                  <span class="align-middle text-center g-color-blue-gradient-opacity-v1 g-font-size-25 mr-4">
                    <i class="icon-hotel-restaurant-233 u-line-icon-pro"></i>
                  </span>
                  Lightbox Galleries and More...
                </li>
              </ul>
            </div>

            <div class="col-md-6 flex-md-first g-px-25 g-mb-30">
              <img class="img-fluid" src="{{ root }}assets/img-temp/1500x1040/img3.png" alt="Image Description">
            </div>
          </div>
        </section>
        <!-- End Carefully Customized LIbraries -->

        <hr class="g-brd-gray-light-v4 my-0">

        <!-- Other Features -->
        <section class="container g-py-70">
          <!-- Heading -->
          <div class="text-center mx-auto g-max-width-645 g-mb-70">
            <div class="g-color-primary g-font-weight-700 g-font-size-60 g-line-height-1 text-uppercase mb-3">
              <i class="icon-finance-222 u-line-icon-pro"></i>
            </div>
            <h2 class="h2 g-color-black mb-4">Other Features</h2>
            <p class="lead g-color-gray-dark-v4 mb-0">Through our hundreds of easily customizable and absolutely scalable options,</p>
            <p class="lead g-color-gray-dark-v4 mb-0">enjoy the unlimited possibilities that you always desired.</p>
          </div>
          <!-- End Heading -->

          <img class="img-fluid g-mb-70" src="{{ root }}assets/img-temp/1445x750/img1.png" alt="Image Description">

          <div class="row no-gutters g-mb-30">
            <!-- Icon Blocks -->
            <div class="col-md-4 g-brd-around g-brd-gray-light-v4 text-center rounded g-mb-30">
              <div class="g-pa-30">
                <span class="d-block g-font-size-40 g-color-blue-gradient-opacity-v1 mb-2">40+</span>
                <h3 class="h5 g-color-black g-font-weight-700 g-font-size-13 text-uppercase">Advanced Blog Layouts</h3>
                <p class="g-color-gray-dark-v4">Design better, faster, and more collaboratively with Unify.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->

            <!-- Icon Blocks -->
            <div class="col-md-4 g-brd-around g-brd-gray-light-v4 text-center rounded g-ml-minus-1--md g-mr-minus-1--md g-mb-30">
              <div class="g-pa-30">
                <span class="d-block g-font-size-40 g-color-blue-gradient-opacity-v1 mb-2">50+</span>
                <h3 class="h5 g-color-black g-font-weight-700 g-font-size-13 text-uppercase">Crafted Portfolio Layouts</h3>
                <p class="g-color-gray-dark-v4">Extend your site with portfolio works on the best way that you always desired.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->

            <!-- Icon Blocks -->
            <div class="col-md-4 g-brd-around g-brd-gray-light-v4 text-center rounded g-mb-30">
              <div class="g-pa-30">
                <span class="d-block g-font-size-40 g-color-blue-gradient-opacity-v1 mb-2">40+</span>
                <h3 class="h5 g-color-black g-font-weight-700 g-font-size-13 text-uppercase">Footer Options</h3>
                <p class="g-color-gray-dark-v4">Simplify your working process by having one of the Unify's modern footers.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->
          </div>

          <div class="row">
            <!-- More Features -->
            <div class="col-md-4">
              <ul class="list-unstyled mb-0">
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Bootstrap 4</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> SASS</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> GulpJS</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> 100% Customizable</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Stunning Support</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Free &amp; Lifetime Updates</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Developer Friendly &amp; Clean Code</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Premium Plugins &amp; Libraries</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Background Videos (Youtube/Vimeo/HTML5)</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Google Maps</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Go to Top</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> 4000+ Font Icons</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Widgetized Mega Menu</li>
              </ul>
            </div>
            <!-- End More Features -->

            <!-- More Features -->
            <div class="col-md-4">
              <ul class="list-unstyled mb-0">
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Smooth Parallax Scrolling</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Masonry Grid Layouts</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Extensive Gallery Options</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Image &amp; Content Sliders</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Google Fonts</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Counters</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Fancybox/Popups</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Countdown Variations</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Sticky Blocks</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> 404 Error Pages</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Profile Pages</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Search Results</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Coming Soon Page</li>
              </ul>
            </div>
            <!-- End More Features -->

            <!-- More Features -->
            <div class="col-md-4">
              <ul class="list-unstyled mb-0">
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Animated Typing Words</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Huge Collection of Form Options</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Background Overlays</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Drop Zone File Upload</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Calendar</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> 30+ Product Blocks</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> On Scroll Animations</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Pie Charts</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Timeline Designs</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> E-Commerce Pages</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Over 20 Login &amp; Sing up Layouts</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> Boxed Layouts</li>
                <li class="g-py-7"><i class="g-color-blue-gradient-opacity-v1 mr-3 fa fa-star"></i> and many more..</li>
              </ul>
            </div>
            <!-- End More Features -->
          </div>
        </section>
        <!-- End Other Features -->

        <hr class="g-brd-gray-light-v4 my-0">

        <!-- Master Slider -->
        <section class="container-fluid g-px-50 g-pt-100 g-pb-70">
          <div class="row justify-content-start align-items-center g-mx-minus-25">
            <div class="col-md-6 col-lg-5 flex-md-unordered g-px-25 g-mb-30">
              <span class="d-block g-color-blue-gradient-opacity-v1 g-font-weight-600 g-line-height-1 g-font-size-60 mb-4">100+</span>
              <h2 class="h2 g-color-black mb-3">Master Slider Templates</h2>
              <p class="lead mb-4">Master Slider contains everything you need to build a modern, eye catching slider for your website. Start from scratch or build upon one of many built-in starter templates, namely:</p>

              <ul class="list-unstyled g-color-black mb-4">
                <li class="g-py-10">
                  <span class="align-middle text-center g-color-blue-gradient-opacity-v1 g-font-size-25 mr-4">
                    <i class="icon-hotel-restaurant-106 u-line-icon-pro"></i>
                  </span>
                  Interactive Transitions
                </li>
                <li class="g-py-10">
                  <span class="align-middle text-center g-color-blue-gradient-opacity-v1 g-font-size-25 mr-4">
                    <i class="icon-communication-080 u-line-icon-pro"></i>
                  </span>
                  Parallax Effect
                </li>
                <li class="g-py-10">
                  <span class="align-middle text-center g-color-blue-gradient-opacity-v1 g-font-size-25 mr-4">
                    <i class="icon-real-estate-068 u-line-icon-pro"></i>
                  </span>
                  Smart Preloading and More...
                </li>
              </ul>

              <a class="btn u-btn-outline-primary g-font-weight-600 g-font-size-13 text-uppercase rounded g-px-30 g-py-15" target="_blank" href="master-slider/index.html">See All Options Now</a>
            </div>

            <div class="col-md-6 flex-md-first g-px-25 g-mb-30">
              <img class="img-fluid" src="{{ root }}assets/img-temp/1500x1040/img5.png" alt="Image Description">
            </div>
          </div>
        </section>
        <!-- End Master Slider -->

        <hr class="g-brd-gray-light-v4 my-0">

        <!-- Header Options -->
        <section class="g-py-70">
          <div class="container">
            <!-- Heading -->
            <div class="text-center mx-auto g-max-width-645 g-mb-70">
              <h2 class="g-color-primary g-font-weight-600 g-line-height-1 g-font-size-60 mb-4">85+</h2>
              <h2 class="h2 g-color-black mb-4">Headers &amp; Navigations</h2>
              <p class="lead g-color-gray-dark-v4 mb-0">Build any imaginable page with powerful header options that are available in Unify. Choose the ideal header &amp; navigations from: Left, Right &amp; Center aligned, Sidebar overlay, Sidebar push, Absolute bottom, Full Width or others.</p>
            </div>
            <!-- End Heading -->

            <div class="row">
              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img1.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--alignments-right.html">Right Aligned</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--alignments-right.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img2.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--alignments-center.html">Center Aligned</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--alignments-center.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img3.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--alignments-left.html">Left Aligned</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--alignments-left.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img4.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--full-width.html">Full Width</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--full-width.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <div class="w-100"></div>

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img5.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/sidebar--static-left-light.html">Sidebar Static - Left</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/sidebar--static-left-light.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img6.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/sidebar--static-right-light.html">Sidebar Static - Right</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/sidebar--static-right-light.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img7.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/sidebar--overlay-left-light.html">Sidebar Overlay - Left</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/sidebar--overlay-left-light.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img8.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/sidebar--overlay-right-light.html">Sidebar Overlay - Right</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/sidebar--overlay-right-light.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <div class="w-100"></div>

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img9.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/sidebar--push-left-light.html">Sidebar Push - Left</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/sidebar--push-left-light.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img10.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/sidebar--push-right-light.html">Sidebar Push - Right</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/sidebar--push-right-light.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img11.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--position-absolute-bottom.html">Bottom</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--position-absolute-bottom.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img12.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--one-page-scrolling.html">One Page Navigation</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--one-page-scrolling.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <div class="w-100"></div>

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img13.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--mobile-top.html">Header Default Top (Mobile View)</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--mobile-top.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img14.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--mobile-sidebar-push.html">Header Push Sidebar (Mobile View)</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--mobile-sidebar-push.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img15.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--mobile-sidebar-overlay.html">Header Overlay Sidebar (Mobile View)</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--mobile-sidebar-overlay.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img16.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/fullscreen--top-right.html">Full Screen - Top Right</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/fullscreen--top-right.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <div class="w-100"></div>

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img17.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/fullscreen--bottom-right.html">Full Screen - Bottom Right</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/fullscreen--bottom-right.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img18.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/fullscreen--bottom-left.html">Full Screen - Bottom Left</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/fullscreen--bottom-left.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img19.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/smart--top-right.html">Smart Navigation - Top Right</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/smart--top-right.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img20.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/smart--bottom-right.html">Smart Navigation - Bottom Right</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/smart--bottom-right.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <div class="w-100"></div>

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img21.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/smart--bottom-left.html">Smart Navigation - Bottom Left</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/smart--bottom-left.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img22.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--topbar-1.html">Topbar 1</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--topbar-1.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img23.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--topbar-2.html">Topbar 2</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--topbar-2.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img24.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--topbar-3.html">Topbar 3</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--topbar-3.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <div class="w-100"></div>

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img25.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--topbar-4.html">Topbar 4</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--topbar-4.html"></a>
                </div>
              </div>
              <!-- End Header Option -->
              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img26.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--topbar-5.html">Topbar 5</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--topbar-5.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img27.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--topbar-6.html">Topbar 6</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--topbar-6.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img28.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--topbar-7.html">Topbar 7</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--topbar-7.html"></a>
                </div>
              </div>
              <!-- End Header Option -->

              <div class="w-100"></div>

              <!-- Header Option -->
              <div class="col-6 col-md-3 g-mb-70">
                <div class="text-center u-block-hover">
                  <img class="img-fluid g-mb-30" src="{{ root }}assets/img-temp/500x350/img29.png" alt="Image Description">
                  <h3 class="h6 g-color-black g-font-weight-600 g-font-size-13 text-uppercase">
                    <a class="u-link-v5 g-color-black g-color-primary--hover" target="_blank" href="headers/classic-header--topbar-8.html">Topbar 8</a>
                  </h3>
                  <a class="u-link-v2" target="_blank" href="headers/classic-header--topbar-8.html"></a>
                </div>
              </div>
              <!-- End Header Option -->
            </div>
          </div>
        </section>
        <!-- End Header Options -->
      </section>
      <!-- End Content -->

      {% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %}

      {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
      {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
      {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
    </main>

    {% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %}

    {% include "html/assets/include/nunjucks/partials/core-js.njk" %}

    <!-- JS Implementing Plugins -->
    <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
    {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}

    {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %}

    <!-- jQuery UI Helpers -->
    <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/menu.js"></script>
    <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/mouse.js"></script>

    <!-- jQuery UI Widgets -->
    <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/autocomplete.js"></script>

    <!-- JS Unify -->
    <script src="{{ root }}assets/js/hs.core.js"></script>

    <script src="{{ root }}assets/js/components/hs.header.js"></script>
    <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
    <script src="{{ root }}assets/js/components/hs.header-side.js"></script>

    <script src="{{ root }}assets/js/components/hs.tabs.js"></script>
    <script src="{{ root }}assets/js/helpers/hs.hover-blocks.js"></script>

    <script src="{{ root }}assets/js/components/hs.autocomplete-local-search.js"></script>
    <script src="{{ root }}assets/style-switcher/vendor/cookiejs/jquery.cookie.js"></script>
    <script src="{{ root }}assets/style-switcher/vendor/cookiejs/jquery.cookie.js"></script>
    <script src="{{ root }}assets/js/helpers/hs.shortcode-filter.js"></script>

    <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

    {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}

    <!-- JS Custom -->
    <script src="{{ root }}assets/js/custom.js"></script>

    <!-- JS Plugins Init. -->
    <script>
      $(document).on('ready', function () {
        // initialization of go to
        $.HSCore.components.HSGoTo.init('.js-go-to');
      });

      $(window).on('load', function () {
        // initialization of header
        $.HSCore.components.HSHeader.init($('#js-header'));
        $.HSCore.helpers.HSHamburgers.init('.hamburger');
        $.HSCore.components.HSHeaderSide.init($('#sideNav'));

        // initialization of autocomplet
        $.HSCore.components.HSLocalSearchAutocomplete.init('#u-sidebar-navigation__search-autocomplete');

        // initialization of HSMegaMenu component
        $('.js-mega-menu').HSMegaMenu({
          event: 'hover',
          pageContainer: $('.container'),
          breakpoint: 991
        });
      });
    </script>
  </body>
</html>
