{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "pages" %}
{% set mainNavActive_2 = "pages-about" %}
{% set mainNavActive_3 = "page-about-3" %}
{% set title = "About 3 | " %}

{% 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 -->
      <section class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll loaded dzsprx-readyall " data-options='{direction: "fromtop", animation_duration: 25, direction: "reverse"}'>
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100 u-bg-overlay g-bg-black-opacity-0_3--after" style="height: 140%; background-image: url({{ root }}assets/img-temp/1920x800/img3.jpg);"></div>
        <!-- End Parallax Image -->

        <!-- Promo Block Content -->
        <div class="container g-color-white text-center g-py-120">
          <h3 class="h1 g-font-weight-600 text-uppercase mb-2">About us</h3>
          <p class="g-font-weight-300 g-font-size-22 text-uppercase">Unify is a clean and fully responsive theme</p>
        </div>
        <!-- Promo Block Content -->
      </section>
      <!-- End Promo Block -->

      <!-- Heading -->
      <section class="container u-ns-bg-v1-bottom g-bg-white g-py-100">
        <div class="text-center">
          <h2 class="h5 g-line-height-1_8">Unify is a
            <span class="g-brd-bottom g-brd-primary g-color-primary g-font-weight-600 pb-1">creative</span> technology company providing key digital services.<br>Focused on helping our clients to build a
            <span class="g-brd-bottom g-brd-primary g-color-primary g-font-weight-600 pb-1">successful</span> business on web and mobile.
          </h2>
        </div>
      </section>
      <!-- End Heading -->

      <!-- Icon Blocks -->
      <section class="g-bg-gray-light-v5 g-pt-100 g-pb-70">
        <div class="container">
          <div class="row">
            <div class="col-lg-4 g-mb-30">
              <!-- Icon Blocks -->
              <div class="text-center">
              <span class="d-block g-color-primary g-font-size-35 g-mb-5">
                <i class="icon-education-087 u-line-icon-pro"></i>
              </span>
                <h3 class="h5 g-color-black text-uppercase mb-3">Creative ideas</h3>
                <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
              </div>
              <!-- End Icon Blocks -->
            </div>

            <div class="col-lg-4 g-mb-30">
              <!-- Icon Blocks -->
              <div class="text-center">
              <span class="d-block g-color-primary g-font-size-35 g-mb-5">
                <i class="icon-education-035 u-line-icon-pro"></i>
              </span>
                <h3 class="h5 g-color-black text-uppercase mb-3">Excellent features</h3>
                <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
              </div>
              <!-- End Icon Blocks -->
            </div>

            <div class="col-lg-4 g-mb-30">
              <!-- Icon Blocks -->
              <div class="text-center">
              <span class="d-block g-color-primary g-font-size-35 g-mb-5">
                <i class="icon-education-141 u-line-icon-pro"></i>
              </span>
                <h3 class="h5 g-color-black text-uppercase mb-3">Fully responsive</h3>
                <p class="g-color-gray-dark-v4">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
              </div>
              <!-- End Icon Blocks -->
            </div>
          </div>
        </div>
      </section>
      <!-- End Icon Blocks -->

      <section class="container g-pt-100 g-pb-70">
        <div class="row justify-content-center g-mb-60">
          <div class="col-lg-7">
            <!-- Heading -->
            <div class="text-center">
              <h2 class="h3 g-color-black text-uppercase mb-2">What we are good at?</h2>
              <div class="d-inline-block g-width-35 g-height-2 g-bg-primary mb-2"></div>
              <p class="lead mb-0">We are a creative studio focusing on culture, luxury, editorial &amp; art. Somewhere between sophistication and simplicity.</p>
            </div>
            <!-- End Heading -->
          </div>
        </div>

        <div class="row g-mb-30">
          <div class="col-lg-6 g-mb-30">
            <div class="mb-5">
              <p>As creatives, it's important that we strive to do work outside of obligation. This lets us stay ahead of the curve for our clients and internal projects.</p>
              <p>At the end of the day, it's important to not let being busy distract us from having fun. Smiling, laughing, and hanging helps us work together to achieve this. It’s important to stay detail oriented with every project we tackle.</p>
            </div>
            <a class="btn btn-md u-btn-outline-black g-font-size-default rounded-0 g-py-10 mr-2" href="#">Explore More</a>
            <a class="btn btn-md u-btn-primary g-font-size-default rounded-0 g-py-10" href="#">Purchase Now</a>
          </div>
          <div class="col-lg-6">
            <div class="row">
              <!-- Vertical Progress Bar -->
              <div class="col-sm-3 text-center g-mb-20 g-mb-2--sm">
                <div class="js-vr-progress-bar u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                  <div class="js-vr-progress-bar-indicator g-bg-primary" style="height: 60%;"></div>
                </div>
                <div class="g-color-black g-font-size-13 mb-1">60%</div>
                <h4 class="g-color-black g-font-size-18 text-uppercase">Design</h4>
              </div>
              <!-- End Vertical Progress Bar -->

              <!-- Vertical Progress Bar -->
              <div class="col-sm-3 text-center g-mb-20 g-mb-2--sm">
                <div class="js-vr-progress-bar u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                  <div class="js-vr-progress-bar-indicator g-bg-primary" style="height: 76%;"></div>
                </div>
                <div class="g-color-black g-font-size-13 mb-1">76%</div>
                <h4 class="g-color-black g-font-size-18 text-uppercase">PHP</h4>
              </div>
              <!-- End Vertical Progress Bar -->

              <!-- Vertical Progress Bar -->
              <div class="col-sm-3 text-center g-mb-20 g-mb-2--sm">
                <div class="js-vr-progress-bar u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                  <div class="js-vr-progress-bar-indicator g-bg-primary" style="height: 92%;"></div>
                </div>
                <div class="g-color-black g-font-size-13 mb-1">92%</div>
                <h4 class="g-color-black g-font-size-18 text-uppercase">HTML</h4>
              </div>
              <!-- End Vertical Progress Bar -->

              <!-- Vertical Progress Bar -->
              <div class="col-sm-3 text-center g-mb-20 g-mb-2--sm">
                <div class="js-vr-progress-bar u-progress-bar-vertical-v1 g-bg-gray-light-v4 g-mb-20">
                  <div class="js-vr-progress-bar-indicator g-bg-primary" style="height: 81%;"></div>
                </div>
                <div class="g-color-black g-font-size-13 mb-1">81%</div>
                <h4 class="g-color-black g-font-size-18 text-uppercase">CSS</h4>
              </div>
              <!-- End Vertical Progress Bar -->
            </div>
          </div>
        </div>
      </section>

      <!-- Counters -->
      <section class="dzsparallaxer auto-init height-is-based-on-content">
        <!-- Parallax Image -->
        <div class="dzsparallaxer--target w-100 g-bg-size-cover u-bg-overlay g-bg-black-opacity-0_3--after" style="height: 140%; background: url({{ root }}assets/img-temp/1920x800/img2.jpg)"></div>
        <!-- End Parallax Image -->

        <div class="container g-pos-rel g-z-index-1 g-pt-120 g-pb-70">
          <div class="row text-center text-uppercase g-color-white">
            <!-- Counters -->
            <div class="col-md-3 col-6 g-mb-50">
              <i class="et-icon-beaker display-5 mb-3"></i>
              <div class="js-counter g-font-size-32 mb-2">265</div>
              <h4 class="h5 g-font-weight-300 mb-0">Innovations</h4>
            </div>
            <!-- End Counters -->

            <!-- Counters -->
            <div class="col-md-3 col-6 g-mb-50">
              <i class="et-icon-clock display-5 mb-3"></i>
              <div class="js-counter g-font-size-32 mb-2">5957</div>
              <h4 class="h5 g-font-weight-300 mb-0">Working Hours</h4>
            </div>
            <!-- End Counters -->

            <!-- Counters -->
            <div class="col-md-3 col-6 g-mb-50">
              <i class="et-icon-chat display-5 mb-3"></i>
              <div class="js-counter g-font-size-32 mb-2">3495</div>
              <h4 class="h5 g-font-weight-300 mb-0">Happy Clients</h4>
            </div>
            <!-- End Counters -->

            <!-- Counters -->
            <div class="col-md-3 col-6 g-mb-50">
              <i class="et-icon-lightbulb display-5 mb-3"></i>
              <div class="js-counter g-font-size-32 mb-2">576</div>
              <h4 class="h5 g-font-weight-300 mb-0">New Ideas</h4>
            </div>
            <!-- End Counters -->
          </div>
        </div>
      </section>
      <!-- Counters -->

      <!-- Team Blocks -->
      <section class="container g-pt-100 g-pb-70">
        <div class="row justify-content-center g-mb-60">
          <div class="col-lg-7">
            <!-- Heading -->
            <div class="text-center">
              <h2 class="h3 g-color-black text-uppercase mb-2">Meet your creative team</h2>
              <div class="d-inline-block g-width-35 g-height-2 g-bg-primary mb-2"></div>
              <p class="lead mb-0">We are a creative studio focusing on culture, luxury, editorial &amp; art. Somewhere between sophistication and simplicity.</p>
            </div>
            <!-- End Heading -->
          </div>
        </div>

        <div class="row">
          <div class="col-lg-3 col-sm-6 g-mb-30">
            <!-- Team Block -->
            <figure class="u-block-hover">
              <!-- Figure Image -->
              <img class="w-100" src="{{ root }}assets/img-temp/400x550/img1.jpg" alt="Image description">
              <!-- End Figure Image-->

              <!-- Figure Info -->
              <figcaption class="u-block-hover__additional--partially-slide-up g-mx-15">
                <div class="text-center g-bg-white g-pb-20">
                  <!-- Figure Info -->
                  <div class="u-block-hover__visible g-pt-20 g-pb-15 g-y-20">
                    <h4 class="h5 g-color-black g-mb-5">Katalina Watson</h4>
                    <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Technical Director</em>
                  </div>
                  <!-- End Info -->

                  <!-- Figure Social Icons -->
                  <ul class="list-inline mb-0">
                    <li class="list-inline-item">
                      <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-twitter--hover g-bg-transparent">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-dribbble--hover g-bg-transparent">
                        <i class="fa fa-dribbble"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-facebook--hover g-bg-transparent">
                        <i class="fa fa-facebook"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- Figure Social Icons -->
                </div>
              </figcaption>
              <!-- End Figure Info-->
            </figure>
            <!-- End Team Block -->
          </div>

          <div class="col-lg-3 col-sm-6 g-mb-30">
            <!-- Team Block -->
            <figure class="u-block-hover">
              <!-- Figure Image -->
              <img class="w-100" src="{{ root }}assets/img-temp/400x550/img2.jpg" alt="Image description">
              <!-- End Figure Image-->

              <!-- Figure Info -->
              <figcaption class="u-block-hover__additional--partially-slide-up g-mx-15">
                <div class="text-center g-bg-white g-pb-20">
                  <!-- Figure Info -->
                  <div class="u-block-hover__visible g-pt-20 g-pb-15 g-y-20">
                    <h4 class="h5 g-color-black g-mb-5">Tina Krueger</h4>
                    <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Lead Designer</em>
                  </div>
                  <!-- End Info -->

                  <!-- Figure Social Icons -->
                  <ul class="list-inline mb-0">
                    <li class="list-inline-item">
                      <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-twitter--hover g-bg-transparent">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-dribbble--hover g-bg-transparent">
                        <i class="fa fa-dribbble"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-facebook--hover g-bg-transparent">
                        <i class="fa fa-facebook"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- Figure Social Icons -->
                </div>
              </figcaption>
              <!-- End Figure Info-->
            </figure>
            <!-- End Team Block -->
          </div>

          <div class="col-lg-3 col-sm-6 g-mb-30">
            <!-- Team Block -->
            <figure class="u-block-hover">
              <!-- Figure Image -->
              <img class="w-100" src="{{ root }}assets/img-temp/400x550/img3.jpg" alt="Image description">
              <!-- End Figure Image-->

              <!-- Figure Info -->
              <figcaption class="u-block-hover__additional--partially-slide-up g-mx-15">
                <div class="text-center g-bg-white g-pb-20">
                  <!-- Figure Info -->
                  <div class="u-block-hover__visible g-pt-20 g-pb-15 g-y-20">
                    <h4 class="h5 g-color-black g-mb-5">Sara Lisbon</h4>
                    <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Web Developer</em>
                  </div>
                  <!-- End Info -->

                  <!-- Figure Social Icons -->
                  <ul class="list-inline mb-0">
                    <li class="list-inline-item">
                      <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-twitter--hover g-bg-transparent">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-dribbble--hover g-bg-transparent">
                        <i class="fa fa-dribbble"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-facebook--hover g-bg-transparent">
                        <i class="fa fa-facebook"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- Figure Social Icons -->
                </div>
              </figcaption>
              <!-- End Figure Info-->
            </figure>
            <!-- End Team Block -->
          </div>

          <div class="col-lg-3 col-sm-6 g-mb-30">
            <!-- Team Block -->
            <figure class="u-block-hover">
              <!-- Figure Image -->
              <img class="w-100" src="{{ root }}assets/img-temp/400x550/img4.jpg" alt="Image description">
              <!-- End Figure Image-->

              <!-- Figure Info -->
              <figcaption class="u-block-hover__additional--partially-slide-up g-mx-15">
                <div class="text-center g-bg-white g-pb-20">
                  <!-- Figure Info -->
                  <div class="u-block-hover__visible g-pt-20 g-pb-15 g-y-20">
                    <h4 class="h5 g-color-black g-mb-5">David Olsson</h4>
                    <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary">Support Manager</em>
                  </div>
                  <!-- End Info -->

                  <!-- Figure Social Icons -->
                  <ul class="list-inline mb-0">
                    <li class="list-inline-item">
                      <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-twitter--hover g-bg-transparent">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-dribbble--hover g-bg-transparent">
                        <i class="fa fa-dribbble"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a href="#" class="u-icon-v1 u-icon-size--sm g-color-gray-light-v1 g-color-facebook--hover g-bg-transparent">
                        <i class="fa fa-facebook"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- Figure Social Icons -->
                </div>
              </figcaption>
              <!-- End Figure Info-->
            </figure>
            <!-- End Team Block -->
          </div>
        </div>
        </div>
      </section>
      <!-- End Team Blocks -->

      <!-- Testimonials -->
      <section class="g-bg-gray-light-v5 g-py-100">
        <div class="container">
          <div class="row justify-content-center g-mb-60">
            <div class="col-lg-7">
              <!-- Heading -->
              <div class="text-center">
                <h2 class="h3 g-color-black text-uppercase mb-2">What people say about Unify?</h2>
                <div class="d-inline-block g-width-35 g-height-2 g-bg-primary mb-2"></div>
                <p class="lead mb-0">We are a creative studio focusing on culture, luxury, editorial &amp; art. Somewhere between sophistication and simplicity.</p>
              </div>
              <!-- End Heading -->
            </div>
          </div>

          <div class="row">
            <div class="col-lg-6 g-mb-30">
              <!-- Testimonials -->
              <div class="media g-brd-bottom g-brd-3 g-brd-gray-light-v4 g-brd-primary--hover g-bg-white g-rounded-4 g-transition-0_3 g-pa-20">
                <div class="d-flex mr-4">
                  <img class="g-width-70 g-height-70 rounded-circle" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image description">
                </div>
                <div class="media-body">
                  <blockquote class="lead g-mb-15">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great.</blockquote>
                  <h4 class="h6 g-font-weight-700 g-mb-0">Emma Smith</h4>
                  <em class="g-color-gray-dark-v4 g-font-style-normal g-font-size-13">Customer</em>
                </div>
              </div>
              <!-- End Testimonials -->
            </div>

            <div class="col-lg-6 g-mb-30">
              <!-- Testimonials -->
              <div class="media g-brd-bottom g-brd-3 g-brd-gray-light-v4 g-brd-primary--hover g-bg-white g-rounded-4 g-transition-0_3 g-pa-20">
                <div class="d-flex mr-4">
                  <img class="g-width-70 g-height-70 rounded-circle" src="{{ root }}assets/img-temp/100x100/img15.jpg" alt="Image description">
                </div>
                <div class="media-body">
                  <blockquote class="lead g-mb-15">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>
                  <h4 class="h6 g-font-weight-700 g-mb-0">Anna Pretty</h4>
                  <em class="g-color-gray-dark-v4 g-font-style-normal g-font-size-13">Customer</em>
                </div>
              </div>
              <!-- End Testimonials -->
            </div>

            <div class="col-lg-6 g-mb-30">
              <!-- Testimonials -->
              <div class="media g-brd-bottom g-brd-3 g-brd-gray-light-v4 g-brd-primary--hover g-bg-white g-rounded-4 g-transition-0_3 g-pa-20">
                <div class="d-flex mr-4">
                  <img class="g-width-70 g-height-70 rounded-circle" src="{{ root }}assets/img-temp/100x100/img16.jpg" alt="Image description">
                </div>
                <div class="media-body">
                  <blockquote class="lead g-mb-15">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great.</blockquote>
                  <h4 class="h6 g-font-weight-700 g-mb-0">Danilla Ut.</h4>
                  <em class="g-color-gray-dark-v4 g-font-style-normal g-font-size-13">Customer</em>
                </div>
              </div>
              <!-- End Testimonials -->
            </div>

            <div class="col-lg-6 g-mb-30">
              <!-- Testimonials -->
              <div class="media g-brd-bottom g-brd-3 g-brd-gray-light-v4 g-brd-primary--hover g-bg-white g-rounded-4 g-transition-0_3 g-pa-20">
                <div class="d-flex mr-4">
                  <img class="g-width-70 g-height-70 rounded-circle" src="{{ root }}assets/img-temp/100x100/img17.jpg" alt="Image description">
                </div>
                <div class="media-body">
                  <blockquote class="lead g-mb-15">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>
                  <h4 class="h6 g-font-weight-700 g-mb-0">Alex Pottorf</h4>
                  <em class="g-color-gray-dark-v4 g-font-style-normal g-font-size-13">Customer</em>
                </div>
              </div>
              <!-- End Testimonials -->
            </div>
          </div>
        </div>
      </section>
      <!-- End 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 -->

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

    {% include "html/assets/include/nunjucks/partials/blocks/helpers/outer-spaces-helper.njk" %}

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

    <!-- JS Implementing Plugins -->
    <script src="{{ root }}assets/vendor/appear.js"></script>
    <script src="{{ root }}assets/vendor/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" %}

    <!-- JS Unify -->
    <script src="{{ root }}assets/js/hs.core.js"></script>
    <script src="{{ root }}assets/js/components/hs.carousel.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.counter.js"></script>
    <script src="{{ root }}assets/js/components/hs.progress-bar.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 counter
        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 vertical progress bar
        setTimeout(function () { // important in this case
          var verticalProgressBars = $.HSCore.components.HSProgressBar.init('.js-vr-progress-bar', {
            direction: 'vertical',
            indicatorSelector: '.js-vr-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>
