{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-icons-interactive" %}
{% set title = "Icon Blocks Interactive" %}

{% 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/icon-material/material-icons.css">
<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>
      <!-- Icon Blocks v1 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#1</span>
            </h2>
          </div>

          <div id="shortcode1">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="g-bg-pink g-color-white text-center g-py-60 g-px-30">
                    <span class="u-icon-v2 g-rounded-5 g-mb-25">
                      <i class="icon-education-087 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h4 g-font-weight-600 mb-30">Clean code</h3>
                    <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="g-bg-teal g-color-white text-center g-py-60 g-px-30">
                    <span class="u-icon-v2 g-rounded-5 g-mb-25">
                      <i class="icon-education-035 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h4 g-font-weight-600 mb-30">Extensive documentation</h3>
                    <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="g-bg-purple g-color-white text-center g-py-60 g-px-30">
                    <span class="u-icon-v2 g-rounded-5 g-mb-25">
                      <i class="icon-education-141 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h4 g-font-weight-600 mb-30">Modern design</h3>
                    <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

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

      <!-- Icon Blocks v2 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#2</span>
            </h2>
          </div>

          <div id="shortcode2">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="g-bg-cyan-gradient-opacity-v1 g-color-white g-px-30 g-py-40">
                    <div class="media">
                      <div class="d-flex mr-4">
                        <span class="d-block g-font-size-25">
                          <i class="icon-communication-009 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <h3 class="h4 text-uppercase g-mb-5">Contact Us</h3>
                        <span class="d-block g-mb-10">1(123) 456 143</span>
                        <p class="g-color-white-opacity-0_8 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="g-bg-cyan-gradient-opacity-v1 g-color-white g-px-30 g-py-40">
                    <div class="media">
                      <div class="d-flex mr-4">
                        <span class="d-block g-font-size-25">
                          <i class="icon-communication-062 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <h3 class="h4 text-uppercase g-mb-5">Email Us</h3>
                        <span class="d-block g-mb-10">support@example.com</span>
                        <p class="g-color-white-opacity-0_8 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="g-bg-cyan-gradient-opacity-v1 g-color-white g-px-30 g-py-40">
                    <div class="media">
                      <div class="d-flex mr-4">
                        <span class="d-block g-font-size-25">
                          <i class="icon-communication-058 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <h3 class="h4 text-uppercase g-mb-5">Support</h3>
                        <span class="d-block g-mb-10">Technical Support</span>
                        <p class="g-color-white-opacity-0_8 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode2" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v2 -->

      <!-- Icon Blocks v3 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#3</span>
            </h2>
          </div>

          <div id="shortcode3">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-6 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="g-bg-secondary text-center g-py-60 g-px-40">
                    <span class="u-icon-v2 g-color-gray-dark-v1 g-mb-25">
                      <i class="icon-finance-009 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black g-font-weight-600 mb-30">Creative ideas</h3>
                    <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
                <div class="col-lg-6 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="g-bg-teal g-color-white text-center g-py-60 g-px-40">
                    <span class="u-icon-v2 g-mb-25">
                      <i class="icon-education-035 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-font-weight-600 mb-30">Excellent features</h3>
                    <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->

              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-6 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="g-bg-purple g-color-white text-center g-py-60 g-px-40">
                    <span class="u-icon-v2 g-mb-25">
                      <i class="icon-education-141 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-font-weight-600 mb-30">Fully responsive</h3>
                    <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
                <div class="col-lg-6 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="g-bg-pink g-color-white text-center g-py-60 g-px-40">
                    <span class="u-icon-v2 g-mb-25">
                      <i class="icon-education-087 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-font-weight-600 mb-30">Clean code</h3>
                    <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode3" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v3 -->

      <!-- Icon Blocks v4 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#4</span>
            </h2>
          </div>

          <div id="shortcode4">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-angle-v1--top-right--bg-light g-bg-pink g-color-white text-center g-rounded-5 g-py-60 g-px-30">
                    <span class="u-icon-v2 g-rounded-5 g-mb-25">
                      <i class="icon-education-087 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-font-weight-600 mb-30">Extensive documentation</h3>
                    <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-angle-v1--top-right--bg-light g-bg-teal g-color-white text-center g-rounded-5 g-py-60 g-px-30">
                    <span class="u-icon-v2 g-rounded-5 g-mb-25">
                      <i class="icon-education-035 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-font-weight-600 mb-30">Modern design</h3>
                    <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-angle-v1--top-right--bg-light g-bg-purple g-color-white text-center g-rounded-5 g-py-60 g-px-30">
                    <span class="u-icon-v2 g-rounded-5 g-mb-25">
                      <i class="icon-education-141 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-font-weight-600 mb-30">Creative ideas</h3>
                    <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->

              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-angle-v2--top-left--bg-dark g-bg-cyan-gradient-opacity-v1 g-color-white g-rounded-5 g-px-25 g-py-40">
                    <div class="media">
                      <div class="d-flex mr-4">
                        <span class="d-block g-font-size-25">
                          <i class="icon-communication-009 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <h3 class="h4 text-uppercase g-mb-5">Contact Us</h3>
                        <span class="d-block g-mb-10">1(123) 456 143</span>
                        <p class="g-color-white-opacity-0_8 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-angle-v2--top-left--bg-dark g-bg-cyan-gradient-opacity-v1 g-color-white g-rounded-5 g-px-25 g-py-40">
                    <div class="media">
                      <div class="d-flex mr-4">
                        <span class="d-block g-font-size-25">
                          <i class="icon-communication-062 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <h3 class="h4 text-uppercase g-mb-5">Email Us</h3>
                        <span class="d-block g-mb-10">support@example.com</span>
                        <p class="g-color-white-opacity-0_8 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-angle-v2--top-left--bg-dark g-bg-cyan-gradient-opacity-v1 g-color-white g-rounded-5 g-px-25 g-py-40">
                    <div class="media">
                      <div class="d-flex mr-4">
                        <span class="d-block g-font-size-25">
                          <i class="icon-communication-058 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <h3 class="h4 text-uppercase g-mb-5">Support</h3>
                        <span class="d-block g-mb-10">Technical Support</span>
                        <p class="g-color-white-opacity-0_8 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode4" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v4 -->

      <!-- Icon Blocks v5 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#5</span>
            </h2>
          </div>

          <div id="shortcode5">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="g-bg-cover g-bg-size-cover g-bg-black-opacity-0_7--after g-color-white text-center g-py-60 g-px-30" style="background: url({{ root }}assets/img-temp/500x650/img1.jpg);">
                    <div class="g-pos-rel g-z-index-1">
                      <span class="u-icon-v2 g-rounded-5 g-mb-25">
                        <i class="icon-education-141 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h4 g-font-weight-600 mb-30">Modern design</h3>
                      <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="g-bg-cover g-bg-size-cover g-bg-black-opacity-0_7--after g-color-white text-center g-py-60 g-px-30" style="background: url({{ root }}assets/img-temp/500x650/img6.jpg);">
                    <div class="g-pos-rel g-z-index-1">
                      <span class="u-icon-v2 g-rounded-5 g-mb-25">
                        <i class="icon-education-035 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h4 g-font-weight-600 mb-30">Extensive documentation</h3>
                      <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="g-bg-cover g-bg-size-cover g-bg-black-opacity-0_7--after g-color-white text-center g-py-60 g-px-30" style="background: url({{ root }}assets/img-temp/500x650/img10.jpg);">
                    <div class="g-pos-rel g-z-index-1">
                      <span class="u-icon-v2 g-rounded-5 g-mb-25">
                        <i class="icon-education-087 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h4 g-font-weight-600 mb-30">Clean code</h3>
                      <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode5" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v5 -->

      <!-- Icon Blocks v6 -->
      <section class="g-bg-img-hero u-bg-overlay g-bg-black-opacity-0_7--after g-py-100" style="background-image: url({{ root }}assets/img-temp/1920x800/img2.jpg);">
        <div class="container u-bg-overlay__inner">
          <div class="text-center g-color-white g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#6</span>
            </h2>
          </div>

          <div id="shortcode6">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-md-3 g-mb-40">
                  <!-- Icon Blocks -->
                  <div class="text-center g-color-white g-letter-spacing-1">
                    <span class="u-icon-v1 u-icon-size--xl g-mb-10">
                      <i class="icon-education-087 u-line-icon-pro"></i>
                    </span>
                    <span class="js-counter h2 d-block g-font-weight-600">265</span>
                    <h4 class="h6 text-uppercase mb-0">Coffee's Drunk</h4>
                  </div>
                  <!-- Icon Blocks -->
                </div>

                <div class="col-md-3 g-mb-40">
                  <!-- Icon Blocks -->
                  <div class="text-center g-color-white g-letter-spacing-1">
                    <span class="u-icon-v1 u-icon-size--xl g-mb-10">
                      <i class="icon-education-035 u-line-icon-pro"></i>
                    </span>
                    <span class="js-counter h2 d-block g-font-weight-600">5957</span>
                    <h4 class="h6 text-uppercase mb-0">Working Hours</h4>
                  </div>
                  <!-- Icon Blocks -->
                </div>

                <div class="col-md-3 g-mb-40">
                  <!-- Icon Blocks -->
                  <div class="text-center g-color-white g-letter-spacing-1">
                    <span class="u-icon-v1 u-icon-size--xl g-mb-10">
                      <i class="icon-education-141 u-line-icon-pro"></i>
                    </span>
                    <span class="js-counter h2 d-block g-font-weight-600">3495</span>
                    <h4 class="h6 text-uppercase mb-0">Happy Clients</h4>
                  </div>
                  <!-- Icon Blocks -->
                </div>

                <div class="col-md-3 g-mb-40">
                  <!-- Icon Blocks -->
                  <div class="text-center g-color-white g-letter-spacing-1">
                    <span class="u-icon-v1 u-icon-size--xl g-mb-10">
                      <i class="icon-finance-256 u-line-icon-pro"></i>
                    </span>
                    <span class="js-counter h2 d-block g-font-weight-600">576</span>
                    <h4 class="h6 text-uppercase mb-0">New Ideas</h4>
                  </div>
                  <!-- Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>

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

              <!-- JS Unify -->
              <script type="text/plain" src="{{ root }}assets/js/components/hs.counter.js"></script>

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode6" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v6 -->

      <!-- Icon Blocks v7 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#7</span>
            </h2>
          </div>

          <div id="shortcode7">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="h-100 u-angle-v1--top-right--bg-light g-bg-cyan-gradient-opacity-v1 g-color-white g-px-30 g-py-40">
                    <div class="media">
                      <div class="d-flex mr-4">
                        <span class="d-block g-font-size-30">
                          <i class="icon-finance-256 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <h3 class="h4 g-mb-5">What is Unify Template?</h3>
                        <p class="g-color-white-opacity-0_8 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="h-100 u-angle-v1--top-right--bg-light g-bg-cyan-gradient-opacity-v1 g-color-white g-px-30 g-py-40">
                    <div class="media">
                      <div class="d-flex mr-4">
                        <span class="d-block g-font-size-30">
                          <i class="icon-science-020 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <h3 class="h4 g-mb-5">How to Update Unify?</h3>
                        <p class="g-color-white-opacity-0_8 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="h-100 u-angle-v1--top-right--bg-light g-bg-cyan-gradient-opacity-v1 g-color-white g-px-30 g-py-40">
                    <div class="media">
                      <div class="d-flex mr-4">
                        <span class="d-block g-font-size-30">
                          <i class="icon-finance-009 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <h3 class="h4 g-mb-5">The Features of Unify?</h3>
                        <p class="g-color-white-opacity-0_8 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
                      </div>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode7" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v7 -->

      <!-- Icon Blocks v8 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#8</span>
            </h2>
          </div>

          <div id="shortcode8">
            <div class="shortcode-html">
              <!-- Icons Block -->
              <div class="row no-gutters g-bg-primary g-py-60">
                <div class="col-md-6 col-lg-3 g-brd-right--md g-brd-white-opacity-0_3">
                  <!-- Icon Blocks -->
                  <div class="text-center g-py-20">
                    <span class="u-icon-v1 u-icon-size--xl g-color-white g-mb-10">
                      <i class="icon-real-estate-027 u-line-icon-pro"></i>
                    </span>
                    <h4 class="h5 g-color-white g-font-weight-600 g-mb-5">Address</h4>
                    <span class="d-block g-color-white-opacity-0_9">61 Oxford str., London, 3DG</span>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-md-6 col-lg-3 g-brd-right--md g-brd-white-opacity-0_3">
                  <!-- Icon Blocks -->
                  <div class="text-center g-py-20">
                    <span class="u-icon-v1 u-icon-size--xl g-color-white g-mb-10">
                      <i class="icon-communication-062 u-line-icon-pro"></i>
                    </span>
                    <h4 class="h5 g-color-white g-font-weight-600 g-mb-5">Phone Number</h4>
                    <span class="d-block g-color-white-opacity-0_9">1-800-643-4500</span>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-md-6 col-lg-3 g-brd-right--md g-brd-white-opacity-0_3">
                  <!-- Icon Blocks -->
                  <div class="text-center g-py-20">
                    <span class="u-icon-v1 u-icon-size--xl g-color-white g-mb-10">
                      <i class="icon-electronics-005 u-line-icon-pro"></i>
                    </span>
                    <h4 class="h5 g-color-white g-font-weight-600 g-mb-5">Email</h4>
                    <span class="d-block g-color-white-opacity-0_9">mail@htmlstream.com</span>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-md-6 col-lg-3">
                  <!-- Icon Blocks -->
                  <div class="text-center g-py-20">
                    <span class="u-icon-v1 u-icon-size--xl g-color-white g-mb-10">
                      <i class="icon-finance-027 u-line-icon-pro"></i>
                    </span>
                    <h4 class="h5 g-color-white g-font-weight-600 g-mb-5">Toll Free</h4>
                    <span class="d-block g-color-white-opacity-0_9">@unify</span>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icons Block -->
            </div>
          </div>

          {% set contentTarget = "#shortcode8" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v8 -->

      <!-- Icon Blocks v9 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#9</span>
            </h2>
          </div>

          <div id="shortcode9">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row no-gutters">
                <div class="col-md-6 col-lg-3">
                  <!-- Icon Blocks -->
                  <div class="g-bg-primary-dark-v3 g-color-white text-center g-py-60">
                    <span class="u-icon-v1 u-icon-size--xl g-color-white g-mb-10">
                      <i class="icon-real-estate-027 u-line-icon-pro"></i>
                    </span>
                    <em class="d-block g-color-white-opacity-0_7 g-font-style-normal g-font-size-12 text-uppercase g-mb-5">Address</em>
                    <span class="d-block g-font-size-16">New York, United States</span>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-md-6 col-lg-3">
                  <!-- Icon Blocks -->
                  <div class="g-bg-primary-dark-v2 g-color-white text-center g-py-60">
                    <span class="u-icon-v1 u-icon-size--xl g-color-white g-mb-10">
                      <i class="icon-electronics-005 u-line-icon-pro"></i>
                    </span>
                    <em class="d-block g-color-white-opacity-0_7 g-font-style-normal g-font-size-12 text-uppercase g-mb-5">Phone Number</em>
                    <span class="d-block g-font-size-16">+48 555 2566 112</span>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-md-6 col-lg-3">
                  <!-- Icon Blocks -->
                  <div class="g-bg-primary-dark-v3 g-color-white text-center g-py-60">
                    <span class="u-icon-v1 u-icon-size--xl g-color-white g-mb-10">
                      <i class="icon-communication-062 u-line-icon-pro"></i>
                    </span>
                    <em class="d-block g-color-white-opacity-0_7 g-font-style-normal g-font-size-12 text-uppercase g-mb-5">Email</em>
                    <span class="d-block g-font-size-16">
                      <a href="#" class="g-color-white g-color-white--hover">info@htmlstream.com</a>
                    </span>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-md-6 col-lg-3">
                  <!-- Icon Blocks -->
                  <div class="g-bg-primary-dark-v2 g-color-white text-center g-py-60">
                    <span class="u-icon-v1 u-icon-size--xl g-color-white g-mb-10">
                      <i class="icon-communication-033 u-line-icon-pro"></i>
                    </span>
                    <em class="d-block g-color-white-opacity-0_7 g-font-style-normal g-font-size-12 text-uppercase g-mb-5">Call Free</em>
                    <span class="d-block g-font-size-16">+48 555 1258 987</span>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode9" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v9 -->

      <!-- End Icon Blocks v10 -->
      <section class="g-bg-cover g-bg-size-cover g-bg-black-opacity-0_6--after g-py-100" style="background-image: url({{ root }}assets/img-temp/1920x1080/img10.jpg);">
        <div class="container g-bg-cover__inner">
          <div class="text-center g-color-white g-mb-80">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#10</span>
            </h2>
          </div>

          <div id="shortcode10">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-80">
                  <!-- Icon Blocks -->
                  <div class="u-info-v2-2 g-color-white text-center">
                    <div class="u-info-v2-2__item g-brd-white-dark-v3 g-px-20 g-pb-30">
                      <span class="u-icon-v1 u-icon-size--2xl g-line-height-1 g-color-white g-pull-50x-up">
                        <i class="icon-transport-026 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h5 g-font-weight-600 g-mt-minus-35 g-mb-10">International Shiping</h3>
                      <p class="g-color-white-opacity-0_7 mb-0">We strive to embrace and drive change in our industry.</p>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-80">
                  <!-- Icon Blocks -->
                  <div class="u-info-v2-2 g-color-white text-center">
                    <div class="u-info-v2-2__item g-brd-white-dark-v3 g-px-20 g-pb-30">
                      <span class="u-icon-v1 u-icon-size--2xl g-line-height-1 g-color-white g-pull-50x-up">
                        <i class="icon-christmas-090 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h5 g-font-weight-600 g-mt-minus-35 g-mb-10">Fully Responsive</h3>
                      <p class="g-color-white-opacity-0_7 mb-0">We strive to embrace and drive change in our industry.</p>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-80">
                  <!-- Icon Blocks -->
                  <div class="u-info-v2-2 g-color-white text-center">
                    <div class="u-info-v2-2__item g-brd-white-dark-v3 g-px-20 g-pb-30">
                      <span class="u-icon-v1 u-icon-size--2xl g-line-height-1 g-color-white g-pull-50x-up">
                        <i class="icon-travel-044 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h5 g-font-weight-600 g-mt-minus-35 g-mb-10">Friendly Support</h3>
                      <p class="g-color-white-opacity-0_7 mb-0">We strive to embrace and drive change in our industry.</p>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->

              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-80">
                  <!-- Icon Blocks -->
                  <div class="u-info-v2-2 g-color-white text-center">
                    <div class="u-info-v2-2__item g-brd-white-dark-v3 g-px-20 g-pb-30">
                      <span class="u-icon-v1 u-icon-size--2xl g-line-height-1 g-color-white g-pull-50x-up">
                        <i class="icon-hotel-restaurant-249 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h5 g-font-weight-600 g-mt-minus-35 g-mb-10">Quick Shiping</h3>
                      <p class="g-color-white-opacity-0_7 mb-0">We strive to embrace and drive change in our industry.</p>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-80">
                  <!-- Icon Blocks -->
                  <div class="u-info-v2-2 g-color-white text-center">
                    <div class="u-info-v2-2__item g-brd-white-dark-v3 g-px-20 g-pb-30">
                      <span class="u-icon-v1 u-icon-size--2xl g-line-height-1 g-color-white g-pull-50x-up">
                        <i class="icon-hotel-restaurant-211 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h5 g-font-weight-600 g-mt-minus-35 g-mb-10">Quality protection</h3>
                      <p class="g-color-white-opacity-0_7 mb-0">We strive to embrace and drive change in our industry.</p>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-80">
                  <!-- Icon Blocks -->
                  <div class="u-info-v2-2 g-color-white text-center">
                    <div class="u-info-v2-2__item g-brd-white-dark-v3 g-px-20 g-pb-30">
                      <span class="u-icon-v1 u-icon-size--2xl g-line-height-1 g-color-white g-pull-50x-up">
                        <i class="icon-hotel-restaurant-234 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h5 g-font-weight-600 g-mt-minus-35 g-mb-10">Shiping anywhere</h3>
                      <p class="g-color-white-opacity-0_7 mb-0">We strive to embrace and drive change in our industry.</p>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode10" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v10 -->

      <!-- Icon Blocks v11 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#11</span>
            </h2>
          </div>

          <div id="shortcode11">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-6 g-px-30 g-mb-40">
                  <!-- Icon Blocks -->
                  <div class="g-bg-primary-dark-v2 g-color-white g-pos-rel g-pa-25 g-pl-70--sm">
                    <div class="g-hidden-xs-down g-absolute-centered--y g-left-0">
                      <span class="u-icon-v3 u-icon-size--xl g-bg-primary g-pull-50x-left g-brd-around g-brd-5 g-brd-primary-dark-v3 g-rounded-50x">
                        <i class="icon-education-087 u-line-icon-pro"></i>
                      </span>
                    </div>
                    <h3 class="h5 text-uppercase g-mb-10">Step 1. Analisys</h3>
                    <p class="g-color-white-opacity-0_8 mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-6 g-px-30 g-mb-40">
                  <!-- Icon Blocks -->
                  <div class="g-bg-primary-dark-v2 g-color-white g-pos-rel g-pa-25 g-pl-70--sm">
                    <div class="g-hidden-xs-down g-absolute-centered--y g-left-0">
                      <span class="u-icon-v3 u-icon-size--xl g-bg-primary g-pull-50x-left g-brd-around g-brd-5 g-brd-primary-dark-v3 g-rounded-50x">
                        <i class="icon-education-035 u-line-icon-pro"></i>
                      </span>
                    </div>
                    <h3 class="h5 text-uppercase g-mb-10">Step 2. Creative concept</h3>
                    <p class="g-color-white-opacity-0_8 mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->

              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-6 g-px-30 g-mb-40">
                  <!-- Icon Blocks -->
                  <div class="g-bg-primary-dark-v2 g-color-white g-pos-rel g-pa-25 g-pl-70--sm">
                    <div class="g-hidden-xs-down g-absolute-centered--y g-left-0">
                      <span class="u-icon-v3 u-icon-size--xl g-bg-primary g-pull-50x-left g-brd-around g-brd-5 g-brd-primary-dark-v3 g-rounded-50x">
                        <i class="icon-education-141 u-line-icon-pro"></i>
                      </span>
                    </div>
                    <h3 class="h5 text-uppercase g-mb-10">Step 3. Production</h3>
                    <p class="g-color-white-opacity-0_8 mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-6 g-px-30 g-mb-40">
                  <!-- Icon Blocks -->
                  <div class="g-bg-primary-dark-v2 g-color-white g-pos-rel g-pa-25 g-pl-70--sm">
                    <div class="g-hidden-xs-down g-absolute-centered--y g-left-0">
                      <span class="u-icon-v3 u-icon-size--xl g-bg-primary g-pull-50x-left g-brd-around g-brd-5 g-brd-primary-dark-v3 g-rounded-50x">
                        <i class="icon-finance-256 u-line-icon-pro"></i>
                      </span>
                    </div>
                    <h3 class="h5 text-uppercase g-mb-10">Step 4. Happy client</h3>
                    <p class="g-color-white-opacity-0_8 mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode11" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v11 -->

      <!-- Icon Blocks v12 -->
      <section class="g-bg-secondary">
        <div class="container g-py-100">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#12</span>
            </h2>
          </div>

          <div id="shortcode12">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-md-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v21 g-brd-around--md g-brd-gray-light-v4 text-center g-pa-10 g-px-30--lg g-py-40--lg">
                    <span class="d-block g-color-gray-dark-v4 g-font-size-40 g-mb-15">
                      <i class="icon-education-087 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black g-mb-10">Web Design &amp; Development</h3>
                    <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
                    <div class="d-inline-block g-width-40 g-brd-bottom g-brd-gray-dark-v5 g-my-15"></div>
                    <ul class="list-unstyled g-px-30 g-mb-0">
                      <li class="g-brd-bottom g-brd-gray-light-v3 g-py-10">Responsive Web Desgin</li>
                      <li class="g-brd-bottom g-brd-gray-light-v3 g-py-10">E-commerce</li>
                      <li class="g-brd-bottom g-brd-gray-light-v3 g-py-10">App &amp; Icon Design</li>
                      <li class="g-brd-bottom g-brd-gray-light-v3 g-py-10">Logo &amp; Brand Design</li>
                      <li class="g-brd-bottom g-brd-gray-light-v3 g-py-10">Mobile Development</li>
                      <li class="g-py-8">UI/UX Design</li>
                    </ul>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
                <div class="col-md-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v21 g-brd-around--md g-brd-gray-light-v4 text-center g-pa-10 g-px-30--lg g-py-40--lg">
                    <span class="d-block g-color-gray-dark-v4 g-font-size-40 g-mb-15">
                      <i class="icon-finance-009 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black g-mb-10">Marketing &amp; Cunsulting</h3>
                    <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
                    <div class="d-inline-block g-width-40 g-brd-bottom g-brd-gray-dark-v5 g-my-15"></div>
                    <ul class="list-unstyled g-px-30 g-mb-0">
                      <li class="g-brd-bottom g-brd-gray-light-v3 g-py-10">Analysis &amp; Consulting</li>
                      <li class="g-brd-bottom g-brd-gray-light-v3 g-py-10">Email Marketing</li>
                      <li class="g-brd-bottom g-brd-gray-light-v3 g-py-10">App &amp; Icon Design</li>
                      <li class="g-brd-bottom g-brd-gray-light-v3 g-py-10">Responsive Web Desgin</li>
                      <li class="g-brd-bottom g-brd-gray-light-v3 g-py-10">Social Networking</li>
                      <li class="g-py-8">Documentation</li>
                    </ul>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
                <div class="col-md-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v21 g-brd-around--md g-brd-gray-light-v4 text-center g-pa-10 g-px-30--lg g-py-40--lg">
                    <span class="d-block g-color-gray-dark-v4 g-font-size-40 g-mb-15">
                      <i class="icon-finance-256 u-line-icon-pro"></i>
                    </span>
                    <h3 class="h5 g-color-black g-mb-10">SEO &amp; Advertising</h3>
                    <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
                    <div class="d-inline-block g-width-40 g-brd-bottom g-brd-gray-dark-v5 g-my-15"></div>
                    <ul class="list-unstyled g-px-30 g-mb-0">
                      <li class="g-brd-bottom g-brd-gray-light-v3 g-py-10">Display Advertising</li>
                      <li class="g-brd-bottom g-brd-gray-light-v3 g-py-10">App &amp; Icon Design</li>
                      <li class="g-brd-bottom g-brd-gray-light-v3 g-py-10">Analysis &amp; Consulting</li>
                      <li class="g-brd-bottom g-brd-gray-light-v3 g-py-10">Google AdSense</li>
                      <li class="g-brd-bottom g-brd-gray-light-v3 g-py-10">Social Media</li>
                      <li class="g-py-8">Google/Bing Analysis</li>
                    </ul>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode12" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v12 -->

      <!-- Icon Blocks v13 -->
      <section class="g-bg-purple g-py-100">
        <div class="container">
          <div class="text-center g-color-white g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#13</span>
            </h2>
          </div>

          <div id="shortcode13">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-md-3 g-mb-40">
                  <!-- Icon Blocks -->
                  <div class="text-center g-color-white">
                    <span class="u-icon-v1 u-icon-size--xl g-color-white-opacity-0_8 g-mb-5">
                      <i class="icon-education-087 u-line-icon-pro"></i>
                    </span>
                    <span class="js-counter h2 d-block g-font-weight-600">265</span>
                    <h4 class="h6 g-font-weight-600 text-uppercase mb-30">2Coffee's Drunk</h4>
                    <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry.</p>
                  </div>
                  <!-- Icon Blocks -->
                </div>

                <div class="col-md-3 g-mb-40">
                  <!-- Icon Blocks -->
                  <div class="text-center g-color-white">
                    <span class="u-icon-v1 u-icon-size--xl g-color-white-opacity-0_8 g-mb-5">
                      <i class="icon-education-035 u-line-icon-pro"></i>
                    </span>
                    <span class="js-counter h2 d-block g-font-weight-600">5957</span>
                    <h4 class="h6 g-font-weight-600 text-uppercase mb-30">Working Hours</h4>
                    <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry.</p>
                  </div>
                  <!-- Icon Blocks -->
                </div>

                <div class="col-md-3 g-mb-40">
                  <!-- Icon Blocks -->
                  <div class="text-center g-color-white">
                    <span class="u-icon-v1 u-icon-size--xl g-color-white-opacity-0_8 g-mb-5">
                      <i class="icon-education-141 u-line-icon-pro"></i>
                    </span>
                    <span class="js-counter h2 d-block g-font-weight-600">3495</span>
                    <h4 class="h6 g-font-weight-600 text-uppercase mb-30">Happy Clients</h4>
                    <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry.</p>
                  </div>
                  <!-- Icon Blocks -->
                </div>

                <div class="col-md-3 g-mb-40">
                  <!-- Icon Blocks -->
                  <div class="text-center g-color-white">
                    <span class="u-icon-v1 u-icon-size--xl g-color-white-opacity-0_8 g-mb-5">
                      <i class="icon-finance-256 u-line-icon-pro"></i>
                    </span>
                    <span class="js-counter h2 d-block g-font-weight-600">576</span>
                    <h4 class="h6 g-font-weight-600 text-uppercase mb-30">New Ideas</h4>
                    <p class="g-color-white-opacity-0_8">We strive to embrace and drive change in our industry.</p>
                  </div>
                  <!-- Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>

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

              <!-- JS Unify -->
              <script type="text/plain" src="{{ root }}assets/js/components/hs.counter.js"></script>

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set contentTarget = "#shortcode13" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v13 -->

      <!-- Icon Blocks v14 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#14</span>
            </h2>
          </div>

          <div id="shortcode14">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row no-gutters u-shadow-v21">
                <div class="col-md-6 col-lg-3 g-bg-gray-light-v4 g-py-15 g-pa-100-30--sm">
                  <!-- Icon Blocks -->
                  <span class="h2 d-block g-color-primary">
                    <i class="icon-education-087 u-line-icon-pro"></i>
                  </span>
                  <h3 class="h3 g-line-height-1_2 g-mb-20">Exterior
                    <br>
                    Design
                  </h3>
                  <p class="g-color-gray-dark-v4 g-mb-25">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read More</a>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-md-6 col-lg-3 g-bg-secondary g-py-15 g-pa-100-30--sm">
                  <!-- Icon Blocks -->
                  <span class="d-block g-color-primary g-font-size-26">
                    <i class="icon-education-035 u-line-icon-pro"></i>
                  </span>
                  <h3 class="h3 g-line-height-1_2 g-mb-20">Interior
                    <br>
                    Design
                  </h3>
                  <p class="g-color-gray-dark-v4 g-mb-25">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read More</a>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-md-6 col-lg-3 g-bg-gray-light-v4 g-py-15 g-pa-100-30--sm">
                  <!-- Icon Blocks -->
                  <span class="h2 d-block g-color-primary">
                    <i class="icon-education-141 u-line-icon-pro"></i>
                  </span>
                  <h3 class="h3 g-line-height-1_2 g-mb-20">Project
                    <br>
                    Documentation
                  </h3>
                  <p class="g-color-gray-dark-v4 g-mb-25">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read More</a>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-md-6 col-lg-3 g-bg-secondary g-py-15 g-pa-100-30--sm">
                  <!-- Icon Blocks -->
                  <span class="d-block g-color-primary g-font-size-26">
                    <i class="icon-finance-256 u-line-icon-pro"></i>
                  </span>
                  <h3 class="h3 g-line-height-1_2 g-mb-20">Choice of
                    <br>
                    Land
                  </h3>
                  <p class="g-color-gray-dark-v4 g-mb-25">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  <a class="g-font-weight-600 g-font-size-12 g-text-underline--none--hover text-uppercase" href="#">Read More</a>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode14" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v14 -->

      <!-- Icon Blocks v15 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#15</span>
            </h2>
          </div>

          <div id="shortcode15">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <ul class="row no-gutters list-inline g-mb-0">
                <li class="col list-inline-item g-mr-0">
                  <a class="d-block u-info-v2-1__item g-bg-twitter g-color-white g-color-white--hover text-center g-pa-25" href="#">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="col list-inline-item g-mr-0">
                  <a class="d-block u-info-v2-1__item g-bg-linkedin g-color-white g-color-white--hover text-center g-pa-25" href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
                <li class="col list-inline-item g-mr-0">
                  <a class="d-block u-info-v2-1__item g-bg-facebook g-color-white g-color-white--hover text-center g-pa-25" href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="col list-inline-item g-mr-0">
                  <a class="d-block u-info-v2-1__item g-bg-instagram g-color-white g-color-white--hover text-center g-pa-25" href="#">
                    <i class="fa fa-instagram"></i>
                  </a>
                </li>
                <li class="col list-inline-item">
                  <a class="d-block u-info-v2-1__item g-bg-google-plus g-color-white g-color-white--hover text-center g-pa-25" href="#">
                    <i class="fa fa-google-plus"></i>
                  </a>
                </li>
              </ul>
              <!-- End Icon Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode15" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v15 -->

      <!-- Icon Blocks v16 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#16</span>
            </h2>
          </div>

          <div id="shortcode16">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <ul class="row no-gutters list-inline g-mb-0">
                <li class="col list-inline-item g-mr-0">
                  <a class="d-block g-bg-primary-dark-v1 g-color-white-opacity-0_8 g-bg-primary--hover g-color-white--hover g-font-size-20 text-center g-pa-15" href="#">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="col list-inline-item g-mr-0">
                  <a class="d-block g-bg-primary-dark-v2 g-color-white-opacity-0_8 g-bg-primary--hover g-color-white--hover g-font-size-20 text-center g-pa-15" href="#">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
                <li class="col list-inline-item g-mr-0">
                  <a class="d-block g-bg-primary-dark-v1 g-color-white-opacity-0_8 g-bg-primary--hover g-color-white--hover g-font-size-20 text-center g-pa-15" href="#">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="col list-inline-item g-mr-0">
                  <a class="d-block g-bg-primary-dark-v2 g-color-white-opacity-0_8 g-bg-primary--hover g-color-white--hover g-font-size-20 text-center g-pa-15" href="#">
                    <i class="fa fa-instagram"></i>
                  </a>
                </li>
                <li class="col list-inline-item">
                  <a class="d-block g-bg-primary-dark-v1 g-color-white-opacity-0_8 g-bg-primary--hover g-color-white--hover g-font-size-20 text-center g-pa-15" href="#">
                    <i class="fa fa-google-plus"></i>
                  </a>
                </li>
              </ul>
              <!-- End Icon Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode16" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v16 -->

      <!-- Icon Blocks v17 -->
      <section class="g-bg-black g-py-100">
        <div class="container">
          <div class="text-center g-color-white g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#17</span>
            </h2>
          </div>

          <div id="shortcode17">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="media g-color-white g-mb-15">
                    <div class="d-flex mr-4">
                      <span class="g-font-size-30">
                        <i class="icon-education-087 u-line-icon-pro"></i>
                      </span>
                    </div>
                    <div class="media-body">
                      <h3 class="h5 mb-20">Creative ideas</h3>
                      <p class="g-color-white-opacity-0_8 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="media g-color-white g-mb-15">
                    <div class="d-flex mr-4">
                      <span class="g-font-size-30">
                        <i class="icon-education-035 u-line-icon-pro"></i>
                      </span>
                    </div>
                    <div class="media-body">
                      <h3 class="h5 mb-20">Excellent features</h3>
                      <p class="g-color-white-opacity-0_8 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="col-lg-4 g-mb-30">
                  <!-- Icon Blocks -->
                  <div class="media g-color-white g-mb-15">
                    <div class="d-flex mr-4">
                      <span class="g-font-size-30">
                        <i class="icon-education-141 u-line-icon-pro"></i>
                      </span>
                    </div>
                    <div class="media-body">
                      <h3 class="h5 mb-20">Fully responsive</h3>
                      <p class="g-color-white-opacity-0_8 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                    </div>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode17" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v17 -->

      <!-- Icon Blocks v18 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#18</span>
            </h2>
          </div>

          <div id="shortcode18">
            <div class="shortcode-html">
              <div class="row justify-content-center g-mb-20">
                <div class="col-md-6 col-lg-4 g-mb-50">
                  <!-- Services -->
                  <div class="u-shadow-v28 g-bg-white text-left text-md-center rounded g-py-40">
                    <!-- Services - Header -->
                    <header class="text-center g-px-30 mb-5">
                      <div class="g-mb-25">
                        <span class="u-icon-v2 u-icon-size--md g-brd-gray-light-v4 g-color-primary rounded-circle">
                          <i class="icon-finance-211 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <h2 class="h5 g-font-weight-600">Marketing &amp; Consulting</h2>
                      <p class="g-font-size-13">This is where we sit down, grab a cup of coffee and dial in the details.</p>
                    </header>
                    <!-- End Services - Header -->

                    <!-- Services - List -->
                    <ul class="list-unstyled mb-0">
                      <li class="d-flex align-items-center g-px-35 g-py-15">
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#72c02c"/>
                        </svg>
                        <span class="g-color-gray-dark-v5 ml-3">24/7 support</span>
                      </li>
                      <li class="d-flex align-items-center u-shadow-v19 g-bg-secondary g-px-35 g-py-15">
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#72c02c"/>
                        </svg>
                        <span class="g-color-gray-dark-v5 ml-3">1610+ elements</span>
                      </li>
                      <li class="d-flex align-items-center g-px-35 g-py-15">
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#72c02c"/>
                        </svg>
                        <span class="g-color-gray-dark-v5 ml-3">400+ pages</span>
                      </li>
                      <li class="d-flex align-items-center u-shadow-v19 g-bg-secondary g-px-35 g-py-15">
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#72c02c"/>
                        </svg>
                        <span class="g-color-gray-dark-v5 ml-3">Unlimited domain or user</span>
                      </li>
                    </ul>
                    <!-- End Services - List -->
                  </div>
                  <!-- End Services -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-50">
                  <!-- Services -->
                  <div class="u-shadow-v29 g-bg-primary text-left text-md-center rounded g-py-40">
                    <!-- Services - Header -->
                    <header class="text-center g-px-35 mb-5">
                      <div class="g-mb-25">
                        <span class="u-icon-v3 u-icon-size--md g-color-gray-dark-v5 g-bg-secondary rounded-circle">
                          <i class="icon-finance-257 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <h2 class="h5 g-color-white g-font-weight-600">SEO &amp; Advertising</h2>
                      <p class="g-color-white-opacity-0_9 g-font-size-13">Now that we've aligned the details, it's time to get things organized.</p>
                    </header>
                    <!-- End Services - Header -->

                    <!-- Services - List -->
                    <ul class="list-unstyled g-color-white-opacity-0_8 mb-0">
                      <li class="d-flex align-items-center g-px-35 g-py-15">
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/>
                        </svg>
                        <span class="ml-3">24/7 support</span>
                      </li>
                      <li class="d-flex align-items-center u-shadow-v19 g-bg-white-opacity-0_1 g-px-35 g-py-15">
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/>
                        </svg>
                        <span class="ml-3">1610+ elements</span>
                      </li>
                      <li class="d-flex align-items-center g-px-35 g-py-15">
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/>
                        </svg>
                        <span class="ml-3">400+ pages</span>
                      </li>
                      <li class="d-flex align-items-center u-shadow-v19 g-bg-white-opacity-0_1 g-px-35 g-py-15">
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#fff"/>
                        </svg>
                        <span class="ml-3">Unlimited domain or user</span>
                      </li>
                    </ul>
                    <!-- End Services - List -->
                  </div>
                  <!-- End Services -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-50">
                  <!-- Services -->
                  <div class="u-shadow-v28 g-bg-white text-left text-md-center rounded g-py-40">
                    <!-- Services - Header -->
                    <header class="text-center g-px-35 mb-5">
                      <div class="g-mb-25">
                        <span class="u-icon-v2 u-icon-size--md g-brd-gray-light-v4 g-color-primary rounded-circle">
                          <i class="icon-communication-164 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <h2 class="h5 g-font-weight-600">Design &amp; Development</h2>
                      <p class="g-font-size-13">This is where we begin to visualize your sketches and make them into beautiful pixels.</p>
                    </header>
                    <!-- End Services - Header -->

                    <!-- Services - List -->
                    <ul class="list-unstyled mb-0">
                      <li class="d-flex align-items-center g-px-35 g-py-15">
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#72c02c"/>
                        </svg>
                        <span class="g-color-gray-dark-v5 ml-3">24/7 support</span>
                      </li>
                      <li class="d-flex align-items-center u-shadow-v19 g-bg-secondary g-px-35 g-py-15">
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#72c02c"/>
                        </svg>
                        <span class="g-color-gray-dark-v5 ml-3">1610+ elements</span>
                      </li>
                      <li class="d-flex align-items-center g-px-35 g-py-15">
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#72c02c"/>
                        </svg>
                        <span class="g-color-gray-dark-v5 ml-3">400+ pages</span>
                      </li>
                      <li class="d-flex align-items-center u-shadow-v19 g-bg-secondary g-px-35 g-py-15">
                        <svg width="13" height="13" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                          <path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#72c02c"/>
                        </svg>
                        <span class="g-color-gray-dark-v5 ml-3">Unlimited domain or user</span>
                      </li>
                    </ul>
                    <!-- End Services - List -->
                  </div>
                  <!-- End Services -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode18" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v18 -->

      <!-- Icon Blocks v19 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#19</span>
            </h2>
          </div>

          <div id="shortcode19">
            <div class="shortcode-html">
              <!-- Icon Blocks -->
              <div class="row">
                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Icon Block -->
                  <article class="u-block-hover u-shadow-v29--hover g-bg-black--hover rounded g-pa-35">
                    <div class="d-flex align-items-center g-brd-bottom g-brd-2 g-brd-primary g-pb-20 g-mb-20">
                      <span class="align-middle u-icon-v3 u-icon-size--xs g-color-white g-bg-primary rounded-circle mr-2">
                        <i class="icon-education-102 u-line-icon-pro"></i>
                      </span>
                      <h3 class="d-inline-block g-color-white--hover g-font-weight-600 g-transition-0_3 mb-0">Branding</h3>
                    </div>

                    <span class="d-block g-color-primary--hover g-font-weight-600 g-font-size-12 text-uppercase g-transition-0_3 mb-2">The core branding</span>
                    <div class="mb-4">
                      <p class="g-color-white--hover g-transition-0_3">Understanding who you are and what you want is our strategy for your brand. We are always figuring out ways to capture your vision, so people can get on board.</p>
                    </div>

                    <span class="u-link-v6 g-color-primary g-color-primary--hover g-font-size-12 text-uppercase g-text-underline--none--hover g-transition-0_3">
                      Read More
                      <span class="u-link-v6-arrow g-font-size-18">&rightarrow;</span>
                    </span>

                    <a class="u-link-v2" href="#"></a>
                  </article>
                  <!-- End Icon Block -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Icon Block -->
                  <article class="u-block-hover u-shadow-v29--hover g-bg-black--hover rounded g-pa-35">
                    <div class="d-flex align-items-center g-brd-bottom g-brd-2 g-brd-primary g-pb-20 g-mb-20">
                      <span class="align-middle u-icon-v3 u-icon-size--xs g-color-white g-bg-primary rounded-circle mr-2">
                        <i class="icon-education-096 u-line-icon-pro"></i>
                      </span>
                      <h3 class="d-inline-block g-color-white--hover g-font-weight-600 g-transition-0_3 mb-0">Design</h3>
                    </div>

                    <span class="d-block g-color-primary--hover g-font-weight-600 g-font-size-12 text-uppercase g-transition-0_3 mb-2">The core design</span>
                    <div class="mb-4">
                      <p class="g-color-white--hover g-transition-0_3">Whether it's branding, print, UI + UX we've got you covered. We strive to figure out the right solutions for your look to stand out amongst the rest.</p>
                    </div>

                    <span class="u-link-v6 g-color-primary g-color-primary--hover g-font-size-12 text-uppercase g-text-underline--none--hover g-transition-0_3">
                      Read More
                      <span class="u-link-v6-arrow g-font-size-18">&rightarrow;</span>
                    </span>

                    <a class="u-link-v2" href="#"></a>
                  </article>
                  <!-- End Icon Block -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Icon Block -->
                  <article class="u-block-hover u-shadow-v29--hover g-bg-black--hover rounded g-pa-35">
                    <div class="d-flex align-items-center g-brd-bottom g-brd-2 g-brd-primary g-pb-20 g-mb-20">
                      <span class="align-middle u-icon-v3 u-icon-size--xs g-color-white g-bg-primary rounded-circle mr-2">
                        <i class="icon-education-121 u-line-icon-pro"></i>
                      </span>
                      <h3 class="d-inline-block g-color-white--hover g-font-weight-600 g-transition-0_3 mb-0">Development</h3>
                    </div>

                    <span class="d-block g-color-primary--hover g-font-weight-600 g-font-size-12 text-uppercase g-transition-0_3 mb-2">The core development</span>
                    <div class="mb-4">
                      <p class="g-color-white--hover g-transition-0_3">We've got your front end and back end needs covered. We're always looking for strategies to make your brand's needs fit with today's development languages.</p>
                    </div>

                    <span class="u-link-v6 g-color-primary g-color-primary--hover g-font-size-12 text-uppercase g-text-underline--none--hover g-transition-0_3">
                      Read More
                      <span class="u-link-v6-arrow g-font-size-18">&rightarrow;</span>
                    </span>

                    <a class="u-link-v2" href="#"></a>
                  </article>
                  <!-- End Icon Block -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Icon Block -->
                  <article class="u-block-hover u-shadow-v29--hover g-bg-black--hover rounded g-pa-35">
                    <div class="d-flex align-items-center g-brd-bottom g-brd-2 g-brd-primary g-pb-20 g-mb-20">
                      <span class="align-middle u-icon-v3 u-icon-size--xs g-color-white g-bg-primary rounded-circle mr-2">
                        <i class="icon-media-007 u-line-icon-pro"></i>
                      </span>
                      <h3 class="d-inline-block g-color-white--hover g-font-weight-600 g-transition-0_3 mb-0">Photography</h3>
                    </div>

                    <span class="d-block g-color-primary--hover g-font-weight-600 g-font-size-12 text-uppercase g-transition-0_3 mb-2">The core photography</span>
                    <div class="mb-4">
                      <p class="g-color-white--hover g-transition-0_3">Yep, say cheese. Finding ways to help tell your story through photography is a powerful tool to make your branded content stand out from the rest.</p>
                    </div>

                    <span class="u-link-v6 g-color-primary g-color-primary--hover g-font-size-12 text-uppercase g-text-underline--none--hover g-transition-0_3">
                      Read More
                      <span class="u-link-v6-arrow g-font-size-18">&rightarrow;</span>
                    </span>

                    <a class="u-link-v2" href="#"></a>
                  </article>
                  <!-- End Icon Block -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Icon Block -->
                  <article class="u-block-hover u-shadow-v29--hover g-bg-black--hover rounded g-pa-35">
                    <div class="d-flex align-items-center g-brd-bottom g-brd-2 g-brd-primary g-pb-20 g-mb-20">
                      <span class="align-middle u-icon-v3 u-icon-size--xs g-color-white g-bg-primary rounded-circle mr-2">
                        <i class="icon-media-008 u-line-icon-pro"></i>
                      </span>
                      <h3 class="d-inline-block g-color-white--hover g-font-weight-600 g-transition-0_3 mb-0">Videography</h3>
                    </div>

                    <span class="d-block g-color-primary--hover g-font-weight-600 g-font-size-12 text-uppercase g-transition-0_3 mb-2">The core videography</span>
                    <div class="mb-4">
                      <p class="g-color-white--hover g-transition-0_3">And action! Finding ways to help tell your story through video is a powerful tool to make your branded content stand out from the rest.</p>
                    </div>

                    <span class="u-link-v6 g-color-primary g-color-primary--hover g-font-size-12 text-uppercase g-text-underline--none--hover g-transition-0_3">
                      Read More
                      <span class="u-link-v6-arrow g-font-size-18">&rightarrow;</span>
                    </span>

                    <a class="u-link-v2" href="#"></a>
                  </article>
                  <!-- End Icon Block -->
                </div>

                <div class="col-md-6 col-lg-4 g-mb-30">
                  <!-- Icon Block -->
                  <article class="u-block-hover u-shadow-v29--hover g-bg-black--hover rounded g-pa-35">
                    <div class="d-flex align-items-center g-brd-bottom g-brd-2 g-brd-primary g-pb-20 g-mb-20">
                      <span class="align-middle u-icon-v3 u-icon-size--xs g-color-white g-bg-primary rounded-circle mr-2">
                        <i class="icon-media-107 u-line-icon-pro"></i>
                      </span>
                      <h3 class="d-inline-block g-color-white--hover g-font-weight-600 g-transition-0_3 mb-0">Social Strategy</h3>
                    </div>

                    <span class="d-block g-color-primary--hover g-font-weight-600 g-font-size-12 text-uppercase g-transition-0_3 mb-2">The core social strategy</span>
                    <div class="mb-4">
                      <p class="g-color-white--hover g-transition-0_3">This a powerful outlet that constantly gets overlooked. We strive to figure out ways to help your audience grow through all social platforms.</p>
                    </div>

                    <span class="u-link-v6 g-color-primary g-color-primary--hover g-font-size-12 text-uppercase g-text-underline--none--hover g-transition-0_3">
                      Read More
                      <span class="u-link-v6-arrow g-font-size-18">&rightarrow;</span>
                    </span>

                    <a class="u-link-v2" href="#"></a>
                  </article>
                  <!-- End Icon Block -->
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>

          {% set contentTarget = "#shortcode19" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v19 -->

      <!-- Icon Blocks v20 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#20</span>
            </h2>
          </div>

          <div id="shortcode20">
            <div class="shortcode-html">
              <div class="row g-mb-30">
                <div class="col-6 col-lg-4 g-mb-30">
                  <!-- Careers - Article -->
                  <article class="g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-pos-rel rounded">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/450x300/img7.jpg" alt="Image Description">
                    <div class="w-100 text-center g-absolute-centered--y">
                      <h3 class="g-font-size-20">Business</h3>
                      <span class="d-block g-color-gray-dark-v5">34 Open Positions</span>
                    </div>
                    <a class="u-link-v2" href="#"></a>
                  </article>
                  <!-- End Careers - Article -->
                </div>

                <div class="col-6 col-lg-4 g-mb-30">
                  <!-- Careers - Article -->
                  <article class="g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-pos-rel rounded">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/450x300/img8.jpg" alt="Image Description">
                    <div class="w-100 text-center g-absolute-centered--y">
                      <h3 class="g-font-size-20">Communications</h3>
                      <span class="d-block g-color-gray-dark-v5">2 Open Positions</span>
                    </div>
                    <a class="u-link-v2" href="#"></a>
                  </article>
                  <!-- End Careers - Article -->
                </div>

                <div class="col-6 col-lg-4 g-mb-30">
                  <!-- Careers - Article -->
                  <article class="g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-pos-rel rounded">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/450x300/img3.jpg" alt="Image Description">
                    <div class="w-100 text-center g-absolute-centered--y">
                      <h3 class="g-font-size-20">Counsel</h3>
                      <span class="d-block g-color-gray-dark-v5">7 Open Positions</span>
                    </div>
                    <a class="u-link-v2" href="#"></a>
                  </article>
                  <!-- End Careers - Article -->
                </div>

                <div class="col-6 col-lg-4 g-mb-30">
                  <!-- Careers - Article -->
                  <article class="g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-pos-rel rounded">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/450x300/img4.jpg" alt="Image Description">
                    <div class="w-100 text-center g-absolute-centered--y">
                      <h3 class="g-font-size-20">Marketer</h3>
                      <span class="d-block g-color-gray-dark-v5">19 Open Positions</span>
                    </div>
                    <a class="u-link-v2" href="#"></a>
                  </article>
                  <!-- End Careers - Article -->
                </div>

                <div class="col-6 col-lg-4 g-mb-30">
                  <!-- Careers - Article -->
                  <article class="g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-pos-rel rounded">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/450x300/img5.jpg" alt="Image Description">
                    <div class="w-100 text-center g-absolute-centered--y">
                      <h3 class="g-font-size-20">Data</h3>
                      <span class="d-block g-color-gray-dark-v5">1 Open Positions</span>
                    </div>
                    <a class="u-link-v2" href="#"></a>
                  </article>
                  <!-- End Careers - Article -->
                </div>

                <div class="col-6 col-lg-4 g-mb-30">
                  <!-- Careers - Article -->
                  <article class="g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-pos-rel rounded">
                    <img class="img-fluid w-100" src="{{ root }}assets/img-temp/450x300/img6.jpg" alt="Image Description">
                    <div class="w-100 text-center g-absolute-centered--y">
                      <h3 class="g-font-size-20">Support</h3>
                      <span class="d-block g-color-gray-dark-v5">8 Open Positions</span>
                    </div>
                    <a class="u-link-v2" href="#"></a>
                  </article>
                  <!-- End Careers - Article -->
                </div>
              </div>
            </div>
          </div>

          {% set contentTarget = "#shortcode20" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v20 -->

      <!-- Icon Blocks v21 -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <div class="text-center g-mb-50">
            <h2 class="h4">Icon Blocks
              <span class="g-color-primary g-ml-5">#21</span>
            </h2>
          </div>

          <div id="shortcode21">
            <div class="shortcode-html">
              <ul class="row no-gutters list-inline g-brd-y g-brd-gray-light-v3 g-px-0 mb-0">
                <!-- Category - List -->
                <li class="col-6 col-lg-3 list-inline-item u-block-hover g-brd-x g-brd-bottom g-brd-bottom-none--lg g-brd-gray-light-v3 g-mr-0">
                  <a class="d-block g-bg-primary--hover g-text-underline--none--hover g-transition-0_3 g-px-50 g-pt-100 g-pb-50" href="#">
                    <span class="d-inline-block g-color-gray-dark-v5 g-color-white-opacity-0_7--hover g-font-size-40 mb-2">
                      <i class="icon-real-estate-077 u-line-icon-pro"></i>
                    </span>
                    <span class="d-block g-color-black g-color-white--hover g-font-weight-500 g-font-size-22">New Buildings</span>
                    <span class="d-block g-color-gray-dark-v5 g-color-white--hover g-color-white-opacity-0_7--hover g-mb-70">in London</span>
                    <span class="d-block g-color-black g-color-white--hover g-font-size-13">View More</span>
                  </a>
                </li>
                <!-- End Category - List -->

                <!-- Category - List -->
                <li class="col-6 col-lg-3 list-inline-item u-block-hover g-brd-right g-brd-bottom g-brd-none--lg g-brd-gray-light-v3 g-mr-0">
                  <a class="d-block g-bg-primary--hover g-text-underline--none--hover g-transition-0_3 g-px-50 g-pt-100 g-pb-50" href="#">
                    <span class="d-inline-block g-color-gray-dark-v5 g-color-white-opacity-0_7--hover g-font-size-40 mb-2">
                      <i class="icon-real-estate-050 u-line-icon-pro"></i>
                    </span>
                    <span class="d-block g-color-black g-color-white--hover g-font-weight-500 g-font-size-22">To New Comers</span>
                    <span class="d-block g-color-gray-dark-v5 g-color-white--hover g-color-white-opacity-0_7--hover g-mb-70">in Neighborhood</span>
                    <span class="d-block g-color-black g-color-white--hover g-font-size-13">View More</span>
                  </a>
                </li>
                <!-- End Category - List -->

                <!-- Category - List -->
                <li class="col-6 col-lg-3 list-inline-item u-block-hover g-brd-x g-brd-gray-light-v3 g-mr-0">
                  <a class="d-block g-bg-primary--hover g-text-underline--none--hover g-transition-0_3 g-px-50 g-pt-100 g-pb-50" href="#">
                    <span class="d-inline-block g-color-gray-dark-v5 g-color-white-opacity-0_7--hover g-font-size-40 mb-2">
                      <i class="icon-real-estate-070 u-line-icon-pro"></i>
                    </span>
                    <span class="d-block g-color-black g-color-white--hover g-font-weight-500 g-font-size-22">Cottages</span>
                    <span class="d-block g-color-gray-dark-v5 g-color-white--hover g-color-white-opacity-0_7--hover g-mb-70">in Countryside</span>
                    <span class="d-block g-color-black g-color-white--hover g-font-size-13">View More</span>
                  </a>
                </li>
                <!-- End Category - List -->

                <!-- Category - List -->
                <li class="col-6 col-lg-3 list-inline-item u-block-hover g-brd-right g-brd-gray-light-v3 g-mr-0">
                  <a class="d-block g-bg-primary--hover g-text-underline--none--hover g-transition-0_3 g-px-50 g-pt-100 g-pb-50" href="#">
                    <span class="d-inline-block g-color-gray-dark-v5 g-color-white-opacity-0_7--hover g-font-size-40 mb-2">
                      <i class="icon-real-estate-022 u-line-icon-pro"></i>
                    </span>
                    <span class="d-block g-color-black g-color-white--hover g-font-weight-500 g-font-size-22">To Owners</span>
                    <span class="d-block g-color-gray-dark-v5 g-color-white--hover g-color-white-opacity-0_7--hover g-mb-70">of Properties</span>
                    <span class="d-block g-color-black g-color-white--hover g-font-size-13">View More</span>
                  </a>
                </li>
                <!-- End Category - List -->
              </ul>
            </div>
          </div>

          {% set contentTarget = "#shortcode21" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v21 -->

      <!-- Icon Blocks v22 -->
      <section class="g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Icon Blocks
            <span class="g-color-primary g-ml-5">#22</span>
          </h2>
        </div>

        <div id="shortcode22">
          <div class="shortcode-html">
            <!-- Icon Blocks -->
            <div id="student-life" class="g-bg-img-hero" style="background-image: url(../../assets/include/svg/svg-bg4.svg);">
              <div class="container g-pt-100 g-pb-70">
                <div class="row">
                  <div class="col-lg-6 g-mb-30">
                    <!-- Media -->
                    <div class="media u-block-hover u-shadow-v34 g-bg-white rounded g-overflow-hidden g-px-40 g-py-50">
                      <div class="d-flex g-mr-30">
                        <span class="u-icon-v1 u-icon-size--xl g-color-black g-color-primary--hover g-bg-secondary rounded-circle">
                          <i class="g-font-size-45 material-icons">business</i>
                        </span>
                      </div>
                      <div class="media-body">
                        <h3 class="h4 g-color-black g-color-primary--hover g-font-primary">Uni isn't just about study <i class="g-font-size-16 mr-2 material-icons">arrow_forward</i></h3>
                        <p class="mb-0">Our campuses play host to a range of entertainment and events throughout the year. From weekly pub trivia to live music festivals.</p>
                      </div>
                      <a class="u-link-v2 g-z-index-2" href="#"></a>
                    </div>
                    <!-- End Media -->
                  </div>

                  <div class="col-lg-6 g-mb-30">
                    <!-- Media -->
                    <div class="media u-block-hover u-shadow-v34 g-bg-white rounded g-overflow-hidden g-px-40 g-py-50">
                      <div class="d-flex g-mr-30">
                        <span class="u-icon-v1 u-icon-size--xl g-color-black g-color-primary--hover g-bg-secondary rounded-circle">
                          <i class="g-font-size-45 material-icons">beach_access</i>
                        </span>
                      </div>
                      <div class="media-body">
                        <h3 class="h4 g-color-black g-color-primary--hover g-font-primary">Housing options <i class="g-font-size-16 mr-2 material-icons">arrow_forward</i></h3>
                        <p class="mb-0">If you're studying at Unify in September 2017, join our fantastic residence community and take advantage of everything Unify has to offer.</p>
                      </div>
                      <a class="u-link-v2 g-z-index-2" href="#"></a>
                    </div>
                    <!-- End Media -->
                  </div>
                </div>
              </div>
            </div>
            <!-- End Icon Blocks -->
          </div>
        </div>

        <div class="container">
          {% set contentTarget = "#shortcode22" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v22 -->

      <!-- Icon Blocks v23 -->
      <section class="g-bg-secondary g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Icon Blocks
            <span class="g-color-primary g-ml-5">#23</span>
          </h2>
        </div>

        <div id="shortcode23">
          <div class="shortcode-html">
            <!-- Campus Info -->
            <div class="container">
              <div class="row align-items-center">
                <div class="col-sm-4 g-mb-50">
                  <!-- Icon Block -->
                  <a class="d-block u-block-hover u-shadow-v39 g-brd-around g-brd-teal g-bg-teal--hover text-center rounded g-text-underline--none--hover g-transition-0_2 g-px-30 g-py-80" href="#">
                    <span class="u-icon-v1 u-icon-size--lg g-color-teal g-color-white--hover g-transition-0_2">
                      <i class="icon-real-estate-027 u-line-icon-pro"></i>
                    </span>
                    <span class="h5 d-block g-color-teal g-color-white--hover g-transition-0_2">Finding your way</span>
                  </a>
                  <!-- End Icon Block -->
                </div>

                <div class="col-sm-4 g-mb-50">
                  <!-- Icon Block -->
                  <a class="d-block u-block-hover u-shadow-v39 g-brd-around g-brd-blue g-bg-blue--hover text-center rounded g-text-underline--none--hover g-transition-0_2 g-px-30 g-py-80" href="#">
                    <span class="u-icon-v1 u-icon-size--lg g-color-blue g-color-white--hover g-transition-0_2">
                      <i class="icon-real-estate-066 u-line-icon-pro"></i>
                    </span>
                    <span class="h5 d-block g-color-blue g-color-white--hover g-transition-0_2">Campus accessibility</span>
                  </a>
                  <!-- End Icon Block -->
                </div>

                <div class="col-sm-4 g-mb-50">
                  <!-- Icon Block -->
                  <a class="d-block u-block-hover u-shadow-v39 g-brd-around g-brd-purple g-bg-purple--hover text-center rounded g-text-underline--none--hover g-transition-0_2 g-px-30 g-py-80" href="#">
                    <span class="u-icon-v1 u-icon-size--lg g-color-purple g-color-white--hover g-transition-0_2">
                      <i class="icon-real-estate-015 u-line-icon-pro"></i>
                    </span>
                    <span class="h5 d-block g-color-purple g-color-white--hover g-transition-0_2">Housing information</span>
                  </a>
                  <!-- End Icon Block -->
                </div>
              </div>
            </div>
            <!-- End Campus Info -->
          </div>
        </div>

        <div class="container">
          {% set contentTarget = "#shortcode23" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Icon Blocks v23 -->
    </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/appear.js"></script>
  <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.counter.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');

      // initialization of counters
      var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
    });

    $(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>
