{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "home" %}
{% set mainNavActive_2 = "home-page-4" %}
{% set title = "Home Page 4 | " %}

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

    {% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
    {% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
  </head>

  <body>
    <main>
      {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

      <!-- Promo Block -->
      <section class="g-flex-centered g-bg-pos-center g-bg-img-hero g-py-150" style="background-image: url({{ root }}assets/img-temp/1920x1080/img2.jpg);" data-calc-target="#js-header">
        <div class="container text-center g-z-index-1">
          <div class="g-mb-50"
               data-animation="fadeInUp"
               data-animation-delay="200"
               data-animation-duration="1500">
            <a class="js-fancybox-media rounded-circle u-icon-v2 g-font-size-20 g-color-white g-bg-black g-brd-black g-bg-primary--hover g-brd-primary--hover g-text-underline--none--hover" href="http://vimeo.com/36031564"
               data-open-effect="fadeIn"
               data-close-effect="fadeOut"
               data-open-speed="1000"
               data-close-speed="1000">
              <i class="g-pos-rel g-left-2 hs-icon hs-icon-play"></i>
            </a>
          </div>
          <div class="g-mb-25"
               data-animation="fadeInUp"
               data-animation-delay="500"
               data-animation-duration="1500">
            <h2 class="h4 d-inline-block g-brd-bottom g-brd-2 g-brd-black g-color-black g-font-weight-600 text-uppercase g-pb-5">Unify bootstrap template</h2>
          </div>
          <h3 class="g-color-black g-font-weight-700 g-font-size-40 g-font-size-55--md text-uppercase g-mb-40"
              data-animation="fadeInUp"
              data-animation-delay="800"
              data-animation-duration="1500">
            We are creative company
          </h3>
          <div
              data-animation="fadeInUp"
              data-animation-delay="1100"
              data-animation-duration="1500">
            <a class="btn btn-lg u-btn-outline-black g-font-weight-600 g-font-size-13 text-uppercase g-rounded-50 mx-2 g-px-25 g-py-15 g-mb-20" href="#">Discover More</a>
            <a class="btn btn-lg u-btn-primary g-font-weight-600 g-font-size-13 text-uppercase g-rounded-50 mx-2 g-px-25 g-py-15 g-mb-20" href="#">Purchase Now</a>
          </div>
        </div>
      </section>
      <!-- End Promo Block -->

      <!-- About -->
      <section class="g-pt-100 g-pb-100">
        <div class="container">
          <!-- Image, Text Block -->
          <div class="row d-flex align-items-lg-center flex-wrap g-mb-60 g-mb-0--lg">
            <div class="col-md-6 col-lg-8">
              <img class="img-fluid rounded" src="{{ root }}assets/img-temp/900x600/img1.jpg" alt="Image Description">
            </div>
            <div class="col-md-6 col-lg-4">
              <div class="g-mt-minus-30 g-mt-0--md g-ml-minus-100--lg">
                <div class="g-mb-20">
                  <h2 class="g-color-black g-font-weight-600 g-font-size-25 g-font-size-35--lg g-line-height-1_2 mb-4">Finding the<br>Perfect Product
                  </h2>
                  <p class="g-font-size-16">This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.</p>
                </div>
                <a class="btn u-btn-primary g-brd-2 g-brd-white g-font-size-13 g-rounded-50 g-pl-20 g-pr-15 g-py-9" href="#">
                  More products
                  <span class="align-middle u-icon-v3 g-width-16 g-height-16 g-color-black g-bg-white g-font-size-11 rounded-circle ml-3">
                    <i class="fa fa-angle-right"></i>
                  </span>
                </a>
              </div>
            </div>
          </div>
          <!-- End Image, Text Block -->
        </div>

        <div class="container">
          <!-- Image, Text Block -->
          <div class="row d-flex justify-content-between align-items-lg-center flex-wrap g-mt-minus-50--lg">
            <div class="col-md-6 order-md-2">
              <div class="g-brd-around--md g-brd-10 g-brd-white rounded">
                <img class="img-fluid w-100 rounded" src="{{ root }}assets/img-temp/600x450/img1.jpg" alt="Image Description">
              </div>
            </div>
            <div class="col-md-6 col-lg-4 ml-auto order-md-1">
              <div class="g-mt-minus-30 g-mt-0--md g-ml-minus-100--lg">
                <div class="g-mb-20">
                  <h2 class="g-color-black g-font-weight-600 g-font-size-25 g-font-size-35--lg g-line-height-1_2 mb-4">More than<br>a Stunning Look
                  </h2>
                  <p class="g-font-size-16">This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.</p>
                </div>
                <a class="btn u-btn-primary g-brd-2 g-brd-white g-font-size-13 g-rounded-50 g-pl-20 g-pr-15 g-py-9" href="#">
                  Read more
                  <span class="align-middle u-icon-v3 g-width-16 g-height-16 g-color-black g-bg-white g-font-size-11 rounded-circle ml-3">
                    <i class="fa fa-angle-right"></i>
                  </span>
                </a>
              </div>
            </div>
          </div>
          <!-- End Image, Text Block -->
        </div>
      </section>
      <!-- End About -->

      <!-- Icon Blocks -->
      <section class="g-bg-secondary">
        <div class="container g-pt-100 g-pb-130">
          <!-- Icon Blocks -->
          <div class="row no-gutters">
            <div class="col-sm-6 col-lg-3">
              <div class="g-pr-40 g-mt-20">
                <div class="g-mb-30">
                  <h2 class="h2 g-color-black g-font-weight-600 g-line-height-1_2 mb-4">What can<br>we provide?</h2>
                  <p class="g-font-weight-300 g-font-size-16">The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
                </div>
              </div>
            </div>

            <div class="col-lg-9">
              <div id="we-provide" class="js-carousel"
                   data-infinite="true"
                   data-slides-show="3"
                   data-slides-scroll="3"
                   data-center-mode="true"
                   data-center-padding="1px"
                   data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-minus-30">
                <div class="js-slide">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v21--hover g-brd-around g-brd-gray-light-v3 g-brd-left-none g-brd-transparent--hover g-bg-white--hover g-transition-0_3 g-cursor-pointer g-px-30 g-pt-30 g-pb-50 g-ml-minus-1">
                    <div class="mb-4">
                      <span class="d-block g-color-gray-dark-v4 g-font-weight-700 text-right mb-3">01</span>
                      <span class="u-icon-v3 u-shadow-v19 g-bg-white g-color-primary rounded-circle mb-4">
                        <i class="icon-education-087 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h5 g-color-black g-font-weight-600 mb-3">Creative</h3>
                      <p>This is where we sit down, grab a cup of coffee and dial in the details.</p>
                    </div>
                    <a class="g-brd-bottom g-brd-gray-dark-v5 g-brd-primary--hover g-color-gray-dark-v5 g-color-primary--hover g-font-weight-600 g-font-size-12 text-uppercase g-text-underline--none--hover" href="#">Read more</a>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="js-slide">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v21--hover g-brd-around g-brd-gray-light-v3 g-brd-left-none g-brd-transparent--hover g-bg-white--hover g-transition-0_3 g-cursor-pointer g-px-30 g-pt-30 g-pb-50 g-ml-minus-1">
                    <div class="mb-4">
                      <span class="d-block g-color-gray-dark-v4 g-font-weight-700 text-right mb-3">02</span>
                      <span class="u-icon-v3 u-shadow-v19 g-bg-white g-color-primary rounded-circle mb-4">
                        <i class="icon-education-035 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h5 g-color-black g-font-weight-600 mb-3">Features</h3>
                      <p>This is where we sit down, grab a cup of coffee and dial in the details.</p>
                    </div>
                    <a class="g-brd-bottom g-brd-gray-dark-v5 g-brd-primary--hover g-color-gray-dark-v5 g-color-primary--hover g-font-weight-600 g-font-size-12 text-uppercase g-text-underline--none--hover" href="#">Read more</a>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="js-slide">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v21--hover g-brd-around g-brd-gray-light-v3 g-brd-left-none g-brd-transparent--hover g-bg-white--hover g-transition-0_3 g-cursor-pointer g-px-30 g-pt-30 g-pb-50 g-ml-minus-1">
                    <div class="mb-4">
                      <span class="d-block g-color-gray-dark-v4 g-font-weight-700 text-right mb-3">03</span>
                      <span class="u-icon-v3 u-shadow-v19 g-bg-white g-color-primary rounded-circle mb-4">
                        <i class="icon-education-141 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h5 g-color-black g-font-weight-600 mb-3">Responsive</h3>
                      <p>This is where we sit down, grab a cup of coffee and dial in the details.</p>
                    </div>
                    <a class="g-brd-bottom g-brd-gray-dark-v5 g-brd-primary--hover g-color-gray-dark-v5 g-color-primary--hover g-font-weight-600 g-font-size-12 text-uppercase g-text-underline--none--hover" href="#">Read more</a>
                  </div>
                  <!-- End Icon Blocks -->
                </div>

                <div class="js-slide">
                  <!-- Icon Blocks -->
                  <div class="u-shadow-v21--hover g-brd-around g-brd-gray-light-v3 g-brd-left-none g-brd-transparent--hover g-bg-white--hover g-transition-0_3 g-cursor-pointer g-px-30 g-pt-30 g-pb-50 g-ml-minus-1">
                    <div class="mb-4">
                      <span class="d-block g-color-gray-dark-v4 g-font-weight-700 text-right mb-3">04</span>
                      <span class="u-icon-v3 u-shadow-v19 g-bg-white g-color-primary rounded-circle mb-4">
                        <i class="icon-finance-256 u-line-icon-pro"></i>
                      </span>
                      <h3 class="h5 g-color-black g-font-weight-600 mb-3">Code</h3>
                      <p>This is where we sit down, grab a cup of coffee and dial in the details.</p>
                    </div>
                    <a class="g-brd-bottom g-brd-gray-dark-v5 g-brd-primary--hover g-color-gray-dark-v5 g-color-primary--hover g-font-weight-600 g-font-size-12 text-uppercase g-text-underline--none--hover" href="#">Read more</a>
                  </div>
                  <!-- End Icon Blocks -->
                </div>
              </div>
            </div>
          </div>
          <!-- End Icon Blocks -->
        </div>
      </section>
      <!-- End Icon Blocks -->

      <!-- Mockup Block -->
      <section class="container g-py-100">
        <div class="text-center g-mb-70">
          <h2 class="h1 g-color-black g-font-weight-600">Multifanctional Magic</h2>
          <p class="lead">This is where we begin to visualize your napkin sketches and make them into pixels.</p>
        </div>

        <div class="row">
          <div class="col-md-3 g-mb-30">
            <span class="u-icon-v3 g-color-primary g-bg-primary-opacity-0_1 rounded-circle g-mb-25">
              <i class="icon-education-089 u-line-icon-pro"></i>
            </span>
            <div class="d-inline-block g-width-70 g-height-2 g-bg-primary g-pos-rel g-top-5 g-right-minus-25 g-mr-minus-20"></div>
            <h2 class="h5 g-color-black g-font-weight-600 mb-3">Design is Functional</h2>
            <p>Now that we've aligned the details, it's time to get things mapped out and organized.</p>
          </div>

          <div class="col-md-6 g-mb-30">
            <img class="img-fluid" src="{{ root }}assets/img-temp/900x650/img1.png" alt="Image Description">
          </div>

          <div class="col-md-3 mt-auto g-mb-30">
            <div class="d-inline-block g-width-70 g-height-2 g-bg-brown g-pos-rel g-top-5 g-left-minus-25 g-mr-minus-20"></div>
            <span class="u-icon-v3 g-color-brown g-bg-brown-opacity-0_1 rounded-circle g-mb-25">
              <i class="icon-education-088 u-line-icon-pro"></i>
            </span>
            <h2 class="h5 g-color-black g-font-weight-600 mb-3">More than 200+ features</h2>
            <p>We aim high at being focused on building relationships with our clients and community.</p>
          </div>
        </div>
      </section>
      <!-- End Mockup Block -->

      <!-- Video Block -->
      <section class="container-fluid g-pa-20">
        <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll loaded dzsprx-readyall g-bg-cover g-bg-black-opacity-0_6--after" data-options='{direction: "fromtop", animation_duration: 25, direction: "reverse"}'>
          <!-- Promo Block - Parallax Video -->
          <div class="dzsparallaxer--target" style="width: 100%; height: 200%;" data-forcewidth_ratio="1.77">
            <div class="js-bg-video g-pos-abs w-100 h-100" data-hs-bgv-type="vimeo" data-hs-bgv-id="167434033" data-hs-bgv-loop="1"></div>
          </div>
          <!-- End Promo Block - Parallax Video -->

          <div class="row text-center g-min-height-450 g-flex-centered g-pos-rel g-z-index-1">
            <div class="col-sm-8 col-md-7 col-lg-4 px-5 px-sm-0">
              <span class="d-block g-color-white-opacity-0_8 g-font-weight-600 text-uppercase mb-2">Intro</span>
              <h2 class="h1 g-color-white g-font-weight-600 mb-0">This Week's Featured Video</h2>
            </div>
          </div>
        </div>
      </section>
      <!-- End Video Block -->

      <!-- Projects -->
      <section class="container g-py-100">
        <div class="text-center g-mb-50">
          <h2 class="h1 g-color-black g-font-weight-600">Branding Projects</h2>
          <p class="lead">This is where we begin to visualize your napkin sketches and make them into pixels.</p>
        </div>

        <div class="row no-gutters g-mx-minus-10">
          <div class="col-sm-6 col-lg-4 g-px-10 g-mb-20">
            <!-- Projects -->
            <div class="u-block-hover g-brd-around g-brd-gray-light-v4 g-color-black g-color-white--hover g-bg-purple--hover text-center rounded g-transition-0_3 g-px-30 g-py-50">
              <img class="img-fluid u-block-hover__main--zoom-v1 mb-5" src="{{ root }}assets/img-temp/425x250/img1.png" alt="Image Description">
              <span class="g-font-weight-600 g-font-size-12 text-uppercase">Clocks</span>
              <h3 class="h4 g-font-weight-600 mb-0">Alarm Clock</h3>

              <a class="u-link-v2" href="#"></a>
            </div>
            <!-- End Projects -->
          </div>

          <div class="col-sm-6 col-lg-4 g-px-10 g-mb-20">
            <!-- Projects -->
            <div class="u-block-hover g-brd-around g-brd-gray-light-v4 g-color-black g-color-white--hover g-bg-cyan--hover text-center rounded g-transition-0_3 g-px-30 g-py-50">
              <img class="img-fluid u-block-hover__main--zoom-v1 mb-5" src="{{ root }}assets/img-temp/425x250/img2.png" alt="Image Description">
              <span class="g-font-weight-600 g-font-size-12 text-uppercase">Others</span>
              <h3 class="h4 g-font-weight-600 mb-0">Brochure</h3>

              <a class="u-link-v2" href="#"></a>
            </div>
            <!-- End Projects -->
          </div>

          <div class="col-sm-6 col-lg-4 g-px-10 g-mb-20">
            <!-- Projects -->
            <div class="u-block-hover g-brd-around g-brd-gray-light-v4 g-color-black g-color-white--hover g-bg-teal--hover text-center rounded g-transition-0_3 g-px-30 g-py-50">
              <img class="img-fluid u-block-hover__main--zoom-v1 mb-5" src="{{ root }}assets/img-temp/425x250/img7.png" alt="Image Description">
              <span class="g-font-weight-600 g-font-size-12 text-uppercase">Hi-Tech</span>
              <h3 class="h4 g-font-weight-600 mb-0">Desk Clock</h3>

              <a class="u-link-v2" href="#"></a>
            </div>
            <!-- End Projects -->
          </div>

          <div class="col-sm-6 col-lg-4 g-px-10 g-mb-20">
            <!-- Projects -->
            <div class="u-block-hover g-brd-around g-brd-gray-light-v4 g-color-black g-color-white--hover g-bg-primary--hover text-center rounded g-transition-0_3 g-px-30 g-py-50">
              <img class="img-fluid u-block-hover__main--zoom-v1 mb-5" src="{{ root }}assets/img-temp/425x250/img10.png" alt="Image Description">
              <span class="g-font-weight-600 g-font-size-12 text-uppercase">Cosmetics</span>
              <h3 class="h4 g-font-weight-600 mb-0">Cream</h3>

              <a class="u-link-v2" href="#"></a>
            </div>
            <!-- End Projects -->
          </div>

          <div class="col-sm-6 col-lg-4 g-px-10 g-mb-20">
            <!-- Projects -->
            <div class="u-block-hover g-brd-around g-brd-gray-light-v4 g-color-black g-color-white--hover g-bg-brown--hover text-center rounded g-transition-0_3 g-px-30 g-py-50">
              <img class="img-fluid u-block-hover__main--zoom-v1 mb-5" src="{{ root }}assets/img-temp/425x250/img5.png" alt="Image Description">
              <span class="g-font-weight-600 g-font-size-12 text-uppercase">Hi-Tech</span>
              <h3 class="h4 g-font-weight-600 mb-0">Tivoli Radio</h3>

              <a class="u-link-v2" href="#"></a>
            </div>
            <!-- End Projects -->
          </div>

          <div class="col-sm-6 col-lg-4 g-px-10 g-mb-20">
            <!-- Projects -->
            <div class="u-block-hover g-brd-around g-brd-gray-light-v4 g-color-black g-color-white--hover g-bg-pink--hover text-center rounded g-transition-0_3 g-px-30 g-py-50">
              <img class="img-fluid u-block-hover__main--zoom-v1 mb-5" src="{{ root }}assets/img-temp/425x250/img6.png" alt="Image Description">
              <span class="g-font-weight-600 g-font-size-12 text-uppercase">Cosmetics</span>
              <h3 class="h4 g-font-weight-600 mb-0">Spa Cosmetics</h3>

              <a class="u-link-v2" href="#"></a>
            </div>
            <!-- End Projects -->
          </div>
        </div>
      </section>
      <!-- End Projects -->

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

      <!-- News -->
      <section class="container g-pt-100 g-pb-90">
        <div class="text-center g-mb-50">
          <h2 class="h1 g-color-black g-font-weight-600">Latest News</h2>
          <p class="lead">This is where we begin to visualize your napkin sketches and make them into pixels.</p>
        </div>

        <div class="row g-mx-minus-10">
          <div class="col-sm-6 col-lg-4 g-px-10 g-mb-10">
            <!-- Blog Background Overlay Blocks -->
            <article class="u-block-hover">
              <div class="g-bg-cover g-bg-bluegray-gradient-opacity-v1--after">
                <img class="d-flex align-items-end u-block-hover__main--mover-down" src="{{ root }}assets/img-temp/500x600/img1.jpg" alt="Image Description">
              </div>
              <div class="u-block-hover__additional--partially-slide-up text-center g-z-index-1 mt-auto">
                <div class="u-block-hover__visible g-pa-25">
                  <span class="d-block g-color-white-opacity-0_7 g-font-weight-600 g-font-size-12 mb-2">art</span>
                  <h2 class="h4 g-color-white g-font-weight-600 mb-3">
                    <a class="u-link-v5 g-brd-bottom g-brd-2 g-brd-white--hover g-color-white g-cursor-pointer g-pb-2" href="#">The Next Art Exhibition</a>
                  </h2>
                  <h4 class="d-inline-block g-color-white-opacity-0_7 g-font-size-11 mb-0">
                    By,
                    <a class="g-color-white-opacity-0_7 text-uppercase" href="#">Dan Shaw</a>
                  </h4>
                  <span class="g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">&#183;</span>
                  <span class="g-color-white-opacity-0_7 g-font-size-10 text-uppercase">May 31, 2017</span>
                </div>

                <a class="d-inline-block g-brd-bottom g-brd-white g-color-white g-font-weight-600 g-font-size-12 text-uppercase g-text-underline--none--hover g-mb-30" href="#">Read more</a>
              </div>
            </article>
            <!-- End Blog Background Overlay Blocks -->
          </div>

          <div class="col-sm-6 col-lg-4 g-px-10 g-mb-10">
            <!-- Blog Background Overlay Blocks -->
            <article class="u-block-hover">
              <div class="g-bg-cover g-bg-bluegray-gradient-opacity-v1--after">
                <img class="d-flex align-items-end u-block-hover__main--mover-down" src="{{ root }}assets/img-temp/500x600/img3.jpg" alt="Image Description">
              </div>
              <div class="u-block-hover__additional--partially-slide-up text-center g-z-index-1 mt-auto">
                <div class="u-block-hover__visible g-pa-25">
                  <span class="d-block g-color-white-opacity-0_7 g-font-weight-600 g-font-size-12 mb-2">travel</span>
                  <h2 class="h4 g-color-white g-font-weight-600 mb-3">
                    <a class="u-link-v5 g-brd-bottom g-brd-2 g-brd-white--hover g-color-white g-cursor-pointer g-pb-2" href="#">Time to Travel</a>
                  </h2>
                  <h4 class="d-inline-block g-color-white-opacity-0_7 g-font-size-11 mb-0">
                    By,
                    <a class="g-color-white-opacity-0_7 text-uppercase" href="#">Dan Shaw</a>
                  </h4>
                  <span class="g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">&#183;</span>
                  <span class="g-color-white-opacity-0_7 g-font-size-10 text-uppercase">May 31, 2017</span>
                </div>

                <a class="d-inline-block g-brd-bottom g-brd-white g-color-white g-font-weight-600 g-font-size-12 text-uppercase g-text-underline--none--hover g-mb-30" href="#">Read more</a>
              </div>
            </article>
            <!-- End Blog Background Overlay Blocks -->
          </div>

          <div class="col-sm-6 col-lg-4 g-px-10 g-mb-10">
            <!-- Blog Background Overlay Blocks -->
            <article class="u-block-hover">
              <div class="g-bg-cover g-bg-bluegray-gradient-opacity-v1--after">
                <img class="d-flex align-items-end u-block-hover__main--mover-down" src="{{ root }}assets/img-temp/500x600/img2.jpg" alt="Image Description">
              </div>
              <div class="u-block-hover__additional--partially-slide-up text-center g-z-index-1 mt-auto">
                <div class="u-block-hover__visible g-pa-25">
                  <span class="d-block g-color-white-opacity-0_7 g-font-weight-600 g-font-size-12 mb-2">photography</span>
                  <h2 class="h4 g-color-white g-font-weight-600 mb-3">
                    <a class="u-link-v5 g-brd-bottom g-brd-2 g-brd-white--hover g-color-white g-cursor-pointer g-pb-2" href="#">A Chair for Million</a>
                  </h2>
                  <h4 class="d-inline-block g-color-white-opacity-0_7 g-font-size-11 mb-0">
                    By,
                    <a class="g-color-white-opacity-0_7 text-uppercase" href="#">Dan Shaw</a>
                  </h4>
                  <span class="g-color-white-opacity-0_7 g-pos-rel g-top-2 mx-2">&#183;</span>
                  <span class="g-color-white-opacity-0_7 g-font-size-10 text-uppercase">May 31, 2017</span>
                </div>

                <a class="d-inline-block g-brd-bottom g-brd-white g-color-white g-font-weight-600 g-font-size-12 text-uppercase g-text-underline--none--hover g-mb-30" href="#">Read more</a>
              </div>
            </article>
            <!-- End Blog Background Overlay Blocks -->
          </div>
        </div>
      </section>
      <!-- End News -->

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

      <!-- Footer -->
      <footer class="container g-pt-100 g-pb-60">
        <div class="row justify-content-end">
          <div class="col-lg-3 g-mb-30">
            <a class="d-inline-block mb-4" href="#">
              <img class="g-width-100 g-height-auto" src="{{ root }}assets/img/logo/logo-1.png" alt="Image Description">
            </a>

            <p class="g-color-gray-dark-v4 g-font-size-13 mb-0">2017 © All Rights Reserved.</p>
          </div>

          <div class="col-sm-4 col-lg-2 ml-auto g-mb-30">
            <!-- Links -->
            <ul class="list-unstyled g-color-gray-dark-v4 g-font-size-13 mb-0">
              <li class="my-2"><i class="mr-2 fa fa-angle-right"></i>
                <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">About</a></li>
              <li class="my-2"><i class="mr-2 fa fa-angle-right"></i>
                <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">Services</a></li>
              <li class="my-2"><i class="mr-2 fa fa-angle-right"></i>
                <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">Contacts</a></li>
            </ul>
            <!-- End Links -->
          </div>

          <div class="col-sm-4 col-lg-2 g-mb-30">
            <!-- Links -->
            <ul class="list-unstyled g-color-gray-dark-v4 g-font-size-13 mb-0">
              <li class="my-2"><i class="mr-2 fa fa-angle-right"></i>
                <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">Support &amp; FAQ</a></li>
              <li class="my-2"><i class="mr-2 fa fa-angle-right"></i>
                <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">Jobs</a></li>
              <li class="my-2"><i class="mr-2 fa fa-angle-right"></i>
                <a class="u-link-v5 g-color-gray-dark-v4 g-color-primary--hover" href="#">Privacy &amp; Policy</a></li>
            </ul>
            <!-- End Links -->
          </div>

          <div class="col-sm-4 col-lg-2 g-mb-30">
            <h3 class="h6 g-color-black g-font-weight-600 text-uppercase mb-4">Follow Us</h3>

            <!-- Social Icons -->
            <ul class="list-inline mb-0">
              <li class="list-inline-item g-mx-2">
                <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-red g-bg-red-opacity-0_1 g-color-red--hover rounded-circle" href="#">
                  <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-facebook"></i>
                  <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-facebook"></i>
                </a>
              </li>
              <li class="list-inline-item g-mx-2">
                <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-teal g-bg-teal-opacity-0_1 g-color-teal--hover rounded-circle" href="#">
                  <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-twitter"></i>
                  <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-twitter"></i>
                </a>
              </li>
              <li class="list-inline-item g-mx-2">
                <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-cyan g-bg-cyan-opacity-0_1 g-color-cyan--hover rounded-circle" href="#">
                  <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-google-plus"></i>
                  <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-google-plus"></i>
                </a>
              </li>
              <li class="list-inline-item g-mx-2">
                <a class="u-icon-v1 u-icon-size--sm u-icon-slide-up--hover g-color-purple g-bg-purple-opacity-0_1 g-color-purple--hover rounded-circle" href="#">
                  <i class="g-font-size-default g-line-height-1 u-icon__elem-regular fa fa-linkedin"></i>
                  <i class="g-font-size-default g-line-height-0_8 u-icon__elem-hover fa fa-linkedin"></i>
                </a>
              </li>
            </ul>
            <!-- End Social Icons -->
          </div>
        </div>
      </footer>
      <!-- End 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/appear.js"></script>
    <script src="{{ root }}assets/vendor/slick-carousel/slick/slick.js"></script>
    <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
    {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}
    <script src="{{ root }}assets/vendor/hs-bg-video/hs-bg-video.js"></script>
    <script src="{{ root }}assets/vendor/hs-bg-video/vendor/player.min.js"></script>
    <script src="{{ root }}assets/vendor/fancybox/jquery.fancybox.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/helpers/hs.height-calc.js"></script>
    <script src="{{ root }}assets/js/components/hs.onscroll-animation.js"></script>
    <script src="{{ root }}assets/js/helpers/hs.bg-video.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/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');

        $('#we-provide').slick('setOption', 'responsive', [{
          breakpoint: 992,
          settings: {
            slidesToShow: 2
          }
        }, {
          breakpoint: 576,
          settings: {
            slidesToShow: 1
          }
        }], true);

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

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

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

        // initialization of video on background
        $.HSCore.helpers.HSBgVideo.init('.js-bg-video');

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

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

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

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

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

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