{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-blocks-hero-content" %}
{% set title = "Hero Content" %}

{% 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">
<link rel="stylesheet" href="{{ root }}assets/vendor/fancybox/jquery.fancybox.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.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>
      <!-- Hero Info #01 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-80">
            <h2 class="h4">Hero Content
              <span class="g-color-primary g-ml-5">#01</span>
            </h2>
          </div>

          <div id="shortcode1-1">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-6">
                  <div class="u-heading-v2-3--bottom g-brd-primary g-mb-30">
                    <h2 class="h3 text-uppercase g-font-weight-300 u-heading-v2__title">We Are Unify Agency</h2>
                  </div>
                  <p class="lead">Unify
                    <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                    <strong>successful</strong> business on web and mobile.</p>
                  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                </div>

                <div class="col-md-6">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/600x360/img1.png" alt="Image Description">
                </div>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode1-1" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

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

          <div id="shortcode1-2">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-6">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/600x360/img1.png" alt="Image Description">
                </div>

                <div class="col-md-6">
                  <div class="u-heading-v2-3--bottom g-brd-primary g-mb-30">
                    <h2 class="h3 text-uppercase g-font-weight-300 u-heading-v2__title">We Are Unify Agency</h2>
                  </div>
                  <p class="lead">Unify
                    <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                    <strong>successful</strong> business on web and mobile.</p>
                  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                </div>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode1-2" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Hero Info #01 -->

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

      <!-- Hero Info #02 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-80">
            <h2 class="h4">Hero Content
              <span class="g-color-primary g-ml-5">#02</span>
            </h2>
          </div>

          <div id="shortcode2-1">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-7 g-mb-50 g-mb-0--lg">
                  <header class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                    <h2 class="h3 u-heading-v2__title text-uppercase g-font-weight-300 mb-0">Unify is Fully Responsive</h2>
                  </header>

                  <p class="lead g-mb-30">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas moles</p>

                  <div class="row">
                    <div class="col-sm-6">
                      <ul class="list-unstyled g-color-gray-dark-v4 g-mb-30 g-mb-0--sm">
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Based on Botostrap 4
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Responsive Bootstrap Template
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Semantic HTML5/CSS3 Codes
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Great SASS Architecture
                        </li>
                      </ul>
                    </div>

                    <div class="col-sm-6">
                      <ul class="list-unstyled g-color-gray-dark-v4">
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Over 2000+ UI Components
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Beautiful Eye Catching Demos
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Over 30+ Thematic Examples
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Comes with Premium Plugins
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>

                <div class="col-lg-5 align-self-end">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/600x330/img1.png" alt="Image Description">
                </div>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode2-1" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

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

          <div id="shortcode2-2">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-5 g-mb-0--lg align-self-end">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/600x330/img1.png" alt="Image Description">
                </div>

                <div class="col-lg-7">
                  <header class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                    <h2 class="h3 u-heading-v2__title text-uppercase g-font-weight-300 mb-0">Unify is Fully Responsive</h2>
                  </header>

                  <p class="lead g-mb-30">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas moles</p>

                  <div class="row">
                    <div class="col-sm-6">
                      <ul class="list-unstyled g-color-gray-dark-v4 g-mb-30 g-mb-0--sm">
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Based on Botostrap 4
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Responsive Bootstrap Template
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Semantic HTML5/CSS3 Codes
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Great SASS Architecture
                        </li>
                      </ul>
                    </div>

                    <div class="col-sm-6">
                      <ul class="list-unstyled g-color-gray-dark-v4">
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Over 2000+ UI Components
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Beautiful Eye Catching Demos
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Over 30+ Thematic Examples
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                          Comes with Premium Plugins
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

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

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

      <!-- Hero Info #03 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-80">
            <h2 class="h4">Hero Content
              <span class="g-color-primary g-ml-5">#03</span>
            </h2>
          </div>

          <div id="shortcode3-1">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-6 g-mb-50 g-mb-0--lg">
                  <header class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                    <h2 class="h3 u-heading-v2__title text-uppercase g-font-weight-300">About Our Company</h2>
                  </header>

                  <p class="lead g-mb-30">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas moles</p>

                  <ul class="list-unstyled g-color-gray-dark-v4">
                    <li class="d-flex g-mb-10">
                      <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                      Based on Botostrap 4
                    </li>
                    <li class="d-flex g-mb-10">
                      <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                      Responsive Bootstrap Template
                    </li>
                    <li class="d-flex g-mb-10">
                      <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                      Semantic HTML5/CSS3 Codes
                    </li>
                  </ul>
                </div>

                <div class="col-lg-6">
                  <!-- Vimeo Example -->
                  <div class="embed-responsive embed-responsive-16by9">
                    <iframe src="//player.vimeo.com/video/47911018" width="530" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
                  </div>
                  <!-- End Vimeo Example -->
                </div>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode3-1" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Hero Info #03 -->

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

      <!-- Hero Info #04 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-80">
            <h2 class="h4">Hero Content
              <span class="g-color-primary g-ml-5">#04</span>
            </h2>
          </div>

          <div id="shortcode3-2">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-6 g-mb-50 g-mb-0--lg">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/600x400/img1.png" alt="Image Description">
                </div>

                <div class="col-lg-6 align-self-center">
                  <header class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                    <h2 class="h3 u-heading-v2__title text-uppercase g-font-weight-300">About Our Company</h2>
                  </header>

                  <p class="lead g-mb-30">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas moles</p>

                  <ul class="list-unstyled g-color-gray-dark-v4 g-mb-40">
                    <li class="d-flex g-mb-10">
                      <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                      Included Over 2000+ UI Components
                    </li>
                    <li class="d-flex g-mb-10">
                      <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                      Beautiful Eye Catching Demos
                    </li>
                    <li class="d-flex g-mb-10">
                      <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                      Over 30+ Beautiful Thematic Examples
                    </li>
                    <li class="d-flex g-mb-10">
                      <i class="icon-check g-color-primary g-mt-5 g-mr-10"></i>
                      Semantic HTML5/CSS3 Codes
                    </li>
                  </ul>

                  <a class="btn btn-md u-btn-primary rounded-0" href="#">Learn More</a>
                </div>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode3-2" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Hero Info #04 -->

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

      <!-- Hero Info #05 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-80">
            <h2 class="h4">Hero Content
              <span class="g-color-primary g-ml-5">#05</span>
            </h2>
          </div>

          <div id="shortcode5-1">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-6 g-mb-50 g-mb-0--lg">
                  <div class="u-heading-v2-3--bottom g-brd-primary g-mb-30">
                    <h2 class="h3 text-uppercase g-font-weight-300 u-heading-v2__title">About Our Company</h2>
                  </div>

                  <p class="lead">Unify
                    <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                    <strong>successful</strong> business on web and mobile.</p>

                  <p class="g-mb-30">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

                  <a class="btn btn-md u-btn-primary rounded-0 g-mr-15" href="#">About Us</a>
                  <a class="btn btn-md u-btn-outline-darkgray rounded-0 g-mr-15" href="#">View Our Work</a>
                </div>

                <div class="col-lg-6 align-self-center">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/600x330/img1.png" alt="Image Description">
                </div>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode5-1" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

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

          <div id="shortcode5-2">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-md-6 g-mb-50 g-mb-0--lg">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/600x330/img1.png" alt="Image Description">
                </div>

                <div class="col-lg-6">
                  <div class="u-heading-v2-3--bottom g-brd-primary g-mb-30">
                    <h2 class="h3 text-uppercase g-font-weight-300 u-heading-v2__title">About Our Company</h2>
                  </div>

                  <p class="lead">Unify
                    <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                    <strong>successful</strong> business on web and mobile.</p>

                  <p class="g-mb-30">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

                  <a class="btn btn-md u-btn-primary rounded-0 g-mr-15" href="#">About Us</a>
                  <a class="btn btn-md u-btn-outline-darkgray rounded-0 g-mr-15" href="#">View Our Work</a>
                </div>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode5-2" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Hero Info #05 -->

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

      <!-- Hero Info #06 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Hero Content
              <span class="g-color-primary g-ml-5">#06</span>
            </h2>
          </div>

          <div id="shortcode6-1">
            <div class="shortcode-html">
              <header class="text-center g-mb-60">
                <div class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                  <h2 class="h3 text-uppercase g-font-weight-300 u-heading-v2__title">About Our Company</h2>
                </div>
                <p class="lead g-px-200--lg">Unify
                  <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                  <strong>successful</strong> business on web and mobile.</p>
              </header>

              <div class="row">
                <div class="col-lg-6 align-self-center">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/600x360/img1.png" alt="Image Description">
                </div>

                <div class="col-lg-6 align-self-center g-mb-50 g-mb-0--lg">
                  <p class="g-mb-30">Unify
                    <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                    <strong>successful</strong> business on web and mobile.</p>

                  <div class="row">
                    <div class="col-sm-6">
                      <ul class="list-unstyled g-color-gray-dark-v4 g-mb-30 g-mb-0--sm">
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Based on Botostrap 4
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Responsive Bootstrap Template
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Semantic HTML5/CSS3 Codes
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Great SASS Architecture
                        </li>
                      </ul>
                    </div>

                    <div class="col-sm-6">
                      <ul class="list-unstyled g-color-gray-dark-v4">
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Over 2000+ UI Components
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Beautiful Eye Catching Demos
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Over 30+ Thematic Examples
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Comes with Premium Plugins
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode6-1" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

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

          <div id="shortcode6-2">
            <div class="shortcode-html">
              <header class="text-center g-mb-60">
                <div class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                  <h2 class="h3 text-uppercase g-font-weight-300 u-heading-v2__title">About Our Company</h2>
                </div>
                <p class="lead g-px-200--lg">Unify
                  <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                  <strong>successful</strong> business on web and mobile.</p>
              </header>

              <div class="row">
                <div class="col-lg-6 align-self-center g-mb-50 g-mb-0--lg">
                  <p class="g-mb-30">Unify
                    <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                    <strong>successful</strong> business on web and mobile.</p>

                  <div class="row">
                    <div class="col-sm-6">
                      <ul class="list-unstyled g-color-gray-dark-v4 g-mb-30 g-mb-0--sm">
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Based on Botostrap 4
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Responsive Bootstrap Template
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Semantic HTML5/CSS3 Codes
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Great SASS Architecture
                        </li>
                      </ul>
                    </div>

                    <div class="col-sm-6">
                      <ul class="list-unstyled g-color-gray-dark-v4">
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Over 2000+ UI Components
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Beautiful Eye Catching Demos
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Over 30+ Thematic Examples
                        </li>
                        <li class="d-flex g-mb-10">
                          <i class="icon-arrow-right-circle g-color-primary g-mt-5 g-mr-10"></i>
                          Comes with Premium Plugins
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6 align-self-center">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/600x360/img1.png" alt="Image Description">
                </div>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode6-2" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
        </div>
      </section>
      <!-- Hero Info #06 -->

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

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

          <div id="shortcode7">
            <div class="shortcode-html">
              <header class="text-center g-mb-60">
                <div class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                  <h2 class="h3 text-uppercase g-font-weight-300 u-heading-v2__title">About Our Skills</h2>
                </div>
                <p class="lead g-px-200--lg">Unify
                  <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                  <strong>successful</strong> business on web and mobile.</p>
              </header>

              <div class="row">
                <div class="col-md-6 g-mb-50 g-mb-0--md">
                  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p>

                  <p class="g-mb-30">If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>

                  <a class="btn btn-md u-btn-primary rounded-0 g-mr-15" href="#">Learn More</a>
                  <a class="btn btn-md u-btn-outline-darkgray rounded-0 g-mr-15" href="#">View Our Work</a>
                </div>

                <div class="col-md-6">
                  <!-- Progress Bar v1 -->
                  <h4 class="h6">Web Design
                    <span class="float-right g-ml-10">88%</span>
                  </h4>
                  <div class="progress rounded-0 u-progress g-mb-20">
                    <div class="progress-bar u-progress-bar--sm g-bg-primary" role="progressbar" style="width: 88%" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                  <!-- End Progress Bar v1 -->

                  <!-- Progress Bar v1 -->
                  <h4 class="h6">PHP/WordPress
                    <span class="float-right g-ml-10">76%</span>
                  </h4>
                  <div class="progress rounded-0 u-progress g-mb-20">
                    <div class="progress-bar u-progress-bar--sm g-bg-primary" role="progressbar" style="width: 76%" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                  <!-- End Progress Bar v1 -->

                  <!-- Progress Bar v1 -->
                  <h4 class="h6">HTML/CSS
                    <span class="float-right g-ml-10">97%</span>
                  </h4>
                  <div class="progress rounded-0 u-progress g-mb-20">
                    <div class="progress-bar u-progress-bar--sm g-bg-primary" role="progressbar" style="width: 97%" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                  <!-- End Progress Bar v1 -->

                  <!-- Progress Bar v1 -->
                  <h4 class="h6">Illustration
                    <span class="float-right g-ml-10">69%</span>
                  </h4>
                  <div class="progress rounded-0 u-progress g-mb-20">
                    <div class="progress-bar u-progress-bar--sm g-bg-primary" role="progressbar" style="width: 69%" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100"></div>
                  </div>
                  <!-- End Progress Bar v1 -->
                </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.progress-bar.js"></script>

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                  $(document).ready(function () {
                    // initialization of horizontal progress bars
                    var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar-v1', {
                      moveElementSelector: '.js-move-element',
                      moveElementTo: 'currentPosition'
                    });
                  });


              </script>
            </div>
          </div>

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

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

      <!-- Hero Info #08 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-60">
            <h2 class="h4">Hero Content
              <span class="g-color-primary g-ml-5">#08</span>
            </h2>
          </div>

          <div id="shortcode8">
            <div class="shortcode-html">
              <header class="text-center g-mb-60">
                <div class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                  <h2 class="h3 text-uppercase g-font-weight-300 u-heading-v2__title">About Our Skills</h2>
                </div>
                <p class="lead g-px-200--lg">Unify
                  <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                  <strong>successful</strong> business on web and mobile.</p>
              </header>

              <div class="row">
                <div class="col-md-6 g-mb-50 g-mb-0--md">
                  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>

                  <p class="g-mb-30">If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>

                  <a class="btn btn-md u-btn-primary rounded-0 g-mr-15" href="#">Learn More</a>
                  <a class="btn btn-md u-btn-outline-darkgray rounded-0 g-mr-15" href="#">View Our Work</a>
                </div>

                <div class="col-md-6">
                  <div class="row">
                    <!-- Vertical Progress Bar -->
                    <div class="col-sm-3 text-center g-mb-20 g-mb-2--sm">
                      <div class="js-vr-progress-bar u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                        <div class="js-progress-bar-indicator g-bg-primary" style="height: 60%;"></div>
                      </div>

                      <div class="g-color-gray-dark-v2 g-font-size-13 g-mb-5">60%</div>

                      <h4 class="h6 text-uppercase">Design</h4>
                    </div>
                    <!-- End Vertical Progress Bar -->

                    <!-- Vertical Progress Bar -->
                    <div class="col-sm-3 text-center g-mb-20 g-mb-2--sm">
                      <div class="js-vr-progress-bar u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                        <div class="js-progress-bar-indicator g-bg-primary" style="height: 76%;"></div>
                      </div>

                      <div class="g-color-gray-dark-v2 g-font-size-13 g-mb-5">76%</div>

                      <h4 class="h6 text-uppercase">PHP</h4>
                    </div>
                    <!-- End Vertical Progress Bar -->

                    <!-- Vertical Progress Bar -->
                    <div class="col-sm-3 text-center g-mb-20 g-mb-2--sm">
                      <div class="js-vr-progress-bar u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                        <div class="js-progress-bar-indicator g-bg-primary" style="height: 92%;"></div>
                      </div>

                      <div class="g-color-gray-dark-v2 g-font-size-13 g-mb-5">92%</div>

                      <h4 class="h6 text-uppercase">HTML</h4>
                    </div>
                    <!-- End Vertical Progress Bar -->

                    <!-- Vertical Progress Bar -->
                    <div class="col-sm-3 text-center g-mb-20 g-mb-2--sm">
                      <div class="js-vr-progress-bar u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                        <div class="js-progress-bar-indicator g-bg-primary" style="height: 81%;"></div>
                      </div>

                      <div class="g-color-gray-dark-v2 g-font-size-13 g-mb-5">81%</div>

                      <h4 class="h6 text-uppercase">CSS</h4>
                    </div>
                    <!-- End Vertical Progress Bar -->
                  </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.progress-bar.js"></script>

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                  $(document).ready(function () {
                    // initialization of vertical progress bars
                    var verticalProgressBars = $.HSCore.components.HSProgressBar.init('.js-vr-progress-bar', {
                      direction: 'vertical',
                      indicatorSelector: '.js-progress-bar-indicator'
                    });
                  });


              </script>
            </div>
          </div>

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

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

      <!-- Hero Info #09 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-80">
            <h2 class="h4">Hero Content
              <span class="g-color-primary g-ml-5">#09</span>
            </h2>
          </div>

          <div id="shortcode9-1">
            <div class="shortcode-html">
              <header class="text-center g-mb-60">
                <div class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                  <h2 class="h3 text-uppercase g-font-weight-300 u-heading-v2__title">Our Vision And Mission</h2>
                </div>
                <p class="lead g-px-200--lg">Unify
                  <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                  <strong>successful</strong> business on web and mobile.</p>
              </header>

              <div class="row">
                <div class="col-lg-6 align-self-center g-mb-20 g-mb-0--lg">
                  <div class="media g-mb-20">
                    <div class="d-flex mr-4">
                      <span class="u-icon-v3 g-rounded-50x g-bg-primary g-color-white">
                        <i class="icon-trophy"></i>
                      </span>
                    </div>
                    <div class="media-body">
                      <h3 class="g-font-size-default g-font-weight-600 text-uppercase g-mb-5">Innovation Leader</h3>
                      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration</p>
                    </div>
                  </div>

                  <div class="media g-mb-20">
                    <div class="d-flex mr-4">
                      <span class="u-icon-v3 g-rounded-50x g-bg-primary g-color-white">
                        <i class="icon-directions"></i>
                      </span>
                    </div>
                    <div class="media-body">
                      <h3 class="g-font-size-default g-font-weight-600 text-uppercase g-mb-5">Best Solutions &amp; Approaches</h3>
                      <p>Injected humour or randomised words which don't look available even slightly believable</p>
                    </div>
                  </div>

                  <div class="media g-mb-20">
                    <div class="d-flex mr-4">
                      <span class="u-icon-v3 g-rounded-50x g-bg-primary g-color-white">
                        <i class="icon-diamond"></i>
                      </span>
                    </div>
                    <div class="media-body">
                      <h3 class="g-font-size-default g-font-weight-600 text-uppercase g-mb-5">Quality Service &amp; Support</h3>
                      <p>Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/600x330/img1.png" alt="Image Description">
                </div>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode9-1" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

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

          <div id="shortcode9-2">
            <div class="shortcode-html">
              <header class="text-center g-mb-60">
                <div class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                  <h2 class="h3 text-uppercase g-font-weight-300 u-heading-v2__title">Our Vision And Mission</h2>
                </div>
                <p class="lead g-px-200--lg">Unify
                  <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                  <strong>successful</strong> business on web and mobile.</p>
              </header>

              <div class="row">
                <div class="col-lg-6 g-mb-40 g-mb-0--lg">
                  <img class="img-fluid" src="{{ root }}assets/img-temp/600x330/img1.png" alt="Image Description">
                </div>

                <div class="col-lg-6 align-self-center">
                  <div class="media g-mb-20">
                    <div class="d-flex mr-4">
                      <span class="u-icon-v3 g-rounded-50x g-bg-primary g-color-white">
                        <i class="icon-trophy"></i>
                      </span>
                    </div>
                    <div class="media-body">
                      <h3 class="g-font-size-default g-font-weight-600 text-uppercase g-mb-5">Innovation Leader</h3>
                      <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration</p>
                    </div>
                  </div>

                  <div class="media g-mb-20">
                    <div class="d-flex mr-4">
                      <span class="u-icon-v3 g-rounded-50x g-bg-primary g-color-white">
                        <i class="icon-directions"></i>
                      </span>
                    </div>
                    <div class="media-body">
                      <h3 class="g-font-size-default g-font-weight-600 text-uppercase g-mb-5">Best Solutions &amp; Approaches</h3>
                      <p>Injected humour or randomised words which don't look available even slightly believable</p>
                    </div>
                  </div>

                  <div class="media">
                    <div class="d-flex mr-4">
                      <span class="u-icon-v3 g-rounded-50x g-bg-primary g-color-white">
                        <i class="icon-diamond"></i>
                      </span>
                    </div>
                    <div class="media-body">
                      <h3 class="g-font-size-default g-font-weight-600 text-uppercase g-mb-5">Quality Service &amp; Support</h3>
                      <p>Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

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

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

      <!-- Hero Info #10 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-80">
            <h2 class="h4">Hero Content
              <span class="g-color-primary g-ml-5">#10</span>
            </h2>
          </div>

          <div id="shortcode10-1">
            <div class="shortcode-html">
              <header class="text-center g-mb-60">
                <div class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                  <h2 class="h3 text-uppercase g-font-weight-300 u-heading-v2__title">Our Core Services</h2>
                </div>
                <p class="lead g-px-200--lg">Unify
                  <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                  <strong>successful</strong> business on web and mobile.</p>
              </header>

              <div class="row">
                <div class="col-lg-8 align-self-center g-mb-50 g-mb-0--lg">
                  <div class="row">
                    <div class="col-lg-6">
                      <div class="media g-mb-25">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--sm g-bg-pink g-color-white g-rounded-50x">
                            <i class="icon-bell"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-mb-5">
                            <a href="#" class="g-color-main">Free updates</a>
                          </h3>
                          <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
                        </div>
                      </div>

                      <div class="media g-mb-25">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--sm g-bg-primary g-color-white g-rounded-50x">
                            <i class="icon-like"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-mb-5">
                            <a href="#" class="g-color-main">Premium Sliders</a>
                          </h3>
                          <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
                        </div>
                      </div>

                      <div class="media g-mb-25">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--sm g-bg-gray-dark-v3 g-color-white g-rounded-50x">
                            <i class="icon-bubbles"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-mb-5">
                            <a href="#" class="g-color-main">Dedicated Support</a>
                          </h3>
                          <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
                        </div>
                      </div>
                    </div>

                    <div class="col-lg-6">
                      <div class="media g-mb-25">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--sm g-bg-aqua g-color-white g-rounded-50x">
                            <i class="icon-drawer"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-mb-5">
                            <a href="#" class="g-color-main">4000+ Icons</a>
                          </h3>
                          <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
                        </div>
                      </div>

                      <div class="media g-mb-25">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--sm g-bg-purple g-color-white g-rounded-50x">
                            <i class="icon-screen-tablet"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-mb-5">
                            <a href="#" class="g-color-main">Fully Responsive</a>
                          </h3>
                          <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
                        </div>
                      </div>

                      <div class="media g-mb-25">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--sm g-bg-deeporange g-color-white g-rounded-50x">
                            <i class="icon-directions"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-mb-5">
                            <a href="#" class="g-color-main">SEO Ready</a>
                          </h3>
                          <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 text-center text-lg-left">
                  <img class="img-fluid g-width-300" src="{{ root }}assets/img-temp/350x600/img1.png" alt="Image Description">
                </div>
              </div>
            </div>
          </div>

          {% set SCExtendedClasses = "text-center" %}
          {% set contentTarget = "#shortcode10-1" %}
          {% set modalID = "#modalMarkup" %}
          {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

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

          <div id="shortcode10-2">
            <div class="shortcode-html">
              <div class="row">
                <div class="col-lg-8 g-mb-50 g-mb-0--lg">
                  <div class="u-heading-v2-3--bottom g-brd-primary g-mb-30">
                    <h2 class="h3 text-uppercase g-font-weight-300 u-heading-v2__title">Our Core Services</h2>
                  </div>

                  <div class="row">
                    <div class="col-lg-6">
                      <div class="media g-mb-25">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--sm g-bg-primary g-color-white g-rounded-50x">
                            <i class="icon-bell"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-mb-5">
                            <a href="#" class="g-color-main">Free updates</a>
                          </h3>
                          <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui</p>
                        </div>
                      </div>

                      <div class="media g-mb-25">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--sm g-bg-primary g-color-white g-rounded-50x">
                            <i class="icon-like"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-mb-5">
                            <a href="#" class="g-color-main">Premium Sliders</a>
                          </h3>
                          <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui</p>
                        </div>
                      </div>

                      <div class="media g-mb-25">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--sm g-bg-primary g-color-white g-rounded-50x">
                            <i class="icon-bubbles"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-mb-5">
                            <a href="#" class="g-color-main">Dedicated Support</a>
                          </h3>
                          <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui</p>
                        </div>
                      </div>
                    </div>

                    <div class="col-lg-6">
                      <div class="media g-mb-25">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--sm g-bg-primary g-color-white g-rounded-50x">
                            <i class="icon-drawer"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-mb-5">
                            <a href="#" class="g-color-main">4000+ Icons</a>
                          </h3>
                          <p>At vero eos et accusamus et iusto odio dignissimos ducimus</p>
                        </div>
                      </div>

                      <div class="media g-mb-25">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--sm g-bg-primary g-color-white g-rounded-50x">
                            <i class="icon-screen-tablet"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-mb-5">
                            <a href="#" class="g-color-main">Fully Responsive</a>
                          </h3>
                          <p>At vero eos et accusamus et iusto odio dignissimos ducimus</p>
                        </div>
                      </div>

                      <div class="media g-mb-25">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--sm g-bg-primary g-color-white g-rounded-50x">
                            <i class="icon-directions"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-mb-5">
                            <a href="#" class="g-color-main">SEO Ready</a>
                          </h3>
                          <p>At vero eos et accusamus et iusto odio dignissimos ducimus</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-4 align-self-center text-center text-lg-left">
                  <img class="img-fluid g-width-300" src="{{ root }}assets/img-temp/350x600/img1.png" alt="Image Description">
                </div>
              </div>
            </div>
          </div>

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

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

      <!-- Hero Info #11 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-80">
            <h2 class="h4">Hero Content
              <span class="g-color-primary g-ml-5">#11</span>
            </h2>
          </div>

          <div id="shortcode11">
            <div class="shortcode-html">
              <article class="row">
                <!-- Article Content -->
                <div class="col-lg-6 g-mb-30">
                  <header class="u-heading-v6-2 g-mb-20">
                    <h6 class="text-uppercase g-font-weight-600 g-font-size-12 g-pl-90">About Us</h6>
                    <h3 class="text-uppercase g-font-weight-600 u-heading-v6__title g-brd-primary g-color-black g-mb-15">Quality results with us</h3>
                  </header>

                  <div class="g-pl-90--sm">
                    <p class="g-mb-40">Etiam dolor tortor, egestas a libero eget, sollicitudin maximus nulla. Nunc vitae maximus ipsum. Vestibulum sodales nisi massa, vitae blandit massa luctus id.</p>

                    <div class="d-flex">
                      <!-- Video Bock -->
                      <div class="u-shadow-v10 g-pos-rel g-height-160 g-width-300 g-bg-size-cover" data-bg-img-src="{{ root }}assets/img-temp/500x320/img1.jpg">
                        <a class="js-fancybox-media g-absolute-centered" href="javascript:;"
                           data-src="//vimeo.com/14220611"
                           data-animate-in="flipInY"
                           data-animate-out="flipOutY"
                           data-speed="1000">
                          <i class="fa fa-play g-font-size-40"></i>
                        </a>
                      </div>
                      <!-- End Video Block -->

                      <div class="align-self-center text-uppercase g-font-weight-600 g-color-black g-px-40">
                        View Our Promo Video
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Article Content -->

                <!-- Article Image -->
                <div class="col-lg-6 align-self-center">
                  <img class="w-100" src="{{ root }}assets/img-temp/500x320/img2.jpg" alt="Iamge Description">
                </div>
                <!-- End Article Image -->
              </article>
            </div>

            <div class="shortcode-styles">
              <!-- CSS Implementing Plugins -->
              <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/fancybox/jquery.fancybox.min.css">
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of popups with media
                  $.HSCore.components.HSPopup.init('.js-fancybox-media', {
                    helpers: {
                      media: {},
                      overlay: {
                        css: {
                          'background': 'rgba(255, 255, 255, .8)'
                        }
                      }
                    }
                  });
                });
              </script>
            </div>
          </div>

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

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

      <!-- Hero Info #12 -->
      <section class="g-overflow-hidden g-py-100">
        <div class="container">
          <div class="text-center g-mb-80">
            <h2 class="h4">Hero Content
              <span class="g-color-primary g-ml-5">#12</span>
            </h2>
          </div>

          <div id="shortcode12">
            <div class="shortcode-html">
              <!-- Vision & Mission -->
              <div class="g-pos-rel">
                <div class="row justify-content-between">
                  <div class="col-lg-5 g-mb-30">
                    <div class="g-mt-20 mb-5">
                      <h3 class="h6 text-uppercase g-font-weight-600 g-letter-spacing-2 mb-3">Vision</h3>
                      <h2 class="mb-4">Our Vision and Mission</h2>
                      <p class="g-line-height-2">We aim high at being focused on building relationships with our clients and community. Working together on the daily requires each individual to let the greater good of the team's work surface above their own ego.</p>
                    </div>

                    <!-- Icon Block -->
                    <div class="media mb-4">
                      <div class="d-flex mr-4">
                        <span class="u-icon-v3 g-width-50 g-height-50 g-color-bluegray g-bg-bluegray-opacity-0_1 g-font-size-16 rounded-circle">
                          <i class="icon-communication-114 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <span class="g-font-weight-700">31,500+</span>
                        <p class="g-text">Happy clients all over the world</p>
                      </div>
                    </div>
                    <!-- End Icon Block -->

                    <!-- Icon Block -->
                    <div class="media mb-4">
                      <div class="d-flex mr-4">
                        <span class="u-icon-v3 g-width-50 g-height-50 g-color-primary g-bg-primary-opacity-0_1 g-font-size-16 rounded-circle">
                          <i class="icon-finance-091 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <span class="g-font-weight-700">No. 1</span>
                        <p class="g-text">WrapBootstrap theme of all time</p>
                      </div>
                    </div>
                    <!-- End Icon Block -->

                    <!-- Icon Block -->
                    <div class="media mb-4">
                      <div class="d-flex mr-4">
                        <span class="u-icon-v3 g-width-50 g-height-50 g-color-red g-bg-red-opacity-0_1 g-font-size-16 rounded-circle">
                          <i class="icon-communication-116 u-line-icon-pro"></i>
                        </span>
                      </div>
                      <div class="media-body">
                        <span class="g-font-weight-700">1610+</span>
                        <p class="g-text">UI Elements &amp; Features</p>
                      </div>
                    </div>
                    <!-- End Icon Block -->
                  </div>
                </div>

                <div class="col-lg-6 g-pos-abs--lg g-top-0--lg g-right-0--lg g-mb-30">
                  <img class="w-100 g-width-auto--lg" src="{{ root }}assets/img-temp/900x535/img1.png" alt="Image Description">
                </div>
              </div>
              <!-- End Vision & Mission -->
            </div>
          </div>

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

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

      <!-- Hero Info #13 -->
      <section class="g-py-100">
        <div class="text-center g-mb-80">
          <h2 class="h4">Hero Content
            <span class="g-color-primary g-ml-5">#13</span>
          </h2>
        </div>

        <div id="shortcode13">
          <div class="shortcode-html">
            <div class="g-brd-top--md g-brd-gray-light-v4 g-pos-rel">
              <div class="container g-pos-rel">
                <div class="row justify-content-end no-gutters">
                  <div id="stickyblock-start" class="col-md-6 align-self-center h-100 g-pos-abs--md g-top-0 g-left-0">
                    <div class="js-sticky-block g-sticky-block--md g-bg-img-hero g-min-height-100vh"
                         data-bg-img-src="{{ root }}assets/img-temp/900x900/img7.jpg"
                         data-type="responsive"
                         data-start-point="#stickyblock-start"
                         data-end-point="#stickyblock-end"></div>
                  </div>

                  <div class="col-md-5 g-pb-50 g-pb-0--md">
                    <div class="g-max-width-400 g-py-50">
                      <div class="g-mb-50 g-mb-100--md">
                        <h3 class="h4 g-color-black mb-3"><span class="g-color-primary g-font-weight-600">01.</span> Experts in their Regions</h3>
                        <p class="g-line-height-2">This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.</p>
                      </div>

                      <div class="g-mb-50 g-mb-100--md">
                        <h3 class="h4 g-color-black mb-3"><span class="g-color-primary g-font-weight-600">02.</span> Investment Ideas</h3>
                        <p class="g-line-height-2">The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
                      </div>

                      <div class="g-mb-50 g-mb-100--md">
                        <h3 class="h4 g-color-black mb-3"><span class="g-color-primary g-font-weight-600">03.</span> Premium Service</h3>
                        <p class="g-line-height-2">Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.</p>
                      </div>

                      <div class="g-mb-50 g-mb-100--md">
                        <h3 class="h4 g-color-black mb-3"><span class="g-color-primary g-font-weight-600">04.</span> Your Control</h3>
                        <p class="g-line-height-2">Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.</p>
                      </div>

                      <div class="g-mb-50 g-mb-100--md">
                        <h3 class="h4 g-color-black mb-3"><span class="g-color-primary g-font-weight-600">05.</span> Professional Support</h3>
                        <p class="g-line-height-2">Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.</p>
                      </div>

                      <h3 class="h4 g-color-black mb-3"><span class="g-color-primary g-font-weight-600">06.</span> Maintenance</h3>
                      <p class="g-line-height-2">We get it, you're busy and it's important that someone keeps up with marketing and driving people to your brand. We've got you covered.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div id="stickyblock-end"></div>
          </div>

          <div class="shortcode-scripts">
            <!-- JS Unify -->
            <script type="text/plain" src="{{ root }}assets/js/components/hs.sticky-block.js"></script>

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of sticky blocks
                $.HSCore.components.HSStickyBlock.init('.js-sticky-block');
              });
            </script>
          </div>
        </div>

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

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

      <!-- Hero Info #14 -->
      <section class="g-py-100">
        <div class="container">
          <div class="text-center g-mb-80">
            <h2 class="h4">Hero Content
              <span class="g-color-primary g-ml-5">#14</span>
            </h2>
          </div>

          <div id="shortcode14">
            <div class="shortcode-html">
              <div class="container">
                <div class="row">
                  <div class="col-lg-6 g-mb-100">
                    <!-- Works Info -->
                    <div class="g-pos-rel">
                      <!-- Carousel -->
                      <div class="js-carousel"
                           data-infinite="true"
                           data-slides-show="1"
                           data-arrows-classes="u-arrow-v1 g-width-20 g-height-20 g-pos-abs g-bottom-minus-30 g-left-0 g-color-main g-color-primary--hover"
                           data-arrow-left-classes="fa fa-angle-left"
                           data-arrow-right-classes="fa fa-angle-right g-ml-30">
                        <div class="js-slide">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img8.jpg" alt="Image Description">
                        </div>
                        <div class="js-slide">
                          <img class="img-fluid" src="{{ root }}assets/img-temp/900x600/img9.jpg" alt="Image Description">
                        </div>
                      </div>
                      <!-- End Carousel -->

                      <div class="g-pos-abs g-bottom-minus-30 g-right-0 g-right-minus-20--sm">
                        <a class="js-fancybox d-flex g-text-underline--none--hover" href="javascript:;"
                           data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=1"
                           data-speed="350"
                           data-caption="Video Popup">
                          <span class="g-color-black g-font-weight-500 g-font-size-13 mt-auto mr-4">Watch Transforming Video</span>
                          <span class="u-icon-v3 u-icon-size--lg g-color-white g-bg-primary g-bg-black--hover rounded g-pos-rel g-z-index-1 g-cursor-pointer">
                            <i class="g-font-size-17 g-pos-rel g-left-2 fa fa-play"></i>
                          </span>
                        </a>
                      </div>
                    </div>
                    <!-- End Works Info -->
                  </div>

                  <div class="col-lg-6 g-mb-100">
                    <div class="g-pl-40--lg">
                      <div class="mb-5">
                        <h3 class="mb-4">Transforming Uur World, the Campaign for Bancroft</h3>
                        <p class="g-line-height-2">Margaret Bancroft founded the nation's first private schools for children with developmental disabilities in 1883 based on her ideals of altering perceptions, valuing each person and respecting diversity.</p>
                      </div>

                      <!-- List of Related Topics -->
                      <h4 class="text-uppercase g-font-weight-600 g-font-size-13 mb-3">Related Topics</h4>

                      <ul class="list-inline mb-0">
                        <li class="list-inline-item g-py-12">
                          <a class="u-link-v5 g-brd-around g-brd-gray-light-v4 g-bg-secondary g-color-gray-dark-v5 g-color-white--hover g-bg-primary--hover g-font-weight-500 g-font-size-13 rounded g-px-20 g-py-8" href="#">Marketing</a>
                        </li>
                        <li class="list-inline-item g-py-12">
                          <a class="u-link-v5 g-brd-around g-brd-gray-light-v4 g-bg-secondary g-color-gray-dark-v5 g-color-white--hover g-bg-primary--hover g-font-weight-500 g-font-size-13 rounded g-px-20 g-py-8" href="#">US</a>
                        </li>
                        <li class="list-inline-item g-py-12">
                          <a class="u-link-v5 g-brd-around g-brd-gray-light-v4 g-bg-secondary g-color-gray-dark-v5 g-color-white--hover g-bg-primary--hover g-font-weight-500 g-font-size-13 rounded g-px-20 g-py-8" href="#">Community</a>
                        </li>
                        <li class="list-inline-item g-py-12">
                          <a class="u-link-v5 g-brd-around g-brd-gray-light-v4 g-bg-secondary g-color-gray-dark-v5 g-color-white--hover g-bg-primary--hover g-font-weight-500 g-font-size-13 rounded g-px-20 g-py-8" href="#">Value</a>
                        </li>
                        <li class="list-inline-item g-py-12">
                          <a class="u-link-v5 g-brd-around g-brd-gray-light-v4 g-bg-secondary g-color-gray-dark-v5 g-color-white--hover g-bg-primary--hover g-font-weight-500 g-font-size-13 rounded g-px-20 g-py-8" href="#">Nation</a>
                        </li>
                        <li class="list-inline-item g-py-12">
                          <a class="u-link-v5 g-brd-around g-brd-gray-light-v4 g-bg-secondary g-color-gray-dark-v5 g-color-white--hover g-bg-primary--hover g-font-weight-500 g-font-size-13 rounded g-px-20 g-py-8" href="#">Worldwide</a>
                        </li>
                      </ul>
                      <!-- ENd List of Related Topics -->
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="shortcode-styles">
              <!-- CSS Implementing Plugins -->
              <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/fancybox/jquery.fancybox.min.css">
              <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.css">
            </div>

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

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

              <!-- JS Plugins Init. -->
              <script type="text/plain">
                $(document).ready(function () {
                  // initialization of popups
                  $.HSCore.components.HSPopup.init('.js-fancybox');

                  // initialization of carousel
                  $.HSCore.components.HSCarousel.init('.js-carousel');
                });
              </script>
            </div>
          </div>

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

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

      <!-- Hero blocks #15 -->
      <section class="g-overflow-x-hidden g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Hero blocks
            <span class="g-color-primary g-ml-5">#15</span>
          </h2>
        </div>

        <div id="shortcode15">
          <div class="shortcode-html">
            <!-- Life at -->
            <div class="g-bg-img-hero g-bg-pos-top-center g-bg-size-cover g-bg-cover g-bg-black-opacity-0_8--after" style="background-image: url({{ root }}assets/img-temp/1920x800/img31.jpg);">
              <div class="container g-pos-rel g-z-index-1 g-pt-100 g-pb-50">
                <!-- Life at Heading -->
                <div class="row align-items-center g-mb-50">
                  <div class="col-sm-6">
                    <span class="d-block text-uppercase g-color-primary g-font-weight-500 g-font-size-13 mb-4">Be Closer to Us</span>
                    <h2 class="g-color-white g-font-size-35--md mb-0">Life at Unify Marketing</h2>
                  </div>
                  <div class="col-sm-6">
                    <div class="text-right">
                      <a class="btn u-btn-black g-brd-main g-brd-primary--hover g-color-primary g-color-white--hover g-bg-main g-bg-primary--hover g-font-weight-600 g-font-size-12 text-uppercase g-px-25 g-py-15" href="#">
                        I Feel Like I Belong to this Community
                        <i class="g-pos-rel g-top-minus-1 ml-2 fa fa-angle-right"></i>
                      </a>
                    </div>
                  </div>
                </div>
                <!-- End Life at Heading -->

                <div class="row">
                  <!-- Life at - Carousel 1 -->
                  <div id="carouselCus4" class="js-carousel col-lg-7 g-pl-300--md g-mb-50"
                       data-infinite="true"
                       data-vertical="true"
                       data-pagi-classes="u-carousel-indicators-v33 g-pos-abs--md g-top-0 g-left-0 g-pl-15--md"
                       data-nav-for="#carouselCus3">
                    <div class="js-slide"
                         data-title="01. Team of Loyal Marketers">
                      <img class="img-fluid g-max-width-400" src="{{ root }}assets/img-temp/600x600/img1.jpg" alt="Image description">
                    </div>

                    <div class="js-slide"
                         data-title="02. Jacks of All. Experts in All.">
                      <img class="img-fluid g-max-width-400" src="{{ root }}assets/img-temp/600x600/img2.jpg" alt="Image description">
                    </div>

                    <div class="js-slide"
                         data-title="03. Creative Studio">
                      <img class="img-fluid g-max-width-400" src="{{ root }}assets/img-temp/600x600/img3.jpg" alt="Image description">
                    </div>

                    <div class="js-slide"
                         data-title="04. The Best Project Planner">
                      <img class="img-fluid g-max-width-400" src="{{ root }}assets/img-temp/600x600/img4.jpg" alt="Image description">
                    </div>

                    <div class="js-slide"
                         data-title="05. Production">
                      <img class="img-fluid g-max-width-400" src="{{ root }}assets/img-temp/600x600/img5.jpg" alt="Image description">
                    </div>
                  </div>
                  <!-- End Life at - Carousel 1 -->

                  <!-- Life at - Carousel 2 -->
                  <div id="carouselCus3" class="js-carousel col-lg-5 g-pl-40--lg g-mb-50"
                       data-infinite="true"
                       data-fade="true"
                       data-nav-for="#carouselCus4">
                    <div class="js-slide">
                      <h3 class="g-color-white mb-4">Team of Loyal Marketers</h3>
                      <p class="g-color-white-opacity-0_8 g-line-height-2">We are a creative studio focusing on culture, luxury, editorial &amp; art. We provide a competitive salary and benefits package. Our equity plan allows full-time employees to share ownership and achievement in our company.</p>
                      <p class="g-color-white-opacity-0_8 g-line-height-2">This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key. Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.</p>
                    </div>

                    <div class="js-slide">
                      <h3 class="g-color-white mb-4">Jacks of All. Experts in All.</h3>
                      <p class="g-color-white-opacity-0_8 g-line-height-2">We are masters of most current technologies and we enjoy things that we know we're good at. We offer a flexible vacation policy, paid maternal and paternal leave, wellness services, culinary programs, learning and development opportunities, and annual office celebrations—all of which allow you to connect, refresh, and thrive.</p>
                    </div>

                    <div class="js-slide">
                      <h3 class="g-color-white mb-4">Creative Studio</h3>
                      <p class="g-color-white-opacity-0_8 g-line-height-2">This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key. Working together on the daily requires each individual to let the greater good of the team's work surface above their own ego.</p>
                      <p class="g-color-white-opacity-0_8 g-line-height-2">The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels. Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs. Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.</p>
                    </div>

                    <div class="js-slide">
                      <h3 class="g-color-white mb-4">The Best Project Planner</h3>
                      <p class="g-color-white-opacity-0_8 g-line-height-2">It's important to stay detail oriented with every project we tackle. Staying focused allows us to turn every project we complete into something we love. We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt. As creatives, it's important that we strive to do work outside of obligation. This lets us stay ahead of the curve for our clients and internal projects.</p>
                    </div>

                    <div class="js-slide">
                      <h3 class="g-color-white mb-4">Production</h3>
                      <p class="g-color-white-opacity-0_8 g-line-height-2">At the end of the day, it's important to not let being busy distract us from having fun. Smiling, laughing, and hanging helps us work together to achieve this.</p>
                    </div>
                  </div>
                </div>
                <!-- End Life at - Carousel 2 -->
              </div>
            </div>
            <!-- End Life at -->
          </div>

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

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

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

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of carousel
                $.HSCore.components.HSCarousel.init('.js-carousel');
              });
            </script>
          </div>
        </div>

        {% set SCExtendedClasses = "container" %}
        {% set contentTarget = "#shortcode15" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Hero blocks #15 -->

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

      <!-- Hero blocks #16 -->
      <section class="g-overflow-x-hidden g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Hero blocks
            <span class="g-color-primary g-ml-5">#16</span>
          </h2>
        </div>

        <div id="shortcode16">
          <div class="shortcode-html">
            <div class="container g-pt-50 g-pb-20">
              <div class="row justify-content-between align-items-center">
                <div class="col-lg-7 g-mb-50">
                  <!-- About Info -->
                  <div class="mb-5">
                    <span class="d-block text-uppercase g-color-dark-light-v1 g-font-weight-500 g-font-size-13 mb-4">What is Unify Marketing?</span>
                    <h2 class="mb-4 g-color-black">Your Management and Comprehensive Solution</h2>

                    <div class="row">
                      <div class="col-sm-3">
                        <!-- Nav tabs -->
                        <ul class="nav flex-column" role="tablist" data-target="nav-1-1-accordion-primary-ver">
                          <li class="nav-item">
                            <a class="nav-link active g-color-black g-color-primary--hover g-color-primary--parent-active g-pl-0" data-toggle="tab" href="#nav-1-1-accordion-primary-ver--1" role="tab">Who we are</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link g-color-black g-color-primary--hover g-color-primary--parent-active g-pl-0" data-toggle="tab" href="#nav-1-1-accordion-primary-ver--2" role="tab">Our vision</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link g-color-black g-color-primary--hover g-color-primary--parent-active g-pl-0" data-toggle="tab" href="#nav-1-1-accordion-primary-ver--3" role="tab">Our mission</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link g-color-black g-color-primary--hover g-color-primary--parent-active g-pl-0" data-toggle="tab" href="#nav-1-1-accordion-primary-ver--4" role="tab">Our History</a>
                          </li>
                        </ul>
                        <!-- End Nav tabs -->
                      </div>

                      <div class="col-sm-9">
                        <!-- Tab panes -->
                        <div id="nav-1-1-accordion-primary-ver" class="tab-content">
                          <div class="tab-pane fade show active" id="nav-1-1-accordion-primary-ver--1" role="tabpanel"
                               data-parent="#nav-1-1-accordion-primary-ver">
                            <p class="g-line-height-2">Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs. The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
                            <p class="g-line-height-2">Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-1-1-accordion-primary-ver--2" role="tabpanel"
                               data-parent="#nav-1-1-accordion-primary-ver">
                            <p class="g-line-height-2">We aim high at being focused on building relationships with our clients and community. Using our creative gifts drives this foundation.</p>
                            <p class="g-line-height-2">Working together on the daily requires each individual to let the greater good of the team's work surface above their own ego. It's important to stay detail oriented with every project we tackle. Staying focused allows us to turn every project we complete into something we love.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-1-1-accordion-primary-ver--3" role="tabpanel"
                               data-parent="#nav-1-1-accordion-primary-ver">
                            <p class="g-line-height-2">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt. As creatives, it's important that we strive to do work outside of obligation. This lets us stay ahead of the curve for our clients and internal projects.</p>
                          </div>

                          <div class="tab-pane fade" id="nav-1-1-accordion-primary-ver--4" role="tabpanel"
                               data-parent="#nav-1-1-accordion-primary-ver">
                            <p class="g-line-height-2">Understanding who you are and what you want is our strategy for your brand. We are always figuring out ways to capture your vision, so people can get on board.</p>
                          </div>
                        </div>
                        <!-- End Tab panes -->
                      </div>
                    </div>
                    <!-- End Tab -->
                  </div>

                  <a class="btn u-btn-black g-brd-primary--hover g-bg-primary--hover g-font-weight-600 g-font-size-12 text-uppercase g-px-25 g-py-13 mr-3" href="page-about-1.html">
                    About Us
                    <i class="g-pos-rel g-top-minus-1 ml-2 fa fa-angle-right"></i>
                  </a>
                  <a class="g-brd-bottom g-brd-black g-brd-primary--hover g-color-black g-color-primary--hover g-font-size-12 text-uppercase g-text-underline--none--hover g-pb-3" href="page-contacts-1.html">
                    Ask a Question
                  </a>
                  <!-- End About Info -->
                </div>

                <div class="col-sm-8 col-md-6 col-lg-4 mx-auto g-mb-50">
                  <!-- About Info -->
                  <div class="d-inline-block u-shadow-v20 g-width-300 g-height-300 g-brd-around g-brd-10 g-brd-white g-bg-cover g-bg-black-opacity-0_8--after g-rounded-circle--after text-center rounded-circle g-pa-50" style="background-image: url({{ root }}assets/img-temp/300x300/img1.jpg);">
                    <div class="g-pos-rel g-z-index-1">
                      <span class="d-block g-color-white-opacity-0_6 g-font-size-13 text-uppercase">Trusted by</span>
                      <span class="d-block g-color-white g-font-weight-300 g-font-size-90 g-line-height-1_2 mb-2">32k+</span>
                      <span class="d-block g-color-white g-font-weight-300 g-font-size-13 text-uppercase">Users all<br>over the world</span>
                    </div>

                    <a class="js-fancybox d-flex g-text-underline--none--hover ml-auto g-mt-15" href="javascript:;"
                       data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=1"
                       data-speed="350"
                       data-caption="Video Popup">
                      <span class="u-icon-v3 u-icon-size--xl u-icon-scale-1_2--hover g-bg-primary g-color-white rounded-circle g-pos-rel g-z-index-1 g-cursor-pointer">
                        <i class="g-font-size-17 g-pos-rel g-left-2 fa fa-play"></i>
                      </span>
                    </a>
                  </div>
                  <!-- End About Info -->
                </div>
              </div>
            </div>
          </div>

          <div class="shortcode-styles">
            <!-- CSS Implementing Plugins -->
            <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/fancybox/jquery.fancybox.css">
          </div>

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

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

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of popups
                $.HSCore.components.HSPopup.init('.js-fancybox');
              });
            </script>
          </div>
        </div>

        {% set SCExtendedClasses = "container" %}
        {% set contentTarget = "#shortcode16" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Hero blocks #16 -->

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

      <!-- Hero blocks #17 -->
      <section class="g-overflow-x-hidden g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Hero blocks
            <span class="g-color-primary g-ml-5">#17</span>
          </h2>
        </div>

        <div id="shortcode17">
          <div class="shortcode-html">
            <!-- Learn First Steps -->
            <div class="container">
              <div class="row">
                <div class="col-lg-5 order-lg-2 g-mb-50">
                  <!-- List of Links -->
                  <ul class="list-unstyled g-pl-15--lg mb-0">
                    <!-- Links -->
                    <li>
                      <div class="media u-block-hover g-color-black g-text-underline--none--hover g-transition-0_5 g-px-10 g-py-15">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--lg u-shadow-v35 g-color-blue g-color-white--hover g-bg-secondary g-bg-black--hover g-font-size-20 rounded-circle">
                            <i class="icon-finance-067 u-line-icon-pro"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-color-blue g-color-black--hover g-font-primary mb-1">Future Students</h3>
                          <p class="g-color-gray-dark-v4 mb-0">Unify's unique personality rests on the bedrock values of academic excellence.</p>
                        </div>
                        <a class="u-link-v2" href="page-future-students-1.html"></a>
                      </div>
                    </li>
                    <!-- End Links -->

                    <!-- Links -->
                    <li>
                      <div class="media u-block-hover g-color-black g-text-underline--none--hover g-transition-0_5 g-px-10 g-py-15">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--lg u-shadow-v35 g-color-purple g-color-white--hover g-bg-secondary g-bg-black--hover g-font-size-20 rounded-circle">
                            <i class="icon-education-103 u-line-icon-pro"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-color-purple g-color-black--hover g-font-primary mb-1">Academic Programs</h3>
                          <p class="g-color-gray-dark-v4 mb-0">An Unify education fosters personal growth and a commitment to the world beyond oneself.</p>
                        </div>
                        <a class="u-link-v2" href="page-programs-1.html"></a>
                      </div>
                    </li>
                    <!-- End Links -->

                    <!-- Links -->
                    <li>
                      <div class="media u-block-hover g-color-black g-text-underline--none--hover g-transition-0_5 g-px-10 g-py-15">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--lg u-shadow-v35 g-color-teal g-color-white--hover g-bg-secondary g-bg-black--hover g-font-size-20 rounded-circle">
                            <i class="icon-education-124 u-line-icon-pro"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-color-teal g-color-black--hover g-font-primary mb-1">Key Dates</h3>
                          <p class="g-color-gray-dark-v4 mb-0">There is no better way to understand Unify University than by spending time on campus.</p>
                        </div>
                        <a class="u-link-v2" href="page-events-1.html"></a>
                      </div>
                    </li>
                    <!-- End Links -->

                    <!-- Links -->
                    <li>
                      <div class="media u-block-hover g-color-black g-text-underline--none--hover g-transition-0_5 g-px-10 g-py-15">
                        <div class="d-flex mr-4">
                          <span class="u-icon-v3 u-icon-size--lg u-shadow-v35 g-color-brown g-color-white--hover g-bg-secondary g-bg-black--hover g-font-size-20 rounded-circle">
                            <i class="icon-education-127 u-line-icon-pro"></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h3 class="h5 g-color-brown g-color-black--hover g-font-primary mb-1">Campus Tours</h3>
                          <p class="g-color-gray-dark-v4 mb-0">Take a tour, learn about admission and financial aid, speak with current students.</p>
                        </div>
                        <a class="u-link-v2" href="page-campus-life-1.html"></a>
                      </div>
                    </li>
                    <!-- End Links -->
                  </ul>
                  <!-- End List of Links -->
                </div>

                <div class="col-lg-7 order-lg-1 g-pt-10 g-mb-60">
                  <!-- Youtube Iframe -->
                  <div class="embed-responsive embed-responsive-16by9 u-shadow-v36 g-brd-around g-brd-7 g-brd-white g-rounded-5 mb-4">
                    <iframe src="https://www.youtube.com/embed/FxiskmF16gU?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                  </div>
                  <!-- End Youtube Iframe -->

                  <h4 class="h3 mb-0">Explore our University in minutes</h4>
                </div>
              </div>
            </div>
            <!-- End Learn First Steps -->
          </div>
        </div>

        {% set SCExtendedClasses = "container" %}
        {% set contentTarget = "#shortcode17" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Hero blocks #17 -->

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

      <!-- Hero blocks #18 -->
      <section class="g-overflow-x-hidden g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Hero blocks
            <span class="g-color-primary g-ml-5">#18</span>
          </h2>
        </div>

        <div id="shortcode18">
          <div class="shortcode-html">
            <!-- Researches -->
            <div class="g-pos-rel" style="background-color: #26304d;">
              <div class="container g-pos-rel g-z-index-1 g-pt-100 g-pb-120">
                <div class="row align-items-lg-center">
                  <div class="col-lg-7 order-lg-2 g-mb-50">
                    <div class="g-pos-rel g-pl-15--lg">
                      <img class="img-fluid w-100 u-shadow-v19 g-brd-around g-brd-7 g-brd-secondary rounded" src="{{ root }}assets/img-temp/600x400/img2.jpg" alt="Image Description">

                      <!-- Video Button -->
                      <div class="g-absolute-centered--y g-left-0 g-right-0 text-center mx-auto">
                        <a class="js-fancybox d-inline-block u-block-hover g-bg-white g-rounded-50 g-text-underline--none--hover g-transition-0_3 g-px-20 g-py-10" href="https://vimeo.com/167434033">
                          <span class="d-flex align-items-center">
                            <span class="u-icon-v3 g-width-30 g-height-30 g-color-white g-bg-primary g-bg-black--hover rounded-circle mr-3">
                              <i class="g-font-size-13 g-ml-2 hs-icon hs-icon-play"></i>
                            </span>
                            <span class="g-color-primary g-color-black--hover">Play video</span>
                          </span>
                        </a>
                      </div>
                      <!-- End Video Button -->
                    </div>
                  </div>

                  <div class="col-lg-5 order-lg-1 g-mb-50">
                    <!-- Researches - Info -->
                    <div class="mb-5">
                      <h2 class="h3 g-color-white mb-4">Early-career researchers excel in NHMRC fellowships</h2>
                      <p class="g-color-white-opacity-0_7">Prime Minister Malcolm Turnbull and NHMRC CEO Professor Anne Kelso announced this week that Unify had received eight Career Development Fellowships, 14 Early Career Fellowships, five Practitioner Fellowships, seven Research Fellowships and three Centres of Research Excellence.</p>
                    </div>

                    <div class="media g-max-width-300">
                      <div class="d-flex mr-3">
                        <div class="g-width-40 g-height-40">
                          <img class="img-fluid g-brd-around g-brd-2 g-brd-white rounded-circle" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">
                        </div>
                      </div>
                      <div class="media-body">
                        <span class="d-block g-color-white g-font-secondary g-font-size-16 mb-2">" The University has an impressive track record in NHMRC funding "</span>
                        <h5 class="h6 g-color-primary g-font-primary g-font-weight-700">- Professor Jonathan</h5>
                      </div>
                    </div>
                    <!-- End Researches - Info -->
                  </div>
                </div>
              </div>

              <!-- SVG Background Shape -->
              <svg class="g-pos-abs g-bottom-0 g-left-0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                   viewBox="0 0 1920 323" enable-background="new 0 0 1920 323" xml:space="preserve">
                <polygon fill="#2c3856" points="0,323 1920,323 1920,0 "/>
                <polygon fill="#293451" points="-0.5,322.5 -0.5,131.5 658.3,212.3 "/>
              </svg>
              <!-- End SVG Background Shape -->
            </div>
            <!-- End Researches -->
          </div>

          <div class="shortcode-styles">
            <!-- CSS Implementing Plugins -->
            <link type="text/plain" rel="stylesheet" href="{{ root }}assets/vendor/fancybox/jquery.fancybox.css">
          </div>

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

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

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of popups
                $.HSCore.components.HSPopup.init('.js-fancybox');
              });
            </script>
          </div>
        </div>

        {% set SCExtendedClasses = "container" %}
        {% set contentTarget = "#shortcode18" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Hero blocks #18 -->

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

      <!-- Hero blocks #19 -->
      <section class="g-overflow-x-hidden g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h4">Hero blocks
            <span class="g-color-primary g-ml-5">#19</span>
          </h2>
        </div>

        <div id="shortcode19">
          <div class="shortcode-html">
            <!-- Hero Content -->
            <div class="container-fluid g-pos-rel g-pa-30">
              <div class="row justify-content-end align-items-center">
                <div class="col-sm-6 g-mb-30 g-mb-0--sm">
                  <!-- Carousel - Info -->
                  <div id="carouselCus1" class="js-carousel g-bg-secondary g-pos-rel"
                       data-infinite="true"
                       data-nav-for="#carouselCus2"
                       data-in-effect="slideInUp"
                       data-out-effect="slideInDown"
                       data-pagi-classes="u-carousel-indicators-v35--main g-absolute-centered--x g-bottom-20">
                    <div class="js-slide d-flex g-min-height-70vh g-flex-centered g-pa-70">
                      <div class="text-center">
                        <div class="mb-5">
                          <h2 class="h1 mb-3">Fuel your success with dynamic learning</h2>
                          <p>Don't just learn: get real-world experience as you learn. It gives you an edge by accelerating your personal and academic growth, and prepares you for career success.</p>
                        </div>
                        <a class="btn g-brd-2 g-brd-main-opacity-0_1 g-brd-primary--hover g-color-main g-color-white--hover g-bg-primary--hover g-font-size-15 g-rounded-30 g-px-25 g-py-8" href="#">Learn More</a>
                      </div>
                    </div>

                    <div class="js-slide d-flex g-min-height-70vh g-flex-centered g-pa-70">
                      <div class="text-center">
                        <div class="mb-5">
                          <h2 class="h1 mb-3">Make a vital impact your way</h2>
                          <p>Being at Unify means belonging to a community of minds committed to tackling real-world issues. What will your vital impact be?</p>
                        </div>
                        <a class="btn g-brd-2 g-brd-main-opacity-0_1 g-brd-primary--hover g-color-main g-color-white--hover g-bg-primary--hover g-font-size-15 g-rounded-30 g-px-25 g-py-8" href="#">Learn More</a>
                      </div>
                    </div>

                    <div class="js-slide d-flex g-min-height-70vh g-flex-centered g-pa-70">
                      <div class="text-center">
                        <div class="mb-5">
                          <h2 class="h1 mb-3">Learn by doing</h2>
                          <p>The world is interconnected and ever-evolving. Learning should be too. That's why our undergraduate students are immersed in hands-on learning opportunities.</p>
                        </div>
                        <a class="btn g-brd-2 g-brd-main-opacity-0_1 g-brd-primary--hover g-color-main g-color-white--hover g-bg-primary--hover g-font-size-15 g-rounded-30 g-px-25 g-py-8" href="#">Learn More</a>
                      </div>
                    </div>
                  </div>
                  <!-- End Carousel - Info -->
                </div>

                <div class="col-sm-6">
                  <!-- Carousel - Image -->
                  <div id="carouselCus2" class="js-carousel g-pos-rel"
                       data-infinite="true"
                       data-nav-for="#carouselCus1"
                       data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-40 g-height-40 g-color-white g-color-primary--hover g-font-size-40"
                       data-arrow-left-classes="fa fa-angle-left g-left-40"
                       data-arrow-right-classes="fa fa-angle-right g-right-40">
                    <div class="js-slide g-min-height-70vh g-bg-size-cover g-bg-pos-top-center" data-bg-img-src="{{ root }}assets/img-temp/900x700/img2.jpg"></div>
                    <div class="js-slide g-min-height-70vh g-bg-size-cover g-bg-pos-top-center" data-bg-img-src="{{ root }}assets/img-temp/900x700/img3.jpg"></div>
                    <div class="js-slide g-min-height-70vh g-bg-size-cover g-bg-pos-top-center" data-bg-img-src="{{ root }}assets/img-temp/900x700/img4.jpg"></div>
                  </div>
                  <!-- End Carousel - Image -->
                </div>
              </div>
            </div>
            <!-- End Hero Content -->
          </div>

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

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

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

            <!-- JS Plugins Init. -->
            <script type="text/plain">
              $(document).ready(function () {
                // initialization of carousel
                $.HSCore.components.HSCarousel.init('.js-carousel');
              });
            </script>
          </div>
        </div>

        {% set SCExtendedClasses = "container" %}
        {% set contentTarget = "#shortcode19" %}
        {% set modalID = "#modalMarkup" %}
        {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
      </section>
      <!-- End Hero blocks #19 -->
    </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/fancybox/jquery.fancybox.min.js"></script>
  <script src="{{ root }}assets/vendor/slick-carousel/slick/slick.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.popup.js"></script>
  <script src="{{ root }}assets/js/components/hs.progress-bar.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.sticky-block.js"></script>

  <script src="{{ root }}assets/js/components/hs.carousel.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 popups
      $.HSCore.components.HSPopup.init('.js-fancybox');

      // initialization of popups with media
      $.HSCore.components.HSPopup.init('.js-fancybox-media', {
        helpers: {
          media: {},
          overlay: {
            css: {
              'background': 'rgba(255, 255, 255, .8)'
            }
          }
        }
      });

      // initialization of sticky blocks
      $.HSCore.components.HSStickyBlock.init('.js-sticky-block');

      // initialization of carousel
      $.HSCore.components.HSCarousel.init('.js-carousel');
    });

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

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

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

      // initialization of horizontal progress bars
      var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar-v1', {
        moveElementSelector: '.js-move-element',
        moveElementTo: 'currentPosition'
      });

      // initialization of vertical progress bars
      var verticalProgressBars = $.HSCore.components.HSProgressBar.init('.js-vr-progress-bar', {
        direction: 'vertical',
        indicatorSelector: '.js-progress-bar-indicator'
      });
    });
  </script>
</body>
</html>
