{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-cta-boxed" %}
{% set title = "Call To Action" %}

{% 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" %}

    {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-block.njk" %}

    <section>
      <!-- Call To Action #01 -->
      <section class="g-py-50">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Call To Action
              <span class="g-color-primary g-ml-5">#01</span>
            </h2>
          </div>

          <!-- Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode1">
              <div class="shortcode-html">
                <section>
                  <div class="row">
                    <div class="col-md-9 align-self-center">
                      <h3 class="h4">Contact us at
                        <a class="g-color-primary" href="mailto:support@htmlstream.com">support@htmlstream.com</a>
                        or give us a call
                        <a class="g-color-primary" href="tel:+44(35)773892"> +44 (35) 77 3892</a>
                      </h3>
                      <p class="lead g-mb-20 g-mb-0--md">Unify creative technology company providing key digital services and focused on helping our clients to build a successful business on web and mobile.</p>
                    </div>

                    <div class="col-md-3 align-self-center text-md-right">
                      <a class="btn btn-md u-btn-outline-darkgray g-brd-2 rounded-0" href="#">Purchase Now</a>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode1" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Call To Action -->

          <!-- Bordered Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode2">
              <div class="shortcode-html">
                <section class="g-brd-around g-brd-gray-light-v4 g-pa-30">
                  <div class="row">
                    <div class="col-md-9 align-self-center">
                      <h3 class="h4">Contact us at
                        <a class="g-color-primary" href="mailto:support@htmlstream.com">support@htmlstream.com</a>
                        or give us a call
                        <a class="g-color-primary" href="tel:+44(35)773892"> +44 (35) 77 3892</a>
                      </h3>
                      <p class="lead g-mb-20 g-mb-0--md">Unify creative technology company providing key digital services and focused on helping our clients to build a successful business on web and mobile.</p>
                    </div>

                    <div class="col-md-3 align-self-center text-md-right">
                      <a class="btn btn-md u-btn-primary g-brd-2 rounded-0" href="#">Purchase Now</a>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode2" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Bordered Call To Action -->

          <!-- Bordered Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode3">
              <div class="shortcode-html">
                <section class="g-brd-around g-brd-5 g-brd-gray-light-v4 g-pa-30">
                  <div class="row">
                    <div class="col-md-9 align-self-center">
                      <h3 class="h4">Contact us at
                        <a class="g-color-primary" href="mailto:support@htmlstream.com">support@htmlstream.com</a>
                        or give us a call
                        <a class="g-color-primary" href="tel:+44(35)773892"> +44 (35) 77 3892</a>
                      </h3>
                      <p class="lead g-mb-20 g-mb-0--md">Unify creative technology company providing key digital services and focused on helping our clients to build a successful business on web and mobile.</p>
                    </div>

                    <div class="col-md-3 align-self-center text-md-right">
                      <a class="btn btn-md u-btn-darkgray g-brd-2 rounded-0" href="#">Purchase Now</a>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode3" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Bordered Call To Action -->

          <!-- Light Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode4">
              <div class="shortcode-html">
                <section class="g-bg-gray-light-v5 g-pa-30">
                  <div class="row">
                    <div class="col-md-9 align-self-center">
                      <h3 class="h4">Contact us at
                        <a class="g-color-primary" href="mailto:support@htmlstream.com">support@htmlstream.com</a>
                        or give us a call
                        <a class="g-color-primary" href="tel:+44(35)773892"> +44 (35) 77 3892</a>
                      </h3>
                      <p class="lead g-mb-20 g-mb-0--md">Unify creative technology company providing key digital services and focused on helping our clients to build a successful business on web and mobile.</p>
                    </div>

                    <div class="col-md-3 align-self-center text-md-right">
                      <a class="btn btn-md u-btn-outline-primary g-brd-2 rounded-0" href="#">Purchase Now</a>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode4" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Light Call To Action -->

          <!-- Primary Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode5">
              <div class="shortcode-html">
                <section class="g-bg-primary g-color-white g-pa-30">
                  <div class="row">
                    <div class="col-md-9 align-self-center">
                      <h3 class="h4">Contact us at
                        <a class="g-color-white" href="mailto:support@htmlstream.com">support@htmlstream.com</a>
                        or give us a call
                        <a class="g-color-white" href="tel:+44(35)773892"> +44 (35) 77 3892</a>
                      </h3>
                      <p class="lead g-mb-20 g-mb-0--md">Unify creative technology company providing key digital services and focused on helping our clients to build a successful business on web and mobile.</p>
                    </div>

                    <div class="col-md-3 align-self-center text-md-right">
                      <a class="btn btn-md u-btn-outline-white g-brd-2 rounded-0" href="#">Purchase Now</a>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode5" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Primary Call To Action -->

          <!-- Dark Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode6">
              <div class="shortcode-html">
                <section class="g-bg-gray-dark-v1 g-color-white g-pa-30">
                  <div class="row">
                    <div class="col-md-9 align-self-center">
                      <h3 class="h4">Contact us at
                        <a class="g-color-primary" href="mailto:support@htmlstream.com">support@htmlstream.com</a>
                        or give us a call
                        <a class="g-color-primary" href="tel:+44(35)773892"> +44 (35) 77 3892</a>
                      </h3>
                      <p class="lead g-mb-20 g-mb-0--md">Unify creative technology company providing key digital services and focused on helping our clients to build a successful business on web and mobile.</p>
                    </div>

                    <div class="col-md-3 align-self-center text-md-right">
                      <a class="btn btn-md u-btn-primary g-brd-2 rounded-0" href="#">Purchase Now</a>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode6" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Dark Call To Action -->
        </div>
      </section>
      <!-- End Call To Action #01 -->

      <!-- Call To Action #02 -->
      <section class="g-py-50">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Call To Action
              <span class="g-color-primary g-ml-5">#02</span>
            </h2>
          </div>

          <!-- Light Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode7">
              <div class="shortcode-html">
                <section class="g-brd-around g-brd-gray-light-v4">
                  <div class="container text-center g-py-50--md g-py-20">
                    <h2 class="h2 text-uppercase g-font-weight-300">Hire Us!</h2>
                    <p class="lead g-px-100--md g-mb-20">Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.</p>
                    <a class="btn btn-md u-btn-primary rounded-0" href="#">Get in touch</a>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode7" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Light Call To Action -->

          <!-- Light Pattern Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode8">
              <div class="shortcode-html">
                <section class="dzsparallaxer auto-init height-is-based-on-content use-loading" data-options='{direction: "reverse", settings_mode_oneelement_max_offset: "150"}'>
                  <div class="divimage dzsparallaxer--target w-100 g-bg-repeat" style="height: 200%; background-image: url({{ root }}assets/img/bg/pattern4.png)"></div>

                  <div class="container text-center g-py-50--md g-py-20">
                    <h2 class="h2 text-uppercase g-font-weight-300">Hire Us!</h2>
                    <p class="lead g-px-100--md g-mb-20">Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.</p>
                    <a class="btn btn-md u-btn-primary rounded-0" href="#">Get in touch</a>
                  </div>
                </section>
              </div>

              <div class="shortcode-styles">
                <!-- CSS Implementing Plugins -->
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/dzsparallaxer.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/dzsscroller/scroller.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/advancedscroller/plugin.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.css">
              </div>

              <div class="shortcode-scripts">
                <!-- JS Implementing Plugins -->
                <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
                <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/dzsscroller/scroller.js"></script>
                <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/advancedscroller/plugin.js"></script>
              </div>
            </div>

            {% set contentTarget = "#shortcode8" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Light Pattern Call To Action -->

          <!-- Dark Pattern Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode9">
              <div class="shortcode-html">
                <section class="dzsparallaxer auto-init height-is-based-on-content use-loading" data-options='{direction: "reverse", settings_mode_oneelement_max_offset: "150"}'>
                  <div class="divimage dzsparallaxer--target w-100 g-bg-repeat" style="height: 200%; background-image: url({{ root }}assets/img/bg/pattern3.png)"></div>

                  <div class="container text-center g-color-white g-py-50--md g-py-20">
                    <h2 class="h2 text-uppercase g-font-weight-300">Hire Us!</h2>
                    <p class="lead g-px-100--md g-mb-20">Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.</p>
                    <a class="btn btn-md u-btn-primary rounded-0" href="#">Get in touch</a>
                  </div>
                </section>
              </div>

              <div class="shortcode-styles">
                <!-- CSS Implementing Plugins -->
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/dzsparallaxer.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/dzsscroller/scroller.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/dzsparallaxer/advancedscroller/plugin.css">
                <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.css">
              </div>

              <div class="shortcode-scripts">
                <!-- JS Implementing Plugins -->
                <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
                <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/dzsscroller/scroller.js"></script>
                <script type="text/plain" src="{{ root }}assets/vendor/dzsparallaxer/advancedscroller/plugin.js"></script>
              </div>
            </div>

            {% set contentTarget = "#shortcode9" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Dark Pattern Call To Action -->
        </div>
      </section>
      <!-- End Call To Action #02 -->

      <!-- Call To Action #03 -->
      <section class="g-py-50">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Call To Action
              <span class="g-color-primary g-ml-5">#03</span>
            </h2>
          </div>

          <!-- Bordered Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode10">
              <div class="shortcode-html">
                <section class="container g-brd-around g-brd-gray-light-v4 g-rounded-5 g-pa-25 g-py-50--md" style="background-image: url({{ root }}assets/img/bg/pattern5.png);">
                  <form role="form">
                    <div class="row">
                      <div class="col-md-3">
                        <label class="input-group g-brd-primary--focus g-rounded-3 g-mb-0--md">
                          <input class="form-control g-brd-right-none" type="text" placeholder="Your name">
                          <div class="input-group-append">
                            <span class="input-group-text"><i class="fa fa-user"></i></span>
                          </div>
                        </label>
                      </div>

                      <div class="col-md-3">
                        <label class="input-group g-brd-primary--focus g-rounded-3 g-mb-0--md">
                          <input class="form-control g-brd-right-none" type="email" placeholder="Your email">
                          <div class="input-group-append">
                            <span class="input-group-text"><i class="fa fa-envelope-o"></i></span>
                          </div>
                        </label>
                      </div>

                      <div class="col-md-4">
                        <select class="custom-select w-100 mr-sm-3 mb-3 mb-lg-0" id="inlineFormCustomSelect">
                          <option selected="">Choose Services...</option>
                          <option value="Service 1">Service 1</option>
                          <option value="Service 2">Service 2</option>
                          <option value="Service 3">Service 3</option>
                        </select>
                      </div>

                      <div class="col-md-2">
                        <button class="btn btn-block btn-md u-btn-primary text-uppercase g-font-size-12 g-font-weight-600 g-rounded-5" type="submit">Get now</button>
                      </div>
                    </div>
                  </form>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode10" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Bordered Call To Action -->

          <!-- Light Gray Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode11">
              <div class="shortcode-html">
                <section class="container g-bg-gray-light-v5 g-rounded-5 g-pa-25 g-py-50--md" style="background-image: url({{ root }}assets/img/bg/pattern5.png);">
                  <form role="form">
                    <div class="row">
                      <div class="col-md-3">
                        <label class="input-group g-brd-primary--focus g-rounded-3 g-mb-0--md">
                          <input class="form-control g-brd-right-none" type="text" placeholder="Your name">
                          <div class="input-group-append">
                            <span class="input-group-text g-bg-white g-color-gray"><i class="fa fa-user"></i></span>
                          </div>
                        </label>
                      </div>

                      <div class="col-md-3">
                        <label class="input-group g-brd-primary--focus g-rounded-3 g-mb-0--md">
                          <input class="form-control g-brd-right-none" type="email" placeholder="Your email">
                          <div class="input-group-append">
                            <span class="input-group-text g-bg-white g-color-gray"><i class="fa fa-envelope-o"></i></span>
                          </div>
                        </label>
                      </div>

                      <div class="col-md-4">
                        <select class="custom-select w-100 mr-sm-3 mb-3 mb-lg-0" id="inlineFormCustomSelect">
                          <option selected="">Choose Services...</option>
                          <option value="Service 1">Service 1</option>
                          <option value="Service 2">Service 2</option>
                          <option value="Service 3">Service 3</option>
                        </select>
                      </div>

                      <div class="col-md-2">
                        <button class="btn btn-block btn-md u-btn-primary text-uppercase g-font-size-12 g-font-weight-600 g-rounded-5" type="submit">Get now</button>
                      </div>
                    </div>
                  </form>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode11" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Light Gray Call To Action -->

          <!-- Dark Pattern Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode12">
              <div class="shortcode-html">
                <section class="container g-bg-gray-dark-v1 g-rounded-5 g-pa-25 g-py-50--md" style="background-image: url({{ root }}assets/img/bg/pattern5.png);">
                  <form role="form">
                    <div class="row">
                      <div class="col-md-3">
                        <label class="input-group g-rounded-3 g-mb-0--md">
                          <input class="form-control g-brd-white g-brd-right-none" type="text" placeholder="Your name">
                          <div class="input-group-append">
                            <span class="input-group-text g-bg-white g-color-gray g-brd-white"><i class="fa fa-user"></i></span>
                          </div>
                        </label>
                      </div>

                      <div class="col-md-3">
                        <label class="input-group g-rounded-3 g-mb-0--md">
                          <input class="form-control g-brd-white g-brd-right-none" type="email" placeholder="Your email">
                          <div class="input-group-append">
                            <span class="input-group-text g-bg-white g-color-gray g-brd-white"><i class="fa fa-envelope-o"></i></span>
                          </div>
                        </label>
                      </div>

                      <div class="col-md-4">
                        <select class="custom-select w-100 mr-sm-3 mb-3 mb-lg-0" id="inlineFormCustomSelect">
                          <option selected="">Choose Services...</option>
                          <option value="Service 1">Service 1</option>
                          <option value="Service 2">Service 2</option>
                          <option value="Service 3">Service 3</option>
                        </select>
                      </div>

                      <div class="col-md-2">
                        <button class="btn btn-block btn-md u-btn-white text-uppercase g-font-size-12 g-font-weight-600 g-rounded-5" type="submit">Get now</button>
                      </div>
                    </div>
                  </form>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode12" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Dark Pattern Call To Action -->

          <!-- Primary Pattern Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode13">
              <div class="shortcode-html">
                <section class="container g-bg-primary g-rounded-5 g-pa-25 g-py-50--md" style="background-image: url({{ root }}assets/img/bg/pattern5.png);">
                  <form role="form">
                    <div class="row">
                      <div class="col-md-3">
                        <label class="input-group g-rounded-3 g-mb-0--md">
                          <input class="form-control g-brd-white g-brd-right-none" type="text" placeholder="Your name">
                          <div class="input-group-append">
                            <span class="input-group-text g-bg-white g-color-gray g-brd-white"><i class="fa fa-user"></i></span>
                          </div>
                        </label>
                      </div>

                      <div class="col-md-3">
                        <label class="input-group g-rounded-3 g-mb-0--md">
                          <input class="form-control g-brd-white g-brd-right-none" type="email" placeholder="Your email">
                          <div class="input-group-append">
                            <span class="input-group-text g-bg-white g-color-gray g-brd-white"><i class="fa fa-envelope-o"></i></span>
                          </div>
                        </label>
                      </div>

                      <div class="col-md-4">
                        <select class="custom-select w-100 mr-sm-3 mb-3 mb-lg-0" id="inlineFormCustomSelect">
                          <option selected="">Choose Services...</option>
                          <option value="Service 1">Service 1</option>
                          <option value="Service 2">Service 2</option>
                          <option value="Service 3">Service 3</option>
                        </select>
                      </div>

                      <div class="col-md-2">
                        <button class="btn btn-block btn-md u-btn-white text-uppercase g-font-size-12 g-font-weight-600 g-rounded-5" type="submit">Get now</button>
                      </div>
                    </div>
                  </form>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode13" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Primary Pattern Call To Action -->
        </div>
      </section>
      <!-- End Call To Action #03 -->

      <!-- Call To Action #04 -->
      <section class="g-py-50">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Call To Action
              <span class="g-color-primary g-ml-5">#04</span>
            </h2>
          </div>

          <!-- Bordered Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode14">
              <div class="shortcode-html">
                <section class="g-brd-around g-brd-gray-light-v4 g-pa-30">
                  <div class="d-md-flex justify-content-md-center text-center">
                    <div class="align-self-md-center">
                      <p class="lead g-font-weight-400 g-mr-20--md g-mb-15 g-mb-0--md">We offer best in class service for your needs</p>
                    </div>
                    <div class="align-self-md-center">
                      <a class="btn btn-md u-btn-primary" href="#">Purchase Now</a>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode14" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Bordered Call To Action -->

          <!-- Light Gray Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode15">
              <div class="shortcode-html">
                <section class="g-bg-gray-light-v5 g-pa-30">
                  <div class="d-md-flex justify-content-md-center text-center">
                    <div class="align-self-md-center">
                      <p class="lead g-font-weight-400 g-mr-20--md g-mb-15 g-mb-0--md">We offer best in class service for your needs</p>
                    </div>
                    <div class="align-self-md-center">
                      <a class="btn btn-md u-btn-darkgray" href="#">Purchase Now</a>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode15" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Light Gray Call To Action -->

          <!-- Dark Pattern Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode16">
              <div class="shortcode-html">
                <section class="g-bg-gray-dark-v1 g-color-white g-pa-30" style="background-image: url({{ root }}assets/img/bg/pattern5.png);">
                  <div class="d-md-flex justify-content-md-center text-center">
                    <div class="align-self-md-center">
                      <p class="lead g-font-weight-400 g-mr-20--md g-mb-15 g-mb-0--md">We offer best in class service for your needs</p>
                    </div>
                    <div class="align-self-md-center">
                      <a class="btn btn-md u-btn-primary" href="#">Purchase Now</a>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode16" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Dark Pattern Call To Action -->

          <!-- Primary Pattern Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode17">
              <div class="shortcode-html">
                <section class="g-bg-primary g-color-white g-pa-30" style="background-image: url({{ root }}assets/img/bg/pattern5.png);">
                  <div class="d-md-flex justify-content-md-center text-center">
                    <div class="align-self-md-center">
                      <p class="lead g-font-weight-400 g-mr-20--md g-mb-15 g-mb-0--md">We offer best in class service for your needs</p>
                    </div>
                    <div class="align-self-md-center">
                      <a class="btn btn-md u-btn-white" href="#">Purchase Now</a>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode17" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Primary Pattern Call To Action -->
        </div>
      </section>
      <!-- End Call To Action #04 -->

      <!-- Call To Action #05 -->
      <section class="g-py-50">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Call To Action
              <span class="g-color-primary g-ml-5">#05</span>
            </h2>
          </div>

          <!-- Bordered Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode18">
              <div class="shortcode-html">
                <section class="g-brd-around g-brd-gray-light-v4 g-pa-50">
                  <div class="container">
                    <div class="row justify-content-md-around">
                      <div class="col-md-8 align-self-md-center">
                        <h2 class="text-uppercase">Order now and get
                          <span class="g-color-primary">20% off</span>
                        </h2>
                        <p class="lead g-mb-20 g-mb-0--md">Raecenas lacus magna, pretium in congue a, pharetra at lacus imperdiet luctus libero pharetra at lacus</p>
                      </div>

                      <div class="col-md-4 align-self-md-center text-md-center">
                        <a class="btn u-btn-darkgray g-py-12 g-px-30" href="#">Order Now</a>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode18" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Bordered Call To Action -->

          <!-- Gray Light Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode19">
              <div class="shortcode-html">
                <section class="g-bg-gray-light-v5 g-pa-50">
                  <div class="container">
                    <div class="row justify-content-md-around">
                      <div class="col-md-8 align-self-md-center">
                        <h2 class="text-uppercase">Order now and get
                          <span class="g-color-primary">20% off</span>
                        </h2>
                        <p class="lead g-mb-20 g-mb-0--md">Raecenas lacus magna, pretium in congue a, pharetra at lacus imperdiet luctus libero pharetra at lacus</p>
                      </div>

                      <div class="col-md-4 align-self-md-center text-md-center">
                        <a class="btn u-btn-outline-primary g-brd-2 g-py-12 g-px-30" href="#">Order Now</a>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode19" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Gray Light Call To Action -->

          <!-- Dark Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode20">
              <div class="shortcode-html">
                <section class="g-bg-gray-dark-v1 g-color-white g-pa-50">
                  <div class="container">
                    <div class="row justify-content-md-around">
                      <div class="col-md-8 align-self-md-center">
                        <h2 class="text-uppercase">Order now and get
                          <span class="g-color-primary">20% off</span>
                        </h2>
                        <p class="lead g-mb-20 g-mb-0--md">Raecenas lacus magna, pretium in congue a, pharetra at lacus imperdiet luctus libero pharetra at lacus</p>
                      </div>

                      <div class="col-md-4 align-self-md-center text-md-center">
                        <a class="btn u-btn-primary g-py-12 g-px-30" href="#">Order Now</a>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode20" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Dark Call To Action -->

          <!-- Primary Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode21">
              <div class="shortcode-html">
                <section class="g-bg-primary g-color-white g-pa-50">
                  <div class="container">
                    <div class="row justify-content-md-around">
                      <div class="col-md-8 align-self-md-center">
                        <h2 class="text-uppercase">Order now and get
                          <span class="g-color-black">20% off</span>
                        </h2>
                        <p class="lead g-mb-20 g-mb-0--md">Raecenas lacus magna, pretium in congue a, pharetra at lacus imperdiet luctus libero pharetra at lacus</p>
                      </div>

                      <div class="col-md-4 align-self-md-center text-md-center">
                        <a class="btn u-btn-black g-py-12 g-px-30" href="#">Order Now</a>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode21" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Primary Call To Action -->
        </div>
      </section>
      <!-- End Call To Action #05 -->

      <!-- Call To Action #06 -->
      <section class="g-py-50">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Call To Action
              <span class="g-color-primary g-ml-5">#06</span>
            </h2>
          </div>

          <!-- Bordered Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode22">
              <div class="shortcode-html">
                <section class="g-brd-around g-brd-gray-light-v4 g-pa-40">
                  <div class="container">
                    <div class="row">
                      <div class="col-md-8 align-self-center">
                        <h2 class="h3 text-uppercase g-font-weight-300 g-mb-20 g-mb-0--md">Subscribe to our weekly
                          <strong>newsletter</strong></h2>
                      </div>

                      <div class="col-md-4 align-self-center">
                        <div class="input-group g-brd-primary--focus">
                          <input class="form-control form-control-lg g-font-size-default rounded-0" name="email" type="email" placeholder="Enter your email...">
                          <div class="input-group-append">
                            <span class="input-group-text g-color-gray-dark-v5 rounded-0"><i class="fa fa-envelope"></i></span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode22" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Bordered Call To Action -->

          <!-- Gray Light Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode23">
              <div class="shortcode-html">
                <section class="g-bg-gray-light-v5 g-pa-40">
                  <div class="container">
                    <div class="row">
                      <div class="col-md-8 align-self-center">
                        <h2 class="h3 text-uppercase g-font-weight-300 g-mb-20 g-mb-0--md">Subscribe to our weekly
                          <strong>newsletter</strong></h2>
                      </div>

                      <div class="col-md-4 align-self-center">
                        <div class="input-group g-brd-primary--focus">
                          <input class="form-control form-control-lg g-font-size-default g-bg-transparent g-bg-transparent--focus rounded-0" name="email" type="email" placeholder="Enter your email...">
                          <div class="input-group-append">
                            <span class="input-group-text g-color-gray-dark-v5 rounded-0"><i class="fa fa-envelope"></i></span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode23" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Gray Light Call To Action -->

          <!-- Dark Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode24">
              <div class="shortcode-html">
                <section class="g-color-white g-bg-gray-dark-v1 g-pa-40">
                  <div class="container">
                    <div class="row">
                      <div class="col-md-8 align-self-center">
                        <h2 class="h3 text-uppercase g-font-weight-300 g-mb-20 g-mb-0--md">Subscribe to our weekly
                          <strong>newsletter</strong></h2>
                      </div>

                      <div class="col-md-4 align-self-center">
                        <div class="input-group g-brd-white--focus">
                          <input class="form-control form-control-lg g-font-size-default g-placeholder-white g-color-white g-bg-transparent g-bg-transparent--focus g-brd-white rounded-0" name="email" type="email" placeholder="Enter your email...">
                          <div class="input-group-append">
                            <span class="input-group-text g-color-white g-bg-transparent g-brd-white rounded-0"><i class="fa fa-envelope"></i></span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode24" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Dark Call To Action -->

          <!-- Primary Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode25">
              <div class="shortcode-html">
                <section class="g-color-white g-bg-primary g-pa-40">
                  <div class="container">
                    <div class="row">
                      <div class="col-md-8 align-self-center">
                        <h2 class="h3 text-uppercase g-font-weight-300 g-mb-20 g-mb-0--md">Subscribe to our weekly
                          <strong>newsletter</strong></h2>
                      </div>

                      <div class="col-md-4 align-self-center">
                        <div class="input-group g-brd-white--focus">
                          <input class="form-control form-control-lg g-font-size-default g-placeholder-white g-color-white g-bg-transparent g-bg-transparent--focus g-brd-white rounded-0" name="email" type="email" placeholder="Enter your email...">
                          <div class="input-group-append">
                            <span class="input-group-text g-color-white g-bg-transparent g-brd-white rounded-0"><i class="fa fa-envelope"></i></span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode25" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Primary Call To Action -->
        </div>
      </section>
      <!-- End Call To Action #06 -->

      <!-- Call To Action #07 -->
      <section class="g-py-50">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Call To Action
              <span class="g-color-primary g-ml-5">#07</span>
            </h2>
          </div>

          <!-- Bordered Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode26">
              <div class="shortcode-html">
                <section class="g-brd-around g-brd-gray-light-v4 g-pa-40">
                  <div class="container">
                    <div class="row">
                      <div class="col-lg-7 align-self-center">
                        <h2 class="h4 text-uppercase g-font-weight-300 g-mb-20 g-mb-0--lg">Subscribe to our weekly
                          <strong class="g-color-primary">newsletter</strong></h2>
                      </div>

                      <div class="col-lg-5 align-self-center">
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text g-color-gray-dark-v5 rounded-0"><i class="fa fa-envelope"></i></span>
                          </div>
                          <input class="form-control pl-0 u-form-control g-brd-left-none rounded-0 g-mr-15" type="text" placeholder="Enter your email...">
                          <div class="input-group-append">
                            <button class="btn u-btn-primary rounded-0">Subscribe</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode26" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Bordered Call To Action -->

          <!-- Gray Light Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode27">
              <div class="shortcode-html">
                <section class="g-bg-gray-light-v5 g-pa-40">
                  <div class="container">
                    <div class="row">
                      <div class="col-lg-7 align-self-center">
                        <h2 class="h4 text-uppercase g-font-weight-300 g-mb-20 g-mb-0--lg">Subscribe to our weekly
                          <strong class="g-color-primary">newsletter</strong></h2>
                      </div>

                      <div class="col-lg-5 align-self-center">
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text g-bg-white g-color-gray-dark-v5 rounded-0"><i class="fa fa-envelope"></i></span>
                          </div>
                          <input class="form-control pl-0 u-form-control g-brd-left-none rounded-0 g-mr-15" type="text" placeholder="Enter your email...">
                          <div class="input-group-append">
                            <button class="btn u-btn-primary rounded-0">Subscribe</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode27" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Gray Light Call To Action -->

          <!-- Dark Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode28">
              <div class="shortcode-html">
                <section class="g-bg-gray-dark-v1 g-color-white g-pa-40">
                  <div class="container">
                    <div class="row">
                      <div class="col-lg-7 align-self-center">
                        <h2 class="h4 text-uppercase g-font-weight-300 g-mb-20 g-mb-0--lg">Subscribe to our weekly
                          <strong class="g-color-primary">newsletter</strong></h2>
                      </div>

                      <div class="col-lg-5 align-self-center">
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text g-bg-transparent g-color-white g-brd-white rounded-0 g-brd-right-none"><i class="fa fa-envelope"></i></span>
                          </div>
                          <input class="form-control pl-0 u-form-control g-brd-left-none g-placeholder-white g-color-white g-bg-transparent g-bg-transparent--focus g-brd-white rounded-0 g-mr-15" type="text" placeholder="Enter your email...">
                          <div class="input-group-append">
                            <button class="btn u-btn-primary rounded-0">Subscribe</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode28" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Dark Call To Action -->

          <!-- Dark Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode29">
              <div class="shortcode-html">
                <section class="g-bg-primary g-color-white g-pa-40">
                  <div class="container">
                    <div class="row">
                      <div class="col-lg-7 align-self-center">
                        <h2 class="h4 text-uppercase g-font-weight-300 g-mb-20 g-mb-0--lg">Subscribe to our weekly
                          <strong class="g-color-black">newsletter</strong></h2>
                      </div>

                      <div class="col-lg-5 align-self-center">
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text g-bg-transparent g-color-white g-brd-white rounded-0 g-brd-right-none"><i class="fa fa-envelope"></i></span>
                          </div>
                          <input class="form-control pl-0 u-form-control g-brd-left-none g-placeholder-white g-color-white g-bg-transparent g-bg-transparent--focus g-brd-white rounded-0 g-mr-15" type="text" placeholder="Enter your email...">
                          <div class="input-group-append">
                            <button class="btn u-btn-black rounded-0">Subscribe</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode29" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Dark Call To Action -->
        </div>
      </section>
      <!-- End Call To Action #07 -->

      <!-- Call To Action #08 -->
      <section class="g-py-50">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Call To Action
              <span class="g-color-primary g-ml-5">#08</span>
            </h2>
          </div>

          <!-- Bordered Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode30">
              <div class="shortcode-html">
                <section class="g-brd-around g-brd-gray-light-v4 g-py-40 g-px-30">
                  <div class="container">
                    <div class="row">
                      <div class="col-lg-3 align-self-lg-center">
                        <img class="img-fluid w-100 g-mb-30 g-mb-0--lg" src="{{ root }}assets/img-temp/400x270/img3.jpg" alt="Image description">
                      </div>

                      <div class="col-lg-7 align-self-lg-center">
                        <h2 class="text-uppercase">Need to do calculations?</h2>
                        <p class="lead g-mb-20 g-mb-0--lg">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo</p>
                      </div>

                      <div class="col-lg-2 align-self-lg-center">
                        <a class="btn u-btn-primary rounded-0 g-py-12 g-px-30" href="#">Order Now</a>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode30" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Bordered Call To Action -->

          <!-- Black Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode31">
              <div class="shortcode-html">
                <section class="g-bg-gray-dark-v1 g-color-white g-py-40 g-px-30">
                  <div class="container">
                    <div class="row">
                      <div class="col-lg-3 align-self-lg-center">
                        <img class="img-fluid w-100 g-mb-30 g-mb-0--lg" src="{{ root }}assets/img-temp/400x270/img14.jpg" alt="Image description">
                      </div>

                      <div class="col-lg-7 align-self-lg-center">
                        <h2 class="text-uppercase">Need to do calculations?</h2>
                        <p class="lead g-mb-20 g-mb-0--lg">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo</p>
                      </div>

                      <div class="col-lg-2 align-self-lg-center">
                        <a class="btn u-btn-primary rounded-0 g-py-12 g-px-30" href="#">Order Now</a>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode31" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Black Call To Action -->

          <!-- Primary Call To Action -->
          <div class="g-mb-50">
            <div id="shortcode32">
              <div class="shortcode-html">
                <section class="g-bg-primary g-color-white g-py-40 g-px-30">
                  <div class="container">
                    <div class="row">
                      <div class="col-lg-3 align-self-lg-center">
                        <img class="img-fluid w-100 g-mb-30 g-mb-0--lg" src="{{ root }}assets/img-temp/400x270/img13.jpg" alt="Image description">
                      </div>

                      <div class="col-lg-7 align-self-lg-center">
                        <h2 class="text-uppercase">Need to do calculations?</h2>
                        <p class="lead g-mb-20 g-mb-0--lg">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo</p>
                      </div>

                      <div class="col-lg-2 align-self-lg-center">
                        <a class="btn u-btn-darkgray rounded-0 g-py-12 g-px-30" href="#">Order Now</a>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </div>

            {% set contentTarget = "#shortcode32" %}
            {% set modalID = "#modalMarkup" %}
            {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
          </div>
          <!-- End Primary Call To Action -->
        </div>
      </section>
      <!-- End Call To Action #08 -->
    </section>

    {% 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.autocomplete-local-search.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 plugin
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });
    });
  </script>
</body>
</html>
