{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-counters" %}
{% set title = "Counters" %}

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

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

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

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

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

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

    <section>
      <!-- Counter #01 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#01</span>
            </h2>
          </div>

          <div id="shortcode1">
            <div class="shortcode-html">
              <div class="row text-center text-uppercase">
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">52147</div>
                  <h4 class="h5 g-color-gray-dark-v4">Code Lines</h4>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">24583</div>
                  <h4 class="h5 g-color-gray-dark-v4">Projects</h4>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">7348</div>
                  <h4 class="h5 g-color-gray-dark-v4">Working Hours</h4>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">87904</div>
                  <h4 class="h5 g-color-gray-dark-v4">Job Offers</h4>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode1" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #01 -->

      <!-- Counter #02 -->
      <section class="g-bg-gray-dark-v1 g-color-white g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#02</span>
            </h2>
          </div>

          <div id="shortcode2">
            <div class="shortcode-html">
              <div class="row text-center text-uppercase">
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">52147</div>
                  <h4 class="h5 g-color-white-opacity-0_6">Code Lines</h4>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">24583</div>
                  <h4 class="h5 g-color-white-opacity-0_6">Projects</h4>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">7348</div>
                  <h4 class="h5 g-color-white-opacity-0_6">Working Hours</h4>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">87904</div>
                  <h4 class="h5 g-color-white-opacity-0_6">Job Offers</h4>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set contentTarget = "#shortcode2" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Counter #02 -->

      <!-- Counter #03 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#03</span>
            </h2>
          </div>

          <div id="shortcode3">
            <div class="shortcode-html">
              <div class="row text-center text-uppercase">
                <div class="col-lg-3 col-sm-6 g-brd-right g-brd-gray-light-v3 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">52147</div>
                  <h4 class="h5 g-color-gray-dark-v4">Code Lines</h4>
                </div>

                <div class="col-lg-3 col-sm-6 g-brd-right--lg g-brd-gray-light-v3 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">24583</div>
                  <h4 class="h5 g-color-gray-dark-v4">Projects</h4>
                </div>

                <div class="col-lg-3 col-sm-6 g-brd-right g-brd-gray-light-v3 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">7348</div>
                  <h4 class="h5 g-color-gray-dark-v4">Working Hours</h4>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">87904</div>
                  <h4 class="h5 g-color-gray-dark-v4">Job Offers</h4>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode3" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #03 -->

      <!-- Counter #04 -->
      <section class="g-bg-gray-dark-v1 g-color-white g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#04</span>
            </h2>
          </div>

          <div id="shortcode4">
            <div class="shortcode-html">
              <div class="row text-center text-uppercase">
                <div class="col-lg-3 col-sm-6 g-brd-right g-brd-white-opacity-0_2 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">52147</div>
                  <h4 class="h5 g-color-white-opacity-0_6">Code Lines</h4>
                </div>

                <div class="col-lg-3 col-sm-6 g-brd-right--lg g-brd-white-opacity-0_2 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">24583</div>
                  <h4 class="h5 g-color-white-opacity-0_6">Projects</h4>
                </div>

                <div class="col-lg-3 col-sm-6 g-brd-right g-brd-white-opacity-0_2 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">7348</div>
                  <h4 class="h5 g-color-white-opacity-0_6">Working Hours</h4>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">87904</div>
                  <h4 class="h5 g-color-white-opacity-0_6">Job Offers</h4>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set contentTarget = "#shortcode4" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #04 -->

      <!-- Counter #05 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#05</span>
            </h2>
          </div>

          <div id="shortcode5">
            <div class="shortcode-html">
              <div class="row text-center text-uppercase">
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="g-brd-around g-brd-gray-light-v3 g-pa-20">
                    <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">52147</div>
                    <h4 class="h5 g-color-gray-dark-v4 g-mb-5">Code Lines</h4>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="g-brd-around g-brd-gray-light-v3 g-pa-20">
                    <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">24583</div>
                    <h4 class="h5 g-color-gray-dark-v4 g-mb-5">Projects</h4>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="g-brd-around g-brd-gray-light-v3 g-pa-20">
                    <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">7348</div>
                    <h4 class="h5 g-color-gray-dark-v4 g-mb-5">Working Hours</h4>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="g-brd-around g-brd-gray-light-v3 g-pa-20">
                    <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">87904</div>
                    <h4 class="h5 g-color-gray-dark-v4 g-mb-5">Job Offers</h4>
                  </div>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode5" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #05 -->

      <!-- Counter #06 -->
      <section class="g-bg-gray-dark-v1 g-color-white g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#06</span>
            </h2>
          </div>

          <div id="shortcode6">
            <div class="shortcode-html">
              <div class="row text-center text-uppercase">
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="g-brd-around g-brd-gray-dark-v2 g-pa-20">
                    <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">52147</div>
                    <h4 class="h5 g-color-white-opacity-0_8 g-font-weight-300 g-mb-5">Code Lines</h4>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="g-brd-around g-brd-gray-dark-v2 g-pa-20">
                    <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">24583</div>
                    <h4 class="h5 g-color-white-opacity-0_8 g-font-weight-300 g-mb-5">Projects</h4>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="g-brd-around g-brd-gray-dark-v2 g-pa-20">
                    <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">7348</div>
                    <h4 class="h5 g-color-white-opacity-0_8 g-font-weight-300 g-mb-5">Working Hours</h4>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="g-brd-around g-brd-gray-dark-v2 g-pa-20">
                    <div class="js-counter g-font-size-35 g-font-weight-300 g-mb-7">87904</div>
                    <h4 class="h5 g-color-white-opacity-0_8 g-font-weight-300 g-mb-5">Job Offers</h4>
                  </div>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

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

      <!-- Counter #07 -->
      <section class="dzsparallaxer auto-init height-is-based-on-content">
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100" style="height: 140%; background: url({{ root }}assets/img/bg/pattern2.png)"></div>
        <!-- End Parallax Image -->

        <div class="container g-py-100">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#07</span>
            </h2>
          </div>

          <div id="shortcode7">
            <div class="shortcode-html">
              <div class="row text-center text-uppercase">
                <div class="col-md-6 col-lg-3 g-mb-30">
                  <div class="g-bg-white g-rounded-4 g-brd-bottom g-brd-2 g-brd-gray-light-v3 g-pa-20">
                    <div class="js-counter h1 g-font-weight-300 g-mb-5">18298</div>
                    <h4 class="g-font-weight-300">Web Developers</h4>
                  </div>
                </div>

                <div class="col-md-6 col-lg-3 g-mb-30">
                  <div class="g-bg-white g-rounded-4 g-brd-bottom g-brd-2 g-brd-gray-light-v3 g-pa-20">
                    <div class="js-counter h1 g-font-weight-300 g-mb-5">24583</div>
                    <h4 class="g-font-weight-300">Designers</h4>
                  </div>
                </div>

                <div class="col-md-6 col-lg-3 g-mb-30">
                  <div class="g-bg-white g-rounded-4 g-brd-bottom g-brd-2 g-brd-gray-light-v3 g-pa-20">
                    <div class="js-counter h1 g-font-weight-300 g-mb-5">37904</div>
                    <h4 class="g-font-weight-300">Open Contests</h4>
                  </div>
                </div>

                <div class="col-md-6 col-lg-3 g-mb-30">
                  <div class="g-bg-white g-rounded-4 g-brd-bottom g-brd-2 g-brd-gray-light-v3 g-pa-20">
                    <div class="js-counter h1 g-font-weight-300 g-mb-5">50892</div>
                    <h4 class="g-font-weight-300">Happy Customers</h4>
                  </div>
                </div>
              </div>
            </div>

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

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

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

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

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode7" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #07 -->

      <!-- Counter #08 -->
      <section class="dzsparallaxer auto-init height-is-based-on-content">
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100" style="height: 160%; background: url({{ root }}assets/img/bg/pattern3.png)"></div>
        <!-- End Parallax Image -->

        <div class="container g-py-100">
          <div class="text-center g-color-white g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#08</span>
            </h2>
          </div>

          <div id="shortcode8">
            <div class="shortcode-html">
              <div class="row text-center text-uppercase">
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="g-bg-black-opacity-0_8 g-color-white g-rounded-3 g-pa-30">
                    <div class="js-counter h1 g-font-weight-300 g-mb-10">18298</div>
                    <h4 class="h5 g-font-weight-300">Web Developers</h4>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="g-bg-black-opacity-0_8 g-color-white g-rounded-3 g-pa-30">
                    <div class="js-counter h1 g-font-weight-300 g-mb-10">24583</div>
                    <h4 class="h5 g-font-weight-300">Designers</h4>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="g-bg-black-opacity-0_8 g-color-white g-rounded-3 g-pa-30">
                    <div class="js-counter h1 g-font-weight-300 g-mb-10">37904</div>
                    <h4 class="h5 g-font-weight-300">Open Contests</h4>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="g-bg-black-opacity-0_8 g-color-white g-rounded-3 g-pa-30">
                    <div class="js-counter h1 g-font-weight-300 g-mb-10">50892</div>
                    <h4 class="h5 g-font-weight-300">Happy Customers</h4>
                  </div>
                </div>
              </div>
            </div>

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

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

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

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

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set contentTarget = "#shortcode8" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #08 -->

      <!-- Counter #09 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#09</span>
            </h2>
          </div>

          <div id="shortcode9">
            <div class="shortcode-html">
              <div class="row text-center g-color-white">
                <div class="col-md-3 col-6 d-flex justify-content-center g-mb-60">
                  <div class="d-flex justify-content-center u-counter-v3 g-brd-primary g-bg-primary g-width-150 g-height-150 rounded-circle g-pa-20">
                    <div class="align-self-center">
                      <div class="js-counter g-font-size-30 g-font-weight-300">5867</div>
                      <h4 class="h5">Customers</h4>
                    </div>
                  </div>
                </div>

                <div class="col-md-3 col-6 d-flex justify-content-center g-mb-60">
                  <div class="d-flex justify-content-center u-counter-v3 g-brd-primary g-bg-primary g-width-150 g-height-150 rounded-circle g-pa-20">
                    <div class="align-self-center">
                      <div class="js-counter g-font-size-30 g-font-weight-300">7169</div>
                      <h4 class="h5">Downloads</h4>
                    </div>
                  </div>
                </div>

                <div class="col-md-3 col-6 d-flex justify-content-center g-mb-60">
                  <div class="d-flex justify-content-center u-counter-v3 g-brd-primary g-bg-primary g-width-150 g-height-150 rounded-circle g-pa-20">
                    <div class="align-self-center">
                      <div class="js-counter g-font-size-30 g-font-weight-300">3146</div>
                      <h4 class="h5">Awards</h4>
                    </div>
                  </div>
                </div>

                <div class="col-md-3 col-6 d-flex justify-content-center g-mb-60">
                  <div class="d-flex justify-content-center u-counter-v3 g-brd-primary g-bg-primary g-width-150 g-height-150 rounded-circle g-pa-20">
                    <div class="align-self-center">
                      <div class="js-counter g-font-size-30 g-font-weight-300">9450</div>
                      <h4 class="h5">Projects</h4>
                    </div>
                  </div>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode9" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Counter #09 -->

      <!-- Counter #10 -->
      <section class="dzsparallaxer auto-init height-is-based-on-content">
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100 g-bg-size-cover u-bg-overlay g-bg-black-opacity-0_4--after" style="height: 140%; background: url({{ root }}assets/img-temp/1920x800/img11.jpg)"></div>
        <!-- End Parallax Image -->

        <div class="container u-bg-overlay__inner g-py-100">
          <div class="text-center g-color-white g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#10</span>
            </h2>
          </div>

          <div id="shortcode10">
            <div class="shortcode-html">
              <div class="row text-center g-color-white">
                <div class="col-md-3 col-6 d-flex justify-content-center g-mb-60">
                  <div class="d-flex justify-content-center u-counter-v3 g-brd-white g-bg-white-opacity-0_2 g-width-150 g-height-150 rounded-circle g-pa-20">
                    <div class="align-self-center">
                      <div class="js-counter g-font-size-30 g-font-weight-300">5867</div>
                      <h4 class="h5">Customers</h4>
                    </div>
                  </div>
                </div>

                <div class="col-md-3 col-6 d-flex justify-content-center g-mb-60">
                  <div class="d-flex justify-content-center u-counter-v3 g-brd-white g-bg-white-opacity-0_2 g-width-150 g-height-150 rounded-circle g-pa-20">
                    <div class="align-self-center">
                      <div class="js-counter g-font-size-30 g-font-weight-300">7169</div>
                      <h4 class="h5">Downloads</h4>
                    </div>
                  </div>
                </div>

                <div class="col-md-3 col-6 d-flex justify-content-center g-mb-60">
                  <div class="d-flex justify-content-center u-counter-v3 g-brd-white g-bg-white-opacity-0_2 g-width-150 g-height-150 rounded-circle g-pa-20">
                    <div class="align-self-center">
                      <div class="js-counter g-font-size-30 g-font-weight-300">3146</div>
                      <h4 class="h5">Awards</h4>
                    </div>
                  </div>
                </div>

                <div class="col-md-3 col-6 d-flex justify-content-center g-mb-60">
                  <div class="d-flex justify-content-center u-counter-v3 g-brd-white g-bg-white-opacity-0_2 g-width-150 g-height-150 rounded-circle g-pa-20">
                    <div class="align-self-center">
                      <div class="js-counter g-font-size-30 g-font-weight-300">9450</div>
                      <h4 class="h5">Projects</h4>
                    </div>
                  </div>
                </div>
              </div>
            </div>

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

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

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

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

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set contentTarget = "#shortcode10" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Counter #10 -->

      <!-- Counter #11 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#11</span>
            </h2>
          </div>

          <div id="shortcode11">
            <div class="shortcode-html">
              <div class="row text-center text-uppercase">
                <div class="col-md-3 col-6 g-mb-50">
                  <i class="et-icon-beaker display-5 g-mb-25"></i>
                  <div class="js-counter display-5 g-mb-20">265</div>
                  <h4 class="h5">Innovations</h4>
                </div>

                <div class="col-md-3 col-6 g-mb-50">
                  <i class="et-icon-clock display-5 g-mb-25"></i>
                  <div class="js-counter display-5 g-mb-20">5957</div>
                  <h4 class="h5">Working Hours</h4>
                </div>

                <div class="col-md-3 col-6 g-mb-50">
                  <i class="et-icon-chat display-5 g-mb-25"></i>
                  <div class="js-counter display-5 g-mb-20">3495</div>
                  <h4 class="h5">Happy Clients</h4>
                </div>

                <div class="col-md-3 col-6 g-mb-50">
                  <i class="et-icon-lightbulb display-5 g-mb-25"></i>
                  <div class="js-counter display-5 g-mb-20">576</div>
                  <h4 class="h5">New Ideas</h4>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode11" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Counter #11 -->

      <!-- Counter #12 -->
      <section class="dzsparallaxer auto-init height-is-based-on-content">
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100 g-bg-size-cover u-bg-overlay g-bg-black-opacity-0_6--after" style="height: 140%; background: url({{ root }}assets/img-temp/1920x800/img2.jpg)"></div>
        <!-- End Parallax Image -->

        <div class="container u-bg-overlay__inner g-py-100">
          <div class="text-center g-color-white g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#12</span>
            </h2>
          </div>

          <div id="shortcode12">
            <div class="shortcode-html">
              <div class="row text-center text-uppercase g-color-white">
                <div class="col-md-3 col-6 g-mb-50">
                  <i class="et-icon-beaker display-5 g-mb-25"></i>
                  <div class="js-counter display-5 g-mb-20">265</div>
                  <h4 class="h5 g-font-weight-300">Innovations</h4>
                </div>

                <div class="col-md-3 col-6 g-mb-50">
                  <i class="et-icon-clock display-5 g-mb-25"></i>
                  <div class="js-counter display-5 g-mb-20">5957</div>
                  <h4 class="h5 g-font-weight-300">Working Hours</h4>
                </div>

                <div class="col-md-3 col-6 g-mb-50">
                  <i class="et-icon-chat display-5 g-mb-25"></i>
                  <div class="js-counter display-5 g-mb-20">3495</div>
                  <h4 class="h5 g-font-weight-300">Happy Clients</h4>
                </div>

                <div class="col-md-3 col-6 g-mb-50">
                  <i class="et-icon-lightbulb display-5 g-mb-25"></i>
                  <div class="js-counter display-5 g-mb-20">576</div>
                  <h4 class="h5 g-font-weight-300">New Ideas</h4>
                </div>
              </div>
            </div>

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

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

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

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

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set contentTarget = "#shortcode12" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Counter #12 -->

      <!-- Counter #13 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#13</span>
            </h2>
          </div>

          <div id="shortcode13">
            <div class="shortcode-html">
              <div class="row text-center">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <i class="et-icon-layers g-font-size-35 g-mb-25"></i>
                  <div class="js-counter g-font-size-35">12</div>
                  <h4 class="text-uppercase g-font-size-11 g-font-weight-600 g-mb-25">Years</h4>
                  <p>Sed feugiat porttitor nunc Etiam gravida ex justo ac rhoncus.</p>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <i class="et-icon-focus g-font-size-35 g-mb-25"></i>
                  <div class="js-counter g-font-size-35" data-reduce-thousands-to="k">299000</div>
                  <h4 class="text-uppercase g-font-size-11 g-font-weight-600 g-mb-25">Photos</h4>
                  <p>Ivitae blandit massa luctus fermentum lorem quis elit vitae</p>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <i class="et-icon-camera g-font-size-35 g-mb-25"></i>
                  <div class="js-counter g-font-size-35">25</div>
                  <h4 class="text-uppercase g-font-size-11 g-font-weight-600 g-mb-25">Photographers</h4>
                  <p>Curabitur eget tortor sed urna nulla sed fringilla quam</p>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <i class="et-icon-map g-font-size-35 g-mb-25"></i>
                  <div class="js-counter g-font-size-35">167</div>
                  <h4 class="text-uppercase g-font-size-11 g-font-weight-600 g-mb-25">Places</h4>
                  <p>Duis dui turpis, consectetur non ultrices aliquam sapien</p>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode13" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #13 -->

      <!-- Counter #14 -->
      <section class="g-bg-gray-dark-v1 g-color-white g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#14</span>
            </h2>
          </div>

          <div id="shortcode14">
            <div class="shortcode-html">
              <div class="row text-center">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <i class="et-icon-layers g-color-white-opacity-0_7 g-font-size-35 g-mb-25"></i>
                  <div class="js-counter g-font-size-35">12</div>
                  <h4 class="text-uppercase g-font-size-11 g-font-weight-600 g-mb-25">Years</h4>
                  <p>Sed feugiat porttitor nunc Etiam gravida ex justo ac rhoncus.</p>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <i class="et-icon-focus g-color-white-opacity-0_7 g-font-size-35 g-mb-25"></i>
                  <div class="js-counter g-font-size-35" data-reduce-thousands-to="k">299000</div>
                  <h4 class="text-uppercase g-font-size-11 g-font-weight-600 g-mb-25">Photos</h4>
                  <p>Ivitae blandit massa luctus fermentum lorem quis elit vitae</p>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <i class="et-icon-camera g-color-white-opacity-0_7 g-font-size-35 g-mb-25"></i>
                  <div class="js-counter g-font-size-35">25</div>
                  <h4 class="text-uppercase g-font-size-11 g-font-weight-600 g-mb-25">Photographers</h4>
                  <p>Curabitur eget tortor sed urna nulla sed fringilla quam</p>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <i class="et-icon-map g-color-white-opacity-0_7 g-font-size-35 g-mb-25"></i>
                  <div class="js-counter g-font-size-35">167</div>
                  <h4 class="text-uppercase g-font-size-11 g-font-weight-600 g-mb-25">Places</h4>
                  <p>Duis dui turpis, consectetur non ultrices aliquam sapien</p>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set contentTarget = "#shortcode14" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #14 -->

      <!-- Counter #15 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#15</span>
            </h2>
          </div>

          <div id="shortcode15">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <div class="d-flex justify-content-sm-center">
                    <span class="u-icon-v3 g-bg-teal g-color-white g-mt-2 g-mr-15">
                      <i class="et-icon-linegraph"></i>
                    </span>

                    <div class="g-line-height-1">
                      <h4 class="g-font-weight-300">Overal Visits</h4>
                      <div class="js-counter g-color-gray-dark-v4 g-font-size-18" data-comma-separated="true">52147</div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <div class="d-flex justify-content-sm-center">
                    <span class="u-icon-v3 g-bg-pink g-color-white g-mt-2 g-mr-15">
                      <i class="et-icon-layers"></i>
                    </span>

                    <div class="g-line-height-1">
                      <h4 class="g-font-weight-300">Layouts</h4>
                      <div class="js-counter g-color-gray-dark-v4 g-font-size-18" data-comma-separated="true">324056</div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <div class="d-flex justify-content-sm-center">
                    <span class="u-icon-v3 g-bg-aqua g-color-white g-mt-2 g-mr-15">
                      <i class="et-icon-beaker"></i>
                    </span>

                    <div class="g-line-height-1">
                      <h4 class="g-font-weight-300">New Features</h4>
                      <div class="js-counter g-color-gray-dark-v4 g-font-size-18" data-comma-separated="true">15147</div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <div class="d-flex justify-content-sm-center">
                    <span class="u-icon-v3 g-bg-purple g-color-white g-mt-2 g-mr-15">
                      <i class="et-icon-chat"></i>
                    </span>

                    <div class="g-line-height-1">
                      <h4 class="g-font-weight-300">Messages</h4>
                      <div class="js-counter g-color-gray-dark-v4 g-font-size-18" data-comma-separated="true">37283</div>
                    </div>
                  </div>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode15" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #15 -->

      <!-- Counter #16 -->
      <section class="g-bg-gray-dark-v1 g-color-white g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#16</span>
            </h2>
          </div>

          <div id="shortcode16">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <div class="d-flex justify-content-sm-center">
                    <span class="u-icon-v3 g-bg-teal rounded-circle g-mt-2 g-mr-15">
                      <i class="et-icon-linegraph"></i>
                    </span>

                    <div class="g-line-height-1">
                      <h4 class="g-font-weight-300">Overal Visits</h4>
                      <div class="js-counter g-color-white-opacity-0_6 g-font-size-18" data-comma-separated="true">52147</div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <div class="d-flex justify-content-sm-center">
                    <span class="u-icon-v3 g-bg-pink rounded-circle g-mt-2 g-mr-15">
                      <i class="et-icon-layers"></i>
                    </span>

                    <div class="g-line-height-1">
                      <h4 class="g-font-weight-300">Layouts</h4>
                      <div class="js-counter g-color-white-opacity-0_6 g-font-size-18" data-comma-separated="true">324056</div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <div class="d-flex justify-content-sm-center">
                    <span class="u-icon-v3 g-bg-cyan rounded-circle g-mt-2 g-mr-15">
                      <i class="et-icon-beaker"></i>
                    </span>

                    <div class="g-line-height-1">
                      <h4 class="g-font-weight-300">New Features</h4>
                      <div class="js-counter g-color-white-opacity-0_6 g-font-size-18" data-comma-separated="true">15147</div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-3 col-sm-6 g-mb-30">
                  <div class="d-flex justify-content-sm-center">
                    <span class="u-icon-v3 g-bg-purple rounded-circle g-mt-2 g-mr-15">
                      <i class="et-icon-chat"></i>
                    </span>

                    <div class="g-line-height-1">
                      <h4 class="g-font-weight-300">Messages</h4>
                      <div class="js-counter g-color-white-opacity-0_6 g-font-size-18" data-comma-separated="true">37283</div>
                    </div>
                  </div>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set contentTarget = "#shortcode16" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #16 -->

      <!-- Counter #17 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#17</span>
            </h2>
          </div>

          <div id="shortcode17">
            <div class="shortcode-html">
              <div class="row text-center">
                <div class="col-md-3 col-sm-6 g-mb-30">
                  <span class="u-icon-v3 u-icon-size--xl g-bg-primary-opacity-0_1 rounded-circle g-mb-10">
                    <i class="et-icon-wallet g-color-primary"></i>
                  </span>

                  <div class="js-counter g-color-primary g-font-size-40 g-font-weight-300 g-mb-7">3254</div>
                </div>

                <div class="col-md-3 col-sm-6 g-mb-30">
                  <span class="u-icon-v3 u-icon-size--xl g-bg-cyan-opacity-0_1 rounded-circle g-mb-10">
                    <i class="et-icon-genius g-color-cyan"></i>
                  </span>

                  <div class="js-counter g-color-cyan g-font-size-40 g-font-weight-300 g-mb-7">5389</div>
                </div>

                <div class="col-md-3 col-sm-6 g-mb-30">
                  <span class="u-icon-v3 u-icon-size--xl g-bg-lightred-opacity-0_1 rounded-circle g-mb-10">
                    <i class="et-icon-tools g-color-lightred"></i>
                  </span>

                  <div class="js-counter g-color-lightred g-font-size-40 g-font-weight-300 g-mb-7">7068</div>
                </div>

                <div class="col-md-3 col-sm-6 g-mb-30">
                  <span class="u-icon-v3 u-icon-size--xl g-bg-teal-opacity-0_1 rounded-circle g-mb-10">
                    <i class="et-icon-chat g-color-teal"></i>
                  </span>

                  <div class="js-counter g-color-teal g-font-size-40 g-font-weight-300 g-mb-7">9172</div>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode17" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #17 -->

      <!-- Counter #18 -->
      <section class="g-bg-gray-dark-v1 g-py-100">
        <div class="container">
          <div class="text-center g-color-white g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#18</span>
            </h2>
          </div>

          <div id="shortcode18">
            <div class="shortcode-html">
              <div class="row text-center">
                <div class="col-md-3 col-sm-6 g-mb-30">
                  <span class="u-icon-v3 u-icon-size--xl g-bg-primary-opacity-0_1 rounded-circle g-mb-10">
                    <i class="et-icon-wallet g-color-primary"></i>
                  </span>

                  <div class="js-counter g-color-primary g-font-size-40 g-font-weight-300 g-mb-7">3254</div>
                </div>

                <div class="col-md-3 col-sm-6 g-mb-30">
                  <span class="u-icon-v3 u-icon-size--xl g-bg-cyan-opacity-0_1 rounded-circle g-mb-10">
                    <i class="et-icon-genius g-color-cyan"></i>
                  </span>

                  <div class="js-counter g-color-cyan g-font-size-40 g-font-weight-300 g-mb-7">5389</div>
                </div>

                <div class="col-md-3 col-sm-6 g-mb-30">
                  <span class="u-icon-v3 u-icon-size--xl g-bg-lightred-opacity-0_1 rounded-circle g-mb-10">
                    <i class="et-icon-tools g-color-lightred"></i>
                  </span>

                  <div class="js-counter g-color-lightred g-font-size-40 g-font-weight-300 g-mb-7">7068</div>
                </div>

                <div class="col-md-3 col-sm-6 g-mb-30">
                  <span class="u-icon-v3 u-icon-size--xl g-bg-teal-opacity-0_1 rounded-circle g-mb-10">
                    <i class="et-icon-chat g-color-teal"></i>
                  </span>

                  <div class="js-counter g-color-teal g-font-size-40 g-font-weight-300 g-mb-7">9172</div>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set contentTarget = "#shortcode18" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #18 -->

      <!-- Counter #19 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#19</span>
            </h2>
          </div>

          <div id="shortcode19">
            <div class="shortcode-html">
              <div class="row text-uppercase">
                <div class="col-lg-4 col-md-6 g-mb-30">
                  <div class="g-bg-primary g-color-white g-pa-30">
                    <header class="d-flex g-mb-40">
                      <i class="et-icon-linegraph align-self-center g-font-size-40 g-mr-20"></i>

                      <div class="g-line-height-1">
                        <h4 class="h5">Overal Visits</h4>
                        <div class="js-counter g-font-size-30" data-comma-separated="true">52147</div>
                      </div>
                    </header>

                    <div class="d-flex justify-content-between">
                      <div class="g-line-height-1">
                        <h5 class="h6 g-font-weight-600">Last Week</h5>
                        <div class="js-counter g-font-size-16" data-comma-separated="true">1385</div>
                      </div>

                      <div class="text-right g-line-height-1">
                        <h5 class="h6 g-font-weight-600">Last Month</h5>
                        <div class="js-counter g-font-size-16" data-comma-separated="true">6048</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6 g-mb-30">
                  <div class="g-bg-blue g-color-white g-pa-30">
                    <header class="d-flex g-mb-40">
                      <i class="et-icon-layers align-self-center g-font-size-40 g-mr-20"></i>

                      <div class="g-line-height-1">
                        <h4 class="h5">Overal Views</h4>
                        <div class="js-counter g-font-size-30" data-comma-separated="true">324056</div>
                      </div>
                    </header>

                    <div class="d-flex justify-content-between">
                      <div class="g-line-height-1">
                        <h5 class="h6 g-font-weight-600">Last Week</h5>
                        <div class="js-counter g-font-size-16" data-comma-separated="true">26904</div>
                      </div>

                      <div class="text-right g-line-height-1">
                        <h5 class="h6 g-font-weight-600">Last Month</h5>
                        <div class="js-counter g-font-size-16" data-comma-separated="true">124766</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6 g-mb-30">
                  <div class="g-bg-pink g-color-white g-pa-30">
                    <header class="d-flex g-mb-40">
                      <i class="et-icon-piechart align-self-center g-font-size-40 g-mr-20"></i>

                      <div class="g-line-height-1">
                        <h4 class="h5">Overal Clicks</h4>
                        <div class="js-counter g-font-size-30" data-comma-separated="true">15147</div>
                      </div>
                    </header>

                    <div class="d-flex justify-content-between">
                      <div class="g-line-height-1">
                        <h5 class="h6 g-font-weight-600">Last Week</h5>
                        <div class="js-counter g-font-size-16" data-comma-separated="true">732</div>
                      </div>

                      <div class="text-right g-line-height-1">
                        <h5 class="h6 g-font-weight-600">Last Month</h5>
                        <div class="js-counter g-font-size-16" data-comma-separated="true">529</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode19" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #19 -->

      <!-- Counter #20 -->
      <section class="g-bg-gray-dark-v1 g-py-100">
        <div class="container">
          <div class="text-center g-color-white g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#20</span>
            </h2>
          </div>

          <div id="shortcode20">
            <div class="shortcode-html">
              <div class="row text-uppercase">
                <div class="col-lg-4 col-md-6 g-mb-30">
                  <div class="g-bg-lightred-opacity-0_1 g-color-lightred g-pa-30">
                    <header class="d-flex g-mb-40">
                      <i class="et-icon-linegraph align-self-center g-font-size-40 g-mr-20"></i>

                      <div class="g-line-height-1">
                        <h4 class="h5">Overal Visits</h4>
                        <div class="js-counter g-font-size-30" data-comma-separated="true">52147</div>
                      </div>
                    </header>

                    <div class="d-flex justify-content-between">
                      <div class="g-line-height-1">
                        <h5 class="h6 g-font-weight-600">Last Week</h5>
                        <div class="js-counter g-font-size-16" data-comma-separated="true">1385</div>
                      </div>

                      <div class="text-right g-line-height-1">
                        <h5 class="h6 g-font-weight-600">Last Month</h5>
                        <div class="js-counter g-font-size-16" data-comma-separated="true">6048</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6 g-mb-30">
                  <div class="g-bg-cyan-opacity-0_1 g-color-cyan g-pa-30">
                    <header class="d-flex g-mb-40">
                      <i class="et-icon-layers align-self-center g-font-size-40 g-mr-20"></i>

                      <div class="g-line-height-1">
                        <h4 class="h5">Overal Views</h4>
                        <div class="js-counter g-font-size-30" data-comma-separated="true">324056</div>
                      </div>
                    </header>

                    <div class="d-flex justify-content-between">
                      <div class="g-line-height-1">
                        <h5 class="h6 g-font-weight-600">Last Week</h5>
                        <div class="js-counter g-font-size-16" data-comma-separated="true">26904</div>
                      </div>

                      <div class="text-right g-line-height-1">
                        <h5 class="h6 g-font-weight-600">Last Month</h5>
                        <div class="js-counter g-font-size-16" data-comma-separated="true">124766</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6 g-mb-30">
                  <div class="g-bg-purple-opacity-0_1 g-color-purple g-pa-30">
                    <header class="d-flex g-mb-40">
                      <i class="et-icon-piechart align-self-center g-font-size-40 g-mr-20"></i>

                      <div class="g-line-height-1">
                        <h4 class="h5">Overal Clicks</h4>
                        <div class="js-counter g-font-size-30" data-comma-separated="true">15147</div>
                      </div>
                    </header>

                    <div class="d-flex justify-content-between">
                      <div class="g-line-height-1">
                        <h5 class="h6 g-font-weight-600">Last Week</h5>
                        <div class="js-counter g-font-size-16" data-comma-separated="true">732</div>
                      </div>

                      <div class="text-right g-line-height-1">
                        <h5 class="h6 g-font-weight-600">Last Month</h5>
                        <div class="js-counter g-font-size-16" data-comma-separated="true">529</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </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).on('ready', function () {
                  // initialization of counters
                  var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set contentTarget = "#shortcode20" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #20 -->

      <!-- Counter #21 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#21</span>
            </h2>
          </div>

          <div id="shortcode21">
            <div class="shortcode-html">
              <div class="row">
                <!-- Counter Pie Chart -->
                <div class="col-lg-6 g-mb-60">
                  <div class="d-flex">
                    <div class="js-pie-rtl u-chart-pie-v1 g-brd-primary g-color-black g-height-140 g-width-140 g-mr-30"
                         data-circles-value="53"
                         data-circles-max-value="200"
                         data-circles-bg-color="#ffffff"
                         data-circles-fg-color="#72c02c"
                         data-circles-radius="70"
                         data-circles-stroke-width="2"
                         data-circles-font-size="35"
                         data-circles-duration="2000"
                         data-circles-scroll-animate="true">
                    </div>

                    <div class="align-self-center g-line-height-2">
                      <h4 class="h6 text-uppercase g-font-weight-700 g-color-black g-mb-15">Courses in Our School</h4>
                      <p class="mb-0">Sed feugiat porttitor nunc Etiam gravida ex justo ac rhoncus purus tristique ut, egestas a libero eget, sollicitudin maximus nulla. Nunc vitae maximus ipsum.</p>
                    </div>
                  </div>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-6 g-mb-60">
                  <div class="d-flex">
                    <div class="js-pie-rtl u-chart-pie-v1 g-brd-primary g-color-black g-height-140 g-width-140 g-mr-30"
                         data-circles-value="96"
                         data-circles-max-value="200"
                         data-circles-bg-color="#ffffff"
                         data-circles-fg-color="#72c02c"
                         data-circles-radius="70"
                         data-circles-stroke-width="2"
                         data-circles-font-size="35"
                         data-circles-duration="2000"
                         data-circles-scroll-animate="true">
                    </div>

                    <div class="align-self-center g-line-height-2">
                      <h4 class="h6 text-uppercase g-font-weight-700 g-color-black g-mb-15">Professional Teachers</h4>
                      <p class="mb-0">Sed feugiat porttitor nunc Etiam gravida ex justo ac rhoncus purus tristique ut, egestas a libero eget, sollicitudin maximus nulla. Nunc vitae maximus ipsum.</p>
                    </div>
                  </div>
                </div>
                <!-- End Counter Pie Chart -->
              </div>

              <div class="row">
                <!-- Counter Pie Chart -->
                <div class="col-lg-6 g-mb-60">
                  <div class="d-flex">
                    <div class="js-pie-rtl u-chart-pie-v1 g-brd-primary g-color-black g-height-140 g-width-140 g-mr-30"
                         data-circles-value="8"
                         data-circles-max-value="15"
                         data-circles-bg-color="#ffffff"
                         data-circles-fg-color="#72c02c"
                         data-circles-radius="70"
                         data-circles-stroke-width="2"
                         data-circles-font-size="35"
                         data-circles-duration="2000"
                         data-circles-additional-text="k"
                         data-circles-scroll-animate="true">
                    </div>

                    <div class="align-self-center g-line-height-2">
                      <h4 class="h6 text-uppercase g-font-weight-700 g-color-black g-mb-15">Happy Students</h4>
                      <p class="mb-0">Sed feugiat porttitor nunc Etiam gravida ex justo ac rhoncus purus tristique ut, egestas a libero eget, sollicitudin maximus nulla. Nunc vitae maximus ipsum.</p>
                    </div>
                  </div>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-6 g-mb-60">
                  <div class="d-flex">
                    <div class="js-pie-rtl u-chart-pie-v1 g-brd-primary g-color-black g-height-140 g-width-140 g-mr-30"
                         data-circles-value="48"
                         data-circles-max-value="200"
                         data-circles-bg-color="#ffffff"
                         data-circles-fg-color="#72c02c"
                         data-circles-radius="70"
                         data-circles-stroke-width="2"
                         data-circles-font-size="35"
                         data-circles-duration="2000"
                         data-circles-scroll-animate="true">
                    </div>

                    <div class="align-self-center g-line-height-2">
                      <h4 class="h6 text-uppercase g-font-weight-700 g-color-black g-mb-15">Other Programs</h4>
                      <p class="mb-0">Sed feugiat porttitor nunc Etiam gravida ex justo ac rhoncus purus tristique ut, egestas a libero eget, sollicitudin maximus nulla. Nunc vitae maximus ipsum.</p>
                    </div>
                  </div>
                </div>
                <!-- End Counter Pie Chart -->
              </div>
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of chart pies with rtl option
                  var rtlItems = $.HSCore.components.HSChartPie.init('.js-pie-rtl', {
                    rtl: true
                  });
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode21" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Counter #21 -->

      <!-- Counter #22 -->
      <section class="g-bg-gray-dark-v1 g-color-white g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#22</span>
            </h2>
          </div>

          <div id="shortcode22">
            <div class="shortcode-html">
              <div class="row">
                <!-- Counter Pie Chart -->
                <div class="col-lg-6 g-mb-60">
                  <div class="d-flex">
                    <div class="js-pie-rtl u-chart-pie-v1 g-brd-purple g-height-140 g-width-140 g-mr-30"
                         data-circles-value="53"
                         data-circles-max-value="200"
                         data-circles-bg-color="#111"
                         data-circles-fg-color="#9a69cb"
                         data-circles-radius="70"
                         data-circles-stroke-width="2"
                         data-circles-font-size="35"
                         data-circles-duration="2000"
                         data-circles-scroll-animate="true">
                    </div>

                    <div class="align-self-center g-line-height-2">
                      <h4 class="h5 text-uppercase g-font-weight-400 g-letter-spacing-1 g-mb-15">Courses in Our School</h4>
                      <p class="mb-0 g-color-white-opacity-0_8">Sed feugiat porttitor nunc Etiam gravida ex justo ac rhoncus purus tristique ut, egestas a libero eget, sollicitudin maximus nulla. Nunc vitae maximus ipsum.</p>
                    </div>
                  </div>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-6 g-mb-60">
                  <div class="d-flex">
                    <div class="js-pie-rtl u-chart-pie-v1 g-brd-pink g-height-140 g-width-140 g-mr-30"
                         data-circles-value="96"
                         data-circles-max-value="200"
                         data-circles-bg-color="#111"
                         data-circles-fg-color="#e81c62"
                         data-circles-radius="70"
                         data-circles-stroke-width="2"
                         data-circles-font-size="35"
                         data-circles-duration="2000"
                         data-circles-scroll-animate="true">
                    </div>

                    <div class="align-self-center g-line-height-2">
                      <h4 class="h5 text-uppercase g-font-weight-400 g-letter-spacing-1 g-mb-15">Professional Teachers</h4>
                      <p class="mb-0 g-color-white-opacity-0_8">Sed feugiat porttitor nunc Etiam gravida ex justo ac rhoncus purus tristique ut, egestas a libero eget, sollicitudin maximus nulla. Nunc vitae maximus ipsum.</p>
                    </div>
                  </div>
                </div>
                <!-- End Counter Pie Chart -->
              </div>

              <div class="row">
                <!-- Counter Pie Chart -->
                <div class="col-lg-6 g-mb-60">
                  <div class="d-flex">
                    <div class="js-pie-rtl u-chart-pie-v1 g-brd-cyan g-height-140 g-width-140 g-mr-30"
                         data-circles-value="8"
                         data-circles-max-value="15"
                         data-circles-bg-color="#111"
                         data-circles-fg-color="#00bed6"
                         data-circles-radius="70"
                         data-circles-stroke-width="2"
                         data-circles-font-size="35"
                         data-circles-duration="2000"
                         data-circles-additional-text="k"
                         data-circles-scroll-animate="true">
                    </div>

                    <div class="align-self-center g-line-height-2">
                      <h4 class="h5 text-uppercase g-font-weight-400 g-letter-spacing-1 g-mb-15">Happy Students</h4>
                      <p class="mb-0 g-color-white-opacity-0_8">Sed feugiat porttitor nunc Etiam gravida ex justo ac rhoncus purus tristique ut, egestas a libero eget, sollicitudin maximus nulla. Nunc vitae maximus ipsum.</p>
                    </div>
                  </div>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-6 g-mb-60">
                  <div class="d-flex">
                    <div class="js-pie-rtl u-chart-pie-v1 g-brd-primary g-height-140 g-width-140 g-mr-30"
                         data-circles-value="48"
                         data-circles-max-value="200"
                         data-circles-bg-color="#111"
                         data-circles-fg-color="#72c02c"
                         data-circles-radius="70"
                         data-circles-stroke-width="2"
                         data-circles-font-size="35"
                         data-circles-duration="2000"
                         data-circles-scroll-animate="true">
                    </div>

                    <div class="align-self-center g-line-height-2">
                      <h4 class="h5 text-uppercase g-font-weight-400 g-letter-spacing-1 g-mb-15">Other Programs</h4>
                      <p class="mb-0 g-color-white-opacity-0_8">Sed feugiat porttitor nunc Etiam gravida ex justo ac rhoncus purus tristique ut, egestas a libero eget, sollicitudin maximus nulla. Nunc vitae maximus ipsum.</p>
                    </div>
                  </div>
                </div>
                <!-- End Counter Pie Chart -->
              </div>
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of chart pies with rtl option
                  var rtlItems = $.HSCore.components.HSChartPie.init('.js-pie-rtl', {
                    rtl: true
                  });
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set contentTarget = "#shortcode22" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Counter #22 -->

      <!-- Counter #23 -->
      <section class="text-center g-py-100">
        <div class="container">
          <div class="g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#23</span>
            </h2>
          </div>

          <div id="shortcode23">
            <div class="shortcode-html">
              <div class="row">
                <!-- Counter Pie Chart -->
                <div class="col-md-4 col-sm-6 g-mb-50">
                  <div class="js-pie g-mb-30"
                       data-circles-value="87"
                       data-circles-max-value="100"
                       data-circles-bg-color="#eeeeee"
                       data-circles-fg-color="#72c02c"
                       data-circles-radius="80"
                       data-circles-stroke-width="8"
                       data-circles-font-size="40"
                       data-circles-additional-text="%"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true">
                  </div>

                  <h4 class="g-mb-15">UI Design</h4>
                  <p class="lead mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-md-4 col-sm-6 g-mb-50">
                  <div class="js-pie g-mb-30"
                       data-circles-value="74"
                       data-circles-max-value="100"
                       data-circles-bg-color="#eeeeee"
                       data-circles-fg-color="#72c02c"
                       data-circles-radius="80"
                       data-circles-stroke-width="8"
                       data-circles-font-size="40"
                       data-circles-additional-text="%"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true">
                  </div>

                  <h4 class="g-mb-15">Web Development</h4>
                  <p class="lead mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-md-4 col-sm-6 g-mb-50">
                  <div class="js-pie g-mb-30"
                       data-circles-value="65"
                       data-circles-max-value="100"
                       data-circles-bg-color="#eeeeee"
                       data-circles-fg-color="#72c02c"
                       data-circles-radius="80"
                       data-circles-stroke-width="8"
                       data-circles-font-size="40"
                       data-circles-additional-text="%"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true">
                  </div>

                  <h4 class="g-mb-15">JavaScript</h4>
                  <p class="lead mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <!-- End Counter Pie Chart -->
              </div>
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of chart pies
                  var items = $.HSCore.components.HSChartPie.init('.js-pie');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode23" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #23 -->

      <!-- Counter #24 -->
      <section class="g-bg-gray-dark-v1 g-color-white text-center g-py-100">
        <div class="container">
          <div class="g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#24</span>
            </h2>
          </div>

          <div id="shortcode24">
            <div class="shortcode-html">
              <div class="row">
                <!-- Counter Pie Chart -->
                <div class="col-md-4 col-sm-6 g-mb-50">
                  <div class="js-pie g-mb-30"
                       data-circles-value="87"
                       data-circles-max-value="100"
                       data-circles-bg-color="#222"
                       data-circles-fg-color="#72c02c"
                       data-circles-radius="80"
                       data-circles-stroke-width="8"
                       data-circles-font-size="30"
                       data-circles-additional-text="%"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true">
                  </div>

                  <h4 class="g-mb-15">UI Design</h4>
                  <p class="lead g-px-10 mb-0">Sed feugiat porttitor nunc etiam gravi daex justo ac rhoncus</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-md-4 col-sm-6 g-mb-50">
                  <div class="js-pie g-mb-30"
                       data-circles-value="74"
                       data-circles-max-value="100"
                       data-circles-bg-color="#222"
                       data-circles-fg-color="#e81c62"
                       data-circles-radius="80"
                       data-circles-stroke-width="8"
                       data-circles-font-size="30"
                       data-circles-additional-text="%"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true">
                  </div>

                  <h4 class="g-mb-15">Web Development</h4>
                  <p class="lead g-px-10 mb-0">Libero eget sollic itudin maximus nullanunc vitae maximus</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-md-4 col-sm-6 g-mb-50">
                  <div class="js-pie g-mb-30"
                       data-circles-value="65"
                       data-circles-max-value="100"
                       data-circles-bg-color="#222"
                       data-circles-fg-color="#00bed6"
                       data-circles-radius="80"
                       data-circles-stroke-width="8"
                       data-circles-font-size="30"
                       data-circles-additional-text="%"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true">
                  </div>

                  <h4 class="g-mb-15">JavaScript</h4>
                  <p class="lead g-px-10 mb-0">Morem lipsum lidolor sit amet consectetur adipiscing</p>
                </div>
                <!-- End Counter Pie Chart -->
              </div>
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of chart pies
                  var items = $.HSCore.components.HSChartPie.init('.js-pie');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set contentTarget = "#shortcode24" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- End Counter #24 -->

      <!-- Counter #25 -->
      <section class="text-center g-py-100">
        <div class="container">
          <div class="g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#25</span>
            </h2>
          </div>

          <div id="shortcode25">
            <div class="shortcode-html">
              <div class="row">
                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-mb-30"
                       data-circles-value="54"
                       data-circles-max-value="100"
                       data-circles-bg-color="#d3b6c6"
                       data-circles-fg-color="#9b6bcc"
                       data-circles-radius="70"
                       data-circles-stroke-width="2"
                       data-circles-additional-text="%"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="30">
                  </div>

                  <h4 class="h3 g-font-weight-300 g-letter-spacing-2 g-mb-15">Consulting</h4>
                  <p class="lead mb-0">Sed feugiat porttitor nunc etiam gravi daex justo ac rhoncus</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-mb-30"
                       data-circles-value="63"
                       data-circles-max-value="100"
                       data-circles-bg-color="#c9ff97"
                       data-circles-fg-color="#72c02c"
                       data-circles-radius="70"
                       data-circles-stroke-width="2"
                       data-circles-additional-text="%"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="30">
                  </div>

                  <h4 class="h3 g-font-weight-300 g-letter-spacing-2 g-mb-15">Marketing</h4>
                  <p class="lead mb-0">Libero eget sollic itudin maximus nullanunc porttitor</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-mb-30"
                       data-circles-value="72"
                       data-circles-max-value="100"
                       data-circles-bg-color="#bee3f7"
                       data-circles-fg-color="#3498db"
                       data-circles-radius="70"
                       data-circles-stroke-width="2"
                       data-circles-additional-text="%"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="30">
                  </div>

                  <h4 class="h3 g-font-weight-300 g-letter-spacing-2 g-mb-15">Branding</h4>
                  <p class="lead mb-0">Morem lipsum lidolor sit amet consectetur adipiscing</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-mb-30"
                       data-circles-value="81"
                       data-circles-max-value="100"
                       data-circles-bg-color="#ffc2bb"
                       data-circles-fg-color="#e74c3c"
                       data-circles-radius="70"
                       data-circles-stroke-width="2"
                       data-circles-additional-text="%"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="30">
                  </div>

                  <h4 class="h3 g-font-weight-300 g-letter-spacing-2 g-mb-15">Copywriting</h4>
                  <p class="lead mb-0">Quisque vestibulum sem eget nibh venenatis commodo</p>
                </div>
                <!-- End Counter Pie Chart -->
              </div>
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of chart pies
                  var items = $.HSCore.components.HSChartPie.init('.js-pie');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode25" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Counter #25 -->

      <!-- Counter #26 -->
      <section class="g-bg-gray-dark-v1 g-color-white text-center g-py-100">
        <div class="container">
          <div class="g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#26</span>
            </h2>
          </div>

          <div id="shortcode26">
            <div class="shortcode-html">
              <div class="row">
                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-mb-30"
                       data-circles-value="54"
                       data-circles-max-value="100"
                       data-circles-bg-color="#3f363b"
                       data-circles-fg-color="#9b6bcc"
                       data-circles-radius="70"
                       data-circles-stroke-width="2"
                       data-circles-additional-text="%"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="30">
                  </div>

                  <h4 class="h3 g-font-weight-300 g-letter-spacing-2 g-mb-15">Consulting</h4>
                  <p class="lead g-color-white-opacity-0_8 mb-0">Sed feugiat porttitor nunc etiam gravi daex justo ac rhoncus</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-mb-30"
                       data-circles-value="63"
                       data-circles-max-value="100"
                       data-circles-bg-color="#3c4c2d"
                       data-circles-fg-color="#72c02c"
                       data-circles-radius="70"
                       data-circles-stroke-width="2"
                       data-circles-additional-text="%"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="30">
                  </div>

                  <h4 class="h3 g-font-weight-300 g-letter-spacing-2 g-mb-15">Marketing</h4>
                  <p class="lead g-color-white-opacity-0_8 mb-0">Libero eget sollic itudin maximus nullanunc porttitor</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-mb-30"
                       data-circles-value="72"
                       data-circles-max-value="100"
                       data-circles-bg-color="#39444a"
                       data-circles-fg-color="#3498db"
                       data-circles-radius="70"
                       data-circles-stroke-width="2"
                       data-circles-additional-text="%"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="30">
                  </div>

                  <h4 class="h3 g-font-weight-300 g-letter-spacing-2 g-mb-15">Branding</h4>
                  <p class="lead g-color-white-opacity-0_8 mb-0">Morem lipsum lidolor sit amet consectetur adipiscing</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-mb-30"
                       data-circles-value="81"
                       data-circles-max-value="100"
                       data-circles-bg-color="#4c3a38"
                       data-circles-fg-color="#e74c3c"
                       data-circles-radius="70"
                       data-circles-stroke-width="2"
                       data-circles-additional-text="%"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="30">
                  </div>

                  <h4 class="h3 g-font-weight-300 g-letter-spacing-2 g-mb-15">Copywriting</h4>
                  <p class="lead g-color-white-opacity-0_8 mb-0">Quisque vestibulum sem eget nibh venenatis commodo</p>
                </div>
                <!-- End Counter Pie Chart -->
              </div>
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of chart pies
                  var items = $.HSCore.components.HSChartPie.init('.js-pie');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set contentTarget = "#shortcode26" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Counter #26 -->

      <!-- Counter #27 -->
      <section class="text-center g-py-100">
        <div class="container">
          <div class="g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#27</span>
            </h2>
          </div>

          <div id="shortcode27">
            <div class="shortcode-html">
              <div class="row">
                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-font-weight-600 g-mb-35"
                       data-circles-value="84"
                       data-circles-max-value="100"
                       data-circles-bg-color="#f8f8f8"
                       data-circles-fg-color="#72c02c"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="56">
                  </div>

                  <h4 class="h5 text-uppercase g-font-weight-600 g-mb-15">Happy Clients</h4>
                  <p class="mb-0 g-line-height-2">Integer accumsan maximus leo, et consectetur metus vestibulum in</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-font-weight-600 g-mb-35"
                       data-circles-value="34"
                       data-circles-max-value="100"
                       data-circles-bg-color="#f8f8f8"
                       data-circles-fg-color="#72c02c"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="56">
                  </div>

                  <h4 class="h5 text-uppercase g-font-weight-600 g-mb-15">Completed Projects</h4>
                  <p class="mb-0 g-line-height-2">Quisque vestibulum sem eget nibh elementum nibh pulvinar</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-font-weight-600 g-mb-35"
                       data-circles-value="35"
                       data-circles-max-value="100"
                       data-circles-bg-color="#f8f8f8"
                       data-circles-fg-color="#72c02c"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="56">
                  </div>

                  <h4 class="h5 text-uppercase g-font-weight-600 g-mb-15">Our Team</h4>
                  <p class="mb-0 g-line-height-2">Nullam in diam arcuiam nisl justo tempor scelerisque vest ibulum</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-font-weight-600 g-mb-35"
                       data-circles-value="67"
                       data-circles-max-value="100"
                       data-circles-bg-color="#f8f8f8"
                       data-circles-fg-color="#72c02c"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="56">
                  </div>

                  <h4 class="h5 text-uppercase g-font-weight-600 g-mb-15">Happy Clients</h4>
                  <p class="mb-0 g-line-height-2">Integer accumsan maximus metus vestibulum maximus efficitur</p>
                </div>
                <!-- End Counter Pie Chart -->
              </div>
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of chart pies
                  var items = $.HSCore.components.HSChartPie.init('.js-pie');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode27" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Counter #27 -->

      <!-- Counter #28 -->
      <section class="g-bg-gray-dark-v1 g-color-white text-center g-py-100">
        <div class="container">
          <div class="g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#28</span>
            </h2>
          </div>

          <div id="shortcode28">
            <div class="shortcode-html">
              <div class="row">
                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-font-weight-600 g-mb-35"
                       data-circles-value="84"
                       data-circles-max-value="100"
                       data-circles-bg-color="#222"
                       data-circles-fg-color="#fff"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="56">
                  </div>

                  <h4 class="h5 text-uppercase g-font-weight-600 g-mb-15">Happy Clients</h4>
                  <p class="mb-0 g-color-white-opacity-0_8 g-line-height-2">Integer accumsan maximus leo, et consectetur metus vestibulum in</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-font-weight-600 g-mb-35"
                       data-circles-value="34"
                       data-circles-max-value="100"
                       data-circles-bg-color="#222"
                       data-circles-fg-color="#fff"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="56">
                  </div>

                  <h4 class="h5 text-uppercase g-font-weight-600 g-mb-15">Completed Projects</h4>
                  <p class="mb-0 g-color-white-opacity-0_8 g-line-height-2">Quisque vestibulum sem eget nibh elementum nibh pulvinar</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-font-weight-600 g-mb-35"
                       data-circles-value="35"
                       data-circles-max-value="100"
                       data-circles-bg-color="#222"
                       data-circles-fg-color="#fff"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="56">
                  </div>

                  <h4 class="h5 text-uppercase g-font-weight-600 g-mb-15">Our Team</h4>
                  <p class="mb-0 g-color-white-opacity-0_8 g-line-height-2">Nullam in diam arcuiam nisl justo tempor scelerisque vest ibulum</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-font-weight-600 g-mb-35"
                       data-circles-value="67"
                       data-circles-max-value="100"
                       data-circles-bg-color="#222"
                       data-circles-fg-color="#fff"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="56">
                  </div>

                  <h4 class="h5 text-uppercase g-font-weight-600 g-mb-15">Happy Clients</h4>
                  <p class="mb-0 g-color-white-opacity-0_8 g-line-height-2">Integer accumsan maximus metus vestibulum maximus efficitur</p>
                </div>
                <!-- End Counter Pie Chart -->
              </div>
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of chart pies
                  var items = $.HSCore.components.HSChartPie.init('.js-pie');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set contentTarget = "#shortcode28" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Counter #28 -->

      <!-- Counter #29 -->
      <section class="text-center g-py-100">
        <div class="container">
          <div class="g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#29</span>
            </h2>
          </div>

          <div id="shortcode29">
            <div class="shortcode-html">
              <div class="row">
                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-40">
                  <div class="js-pie g-color-black g-font-weight-600 g-mb-30"
                       data-circles-value="67"
                       data-circles-max-value="100"
                       data-circles-bg-color="#f8f8f8"
                       data-circles-fg-color="#111"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-additional-text="%"
                       data-circles-font-size="20">
                  </div>

                  <h4 class="h6 g-color-black text-uppercase g-font-weight-600 g-mb-15">Consulting</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-40">
                  <div class="js-pie g-color-black g-font-weight-600 g-mb-30"
                       data-circles-value="34"
                       data-circles-max-value="100"
                       data-circles-bg-color="#f8f8f8"
                       data-circles-fg-color="#111"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-additional-text="%"
                       data-circles-font-size="20">
                  </div>

                  <h4 class="h6 g-color-black text-uppercase g-font-weight-600 g-mb-15">Marketing</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-40">
                  <div class="js-pie g-color-black g-font-weight-600 g-mb-30"
                       data-circles-value="35"
                       data-circles-max-value="100"
                       data-circles-bg-color="#f8f8f8"
                       data-circles-fg-color="#111"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-additional-text="%"
                       data-circles-font-size="20">
                  </div>

                  <h4 class="h6 g-color-black text-uppercase g-font-weight-600 g-mb-15">Branding</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-40">
                  <div class="js-pie g-color-black g-font-weight-600 g-mb-30"
                       data-circles-value="67"
                       data-circles-max-value="100"
                       data-circles-bg-color="#f8f8f8"
                       data-circles-fg-color="#111"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-additional-text="%"
                       data-circles-font-size="20">
                  </div>

                  <h4 class="h6 g-color-black text-uppercase g-font-weight-600 g-mb-15">Copywriting</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <!-- End Counter Pie Chart -->
              </div>
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of chart pies
                  var items = $.HSCore.components.HSChartPie.init('.js-pie');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode29" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Counter #29 -->

      <!-- Counter #30 -->
      <section class="g-bg-gray-dark-v1 g-color-white text-center g-py-100">
        <div class="container">
          <div class="g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#30</span>
            </h2>
          </div>

          <div id="shortcode30">
            <div class="shortcode-html">
              <div class="row">
                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-font-weight-600 g-mb-30"
                       data-circles-value="67"
                       data-circles-max-value="100"
                       data-circles-bg-color="#222"
                       data-circles-fg-color="#72c02c"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-additional-text="%"
                       data-circles-font-size="20">
                  </div>

                  <h4 class="h5 text-uppercase g-font-weight-400 g-letter-spacing-2 g-mb-15">Consulting</h4>
                  <p class="lead mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-font-weight-600 g-mb-30"
                       data-circles-value="34"
                       data-circles-max-value="100"
                       data-circles-bg-color="#222"
                       data-circles-fg-color="#72c02c"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-additional-text="%"
                       data-circles-font-size="20">
                  </div>

                  <h4 class="h5 text-uppercase g-font-weight-400 g-letter-spacing-2 g-mb-15">Marketing</h4>
                  <p class="lead mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-font-weight-600 g-mb-30"
                       data-circles-value="35"
                       data-circles-max-value="100"
                       data-circles-bg-color="#222"
                       data-circles-fg-color="#72c02c"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-additional-text="%"
                       data-circles-font-size="20">
                  </div>

                  <h4 class="h5 text-uppercase g-font-weight-400 g-letter-spacing-2 g-mb-15">Branding</h4>
                  <p class="lead mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-lg-3 col-sm-6 g-mb-50">
                  <div class="js-pie g-font-weight-600 g-mb-30"
                       data-circles-value="67"
                       data-circles-max-value="100"
                       data-circles-bg-color="#222"
                       data-circles-fg-color="#72c02c"
                       data-circles-radius="80"
                       data-circles-stroke-width="10"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-additional-text="%"
                       data-circles-font-size="20">
                  </div>

                  <h4 class="h5 text-uppercase g-font-weight-400 g-letter-spacing-2 g-mb-15">Copywriting</h4>
                  <p class="lead mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                </div>
                <!-- End Counter Pie Chart -->
              </div>
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of chart pies
                  var items = $.HSCore.components.HSChartPie.init('.js-pie');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-white" %}
          {% set contentTarget = "#shortcode30" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Counter #30 -->

      <!-- Counter #31 -->
      <section class="text-center g-py-100">
        <div class="container">
          <div class="g-mb-60">
            <h2 class="h4">Counters
              <span class="g-color-primary g-ml-5">#31</span>
            </h2>
          </div>

          <div id="shortcode31">
            <div class="shortcode-html">
              <div class="row">
                <!-- Counter Pie Chart -->
                <div class="col-sm-6 g-mb-80">
                  <div class="js-pie g-color-black g-font-weight-300 g-mb-40"
                       data-circles-value="35"
                       data-circles-max-value="100"
                       data-circles-bg-color="#222"
                       data-circles-fg-color="#e81c62"
                       data-circles-radius="100"
                       data-circles-stroke-width="15"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="50">
                  </div>

                  <h4 class="h2 g-color-black text-uppercase g-letter-spacing-3 g-mb-15">Branding</h4>
                  <p class="lead g-px-10 mb-0">Sed feugiat porttitor nunc etiam gravi daex justo ac rhoncus. Libero eget sollic itudin maximus porttitor</p>
                </div>
                <!-- End Counter Pie Chart -->

                <!-- Counter Pie Chart -->
                <div class="col-sm-6 g-mb-80">
                  <div class="js-pie g-color-black g-font-weight-300 g-mb-40"
                       data-circles-value="67"
                       data-circles-max-value="100"
                       data-circles-bg-color="#222"
                       data-circles-fg-color="#00bed6"
                       data-circles-radius="100"
                       data-circles-stroke-width="15"
                       data-circles-duration="2000"
                       data-circles-scroll-animate="true"
                       data-circles-font-size="50">
                  </div>

                  <h4 class="h2 g-color-black text-uppercase g-letter-spacing-3 g-mb-15">MARKETING</h4>
                  <p class="lead g-px-10 mb-0">Quisque vestibulum sem eget nibh elementum nibh pulvinar. Justo ac rhoncus itudin maximus nullanunc porttitor</p>
                </div>
                <!-- End Counter Pie Chart -->
              </div>
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).on('ready', function () {
                  // initialization of chart pies
                  var items = $.HSCore.components.HSChartPie.init('.js-pie');
                });
              </script>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set SCLinkColor = "g-color-main" %}
          {% set contentTarget = "#shortcode31" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Counter #31 -->

      <!-- Counter #32 -->
      <section class="g-py-100">
        <div class="text-center g-mb-60">
          <h2 class="h4">Counters
            <span class="g-color-primary g-ml-5">#32</span>
          </h2>
        </div>

        <div id="shortcode32">
          <div class="shortcode-html">
            <!-- Counters -->
            <div class="dzsparallaxer auto-init height-is-based-on-content use-loading" data-options='{direction: "reverse", settings_mode_oneelement_max_offset: "150"}'>
              <div class="divimage dzsparallaxer--target w-100 g-bg-size-cover g-bg-img-hero g-bg-cover g-bg-black-opacity-0_7--after" style="height: 130%; background-image: url({{ root }}assets/img-temp/1920x500/img2.jpg);"></div>

              <div class="container g-pt-100 g-pb-70">
                <div class="row">
                  <div class="col-sm-6 col-lg-3 align-items-end mt-auto g-mb-50">
                    <div class="text-center">
                      <span class="js-counter g-color-primary g-font-weight-600 g-font-size-60 g-line-height-0_9 mr-2">75</span>
                      <h3 class="d-inline-block g-color-white g-font-weight-600 g-font-size-22 mb-0">Clients</h3>
                    </div>
                  </div>

                  <div class="col-sm-6 col-lg-3 align-items-end mt-auto g-mb-50">
                    <div class="text-center">
                      <span class="js-counter g-color-primary g-font-weight-600 g-font-size-60 g-line-height-0_9 mr-2">20</span>
                      <h3 class="d-inline-block g-color-white g-font-weight-600 g-font-size-22 mb-0">Products</h3>
                    </div>
                  </div>

                  <div class="col-sm-6 col-lg-3 align-items-end mt-auto g-mb-50">
                    <div class="text-center">
                      <span class="js-counter g-color-primary g-font-weight-600 g-font-size-60 g-line-height-0_9 mr-2">15</span>
                      <h3 class="d-inline-block g-color-white g-font-weight-600 g-font-size-22 mb-0">Members</h3>
                    </div>
                  </div>

                  <div class="col-sm-6 col-lg-3 align-items-end mt-auto g-mb-50">
                    <div class="text-center">
                      <span class="js-counter g-color-primary g-font-weight-600 g-font-size-60 g-line-height-0_9 mr-2">50</span>
                      <h3 class="d-inline-block g-color-white g-font-weight-600 g-font-size-22 mb-0">Projects</h3>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- End Counters -->
          </div>

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

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

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

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

        {% set SCExtendedClasses = "text-center" %}
        {% set SCLinkColor = "g-color-main" %}
        {% set contentTarget = "#shortcode32" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Counter #32 -->
    </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" %}
  <script src="{{ root }}assets/vendor/circles/circles.min.js"></script>

  {% 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.chart-pie.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 chart pies
      var items = $.HSCore.components.HSChartPie.init('.js-pie');

      // initialization of chart pies with rtl option
      var rtlItems = $.HSCore.components.HSChartPie.init('.js-pie-rtl', {
        rtl: true
      });

      // 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 go to
      $.HSCore.components.HSGoTo.init('.js-go-to');

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