{# 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" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/bootstrap/offcanvas.css">
{% include "html/assets/include/nunjucks/partials/core-icons.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">

{% 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>
  <main>
    {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main-fullwidth.njk" %}

    <section class="container-fluid">
      <div class="row row-offcanvas row-offcanvas-left">
        <div class="col-auto sidebar-offcanvas u-sidebar-navigation g-bg-secondary g-px-0 g-py-20">
          {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-local-search.njk" %}
        </div>

        <div class="col g-py-30 g-pa-30--md">
          <div class="g-hidden-md-up">
            <button type="button" class="btn btn-primary btn-sm"
                    data-toggle="offcanvas">Toggle shocrtcode nav
            </button>
          </div>

          <h1 class="g-font-weight-300 g-letter-spacing-1 g-pt-30 g-mb-35">Hero Content</h1>

          <!-- Hero Info #01 -->
          <section class="g-pb-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">
                <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/inline/inline3.png" alt="Image Description">
                    </div>
                  </div>
                </div>
              </div>

              {% set SCExtendedClasses = "text-center" %}
              {% set contentTarget = "#shortcode1" %}
              {% 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">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-6">
                      <img class="img-fluid" src="{{ root }}assets/img/inline/inline3.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 = "#shortcode2" %}
              {% 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="shortcode3">
                <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">
                      <img class="img-fluid" src="{{ root }}assets/img/inline/inline9.png" alt="Image Description">
                    </div>
                  </div>
                </div>
              </div>

              {% set SCExtendedClasses = "text-center" %}
              {% set contentTarget = "#shortcode3" %}
              {% 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="shortcode4">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-lg-5 g-mb-0--lg">
                      <img class="img-fluid" src="{{ root }}assets/img/inline/inline9.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 = "#shortcode4" %}
              {% 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="shortcode5">
                <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 = "#shortcode5" %}
              {% 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="shortcode6">
                <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/inline/inline8.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 = "#shortcode6" %}
              {% 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="shortcode7">
                <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/inline/inline4.png" alt="Image Description">
                    </div>
                  </div>
                </div>
              </div>

              {% set SCExtendedClasses = "text-center" %}
              {% set contentTarget = "#shortcode7" %}
              {% 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="shortcode8">
                <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/inline/inline4.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 = "#shortcode8" %}
              {% 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="shortcode9">
                <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/inline/inline5.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 = "#shortcode9" %}
              {% 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">
                <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/inline/inline5.png" alt="Image Description">
                    </div>
                  </div>
                </div>
              </div>

              {% set SCExtendedClasses = "text-center" %}
              {% set contentTarget = "#shortcode10" %}
              {% 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="shortcode11">
                <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 = "#shortcode11" %}
              {% 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="shortcode12">
                <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 = "#shortcode12" %}
              {% 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="shortcode13">
                <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/inline/inline4.png" alt="Image Description">
                    </div>
                  </div>
                </div>
              </div>

              {% set SCExtendedClasses = "text-center" %}
              {% set contentTarget = "#shortcode13" %}
              {% 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="shortcode14">
                <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/inline/inline4.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 = "#shortcode14" %}
              {% 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="shortcode15">
                <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/inline/inline11.png" alt="Image Description">
                    </div>
                  </div>
                </div>
              </div>

              {% set SCExtendedClasses = "text-center" %}
              {% set contentTarget = "#shortcode15" %}
              {% 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="shortcode16">
                <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/inline/inline11.png" alt="Image Description">
                    </div>
                  </div>
                </div>
              </div>

              {% set SCExtendedClasses = "text-center" %}
              {% set contentTarget = "#shortcode16" %}
              {% 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="shortcode17">
                <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="//vimeo.com/14220611"
                               data-open-effect="flipInY"
                               data-close-effect="flipOutY"
                               data-open-speed="1000"
                               data-close-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 = "#shortcode17" %}
              {% 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-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="shortcode18">
                <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 = "#shortcode18" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </section>
          <!-- End Hero Info #12 -->
        </div>
      </div>
    </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" %}
  <script src="{{ root }}assets/vendor/bootstrap/offcanvas.js"></script>

  <!-- JS Implementing Plugins -->
  <script src="{{ root }}assets/vendor/appear.js"></script>
  <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  <script src="{{ root }}assets/vendor/fancybox/jquery.fancybox.min.js"></script>

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

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

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

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

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

  <script src="{{ root }}assets/js/components/hs.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.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 with media
      $.HSCore.components.HSPopup.init('.js-fancybox-media', {
        helpers: {
          media: {},
          overlay: {
            css: {
              'background': 'rgba(255, 255, 255, .8)'
            }
          }
        }
      });
    });

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

      // initialization of autocomplet
      $.HSCore.components.HSLocalSearchAutocomplete.init('#autocomplete1');

      // 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>
