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

{% include "html/assets/include/nunjucks/partials/head.njk" %}
    {% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
    {% include "html/assets/include/nunjucks/partials/core-css.njk" %}
    {% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
    {% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
    <link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/fancybox/jquery.fancybox.min.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/slick-carousel/slick/slick.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/typedjs/typed.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="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll loaded dzsprx-readyall" data-options='{direction: "reverse", settings_mode_oneelement_max_offset: "150"}'>
        <div class="divimage dzsparallaxer--target w-100 g-bg-pos-bottom-center" style="height: 120%; background-image: url({{ root }}assets/img-temp/1920x1080/img25.jpg);"></div>

        <div class="container g-py-200">
          <div class="row">
            <div class="col-md-6">
              <h3 class="g-color-black g-font-weight-300 g-font-size-40 g-line-height-1_2 mb-4">Have an easy<br>website with Unify
              </h3>
              <span class="d-block g-color-black-opacity-0_8 g-font-size-16 mb-5">Build, share, sell and enjoy.</span>
              <a class="js-fancybox u-link-v5 g-color-black" href="javascript:;"
                 data-src="//vimeo.com/167434033"
                 data-speed="350"
                 data-caption="Single Item">
                <span class="align-middle u-icon-v3 u-block-hover--scale g-bg-white g-color-black g-color-primary--hover g-rounded-50x g-cursor-pointer mr-2">
                  <i class="g-font-size-18 g-pos-rel g-left-2 fa fa-play"></i>
                </span>
                1:41 minutes
              </a>
            </div>
          </div>
        </div>
      </section>
      <!-- End Promo Block -->

      <!-- Icon Blocks -->
      <section class="g-py-100">
        <div class="container">
          <div class="row no-gutters">
            <div class="col-lg-4 g-px-40 g-mb-50 g-mb-0--lg">
              <!-- Icon Blocks -->
              <div class="text-center">
                <span class="d-inline-block u-icon-v3 u-icon-size--xl g-bg-primary g-color-white rounded-circle g-mb-30">
                  <i class="icon-finance-086 u-line-icon-pro"></i>
                </span>
                <h3 class="h5 g-color-gray-dark-v2 g-font-weight-600 text-uppercase mb-3">Invest To Us</h3>
                <p class="mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
              </div>
              <!-- End Icon Blocks -->
            </div>

            <div class="col-lg-4 g-brd-left--lg g-brd-gray-light-v4 g-px-40 g-mb-50 g-mb-0--lg">
              <!-- Icon Blocks -->
              <div class="text-center">
                <span class="d-inline-block u-icon-v3 u-icon-size--xl g-bg-primary g-color-white rounded-circle g-mb-30">
                  <i class="icon-finance-196 u-line-icon-pro"></i>
                </span>
                <h3 class="h5 g-color-gray-dark-v2 g-font-weight-600 text-uppercase mb-3">Increase Income</h3>
                <p class="mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
              </div>
              <!-- End Icon Blocks -->
            </div>

            <div class="col-lg-4 g-brd-left--lg g-brd-gray-light-v4 g-px-40">
              <!-- Icon Blocks -->
              <div class="text-center">
                <span class="d-inline-block u-icon-v3 u-icon-size--xl g-bg-primary g-color-white rounded-circle g-mb-30">
                  <i class="icon-finance-147 u-line-icon-pro"></i>
                </span>
                <h3 class="h5 g-color-gray-dark-v2 g-font-weight-600 text-uppercase mb-3">Collect Cash</h3>
                <p class="mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>
        </div>
      </section>
      <!-- End Icon Blocks -->

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

      <!-- About Our Company -->
      <section class="1g-bg-secondary g-py-100">
        <div class="container">
          <div class="row">
            <div class="col-lg-6 align-self-center g-mb-100 g-mb-0--lg">
              <header class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
                <h2 class="h4 u-heading-v2__title g-color-gray-dark-v2 g-font-weight-600 text-uppercase">About Our Company</h2>
              </header>

              <p class="g-font-size-16 g-mb-30">Build best responsive template with Unify 2 dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas moles.</p>

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

            <div class="col-lg-6 g-bg-img-hero g-pos-rel" style="background-image: url({{ root }}assets/img/maps/map3.png);">
              <div class="g-absolute-centered text-center w-100 g-px-40">
                <h2 class="h1 g-color-gray-light-v2 g-font-weight-600 g-letter-spacing-0_5">Unify is
                  <span class="u-text-animation u-text-animation--typing"></span></h2>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- End About Our Company -->

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

      <!-- Our Recent Projects -->
      <section class="g-py-100">
        <div class="container">
          <header class="g-mb-50">
            <div class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
              <h2 class="h4 u-heading-v2__title g-color-gray-dark-v2 g-font-weight-600 text-uppercase">Our Recent Projects</h2>
            </div>
            <p class="g-font-size-16">Included Over 2000+ UI Components tvero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas moles.</p>
          </header>

          <div class="row">
            <div class="col-lg-4 col-md-6 g-mb-30 g-mb-0--lg">
              <article class="u-block-hover u-shadow-v21 rounded">
                <figure class="u-bg-overlay g-bg-black-opacity-0_4--after">
                  <img class="img-fluid w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img6.jpg" alt="Image description">
                </figure>

                <header class="u-bg-overlay__inner g-pos-abs g-top-30 g-right-30 g-left-30 g-color-white">
                  <h3 class="h4">
                    <a class="g-color-white" href="#">Nulla ipsum dolor sit</a>
                  </h3>
                  <p>Consectetur adipiscing elitut eleifend nisl</p>
                </header>

                <ul class="list-inline u-bg-overlay__inner g-pos-abs g-bottom-10 g-left-30 g-opacity-0_8">
                  <li class="list-inline-item">
                    <div class="g-brd-around g-brd-2 g-brd-white rounded-circle">
                      <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img12.jpg" alt="Image description">
                    </div>
                  </li>
                  <li class="list-inline-item g-ml-minus-20">
                    <div class="g-brd-around g-brd-2 g-brd-white rounded-circle">
                      <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image description">
                    </div>
                  </li>
                  <li class="list-inline-item g-ml-minus-20">
                    <div class="g-brd-around g-brd-2 g-brd-white rounded-circle">
                      <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image description">
                    </div>
                  </li>
                  <li class="list-inline-item g-font-weight-600 g-color-white">+21</li>
                </ul>
              </article>
            </div>

            <div class="col-lg-4 col-md-6 g-mb-30 g-mb-0--lg">
              <article class="u-block-hover u-shadow-v21 rounded">
                <figure class="u-bg-overlay g-bg-black-opacity-0_4--after">
                  <img class="img-fluid w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img2.jpg" alt="Image description">
                </figure>

                <header class="u-bg-overlay__inner g-pos-abs g-top-30 g-right-30 g-left-30 g-color-white">
                  <h3 class="h4">
                    <a class="g-color-white" href="#">Adipiscing elitut</a>
                  </h3>
                  <p>Consectetur adipiscing elitut eleifend nisl</p>
                </header>

                <ul class="list-inline u-bg-overlay__inner g-pos-abs g-bottom-10 g-left-30 g-opacity-0_8">
                  <li class="list-inline-item">
                    <div class="g-brd-around g-brd-2 g-brd-white rounded-circle">
                      <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image description">
                    </div>
                  </li>
                  <li class="list-inline-item g-ml-minus-20">
                    <div class="g-brd-around g-brd-2 g-brd-white rounded-circle">
                      <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image description">
                    </div>
                  </li>
                  <li class="list-inline-item g-ml-minus-20">
                    <div class="g-brd-around g-brd-2 g-brd-white rounded-circle">
                      <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image description">
                    </div>
                  </li>
                  <li class="list-inline-item g-font-weight-600 g-color-white">+8</li>
                </ul>
              </article>
            </div>

            <div class="col-lg-4 col-md-6">
              <article class="u-block-hover u-shadow-v21 rounded">
                <figure class="u-bg-overlay g-bg-black-opacity-0_4--after">
                  <img class="img-fluid w-100 u-block-hover__main--zoom-v1" src="{{ root }}assets/img-temp/400x270/img1.jpg" alt="Image description">
                </figure>

                <header class="u-bg-overlay__inner g-pos-abs g-top-30 g-right-30 g-left-30 g-color-white">
                  <h3 class="h4">
                    <a class="g-color-white" href="#">Hac habitasse platea</a>
                  </h3>
                  <p>Consectetur adipiscing elitut eleifend nisl</p>
                </header>

                <ul class="list-inline u-bg-overlay__inner g-pos-abs g-bottom-10 g-left-30 g-opacity-0_8">
                  <li class="list-inline-item">
                    <div class="g-brd-around g-brd-2 g-brd-white rounded-circle">
                      <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image description">
                    </div>
                  </li>
                  <li class="list-inline-item g-ml-minus-20">
                    <div class="g-brd-around g-brd-2 g-brd-white rounded-circle">
                      <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image description">
                    </div>
                  </li>
                  <li class="list-inline-item g-ml-minus-20">
                    <div class="g-brd-around g-brd-2 g-brd-white rounded-circle">
                      <img class="g-width-30 g-height-30 rounded-circle" src="{{ root }}assets/img-temp/100x100/img6.jpg" alt="Image description">
                    </div>
                  </li>
                  <li class="list-inline-item g-font-weight-600 g-color-white">+13</li>
                </ul>
              </article>
            </div>
          </div>
        </div>
      </section>
      <!-- End Our Recent Projects -->

      <!-- Most Quality Solution -->
      <section class="dzsparallaxer auto-init height-is-based-on-content use-loading" data-options='{direction: "reverse", settings_mode_oneelement_max_offset: "150"}'>
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100 u-bg-overlay g-bg-img-hero g-bg-white-opacity-0_7--after" style="height: 140%; background-image: url({{ root }}assets/img-temp/1920x1080/img2.jpg);"></div>
        <!-- End Parallax Image -->

        <div class="container u-bg-overlay__inner g-py-150--md g-py-80">
          <div class="row">
            <!-- Section Content -->
            <div class="col-lg-6 order-2 order-sm-1 g-mb-0 g-mb-50--sm g-mb-0--lg">
              <div class="u-heading-v2-3--bottom g-brd-primary g-mb-30">
                <h2 class="h4 u-heading-v2__title g-color-gray-dark-v2 g-font-weight-600 text-uppercase">Most Quality Solution</h2>
              </div>
              <p class="g-font-size-16 g-line-height-2 g-mb-30">Morbi a suscipit ipsum. Suspendisse mollis libero ante. Pellentesque finibus convallis nulla vel placerat. Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. Ullam elementum tincidunt massa, a pulvinar leo ultricies ut.</p>

              <div class="g-mb-30">
                <img class="u-block-hover__main--grayscale g-width-100 g-opacity-0_6 g-mr-40 g-mb-10 g-mb-0--sm" src="{{ root }}assets/img-temp/200x100/img8.png" alt="Image description">
                <img class="u-block-hover__main--grayscale g-width-100 g-opacity-0_6 g-mr-40 g-mb-10 g-mb-0--sm" src="{{ root }}assets/img-temp/200x100/img6.png" alt="Image description">
                <img class="u-block-hover__main--grayscale g-width-100 g-opacity-0_6" src="{{ root }}assets/img-temp/200x100/img3.png" alt="Image description">
              </div>

              <a href="#" class="btn btn-xl u-btn-primary text-uppercase g-font-weight-600 g-font-size-12 rounded g-mr-15 g-mb-15 g-mb-0--sm">Buy Full Version</a>
              <small class="d-block d-sm-inline-block g-color-gray-dark-v5 g-font-size-12">*Exclusive item on Wrapboostrap Marketpalce</small>
            </div>
            <!-- End Section Content -->

            <!-- Video Icon -->
            <div class="col-lg-6 order-1 order-sm-2 align-self-center text-center g-pos-rel g-mb-40 g-mb-0--sm">
              <a class="js-fancybox d-block g-pos-rel" href="https://vimeo.com/167434033" title="Lightbox Gallery">
                <span class="u-icon-v3 u-icon-size--xl u-block-hover--scale u-shadow-v24 g-bg-white g-color-gray-dark-v1 g-color-primary--hover g-font-size-20 rounded-circle g-cursor-pointer g-mb-10">
                  <i class="fa fa-play g-pos-rel g-left-2"></i>
                </span>
              </a>
              <p class="g-color-gray-dark-v5">Watch our 2 min video.</p>
            </div>
            <!-- End Video Icon -->
          </div>
        </div>
      </section>
      <!-- End Most Quality Solution -->

      <!-- Our Environment -->
      <section class="g-py-100">
        <div class="container">
          <div class="row">
            <!-- Carousel -->
            <div class="col-lg-6 g-mb-50 g-mb-0--lg">
              <div id="carouselCus1" class="js-carousel text-center g-mb-20"
                   data-infinite="true"
                   data-lazy-load="progressive"
                   data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-50 g-height-50 g-font-size-20 g-bg-white g-color-gray-dark-v5 g-color-primary--hover g-mt-minus-10"
                   data-arrow-left-classes="fa fa-angle-left g-left-0 rounded-right"
                   data-arrow-right-classes="fa fa-angle-right g-right-0 rounded-left"
                   data-nav-for="#carouselCus2">

                <div class="js-slide">
                  <a class="js-fancybox d-block g-pos-rel" data-rel="lightbox-gallery--08-1" href="{{ root }}assets/img-temp/600x450/img6.jpg" title="Lightbox Gallery"
                     data-open-effect="bounceInDown"
                     data-close-effect="bounceOutDown"
                     data-open-speed="1000"
                     data-close-speed="1000"
                     data-blur-bg="true">
                    <img class="img-fluid w-100 rounded" data-lazy="{{ root }}assets/img-temp/600x450/img6.jpg" alt="Image description">
                  </a>
                </div>

                <div class="js-slide">
                  <a class="js-fancybox d-block g-pos-rel" data-rel="lightbox-gallery--08-1" href="{{ root }}assets/img-temp/600x450/img3.jpg" title="Lightbox Gallery"
                     data-open-effect="bounceInDown"
                     data-close-effect="bounceOutDown"
                     data-open-speed="1000"
                     data-close-speed="1000"
                     data-blur-bg="true">
                    <img class="img-fluid w-100 rounded" data-lazy="{{ root }}assets/img-temp/600x450/img3.jpg" alt="Image description">
                  </a>
                </div>

                <div class="js-slide">
                  <a class="js-fancybox d-block g-pos-rel" data-rel="lightbox-gallery--08-1" href="{{ root }}assets/img-temp/600x450/img4.jpg" title="Lightbox Gallery"
                     data-open-effect="bounceInDown"
                     data-close-effect="bounceOutDown"
                     data-open-speed="1000"
                     data-close-speed="1000"
                     data-blur-bg="true">
                    <img class="img-fluid w-100 rounded" data-lazy="{{ root }}assets/img-temp/600x450/img4.jpg" alt="Image description">
                  </a>
                </div>

                <div class="js-slide">
                  <a class="js-fancybox d-block g-pos-rel" data-rel="lightbox-gallery--08-1" href="{{ root }}assets/img-temp/600x450/img5.jpg" title="Lightbox Gallery"
                     data-open-effect="bounceInDown"
                     data-close-effect="bounceOutDown"
                     data-open-speed="1000"
                     data-close-speed="1000"
                     data-blur-bg="true">
                    <img class="img-fluid w-100 rounded" data-lazy="{{ root }}assets/img-temp/600x450/img5.jpg" alt="Image description">
                  </a>
                </div>

                <div class="js-slide">
                  <a class="js-fancybox d-block g-pos-rel" data-rel="lightbox-gallery--08-1" href="{{ root }}assets/img-temp/600x450/img7.jpg" title="Lightbox Gallery"
                     data-open-effect="bounceInDown"
                     data-close-effect="bounceOutDown"
                     data-open-speed="1000"
                     data-close-speed="1000"
                     data-blur-bg="true">
                    <img class="img-fluid w-100 rounded" data-lazy="{{ root }}assets/img-temp/600x450/img7.jpg" alt="Image description">
                  </a>
                </div>
              </div>

              <div id="carouselCus2" class="js-carousel text-center u-carousel-v3 g-mx-minus-10"
                   data-infinite="true"
                   data-center-mode="true"
                   data-lazy-load="progressive"
                   data-slides-show="4"
                   data-is-thumbs="true"
                   data-nav-for="#carouselCus1">
                <div class="js-slide g-px-10">
                  <img class="img-fluid g-cursor-pointer rounded" data-lazy="{{ root }}assets/img-temp/600x450/img6.jpg" alt="Image description">
                </div>

                <div class="js-slide g-px-10">
                  <img class="img-fluid g-cursor-pointer rounded" data-lazy="{{ root }}assets/img-temp/600x450/img3.jpg" alt="Image description">
                </div>

                <div class="js-slide g-px-10">
                  <img class="img-fluid g-cursor-pointer rounded" data-lazy="{{ root }}assets/img-temp/600x450/img4.jpg" alt="Image description">
                </div>

                <div class="js-slide g-px-10">
                  <img class="img-fluid g-cursor-pointer rounded" data-lazy="{{ root }}assets/img-temp/600x450/img5.jpg" alt="Image description">
                </div>

                <div class="js-slide g-px-10">
                  <img class="img-fluid g-cursor-pointer rounded" data-lazy="{{ root }}assets/img-temp/600x450/img7.jpg" alt="Image description">
                </div>
              </div>
            </div>
            <!-- End Carousel -->

            <!-- Section Content -->
            <div class="col-lg-6 align-self-center g-pl-30--lg">
              <header class="g-mb-30">
                <div class="u-heading-v2-3--bottom g-brd-primary g-mb-30">
                  <h2 class="h4 u-heading-v2__title g-color-gray-dark-v2 g-font-weight-600 text-uppercase">Our Environment</h2>
                </div>
                <p class="g-font-size-16">Unify
                  <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                  <strong>successful</strong> business on web and mobile.</p>
              </header>

              <div class="g-mb-30">
                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                <p>Passages are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
              </div>
              <a class="btn btn-xl u-btn-primary text-uppercase g-font-weight-600 g-font-size-12 rounded g-mr-15 g-mb-10 g-mb-0--sm" href="#">Check It Now</a>
              <small class="d-block d-sm-inline-block g-color-gray-dark-v5 g-font-size-12">*Sponsored by Unify team in Htmlstream.</small>
            </div>
            <!-- End Section Content -->
          </div>
        </div>
      </section>
      <!-- End Our Environment -->

      <!-- Counters -->
      <section class="g-brd-top g-brd-bottom g-brd-gray-light-v4 g-pt-50">
        <div class="container">
          <div class="row text-center text-uppercase">
            <div class="col-lg-3 col-sm-6 g-brd-right g-brd-gray-light-v4 g-mb-50">
              <div class="js-counter g-color-gray-dark-v2 g-font-size-35 g-font-weight-300 g-mb-7">52147</div>
              <h4 class="h6 g-color-gray-dark-v5">Code Lines</h4>
            </div>

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

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

            <div class="col-lg-3 col-sm-6 g-mb-50">
              <div class="js-counter g-color-gray-dark-v2 g-font-size-35 g-font-weight-300 g-mb-7">87904</div>
              <h4 class="h6 g-color-gray-dark-v5">Job Offers</h4>
            </div>
          </div>
        </div>
      </section>
      <!-- End Counters -->

      <!-- Latest News -->
      <section class="g-py-100">
        <div class="container">
          <header class="g-mb-50">
            <div class="u-heading-v2-3--bottom g-brd-primary g-mb-20">
              <h2 class="h4 u-heading-v2__title g-color-gray-dark-v2 g-font-weight-600 text-uppercase">Our Latest News</h2>
            </div>
            <p class="g-font-size-16">Unify creative technology company providing key digital services. At vero eoset dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas moles.</p>
          </header>

          <div class="row">
            <div class="col-lg-4 g-mb-30 g-mb-0--lg">
              <!-- Article -->
              <article class="u-shadow-v11 rounded">
                <div class="g-pa-30">
                  <h3 class="g-font-weight-300 g-mb-15">
                    <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Focused on helping our clients to build a great business</a>
                  </h3>
                  <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
                </div>

                <div class="media g-font-size-12 g-brd-top g-brd-gray-light-v4 g-pa-15-30">
                  <img class="d-flex mr-2 rounded-circle g-width-20 g-height-20" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image description">
                  <div class="media-body align-self-center">
                    <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Kathy Reyes</a>
                  </div>

                  <div class="align-self-center">
                    <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover g-mr-10" href="#">
                      <i class="icon-bubbles g-color-gray-dark-v5 g-pos-rel g-top-1 mr-1"></i> 24
                    </a>
                    <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">
                      <i class="icon-eye g-color-gray-dark-v5 g-pos-rel g-top-1 mr-1"></i> 108
                    </a>
                  </div>
                </div>
              </article>
              <!-- End Article -->
            </div>

            <div class="col-lg-4 g-mb-30 g-mb-0--lg">
              <!-- Article -->
              <article class="u-shadow-v11 rounded">
                <div class="g-pa-30">
                  <h3 class="g-font-weight-300 g-mb-15">
                    <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">We build your website to realise your vision, project and more</a>
                  </h3>
                  <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
                </div>

                <div class="media g-font-size-12 g-brd-top g-brd-gray-light-v4 g-pa-15-30">
                  <img class="d-flex mr-2 rounded-circle g-width-20 g-height-20" src="{{ root }}assets/img-temp/100x100/img4.jpg" alt="Image description">
                  <div class="media-body align-self-center">
                    <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Anastasia Sh.</a>
                  </div>

                  <div class="align-self-center">
                    <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover g-mr-10" href="#">
                      <i class="icon-bubbles g-color-gray-dark-v5 g-pos-rel g-top-1 mr-1"></i> 16
                    </a>
                    <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">
                      <i class="icon-eye g-color-gray-dark-v5 g-pos-rel g-top-1 mr-1"></i> 124
                    </a>
                  </div>
                </div>
              </article>
              <!-- End Article -->
            </div>

            <div class="col-lg-4">
              <!-- Article -->
              <article class="u-shadow-v11 rounded">
                <div class="g-pa-30">
                  <h3 class="g-font-weight-300 g-mb-15">
                    <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">Praesentium to website realise imperdiet demore elementum</a>
                  </h3>
                  <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at. Sed viverra cursus nibh.</p>
                </div>

                <div class="media g-font-size-12 g-brd-top g-brd-gray-light-v4 g-pa-15-30">
                  <img class="d-flex mr-2 rounded-circle g-width-20 g-height-20" src="{{ root }}assets/img-temp/100x100/img7.jpg" alt="Image description">
                  <div class="media-body align-self-center">
                    <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">James Dalglish</a>
                  </div>

                  <div class="align-self-center">
                    <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover g-mr-10" href="#">
                      <i class="icon-bubbles g-color-gray-dark-v5 g-pos-rel g-top-1 mr-1"></i> 41
                    </a>
                    <a class="u-link-v5 g-color-gray-dark-v2 g-color-primary--hover" href="#">
                      <i class="icon-eye g-color-gray-dark-v5 g-pos-rel g-top-1 mr-1"></i> 219
                    </a>
                  </div>
                </div>
              </article>
              <!-- End Article -->
            </div>
          </div>
        </div>
      </section>
      <!-- End Latest News -->

      {% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %}

      {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
      {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
      {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
    </main>

    {% include "html/assets/include/nunjucks/partials/blocks/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/fancybox/jquery.fancybox.min.js"></script>
    <script src="{{ root }}assets/vendor/slick-carousel/slick/slick.js"></script>
    <script src="{{ root }}assets/vendor/typedjs/typed.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/components/hs.tabs.js"></script>
    <script src="{{ root }}assets/js/components/hs.popup.js"></script>
    <script src="{{ root }}assets/js/components/hs.carousel.js"></script>
    <script src="{{ root }}assets/js/components/text-animation/hs.text-slideshow.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 popups
        $.HSCore.components.HSPopup.init('.js-fancybox');

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

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

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