{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "home" %}
{% set mainNavActive_2 = "home-aspire" %}
{% set title = "Home Aspire | " %}

{% 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/fancybox/jquery.fancybox.min.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/typedjs/typed.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">

    {% include "html/assets/include/nunjucks/partials/css/css-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.njk" %}

      <!-- Promo Block -->
      <section class="g-flex-centered g-bg-pos-center g-bg-img-hero g-pos-rel g-z-index-1 g-overflow-hidden" style="background-image: url({{ root }}assets/img-temp/1920x1080/img14.jpg);" data-calc-target="#js-header">
        <div class="g-pos-abs g-top-0 g-left-0"
             data-animation="fadeInDown"
             data-animation-delay="100"
             data-animation-duration="1500">
          <img class="img-fluid" src="{{ root }}assets/img-temp/1920x1080/img15.png" alt="Image Description">
        </div>
        <div class="g-pos-abs g-bottom-0 g-right-0"
             data-animation="fadeInUp"
             data-animation-delay="1800"
             data-animation-duration="1500">
          <img class="img-fluid" src="{{ root }}assets/img-temp/1920x1080/img16.png" alt="Image Description">
        </div>

        <div class="container text-center g-z-index-1">
          <div class="mb-4">
            <h1 class="h2 d-inline-block g-color-black g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1"
                data-animation="fadeInDown"
                data-animation-delay="1000"
                data-animation-duration="1500">The</h1>
            <h2 class="h2 d-inline-block g-color-black g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1"
                data-animation="fadeInDown"
                data-animation-delay="1200"
                data-animation-duration="1500">Green</h2>
            <h2 class="h2 d-inline-block g-color-primary g-font-weight-700 g-font-size-40 g-font-size-75--md text-uppercase g-line-height-1"
                data-animation="fadeInDown"
                data-animation-delay="1400"
                data-animation-duration="1500">Unify</h2>
          </div>

          <div class="mx-auto g-max-width-600 g-overflow-hidden">
            <p class="g-color-black g-font-size-18 g-font-size-24--md g-mb-40"
               data-animation="fadeInDown"
               data-animation-delay="1600"
               data-animation-duration="1500">
              Unify is creative technology company providing key digital services on web and mobile. We minimize the gap between technology and its audience.
            </p>
          </div>

          <div
               data-animation="fadeInDown"
               data-animation-delay="2000"
               data-animation-duration="1500">
            <a class="btn btn-lg u-btn-outline-black g-font-weight-600 g-font-size-13 text-uppercase g-rounded-50 mx-2 g-px-25 g-py-15" href="#!">Discover More</a>
            <a class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-13 text-uppercase g-rounded-50 mx-2 g-px-25 g-py-15" href="#!">Purchase Now</a>
          </div>
        </div>
      </section>
      <!-- End Promo Block -->

      <!-- Icon Blocks -->
      <section class="text-center">
        <div class="row no-gutters">
          <!-- Icon Blocks -->
          <div class="col-lg-4 u-bg-overlay g-bg-img-hero g-bg-cyan-opacity-0_9--after g-color-white text-center g-pa-60" style="background-image: url({{ root }}assets/img-temp/400x270/img6.jpg);">
            <div class="u-bg-overlay__inner">
              <span class="u-icon-v2 u-icon-size--lg u-shadow-v24 rounded-circle g-mb-25">
                <i class="icon-finance-226 u-line-icon-pro"></i>
              </span>
              <h3 class="h5 text-uppercase g-font-weight-600 g-mb-15">Invest To Us</h3>
              <p class="g-font-size-16 g-mb-20">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
              <a class="btn u-shadow-v21 g-bg-white g-color-cyan g-color-white--hover g-bg-white-opacity-0_4--hover g-font-size-12 text-uppercase g-font-weight-600 g-rounded-50 g-py-12 g-px-20" href="#!">Learn More</a>
            </div>
          </div>
          <!-- End Icon Blocks -->

          <!-- Icon Blocks -->
          <div class="col-lg-4 u-bg-overlay g-bg-img-hero g-bg-purple-opacity-0_9--after g-color-white text-center g-pa-60" style="background-image: url({{ root }}assets/img-temp/400x270/img15.jpg);">
            <div class="u-bg-overlay__inner">
              <span class="u-icon-v2 u-icon-size--lg u-shadow-v24 rounded-circle g-mb-25">
                <i class="icon-finance-196 u-line-icon-pro"></i>
              </span>
              <h3 class="h5 text-uppercase g-font-weight-600 g-mb-15">Increase Income</h3>
              <p class="g-font-size-16 g-mb-20">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
              <a class="btn u-shadow-v21 g-bg-white g-color-purple g-color-white--hover g-bg-white-opacity-0_4--hover g-font-size-12 text-uppercase g-font-weight-600 g-rounded-50 g-py-12 g-px-20" href="#!">Check It Now</a>
            </div>
          </div>
          <!-- End Icon Blocks -->

          <!-- Icon Blocks -->
          <div class="col-lg-4 u-bg-overlay g-bg-img-hero g-bg-teal-opacity-0_9--after g-color-white text-center g-pa-60" style="background-image: url({{ root }}assets/img-temp/400x270/img7.jpg);">
            <div class="u-bg-overlay__inner">
              <span class="u-icon-v2 u-icon-size--lg u-shadow-v24 rounded-circle g-mb-25">
                <i class="icon-finance-147 u-line-icon-pro"></i>
              </span>
              <h3 class="h5 text-uppercase g-font-weight-600 g-mb-15">Collect Cash</h3>
              <p class="g-font-size-16 g-mb-20">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
              <a class="btn u-shadow-v21 g-bg-white g-color-teal g-color-white--hover g-bg-white-opacity-0_4--hover g-font-size-12 text-uppercase g-font-weight-600 g-rounded-50 g-py-12 g-px-20" href="#!">Discover More</a>
            </div>
          </div>
          <!-- End Icon Blocks -->
        </div>
      </section>
      <!-- End Icon Blocks -->

      <!-- About Us -->
      <section class="g-py-100">
        <div class="container">
          <article class="row">
            <!-- Article Content -->
            <div class="col-lg-6 g-mb-30">
              <header class="u-heading-v6-2 g-mb-20">
                <h6 class="g-font-size-12 text-uppercase g-font-weight-600 g-pl-90">About Us</h6>
                <h3 class="u-heading-v6__title g-color-gray-dark-v2 g-brd-primary text-uppercase g-font-weight-600 g-mb-15">Quality results with us</h3>
              </header>

              <div class="g-pl-90--sm">
                <p class="lead 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-v21 g-bg-img-hero g-pos-rel g-height-160 g-width-300 rounded" data-bg-img-src="{{ root }}assets/img-temp/400x270/img1.jpg" style="background-image: url('../../assets/img-temp/400x270/img1.jpg');">
                    <a class="js-fancybox-media g-absolute-centered" href="javascript:;"
                       data-src="//vimeo.com/167434033"
                       data-speed="1000"
                       data-animate-in="flipInX"
                       data-animate-out="flipOutX">
                      <i class="fa fa-play g-font-size-40"></i>
                    </a>
                  </div>
                  <!-- End Video Block -->

                  <div class="align-self-center g-color-gray-dark-v2 text-uppercase g-font-weight-600 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="img-fluid w-100 u-shadow-v21 rounded" src="{{ root }}assets/img-temp/900x600/img3.jpg" alt="Iamge Description">
            </div>
            <!-- End Article Image -->
          </article>
        </div>
      </section>
      <!-- End About Us -->

      <!-- Quotes -->
      <section class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll">
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100 u-bg-overlay g-bg-white-gradient-opacity-v2--after" style="height: 160%; background-image: url({{ root }}assets/img-temp/1920x1080/img5.jpg);"></div>
        <!-- End Parallax Image -->

        <div class="container u-bg-overlay__inner g-color-white text-center g-py-200">
          <h2 class="g-font-size-40 g-font-size-70--md text-uppercase g-font-weight-700 ">Unify is <span class="u-text-animation u-text-animation--typing"></span></h2>
          <p class="g-font-size-24">Clean and fully responsive Bootstrap 4 template.</p>
        </div>
      </section>
      <!-- End Quotes -->

      <!-- Our Services -->
      <section class="g-bg-secondary g-py-100">
        <div class="container">
          <header class="text-center g-width-80x--md mx-auto g-mb-70">
            <div class="u-heading-v6-2 text-center text-uppercase g-mb-20">
              <h6 class="g-font-size-12 g-font-weight-600">Our Services</h6>
              <h2 class="h3 u-heading-v6__title g-brd-primary g-color-gray-dark-v2 g-font-weight-600">What We Do</h2>
            </div>
            <p class="lead"> Lorem ipsum dolor <span class="g-color-primary">sit amet consectetur</span> adipiscing elit. Nam eget varius leo, at elementum eros. Fusce tristique, ipsum egestas fermentum imperdiet, ex nunc iaculis sem, a semper augue turpis ut nulla.</p>
          </header>

          <!-- Icon Blocks -->
          <div class="row">
            <div class="col-lg-6 g-mb-30">
              <!-- Icon Blocks -->
              <div class="u-shadow-v21 g-bg-white rounded g-pa-30">
                <div class="media g-mb-15">
                  <div class="d-flex mr-4">
                  <span class="g-color-gray-dark-v5 g-font-size-26">
                    <i class="icon-finance-090 u-line-icon-pro"></i>
                  </span>
                  </div>
                  <div class="media-body">
                    <h3 class="h5 g-color-black mb-20">Instant Income</h3>
                    <div class="g-width-30 g-brd-bottom g-brd-primary g-my-15"></div>
                    <p class="g-color-gray-dark-v4 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>

            <div class="col-lg-6 g-mb-30">
              <!-- Icon Blocks -->
              <div class="u-shadow-v21 g-bg-white rounded g-pa-30">
                <div class="media g-mb-15">
                  <div class="d-flex mr-4">
                  <span class="g-color-gray-dark-v5 g-font-size-26">
                    <i class="icon-finance-012 u-line-icon-pro"></i>
                  </span>
                  </div>
                  <div class="media-body">
                    <h3 class="h5 g-color-black mb-20">Excellent Features</h3>
                    <div class="g-width-30 g-brd-bottom g-brd-primary g-my-15"></div>
                    <p class="g-color-gray-dark-v4 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>
          <!-- End Icon Blocks -->

          <!-- Icon Blocks -->
          <div class="row">
            <div class="col-lg-6 g-mb-30">
              <!-- Icon Blocks -->
              <div class="u-shadow-v21 g-bg-white rounded g-pa-30">
                <div class="media g-mb-15">
                  <div class="d-flex mr-4">
                  <span class="g-color-gray-dark-v5 g-font-size-26">
                    <i class="icon-finance-088 u-line-icon-pro"></i>
                  </span>
                  </div>
                  <div class="media-body">
                    <h3 class="h5 g-color-black mb-20">Full Control</h3>
                    <div class="g-width-30 g-brd-bottom g-brd-primary g-my-15"></div>
                    <p class="g-color-gray-dark-v4 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>

            <div class="col-lg-6 g-mb-30">
              <!-- Icon Blocks -->
              <div class="u-shadow-v21 g-bg-white rounded g-pa-30">
                <div class="media g-mb-15">
                  <div class="d-flex mr-4">
                  <span class="g-color-gray-dark-v5 g-font-size-26">
                    <i class="icon-finance-086 u-line-icon-pro"></i>
                  </span>
                  </div>
                  <div class="media-body">
                    <h3 class="h5 g-color-black mb-20">Creative Solutions</h3>
                    <div class="g-width-30 g-brd-bottom g-brd-primary g-my-15"></div>
                    <p class="g-color-gray-dark-v4 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>
          <!-- End Icon Blocks -->

          <!-- Icon Blocks -->
          <div class="row">
            <div class="col-lg-6 g-mb-30">
              <!-- Icon Blocks -->
              <div class="u-shadow-v21 g-bg-white rounded g-pa-30">
                <div class="media g-mb-15">
                  <div class="d-flex mr-4">
                  <span class="g-color-gray-dark-v5 g-font-size-26">
                    <i class="icon-finance-084 u-line-icon-pro"></i>
                  </span>
                  </div>
                  <div class="media-body">
                    <h3 class="h5 g-color-black mb-20">More Income</h3>
                    <div class="g-width-30 g-brd-bottom g-brd-primary g-my-15"></div>
                    <p class="g-color-gray-dark-v4 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>

            <div class="col-lg-6 g-mb-30">
              <!-- Icon Blocks -->
              <div class="u-shadow-v21 g-bg-white rounded g-pa-30">
                <div class="media g-mb-15">
                  <div class="d-flex mr-4">
                  <span class="g-color-gray-dark-v5 g-font-size-26">
                    <i class="icon-finance-032 u-line-icon-pro"></i>
                  </span>
                  </div>
                  <div class="media-body">
                    <h3 class="h5 g-color-black mb-20">Withdrawal Options</h3>
                    <div class="g-width-30 g-brd-bottom g-brd-primary g-my-15"></div>
                    <p class="g-color-gray-dark-v4 g-mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
                  </div>
                </div>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>
          <!-- End Icon Blocks -->
        </div>
      </section>
      <!-- End Our Services -->

      <!-- Counter -->
      <section class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll">
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100 u-bg-overlay g-bg-repeat g-bg-white-gradient-opacity-v1--after" style="height: 160%; background-image: url({{ root }}assets/img/bg/pattern3.png);"></div>
        <!-- End Parallax Image -->

        <div class="container u-bg-overlay__inner g-color-white g-py-100">
          <header class="text-center g-width-80x--md mx-auto g-mb-70">
            <div class="u-heading-v6-2 text-center text-uppercase g-mb-20">
              <h6 class="g-font-size-12 g-font-weight-600">Our Solutions</h6>
              <h2 class="h3 u-heading-v6__title g-brd-primary g-font-weight-600">Our Offers</h2>
            </div>
            <p class="lead"> Lorem ipsum dolor <span class="g-color-primary">sit amet consectetur</span> adipiscing elit. Nam eget varius leo, at elementum eros. Fusce tristique, ipsum egestas fermentum imperdiet, ex nunc iaculis sem, a semper augue turpis ut nulla.</p>
          </header>

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

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

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

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

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

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

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

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

          <div class="row text-center" hidden>
            <div class="col-lg-3 col-sm-6 g-mb-30 g-mb-0--lg">
              <i class="icon-finance-078 u-line-icon-pro g-color-white-opacity-0_8 g-font-size-40 g-mb-25"></i>
              <div class="js-counter g-font-size-35 g-mb-15">12</div>
              <h4 class="h5 text-uppercase g-mb-15">Years</h4>
              <p class="mb-0">Sed feugiat porttitor nunc Etiam gravida ex justo ac rhoncus.</p>
            </div>

            <div class="col-lg-3 col-sm-6 g-mb-30 g-mb-0--lg">
              <i class="icon-finance-053 u-line-icon-pro g-color-white-opacity-0_8 g-font-size-40 g-mb-25"></i>
              <div class="js-counter g-font-size-35 g-mb-15" data-reduce-thousands-to="k">899000</div>
              <h4 class="h5 text-uppercase g-mb-15">Earnings</h4>
              <p class="mb-0">Ivitae blandit massa luctus fermentum lorem quis elit vitae</p>
            </div>

            <div class="col-lg-3 col-sm-6 g-mb-30 g-mb-0--lg">
              <i class="icon-finance-039 u-line-icon-pro g-color-white-opacity-0_8 g-font-size-40 g-mb-25"></i>
              <div class="js-counter g-font-size-35 g-mb-15" data-reduce-thousands-to="k">125000</div>
              <h4 class="h5 text-uppercase g-mb-15">Projects</h4>
              <p class="mb-0">Curabitur eget tortor sed urna nulla sed fringilla quam</p>
            </div>

            <div class="col-lg-3 col-sm-6">
              <i class="icon-finance-086 u-line-icon-pro g-color-white-opacity-0_8 g-font-size-40 g-mb-25"></i>
              <div class="js-counter g-font-size-35 g-mb-15">167</div>
              <h4 class="h5 text-uppercase g-mb-15">Investments</h4>
              <p class="mb-0">Duis dui turpis, consectetur non ultrices aliquam sapien</p>
            </div>
          </div>
        </div>
      </section>
      <!-- End Counter -->

      <!-- Testimonials -->
      <section class="text-center g-py-100">
        <div class="container">
          <header class="text-center g-width-80x--md mx-auto g-mb-70">
            <div class="u-heading-v6-2 text-center text-uppercase g-mb-20">
              <h6 class="g-font-size-12 g-font-weight-600">Testimonials</h6>
              <h2 class="h3 u-heading-v6__title g-brd-primary g-color-gray-dark-v2 g-font-weight-600">What People Are Saying</h2>
            </div>
            <p class="lead"> Lorem ipsum dolor <span class="g-color-primary">sit amet consectetur</span> adipiscing elit. Nam eget varius leo, at elementum eros. Fusce tristique, ipsum egestas fermentum imperdiet, ex nunc iaculis sem, a semper augue turpis ut nulla.</p>
          </header>

          <!-- Testimonials -->
          <div class="row">
            <div class="col-lg-4 g-mb-30">
              <!-- Testimonials -->
              <div class="g-brd-around g-brd-blue rounded g-pa-40">
                <blockquote class="lead text-center g-mb-40">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>
                <div class="d-flex justify-content-center">
                  <img class="align-self-center g-width-40 g-height-40 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                  <div>
                    <h4 class="h5 align-self-center g-mb-5">Alex Peterson</h4>
                    <div class="js-rating align-self-center g-color-yellow g-font-size-10" data-rating="5" data-spacing="3" data-backward-icons-classes="fa fa-star"></div>
                  </div>
                </div>
              </div>
              <!-- End Testimonials -->
            </div>

            <div class="col-lg-4 g-mb-30">
              <!-- Testimonials -->
              <div class="g-brd-around g-brd-pink rounded g-pa-40">
                <blockquote class="lead text-center g-mb-40">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help.</blockquote>
                <div class="d-flex justify-content-center">
                  <img class="align-self-center g-width-40 g-height-40 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">
                  <div>
                    <h4 class="h5 align-self-center g-mb-5">Emma Smith</h4>
                    <div class="js-rating align-self-center g-color-yellow g-font-size-10" data-rating="5" data-spacing="3" data-backward-icons-classes="fa fa-star"></div>
                  </div>
                </div>
              </div>
              <!-- End Testimonials -->
            </div>

            <div class="col-lg-4 g-mb-30">
              <!-- Testimonials -->
              <div class="g-brd-around g-brd-purple rounded g-pa-40">
                <blockquote class="lead text-center g-mb-40">Your customer support is the best I have experienced with any theme I have purchased. You have a theme that far exceeds all others.</blockquote>
                <div class="d-flex justify-content-center">
                  <img class="align-self-center g-width-40 g-height-40 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                  <div>
                    <h4 class="h5 align-self-center g-mb-5">Anna Pretty</h4>
                    <div class="js-rating align-self-center g-color-yellow g-font-size-10" data-rating="5" data-spacing="3" data-backward-icons-classes="fa fa-star"></div>
                  </div>
                </div>
              </div>
              <!-- End Testimonials -->
            </div>
          </div>
          <!-- End Testimonials -->

          <p class="g-color-gray-dark-v5 mb-0">Be Our Exclusive Partner! <a href="#!">Contact Us</a></p>
        </div>
      </section>
      <!-- End Testimonials -->

      <!-- Call To Action -->
      <section class="g-bg-primary g-color-white g-pa-40" style="background-image: url({{ root }}assets/img/bg/pattern5.png);">
        <div class="container u-bg-overlay__inner">
          <div class="row">
            <div class="col-md-8 align-self-center">
              <h2 class="h3 text-uppercase g-font-weight-300 g-mb-20 g-mb-0--md">Subscribe to our weekly <strong>newsletter</strong></h2>
            </div>

            <div class="col-md-4 align-self-center">
              <div class="input-group g-brd-white--focus g-rounded-50">
                <input class="form-control g-font-size-default g-placeholder-white g-color-white g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_8 g-py-12 g-px-12" type="email" placeholder="Enter your email...">
                <div class="input-group-append">
                  <button class="btn u-btn-primary g-color-white g-bg-transparent g-brd-white-opacity-0_8 g-px-12" type="submit">
                    <i class="icon-envelope g-pos-rel g-top-1"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- End Call To Action -->

      {% 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/helpers/outer-spaces-helper.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/typedjs/typed.min.js"></script>
    <script src="{{ root }}assets/vendor/circles/circles.min.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/helpers/hs.height-calc.js"></script>
    <script src="{{ root }}assets/js/components/hs.tabs.js"></script>
    <script src="{{ root }}assets/js/components/hs.popup.js"></script>
    <script src="{{ root }}assets/js/components/text-animation/hs.text-slideshow.js"></script>
    <script src="{{ root }}assets/js/components/hs.rating.js"></script>
    <script src="{{ root }}assets/js/components/hs.onscroll-animation.js"></script>
    <script src="{{ root }}assets/js/components/hs.counter.js"></script>
    <script src="{{ root }}assets/js/components/hs.chart-pie.js"></script>
    <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

    <!-- JS Customization -->
    <script src="{{ root }}assets/js/custom.js"></script>

    <!-- JS Plugins Init. -->
    <script>
      $(document).on('ready', function () {
        // initialization of tabs
        $.HSCore.components.HSTabs.init('[role="tablist"]');

        // initialization of header height offset
        $.HSCore.helpers.HSHeightCalc.init();

        // initialization of scroll animation
        $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');

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

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

        // initialization of rating
        $.HSCore.components.HSRating.init($('.js-rating'), {
          spacing: 4
        });

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

        // initialization of text animation (typing)
        $(".u-text-animation.u-text-animation--typing").typed({
          strings: [
            "awesome template",
            "perfect template",
            "just like a boss"
          ],
          typeSpeed: 60,
          loop: true,
          backDelay: 1500
        });

        // initialization of go to
        $.HSCore.components.HSGoTo.init('.js-go-to');
      });

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

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

      $(window).on('resize', function () {
        setTimeout(function () {
          $.HSCore.components.HSTabs.init('[role="tablist"]');
        }, 200);
      });
    </script>

    {% set SSCookiePrefix = "unify" %}
    {% set SSDefaultCustomColor = "#72c02c" %}
    {% set SSDefaultOuterSpaces = "0px" %}
    {% set SSDefaultContentFont = "Open Sans, Helvetica, Arial, sans-serif" %}
    {% set SSDefaultHeadingFont = "Open Sans, Helvetica, Arial, sans-serif" %}
    {% include "html/assets/include/nunjucks/partials/blocks/style-switcher.njk" %}
  </body>
</html>
