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

{% 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" %}
    <link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
    {% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
    <link rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.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 - Parallax -->
      <section class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll dzsprx-readyall" data-options='{direction: "reverse", settings_mode_oneelement_max_offset: "150"}'>
        <div class="divimage dzsparallaxer--target w-100 u-bg-overlay g-bg-img-hero g-bg-bluegray-opacity-0_3--after " style="height: 130%; background-image: url({{ root }}assets/img-temp/1920x1080/img4.jpg);"></div>

        <!-- Promo Block Content -->
        <div class="container u-bg-overlay__inner text-center g-py-150">
          <h2 class="h1 g-color-white g-font-weight-600 text-uppercase g-mb-30">Discover <span class="g-color-primary">New</span> Things</h2>

          <!-- Search Form -->
          <form>
            <!-- Search Field -->
            <div class="g-max-width-540 mx-auto g-mb-20">
              <div class="input-group">
                <input type="text" class="form-control g-font-size-16 border-0" placeholder="Search words with regular expressions..." aria-label="Search words with regular expressions...">
                <div class="input-group-append">
                  <button class="btn btn-primary g-font-size-18 g-py-12 g-px-25" type="submit">
                    <i class="fa fa-search"></i>
                  </button>
                </div>
              </div>
            </div>
            <!-- End Search Field -->

            <!-- Checkboxes -->
            <div class="g-font-size-15">
              <!-- Label -->
              <label class="form-check-inline u-check g-color-white g-pl-25">
                <input class="g-hidden-xs-up" type="checkbox" checked>
                <div class="u-check-icon-checkbox-v6 g-absolute-centered--y g-left-0">
                  <i class="g-brd-white g-brd-primary--checked g-bg-white g-bg-primary--checked g-transition-0_2 g-transition--ease-in g-rounded-2 fa" data-check-icon="&#xf00c"></i>
                </div>
                Recent
              </label>
              <!-- End Label -->

              <!-- Label -->
              <label class="form-check-inline u-check g-color-white g-pl-25 g-ml-20--md">
                <input class="g-hidden-xs-up" type="checkbox">
                <div class="u-check-icon-checkbox-v6 g-absolute-centered--y g-left-0">
                  <i class="g-brd-white g-brd-primary--checked g-bg-white g-bg-primary--checked g-transition-0_2 g-transition--ease-in g-rounded-2 fa" data-check-icon="&#xf00c"></i>
                </div>
                Related
              </label>
              <!-- End Label -->

              <!-- Label -->
              <label class="form-check-inline u-check g-color-white g-pl-25 g-ml-20--md">
                <input class="g-hidden-xs-up" type="checkbox">
                <div class="u-check-icon-checkbox-v6 g-absolute-centered--y g-left-0">
                  <i class="g-brd-white g-brd-primary--checked g-bg-white g-bg-primary--checked g-transition-0_2 g-transition--ease-in g-rounded-2 fa" data-check-icon="&#xf00c"></i>
                </div>
                Popular
              </label>
              <!-- End Label -->

              <!-- Label -->
              <label class="form-check-inline u-check g-color-white g-pl-25 g-ml-20--md">
                <input class="g-hidden-xs-up" type="checkbox">
                <div class="u-check-icon-checkbox-v6 g-absolute-centered--y g-left-0">
                  <i class="g-brd-white g-brd-primary--checked g-bg-white g-bg-primary--checked g-transition-0_2 g-transition--ease-in g-rounded-2 fa" data-check-icon="&#xf00c"></i>
                </div>
                Most common
              </label>
              <!-- End Label -->
            </div>
            <!-- End Checkboxes -->
          </form>
          <!-- End Search Form -->
        </div>
        <!-- End Promo Block Content -->
      </section>
      <!-- End Promo Block - Parallax -->

      <!-- Icon Blocks -->
      <section class="container g-pt-100 g-pb-40">
        <div class="mb-5">
          <h2 class="h3 g-color-black mb-0">Top Categories</h2>
          <div class="d-inline-block g-width-50 g-height-1 g-bg-black"></div>
        </div>

        <div class="row align-items-center">
          <div class="col-sm-6 col-lg-4 g-mb-0 g-mb-60--sm">
            <!-- Icon Blocks -->
            <div class="media g-mb-20">
              <div class="d-flex mr-4">
                <span class="u-icon-v2 u-icon-size--sm g-color-white g-bg-primary g-font-size-16 rounded-circle">
                  <i class="icon-education-087 u-line-icon-pro"></i>
                </span>
              </div>
              <div class="media-body">
                <h3 class="g-color-black g-font-size-17">
                  <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">
                    Top 100 templates
                  </a>
                </h3>
                <p class="g-color-gray-dark-v4 g-font-size-13 mb-0">We strive to embrace and drive change in our industry to keep our clients relevant.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->

            <!-- Icon Blocks -->
            <div class="media g-mb-20">
              <div class="d-flex mr-4">
                <span class="u-icon-v2 u-icon-size--sm g-color-white g-bg-brown g-font-size-16 rounded-circle">
                  <i class="icon-education-035 u-line-icon-pro"></i>
                </span>
              </div>
              <div class="media-body">
                <h3 class="g-color-black g-font-size-17">
                  <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">
                    Wikipedia
                  </a>
                </h3>
                <p class="g-color-gray-dark-v4 g-font-size-13 mb-0">We strive to embrace and drive change in our industry to keep our clients relevant.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->

            <!-- Icon Blocks -->
            <div class="media g-mb-20">
              <div class="d-flex mr-4">
                <span class="u-icon-v2 u-icon-size--sm g-color-white g-bg-indigo g-font-size-16 rounded-circle">
                  <i class="icon-electronics-020 u-line-icon-pro"></i>
                </span>
              </div>
              <div class="media-body">
                <h3 class="g-color-black g-font-size-17">
                  <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">
                    Web Design
                  </a>
                </h3>
                <p class="g-color-gray-dark-v4 g-font-size-13 mb-0">We strive to embrace and drive change in our industry to keep our clients relevant.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->

            <!-- Icon Blocks -->
            <div class="media g-mb-20">
              <div class="d-flex mr-4">
                <span class="u-icon-v2 u-icon-size--sm g-color-white g-bg-cyan g-font-size-16 rounded-circle">
                  <i class="icon-education-001 u-line-icon-pro"></i>
                </span>
              </div>
              <div class="media-body">
                <h3 class="g-color-black g-font-size-17">
                  <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">
                    Education
                  </a>
                </h3>
                <p class="g-color-gray-dark-v4 g-font-size-13 mb-0">We strive to embrace and drive change in our industry to keep our clients relevant.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->

            <!-- Icon Blocks -->
            <div class="media g-mb-20 g-mb-0--sm">
              <div class="d-flex mr-4">
                <span class="u-icon-v2 u-icon-size--sm g-color-white g-bg-purple g-font-size-16 rounded-circle">
                  <i class="icon-media-038 u-line-icon-pro"></i>
                </span>
              </div>
              <div class="media-body">
                <h3 class="g-color-black g-font-size-17">
                  <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">
                    Filmography
                  </a>
                </h3>
                <p class="g-color-gray-dark-v4 g-font-size-13 mb-0">We strive to embrace and drive change in our industry to keep our clients relevant.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->
          </div>

          <div class="col-sm-6 col-lg-4 g-mb-60">
            <!-- Icon Blocks -->
            <div class="media g-mb-20">
              <div class="d-flex mr-4">
                <span class="u-icon-v2 u-icon-size--sm g-color-white g-bg-blue g-font-size-16 rounded-circle">
                  <i class="icon-science-020 u-line-icon-pro"></i>
                </span>
              </div>
              <div class="media-body">
                <h3 class="g-color-black g-font-size-17">
                  <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">
                    Hi-Tech
                  </a>
                </h3>
                <p class="g-color-gray-dark-v4 g-font-size-13 mb-0">We strive to embrace and drive change in our industry to keep our clients relevant.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->

            <!-- Icon Blocks -->
            <div class="media g-mb-20">
              <div class="d-flex mr-4">
                <span class="u-icon-v2 u-icon-size--sm g-color-white g-bg-lightred g-font-size-16 rounded-circle">
                  <i class="icon-finance-256 u-line-icon-pro"></i>
                </span>
              </div>
              <div class="media-body">
                <h3 class="g-color-black g-font-size-17">
                  <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">
                    Programming
                  </a>
                </h3>
                <p class="g-color-gray-dark-v4 g-font-size-13 mb-0">We strive to embrace and drive change in our industry to keep our clients relevant.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->

            <!-- Icon Blocks -->
            <div class="media g-mb-20">
              <div class="d-flex mr-4">
                <span class="u-icon-v2 u-icon-size--sm g-color-white g-bg-bluegray g-font-size-16 rounded-circle">
                  <i class="icon-music-036 u-line-icon-pro"></i>
                </span>
              </div>
              <div class="media-body">
                <h3 class="g-color-black g-font-size-17">
                  <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">
                    Music
                  </a>
                </h3>
                <p class="g-color-gray-dark-v4 g-font-size-13 mb-0">We strive to embrace and drive change in our industry to keep our clients relevant.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->

            <!-- Icon Blocks -->
            <div class="media g-mb-20">
              <div class="d-flex mr-4">
                <span class="u-icon-v2 u-icon-size--sm g-color-white g-bg-pink g-font-size-16 rounded-circle">
                  <i class="icon-real-estate-066 u-line-icon-pro"></i>
                </span>
              </div>
              <div class="media-body">
                <h3 class="g-color-black g-font-size-17">
                  <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">
                    Engineering
                  </a>
                </h3>
                <p class="g-color-gray-dark-v4 g-font-size-13 mb-0">We strive to embrace and drive change in our industry to keep our clients relevant.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->

            <!-- Icon Blocks -->
            <div class="media">
              <div class="d-flex mr-4">
                <span class="u-icon-v2 u-icon-size--sm g-color-white g-bg-teal g-font-size-16 rounded-circle">
                  <i class="icon-communication-116 u-line-icon-pro"></i>
                </span>
              </div>
              <div class="media-body">
                <h3 class="g-color-black g-font-size-17">
                  <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">
                    Others
                  </a>
                </h3>
                <p class="g-color-gray-dark-v4 g-font-size-13 mb-0">We strive to embrace and drive change in our industry to keep our clients relevant.</p>
              </div>
            </div>
            <!-- End Icon Blocks -->
          </div>

          <div class="col-lg-4 g-mb-60">
            <div class="u-shadow-v21 g-brd-around g-brd-gray-light-v4 rounded g-pa-25">
              <div class="text-center mb-5">
                <span class="u-icon-v2 g-width-50 g-height-50 g-color-white g-bg-black g-font-size-18 rounded-circle mb-3">
                  <i class="icon-communication-116 u-line-icon-pro"></i>
                </span>
                <h2 class="h4 g-color-black">Trending</h2>
                <p>It's important to stay detail oriented with every project we tackle.</p>
              </div>

              <!-- Progress Bars -->
              <div class="mb-4">
                <h4 class="h6">Web Design <span class="float-right g-ml-10">84%</span></h4>
                <div class="js-hr-progress-bar progress g-height-4 rounded-0">
                  <div class="js-hr-progress-bar-indicator progress-bar" role="progressbar" style="width: 84%;" aria-valuenow="84" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>

              <div class="mb-4">
                <h4 class="h6">PHP/WordPress <span class="float-right g-ml-10">57%</span></h4>
                <div class="js-hr-progress-bar progress g-height-4 rounded-0">
                  <div class="js-hr-progress-bar-indicator progress-bar" role="progressbar" style="width: 57%;" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>

              <h4 class="h6">HTML/CSS <span class="float-right g-ml-10">92%</span></h4>
              <div class="js-hr-progress-bar progress g-height-4 rounded-0">
                <div class="js-hr-progress-bar-indicator progress-bar" role="progressbar" style="width: 92%;" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <!-- End Progress Bars -->

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

              <!-- Tags -->
              <ul class="u-list-inline text-center mb-0">
                <li class="list-inline-item">
                  <a class="u-tags-v1 g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-color-primary--hover g-font-size-12 g-rounded-50 g-py-4 g-px-15" href="#">Design</a>
                </li>
                <li class="list-inline-item">
                  <a class="u-tags-v1 g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-color-primary--hover g-font-size-12 g-rounded-50 g-py-4 g-px-15" href="#">Art</a>
                </li>
                <li class="list-inline-item">
                  <a class="u-tags-v1 g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-color-primary--hover g-font-size-12 g-rounded-50 g-py-4 g-px-15" href="#">Graphic</a>
                </li>
              </ul>
              <!-- End Tags -->
            </div>
          </div>
        </div>
      </section>
      <!-- End Icon Blocks -->

      <div class="u-ns-bg-v1-bottom g-bg-white"></div>

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

        <div class="container g-pos-rel g-z-index-1 g-pt-100 g-pb-70">
          <div class="row text-center">
            <div class="col-md-6 col-lg-3 g-mb-30">
              <!-- Counters -->
              <div class="u-shadow-v21 g-bg-white rounded g-px-20 g-py-30">
                <div class="js-counter g-color-primary g-font-weight-700 g-font-size-45 mb-1">15</div>
                <h4 class="h6 g-color-black g-font-weight-600 text-uppercase">Developers</h4>
              </div>
            </div>
            <!-- End Counters -->

            <div class="col-md-6 col-lg-3 g-mb-30">
              <!-- Counters -->
              <div class="u-shadow-v21 g-bg-white rounded g-px-20 g-py-30">
                <div class="js-counter g-color-primary g-font-weight-700 g-font-size-45 mb-1">5</div>
                <h4 class="h6 g-color-black g-font-weight-600 text-uppercase">Designers</h4>
              </div>
            </div>
            <!-- End Counters -->

            <div class="col-md-6 col-lg-3 g-mb-30">
              <!-- Counters -->
              <div class="u-shadow-v21 g-bg-white rounded g-px-20 g-py-30">
                <div class="js-counter g-color-primary g-font-weight-700 g-font-size-45 mb-1">17</div>
                <h4 class="h6 g-color-black g-font-weight-600 text-uppercase">Open Contests</h4>
              </div>
            </div>
            <!-- End Counters -->

            <div class="col-md-6 col-lg-3 g-mb-30">
              <!-- Counters -->
              <div class="u-shadow-v21 g-bg-white rounded g-px-20 g-py-30">
                <div class="js-counter g-color-primary g-font-weight-700 g-font-size-45 mb-1">22</div>
                <h4 class="h6 g-color-black g-font-weight-600 text-uppercase">Projects</h4>
              </div>
            </div>
            <!-- End Counters -->
          </div>
        </div>
      </section>
      <!-- End Counters -->

      <!-- Product Blocks -->
      <section class="container g-pt-100 g-pb-70">
        <div class="mb-5">
          <h2 class="h3 g-color-black mb-0">Latest Products</h2>
          <div class="d-inline-block g-width-50 g-height-1 g-bg-black"></div>
        </div>

        <div class="row">
          <div class="col-sm-6 col-md-4 g-mb-30">
            <!-- Article -->
            <article class="u-shadow-v11 g-pos-rel g-brd-bottom g-brd-3 g-brd-gray-light-v4 g-brd-primary--hover text-center rounded g-transition-0_3 g-transition--linear">
              <!-- Article Image -->
              <figure>
                <img class="w-100" src="{{ root }}assets/img-temp/400x270/img3.jpg" alt="Image Description">
                <figcaption class="u-ribbon-v1 g-color-white g-bg-blue-opacity-0_7 g-font-weight-600 g-font-size-11 text-uppercase g-top-10 g-left-10 g-rounded-50 g-px-15">Design</figcaption>
              </figure>
              <!-- End Article Image -->

              <!-- Article Content -->
              <div class="g-py-30 g-px-20">
                <h3 class="h4 g-color-black">
                  <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Website Design</a>
                </h3>
                <p class="g-color-gray-dark-v4">Understanding who you are and what you want is our strategy for your brand.</p>
                <div class="js-rating g-color-primary g-font-size-12" data-rating="4.5"></div>
              </div>
              <!-- End Article Content -->
            </article>
            <!-- End Article -->
          </div>

          <div class="col-sm-6 col-md-4 g-mb-30">
            <!-- Article -->
            <article class="u-shadow-v11 g-pos-rel g-brd-bottom g-brd-3 g-brd-gray-light-v4 g-brd-primary--hover text-center rounded g-transition-0_3 g-transition--linear">
              <!-- Article Image -->
              <figure>
                <img class="w-100" src="{{ root }}assets/img-temp/400x270/img8.jpg" alt="Image Description">
                <figcaption class="u-ribbon-v1 g-color-white g-bg-bluegray-opacity-0_7 g-font-weight-600 g-font-size-11 text-uppercase g-top-10 g-left-10 g-rounded-50 g-px-15">Furniture</figcaption>
              </figure>
              <!-- End Article Image -->

              <!-- Article Content -->
              <div class="g-py-30 g-px-20">
                <h3 class="h4 g-color-black">
                  <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">A Million Chair</a>
                </h3>
                <p class="g-color-gray-dark-v4">Understanding who you are and what you want is our strategy for your brand.</p>
                <div class="js-rating g-color-primary g-font-size-12" data-rating="4.5"></div>
              </div>
              <!-- End Article Content -->
            </article>
            <!-- End Article -->
          </div>

          <div class="col-sm-6 col-md-4 g-mb-30">
            <!-- Article -->
            <article class="u-shadow-v11 g-pos-rel g-brd-bottom g-brd-3 g-brd-gray-light-v4 g-brd-primary--hover text-center rounded g-transition-0_3 g-transition--linear">
              <!-- Article Image -->
              <figure>
                <img class="w-100" src="{{ root }}assets/img-temp/400x270/img7.jpg" alt="Image Description">
                <figcaption class="u-ribbon-v1 g-color-white g-bg-primary-opacity-0_8 g-font-weight-600 g-font-size-11 text-uppercase g-top-10 g-left-10 g-rounded-50 g-px-15">Interior</figcaption>
              </figure>
              <!-- End Article Image -->

              <!-- Article Content -->
              <div class="g-py-30 g-px-20">
                <h3 class="h4 g-color-black">
                  <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Stylish Office</a>
                </h3>
                <p class="g-color-gray-dark-v4">Understanding who you are and what you want is our strategy for your brand.</p>
                <div class="js-rating g-color-primary g-font-size-12" data-rating="4.5"></div>
              </div>
              <!-- End Article Content -->
            </article>
            <!-- End Article -->
          </div>
        </div>
      </section>
      <!-- End Product Blocks -->

      <!-- Product Blocks -->
      <section class="g-bg-secondary g-pt-100 g-pb-70">
        <div class="container">
          <div class="mb-5">
            <h2 class="h3 g-color-black mb-0">Hot Topics</h2>
            <div class="d-inline-block g-width-50 g-height-1 g-bg-black"></div>
          </div>

          <div class="row">
            <div class="col-md-6 col-lg-4 g-mb-30">
              <!-- Article -->
              <article class="u-shadow-v19 media g-bg-white rounded g-pa-20 g-pb-10">
                <!-- Article Image -->
                <div class="d-flex rounded-circle g-mr-15">
                  <img class="rounded-circle g-width-40 g-height-40" src="{{ root }}assets/img-temp/100x100/img8.jpg" alt="Image Description">
                </div>
                <!-- End Article Image -->

                <div class="media-body">
                  <!-- Article Info -->
                  <div class="g-mb-20">
                    <h3 class="g-color-black g-font-size-17">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Forbes 1000</a>
                    </h3>
                    <div class="js-rating g-font-size-11 g-color-primary g-mb-10" data-rating="3" data-spacing="1" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                    <p class="g-color-gray-dark-v4">We aim high at being focused on building relationships with our clients and community.</p>
                  </div>
                  <!-- End Article Info -->

                  <!-- Article Author -->
                  <ul class="list-inline g-color-gray-dark-v5 g-font-size-12">
                    <li class="list-inline-item g-brd-right g-brd-gray-light-v3 g-line-height-1 g-pr-7 g-mr-5">
                      <span>Google Inc.</span>
                    </li>
                    <li class="list-inline-item">
                      <time datetime="2013-01-02">Jan 02, 2017</time>
                    </li>
                  </ul>
                  <!-- End Article Author -->

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

                  <!-- Figure Footer -->
                  <ul class="list-inline g-mb-0">
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-finance-206 u-line-icon-pro"></i>
                        <span class="g-ml-5">10</span>
                      </a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-finance-175 u-line-icon-pro"></i>
                        <span class="g-ml-5">425</span>
                      </a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-christmas-043 u-line-icon-pro"></i>
                        <span class="g-ml-5">66</span>
                      </a>
                    </li>
                  </ul>
                  <!-- End Figure Footer -->
                </div>
                <!-- End Article Content -->
              </article>
              <!-- End Article -->
            </div>

            <div class="col-md-6 col-lg-4 g-mb-30">
              <!-- Article -->
              <article class="u-shadow-v19 media g-bg-white rounded g-pa-20 g-pb-10">
                <!-- Article Icon -->
                <div class="d-flex rounded-circle g-mr-15">
                  <img class="rounded-circle g-width-40 g-height-40" src="{{ root }}assets/img-temp/100x100/img9.jpg" alt="Image Description">
                </div>
                <!-- End Article Icon -->

                <div class="media-body">
                  <!-- Article Info -->
                  <div class="g-mb-20">
                    <h3 class="g-color-black g-font-size-17">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Business</a>
                    </h3>
                    <div class="js-rating g-font-size-11 g-color-primary g-mb-10" data-rating="3" data-spacing="1" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                    <p class="g-color-gray-dark-v4">We aim high at being focused on building relationships with our clients and community.</p>
                  </div>
                  <!-- End Article Info -->

                  <!-- Article Author -->
                  <ul class="list-inline g-color-gray-dark-v5 g-font-size-12">
                    <li class="list-inline-item g-brd-right g-brd-gray-light-v3 g-line-height-1 g-pr-7 g-mr-5">
                      <span>Apple Inc.</span>
                    </li>
                    <li class="list-inline-item">
                      <time datetime="2013-01-02">Jan 02, 2017</time>
                    </li>
                  </ul>
                  <!-- End Article Author -->

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

                  <!-- Figure Footer -->
                  <ul class="list-inline g-mb-0">
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-finance-206 u-line-icon-pro"></i>
                        <span class="g-ml-5">354</span>
                      </a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-finance-175 u-line-icon-pro"></i>
                        <span class="g-ml-5">2</span>
                      </a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-christmas-043 u-line-icon-pro"></i>
                        <span class="g-ml-5">0</span>
                      </a>
                    </li>
                  </ul>
                  <!-- End Figure Footer -->
                </div>
              </article>
              <!-- End Article -->
            </div>

            <div class="col-md-6 col-lg-4 g-mb-30">
              <!-- Article -->
              <article class="u-shadow-v19 media g-bg-white rounded g-pa-20 g-pb-10">
                <!-- Article Image -->
                <div class="d-flex rounded-circle g-mr-15">
                  <img class="rounded-circle g-width-40 g-height-40" src="{{ root }}assets/img-temp/100x100/img10.jpg" alt="Image Description">
                </div>
                <!-- End Article Image -->

                <div class="media-body">
                  <!-- Article Info -->
                  <div class="g-mb-20">
                    <h3 class="g-color-black g-font-size-17">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Web Programming</a>
                    </h3>
                    <div class="js-rating g-font-size-11 g-color-primary g-mb-10" data-rating="3" data-spacing="1" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                    <p class="g-color-gray-dark-v4">We aim high at being focused on building relationships with our clients and community.</p>
                  </div>
                  <!-- End Article Info -->

                  <!-- Article Author -->
                  <ul class="list-inline g-color-gray-dark-v5 g-font-size-12">
                    <li class="list-inline-item g-brd-right g-brd-gray-light-v3 g-line-height-1 g-pr-7 g-mr-5">
                      <span>Microsoft Inc.</span>
                    </li>
                    <li class="list-inline-item">
                      <time datetime="2013-01-02">Jan 02, 2017</time>
                    </li>
                  </ul>
                  <!-- End Article Author -->

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

                  <!-- Figure Footer -->
                  <ul class="list-inline g-mb-0">
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-finance-206 u-line-icon-pro"></i>
                        <span class="g-ml-5">95</span>
                      </a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-finance-175 u-line-icon-pro"></i>
                        <span class="g-ml-5">17</span>
                      </a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-christmas-043 u-line-icon-pro"></i>
                        <span class="g-ml-5">34</span>
                      </a>
                    </li>
                  </ul>
                  <!-- End Figure Footer -->
                </div>
                <!-- End Article Content -->
              </article>
              <!-- End Article -->
            </div>
          </div>

          <div class="row">
            <div class="col-md-6 col-lg-4 g-mb-30">
              <!-- Article -->
              <article class="u-shadow-v19 media g-bg-white rounded g-pa-20 g-pb-10">
                <!-- Article Image -->
                <div class="d-flex rounded-circle g-mr-15">
                  <img class="rounded-circle g-width-40 g-height-40" src="{{ root }}assets/img-temp/100x100/img11.jpg" alt="Image Description">
                </div>
                <!-- End Article Image -->

                <div class="media-body">
                  <!-- Article Info -->
                  <div class="g-mb-20">
                    <h3 class="g-color-black g-font-size-17">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Production</a>
                    </h3>
                    <div class="js-rating g-font-size-11 g-color-primary g-mb-10" data-rating="3" data-spacing="1" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                    <p class="g-color-gray-dark-v4">We aim high at being focused on building relationships with our clients and community.</p>
                  </div>
                  <!-- End Article Info -->

                  <!-- Article Author -->
                  <ul class="list-inline g-color-gray-dark-v5 g-font-size-12">
                    <li class="list-inline-item g-brd-right g-brd-gray-light-v3 g-line-height-1 g-pr-7 g-mr-5">
                      <span>Google Inc.</span>
                    </li>
                    <li class="list-inline-item">
                      <time datetime="2013-01-02">Jan 02, 2017</time>
                    </li>
                  </ul>
                  <!-- End Article Author -->

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

                  <!-- Figure Footer -->
                  <ul class="list-inline g-mb-0">
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-finance-206 u-line-icon-pro"></i>
                        <span class="g-ml-5">10</span>
                      </a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-finance-175 u-line-icon-pro"></i>
                        <span class="g-ml-5">425</span>
                      </a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-christmas-043 u-line-icon-pro"></i>
                        <span class="g-ml-5">66</span>
                      </a>
                    </li>
                  </ul>
                  <!-- End Figure Footer -->
                </div>
                <!-- End Article Content -->
              </article>
              <!-- End Article -->
            </div>

            <div class="col-md-6 col-lg-4 g-mb-30">
              <!-- Article -->
              <article class="u-shadow-v19 media g-bg-white rounded g-pa-20 g-pb-10">
                <!-- Article Icon -->
                <div class="d-flex rounded-circle g-mr-15">
                  <img class="rounded-circle g-width-40 g-height-40" src="{{ root }}assets/img-temp/100x100/img12.jpg" alt="Image Description">
                </div>
                <!-- End Article Icon -->

                <div class="media-body">
                  <!-- Article Info -->
                  <div class="g-mb-20">
                    <h3 class="g-color-black g-font-size-17">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Creative agency</a>
                    </h3>
                    <div class="js-rating g-font-size-11 g-color-primary g-mb-10" data-rating="3" data-spacing="1" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                    <p class="g-color-gray-dark-v4">We aim high at being focused on building relationships with our clients and community.</p>
                  </div>
                  <!-- End Article Info -->

                  <!-- Article Author -->
                  <ul class="list-inline g-color-gray-dark-v5 g-font-size-12">
                    <li class="list-inline-item g-brd-right g-brd-gray-light-v3 g-line-height-1 g-pr-7 g-mr-5">
                      <span>Apple Inc.</span>
                    </li>
                    <li class="list-inline-item">
                      <time datetime="2013-01-02">Jan 02, 2017</time>
                    </li>
                  </ul>
                  <!-- End Article Author -->

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

                  <!-- Figure Footer -->
                  <ul class="list-inline g-mb-0">
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-finance-206 u-line-icon-pro"></i>
                        <span class="g-ml-5">354</span>
                      </a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-finance-175 u-line-icon-pro"></i>
                        <span class="g-ml-5">2</span>
                      </a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-christmas-043 u-line-icon-pro"></i>
                        <span class="g-ml-5">0</span>
                      </a>
                    </li>
                  </ul>
                  <!-- End Figure Footer -->
                </div>
              </article>
              <!-- End Article -->
            </div>

            <div class="col-md-6 col-lg-4 g-mb-30">
              <!-- Article -->
              <article class="u-shadow-v19 media g-bg-white rounded g-pa-20 g-pb-10">
                <!-- Article Image -->
                <div class="d-flex rounded-circle g-mr-15">
                  <img class="rounded-circle g-width-40 g-height-40" src="{{ root }}assets/img-temp/100x100/img13.jpg" alt="Image Description">
                </div>
                <!-- End Article Image -->

                <div class="media-body">
                  <!-- Article Info -->
                  <div class="g-mb-20">
                    <h3 class="g-color-black g-font-size-17">
                      <a class="g-color-black g-color-primary--hover g-text-underline--none--hover" href="#">Project planning</a>
                    </h3>
                    <div class="js-rating g-font-size-11 g-color-primary g-mb-10" data-rating="3" data-spacing="1" data-backward-icons-classes="fa fa-star g-opacity-0_5"></div>
                    <p class="g-color-gray-dark-v4">We aim high at being focused on building relationships with our clients and community.</p>
                  </div>
                  <!-- End Article Info -->

                  <!-- Article Author -->
                  <ul class="list-inline g-color-gray-dark-v5 g-font-size-12">
                    <li class="list-inline-item g-brd-right g-brd-gray-light-v3 g-line-height-1 g-pr-7 g-mr-5">
                      <span>Microsoft Inc.</span>
                    </li>
                    <li class="list-inline-item">
                      <time datetime="2013-01-02">Jan 02, 2017</time>
                    </li>
                  </ul>
                  <!-- End Article Author -->

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

                  <!-- Figure Footer -->
                  <ul class="list-inline g-mb-0">
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-finance-206 u-line-icon-pro"></i>
                        <span class="g-ml-5">95</span>
                      </a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-finance-175 u-line-icon-pro"></i>
                        <span class="g-ml-5">17</span>
                      </a>
                    </li>
                    <li class="list-inline-item g-mb-10">
                      <a class="d-inline-block g-brd-around g-brd-gray-light-v3 g-brd-primary--hover g-color-gray-dark-v4 g-font-size-12 g-text-underline--none--hover g-rounded-50 g-py-4 g-px-15" href="#">
                        <i class="align-middle icon-christmas-043 u-line-icon-pro"></i>
                        <span class="g-ml-5">34</span>
                      </a>
                    </li>
                  </ul>
                  <!-- End Figure Footer -->
                </div>
                <!-- End Article Content -->
              </article>
              <!-- End Article -->
            </div>
          </div>
        </div>
      </section>
      <!-- End Product Blocks -->

      <!-- Testimonials -->
      <section class="container g-pt-100 g-pb-50">
        <h2 class="h3 g-color-black mb-0">Testimonials</h2>
        <div class="d-inline-block g-width-50 g-height-1 g-bg-black"></div>

        <div class="row">
          <div class="col-md-6 g-mb-50">
            <!-- Testimonials -->
            <div class="g-pos-rel g-pt-40">
              <em class="g-color-gray-light-v5 g-font-size-120 g-pos-abs g-top-minus-15 g-left-minus-15 g-z-index-minus-1">
                &#8220;
              </em>
              <blockquote class="lead g-font-style-italic g-line-height-2 g-pl-30 g-mb-30">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="media">
                <img class="d-flex align-self-center g-width-50 g-height-50 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image Description">
                <div class="media-body align-self-center">
                  <h4 class="g-color-black g-font-size-17 g-mb-0">Daniel Ramirez</h4>
                  <span class="d-block g-color-gray-dark-v4 g-font-size-12">Designer</span>
                </div>
              </div>
            </div>
            <!-- End Testimonials -->
          </div>

          <div class="col-md-6 g-mb-50">
            <!-- Testimonials -->
            <div class="g-pos-rel g-pt-40">
              <em class="g-color-gray-light-v5 g-font-size-120 g-pos-abs g-top-minus-15 g-left-minus-15 g-z-index-minus-1">
                &#8220;
              </em>
              <blockquote class="lead g-font-style-italic g-line-height-2 g-pl-30 g-mb-30">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 with some fiddly setup issues.</blockquote>
              <div class="media">
                <img class="d-flex align-self-center g-width-50 g-height-50 rounded-circle mr-3" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image Description">
                <div class="media-body align-self-center">
                  <h4 class="g-color-black g-font-size-17 g-mb-0">Sara Anderson</h4>
                  <span class="d-block g-color-gray-dark-v4 g-font-size-12">Designer</span>
                </div>
              </div>
            </div>
            <!-- End Testimonials -->
          </div>
        </div>
      </section>
      <!-- Testimonials -->

      <!-- Clients -->
      <div class="container g-py-70">
        <div class="js-carousel"
             data-infinite="true"
             data-autoplay="true"
             data-slides-show="6"
             data-responsive='[{
               "breakpoint": 1200,
               "settings": {
                 "slidesToShow": 6
               }
             }, {
               "breakpoint": 992,
               "settings": {
                 "slidesToShow": 5
               }
             }, {
               "breakpoint": 768,
               "settings": {
                 "slidesToShow": 4
               }
             }, {
               "breakpoint": 576,
               "settings": {
                 "slidesToShow": 2
               }
             }, {
               "breakpoint": 446,
               "settings": {
                 "slidesToShow": 1
               }
             }]'>
          <div class="js-slide u-block-hover">
            <img class="mx-auto g-width-80 u-block-hover__main--grayscale g-opacity-0_3 g-opacity-1--hover g-cursor-pointer" src="{{ root }}assets/img-temp/200x100/img1.png" alt="Image Description">
          </div>

          <div class="js-slide u-block-hover">
            <img class="mx-auto g-width-80 u-block-hover__main--grayscale g-opacity-0_3 g-opacity-1--hover g-cursor-pointer" src="{{ root }}assets/img-temp/200x100/img2.png" alt="Image Description">
          </div>

          <div class="js-slide u-block-hover">
            <img class="mx-auto g-width-80 u-block-hover__main--grayscale g-opacity-0_3 g-opacity-1--hover g-cursor-pointer" src="{{ root }}assets/img-temp/200x100/img3.png" alt="Image Description">
          </div>

          <div class="js-slide u-block-hover">
            <img class="mx-auto g-width-80 u-block-hover__main--grayscale g-opacity-0_3 g-opacity-1--hover g-cursor-pointer" src="{{ root }}assets/img-temp/200x100/img4.png" alt="Image Description">
          </div>

          <div class="js-slide u-block-hover">
            <img class="mx-auto g-width-80 u-block-hover__main--grayscale g-opacity-0_3 g-opacity-1--hover g-cursor-pointer" src="{{ root }}assets/img-temp/200x100/img5.png" alt="Image Description">
          </div>

          <div class="js-slide u-block-hover">
            <img class="mx-auto g-width-80 u-block-hover__main--grayscale g-opacity-0_3 g-opacity-1--hover g-cursor-pointer" src="{{ root }}assets/img-temp/200x100/img6.png" alt="Image Description">
          </div>

          <div class="js-slide u-block-hover">
            <img class="mx-auto g-width-80 u-block-hover__main--grayscale g-opacity-0_3 g-opacity-1--hover g-cursor-pointer" src="{{ root }}assets/img-temp/200x100/img7.png" alt="Image Description">
          </div>

          <div class="js-slide u-block-hover">
            <img class="mx-auto g-width-80 u-block-hover__main--grayscale g-opacity-0_3 g-opacity-1--hover g-cursor-pointer" src="{{ root }}assets/img-temp/200x100/img8.png" alt="Image Description">
          </div>

          <div class="js-slide u-block-hover">
            <img class="mx-auto g-width-80 u-block-hover__main--grayscale g-opacity-0_3 g-opacity-1--hover g-cursor-pointer" src="{{ root }}assets/img-temp/200x100/img9.png" alt="Image Description">
          </div>
        </div>
      </div>
      <!-- End Clients -->

      <!-- Footer -->
      <div class="g-bg-black-opacity-0_9 g-color-white-opacity-0_8 g-py-60">
        <div class="container">
          <div class="row">
            <!-- Footer Content -->
            <div class="col-lg-3 col-md-6 g-mb-40 g-mb-0--lg">
              <a class="d-block g-mb-20" href="index.html">
                <img class="img-fluid" src="{{ root }}assets/img/logo/logo-2.png" alt="Logo">
              </a>
              <p>About Unify dolor sit amet, consectetur adipiscing elit. Maecenas eget nisl id libero tincidunt sodales.</p>
              <p class="mb-0">Duis eleifend fermentum ante ut aliquam. Cras mi risus, dignissim sed adipiscing ut, placerat non arcu.</p>
            </div>
            <!-- End Footer Content -->

            <!-- Footer Content -->
            <div class="col-lg-3 col-md-6 g-mb-40 g-mb-0--lg">
              <div class="u-heading-v3-1 g-brd-white-opacity-0_3 g-mb-25">
                <h2 class="u-heading-v3__title h6 text-uppercase g-brd-primary">Latest Posts</h2>
              </div>

              <article>
                <h3 class="h6 g-mb-2">
                  <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">Incredible template</a>
                </h3>
                <div class="small g-color-white-opacity-0_6">May 8, 2017</div>
              </article>

              <hr class="g-brd-white-opacity-0_1 g-my-10">

              <article>
                <h3 class="h6 g-mb-2">
                  <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">New features</a>
                </h3>
                <div class="small g-color-white-opacity-0_6">June 23, 2017</div>
              </article>

              <hr class="g-brd-white-opacity-0_1 g-my-10">

              <article>
                <h3 class="h6 g-mb-2">
                  <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">New terms and conditions</a>
                </h3>
                <div class="small g-color-white-opacity-0_6">September 15, 2017</div>
              </article>
            </div>
            <!-- End Footer Content -->

            <!-- Footer Content -->
            <div class="col-lg-3 col-md-6 g-mb-40 g-mb-0--lg">
              <div class="u-heading-v3-1 g-brd-white-opacity-0_3 g-mb-25">
                <h2 class="u-heading-v3__title h6 text-uppercase g-brd-primary">Useful Links</h2>
              </div>

              <nav class="text-uppercase1">
                <ul class="list-unstyled g-mt-minus-10 mb-0">
                  <li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
                    <h4 class="h6 g-pr-20 mb-0">
                      <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">About Us</a>
                      <i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
                    </h4>
                  </li>
                  <li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
                    <h4 class="h6 g-pr-20 mb-0">
                      <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">Portfolio</a>
                      <i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
                    </h4>
                  </li>
                  <li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
                    <h4 class="h6 g-pr-20 mb-0">
                      <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">Our Services</a>
                      <i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
                    </h4>
                  </li>
                  <li class="g-pos-rel g-brd-bottom g-brd-white-opacity-0_1 g-py-10">
                    <h4 class="h6 g-pr-20 mb-0">
                      <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">Latest Jobs</a>
                      <i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
                    </h4>
                  </li>
                  <li class="g-pos-rel g-py-10">
                    <h4 class="h6 g-pr-20 mb-0">
                      <a class="g-color-white-opacity-0_8 g-color-white--hover" href="#">Contact Us</a>
                      <i class="fa fa-angle-right g-absolute-centered--y g-right-0"></i>
                    </h4>
                  </li>
                </ul>
              </nav>
            </div>
            <!-- End Footer Content -->

            <!-- Footer Content -->
            <div class="col-lg-3 col-md-6">
              <div class="u-heading-v3-1 g-brd-white-opacity-0_3 g-mb-25">
                <h2 class="u-heading-v3__title h6 text-uppercase g-brd-primary">Our Contacts</h2>
              </div>

              <address class="g-bg-no-repeat g-line-height-2 g-mt-minus-4" style="background-image: url({{ root }}assets/img/maps/map2.png);">
                25, Lorem Lis Street, Orange
                <br> California, US
                <br> Phone: 800 123 3456
                <br> Fax: 800 123 3457
                <br> Email: <a href="mailto:info@htmlstream.com" class="">info@htmlstream.com</a>
              </address>
            </div>
            <!-- End Footer Content -->
          </div>
        </div>
      </div>
      <!-- End Footer -->

      <!-- Copyright Footer -->
      <footer class="g-bg-gray-dark-v1 g-color-white-opacity-0_8 g-py-20">
        <div class="container">
          <div class="row">
            <div class="col-md-8 text-center text-md-left g-mb-15 g-mb-0--md">
              <div class="d-lg-flex">
                <small class="d-block g-font-size-default g-mr-10 g-mb-10 g-mb-0--md">2019 &copy; All Rights Reserved.</small>
                <ul class="u-list-inline">
                  <li class="list-inline-item">
                    <a href="#">Privacy Policy</a>
                  </li>
                  <li class="list-inline-item">
                    <span>|</span>
                  </li>
                  <li class="list-inline-item">
                    <a href="#">Terms of Use</a>
                  </li>
                </ul>
              </div>
            </div>

            <div class="col-md-4 align-self-center">
              <ul class="list-inline text-center text-md-right mb-0">
                <li class="list-inline-item g-mx-10" data-toggle="tooltip" data-placement="top" title="Facebook">
                  <a href="#" class="g-color-white-opacity-0_5 g-color-white--hover">
                    <i class="fa fa-facebook"></i>
                  </a>
                </li>
                <li class="list-inline-item g-mx-10" data-toggle="tooltip" data-placement="top" title="Skype">
                  <a href="#" class="g-color-white-opacity-0_5 g-color-white--hover">
                    <i class="fa fa-skype"></i>
                  </a>
                </li>
                <li class="list-inline-item g-mx-10" data-toggle="tooltip" data-placement="top" title="Linkedin">
                  <a href="#" class="g-color-white-opacity-0_5 g-color-white--hover">
                    <i class="fa fa-linkedin"></i>
                  </a>
                </li>
                <li class="list-inline-item g-mx-10" data-toggle="tooltip" data-placement="top" title="Pinterest">
                  <a href="#" class="g-color-white-opacity-0_5 g-color-white--hover">
                    <i class="fa fa-pinterest"></i>
                  </a>
                </li>
                <li class="list-inline-item g-mx-10" data-toggle="tooltip" data-placement="top" title="Twitter">
                  <a href="#" class="g-color-white-opacity-0_5 g-color-white--hover">
                    <i class="fa fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item g-mx-10" data-toggle="tooltip" data-placement="top" title="Dribbble">
                  <a href="#" class="g-color-white-opacity-0_5 g-color-white--hover">
                    <i class="fa fa-dribbble"></i>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
      <!-- End Copyright Footer -->

      {% 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/hs-megamenu/src/hs.megamenu.js"></script>
    {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}
    <script src="{{ root }}assets/vendor/appear.js"></script>
    <script src="{{ root }}assets/vendor/slick-carousel/slick/slick.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.tabs.js"></script>
    <script src="{{ root }}assets/js/components/hs.progress-bar.js"></script>
    <script src="{{ root }}assets/js/components/hs.rating.js"></script>
    <script src="{{ root }}assets/js/components/hs.counter.js"></script>
    <script src="{{ root }}assets/js/components/hs.carousel.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 carousel
        $.HSCore.components.HSCarousel.init('.js-carousel');

        // initialization of tabs
        $.HSCore.components.HSTabs.init('[role="tablist"]');

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

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

        // 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
        });

        // initialization of horizontal progress bars
        setTimeout(function () { // important in this case
          var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
            direction: 'horizontal',
            indicatorSelector: '.js-hr-progress-bar-indicator'
          });
        }, 1);
      });

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