{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "pages" %}
{% set mainNavActive_2 = "pages-about" %}
{% set mainNavActive_3 = "page-about-4" %}
{% set title = "About 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-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 g-bg-cover g-bg-pos-center g-bg-black-opacity-0_2--after" style="height: 140%; background-image: url({{ root }}assets/img-temp/1920x800/img5.jpg);"></div>
        <!-- End Parallax Image -->

        <!-- Promo Block Content -->
        <div class="container g-color-white text-center g-py-150">
          <span class="d-block g-font-weight-300 g-font-size-25 mb-3">Discover more about us</span>
          <h3 class="h1 text-uppercase mb-0">Unify is a clean and fully responsive theme</h3>
        </div>
        <!-- Promo Block Content -->
      </section>
      <!-- End Promo Block -->

      <section class="container g-pt-100 g-pb-50">
        <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">We are Unify</h2>
              <div class="d-inline-block g-width-35 g-height-2 g-bg-primary mb-2"></div>
              <p class="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-50">
            <img class="img-fluid" src="{{ root }}assets/img-temp/600x330/img1.png" alt="Image Description">
          </div>
          <div class="col-lg-6">
            <div class="mb-5">
              <p class="g-mb-30">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>
              <div class="row">
                <div class="col-sm-6">
                  <ul class="list-unstyled g-font-size-13 mb-0">
                    <li class="d-flex mb-3">
                      <i class="g-color-primary g-mt-5 g-mr-10 icon-check"></i>
                      Jacks of all. Experts in all.
                    </li>
                    <li class="d-flex mb-3">
                      <i class="g-color-primary g-mt-5 g-mr-10 icon-check"></i>
                      It's good to virtually meet you.
                    </li>
                    <li class="d-flex mb-3">
                      <i class="g-color-primary g-mt-5 g-mr-10 icon-check"></i>
                      A crew of creative doers.
                    </li>
                    <li class="d-flex mb-3">
                      <i class="g-color-primary g-mt-5 g-mr-10 icon-check"></i>
                      Let's create something great.
                    </li>
                  </ul>
                </div>

                <div class="col-sm-6">
                  <ul class="list-unstyled g-font-size-13 mb-0">
                    <li class="d-flex mb-3">
                      <i class="g-color-primary g-mt-5 g-mr-10 icon-check"></i>
                      We're accepting projects today.
                    </li>
                    <li class="d-flex mb-3">
                      <i class="g-color-primary g-mt-5 g-mr-10 icon-check"></i>
                      Finding your perfect plan.
                    </li>
                    <li class="d-flex mb-3">
                      <i class="g-color-primary g-mt-5 g-mr-10 icon-check"></i>
                      Examples of branding projects.
                    </li>
                    <li class="d-flex mb-3">
                      <i class="g-color-primary g-mt-5 g-mr-10 icon-check"></i>
                      Your brand has a story to tell.
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Icon Blocks -->
      <section class="g-bg-gray-light-v5">
        <div class="container">
          <div class="row">
            <div class="col-lg-4 g-py-100 g-px-40--sm">
              <!-- Icon Blocks -->
              <div class="text-center">
              <span class="u-icon-v2 g-color-white g-bg-primary rounded-circle mb-4">
                <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-brd-left--lg g-brd-gray-light-v4 g-py-100 g-px-40--sm">
              <!-- Icon Blocks -->
              <div class="text-center">
              <span class="u-icon-v2 g-color-white g-bg-primary rounded-circle mb-4">
                <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-brd-left--lg g-brd-gray-light-v4 g-py-100 g-px-40--sm">
              <!-- Icon Blocks -->
              <div class="text-center">
              <span class="u-icon-v2 g-color-white g-bg-primary rounded-circle mb-4">
                <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-py-100">
        <div class="row justify-content-center">
          <div class="col-lg-7">
            <!-- Heading -->
            <div class="text-center g-mb-60">
              <h2 class="h3 g-color-black text-uppercase mb-2">Video intro</h2>
              <div class="d-inline-block g-width-35 g-height-2 g-bg-primary mb-2"></div>
              <p class="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 justify-content-center">
          <div class="col-lg-9">
            <!-- Article -->
            <article class="u-shadow-v21 g-bg-size-cover g-bg-pos-bottom-center text-center" style="background-image: url({{ root }}assets/img-temp/900x600/img7.jpg);">
              <div class="g-pos-rel g-z-index-1 g-px-50 g-py-200">
                <a class="js-fancybox d-block" href="javascript:;"
                   data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=1"
                   data-speed="350"
                   data-caption="Single Image">
                  <span class="u-icon-v3 u-icon-size--lg u-block-hover--scale g-bg-white g-color-black g-color-primary--hover g-font-size-18 g-rounded-50x g-cursor-pointer">
                    <i class="g-pos-rel g-left-2 fa fa-play"></i>
                  </span>
                </a>
              </div>
            </article>
            <!-- End Article -->
          </div>
        </div>
      </section>

      <section class="g-bg-gray-light-v5">
        <div 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="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">
              <!-- End Progress Bar -->
              <div class="mb-4">
                <div class="d-flex justify-content-between">
                  <h6>Web Design</h6>
                  <span class="ml-auto">88%</span>
                </div>
                <div class="js-hr-progress-bar progress g-height-2 rounded-0">
                  <div class="js-hr-progress-bar-indicator progress-bar" role="progressbar" style="width: 88%;" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
              <!-- Progress Bar -->

              <!-- End Progress Bar -->
              <div class="mb-4">
                <div class="d-flex justify-content-between">
                  <h6>PHP/WordPress</h6>
                  <span class="ml-auto">76%</span>
                </div>
                <div class="js-hr-progress-bar progress g-height-2 rounded-0">
                  <div class="js-hr-progress-bar-indicator progress-bar" role="progressbar" style="width: 76%;" aria-valuenow="76" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
              <!-- Progress Bar -->

              <!-- End Progress Bar -->
              <div class="mb-4">
                <div class="d-flex justify-content-between">
                  <h6>HTML/CSS</h6>
                  <span class="ml-auto">97%</span>
                </div>
                <div class="js-hr-progress-bar progress g-height-2 rounded-0">
                  <div class="js-hr-progress-bar-indicator progress-bar" role="progressbar" style="width: 97%;" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
              <!-- Progress Bar -->

              <!-- End Progress Bar -->
              <div class="d-flex justify-content-between">
                <h6>Illustration</h6>
                <span class="ml-auto">69%</span>
              </div>
              <div class="js-hr-progress-bar progress g-height-2 rounded-0">
                <div class="js-hr-progress-bar-indicator progress-bar" role="progressbar" style="width: 69%;" aria-valuenow="69" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <!-- Progress Bar -->
            </div>
          </div>
        </div>
      </section>

      <!-- 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="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">
            <div class="text-center u-block-hover">
              <!-- Figure -->
              <figure class="u-block-hover g-mb-25">
                <!-- Figure Image -->
                <img class="w-100" src="{{ root }}assets/img-temp/400x550/img1.jpg" alt="Image Description">
                <!-- End Figure Image -->

                <!-- Figure Caption -->
                <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-flex-middle g-px-10">
                  <q class="u-quote-v1 g-flex-middle-item g-color-white g-font-weight-700 g-font-size-16 text-uppercase">changing your mind and changing world</q>

                  <!-- Figure Social Icons -->
                  <ul class="list-inline g-flex-middle-item--bottom g-mb-30 mt-0">
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-pinterest"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-facebook"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-linkedin"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- End Figure Social Icons -->
                </figcaption>
                <!-- End Figure Caption -->
              </figure>
              <!-- End Figure -->

              <!-- Figure Info -->
              <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Photographer</em>
              <h4 class="h5 g-color-black g-mb-5">Katalina Watson</h4>
              <p class="g-font-size-13">head photographer</p>
              <!-- End Figure Info-->
            </div>
          </div>

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

                <!-- Figure Caption -->
                <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-flex-middle g-px-10">
                  <q class="u-quote-v1 g-flex-middle-item g-color-white g-font-weight-700 g-font-size-16 text-uppercase">changing your mind and changing world</q>

                  <!-- Figure Social Icons -->
                  <ul class="list-inline g-flex-middle-item--bottom g-mb-30 mt-0">
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-pinterest"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-facebook"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-linkedin"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- End Figure Social Icons -->
                </figcaption>
                <!-- End Figure Caption -->
              </figure>
              <!-- End Figure -->

              <!-- Figure Info -->
              <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Designer</em>
              <h4 class="h5 g-color-black g-mb-5">Tina Krueger</h4>
              <p class="g-font-size-12">art director</p>
              <!-- End Figure Info-->
            </div>
          </div>

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

                <!-- Figure Caption -->
                <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-flex-middle g-px-10">
                  <q class="u-quote-v1 g-flex-middle-item g-color-white g-font-weight-700 g-font-size-16 text-uppercase">changing your mind and changing world</q>

                  <!-- Figure Social Icons -->
                  <ul class="list-inline g-flex-middle-item--bottom g-mb-30 mt-0">
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-pinterest"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-facebook"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-linkedin"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- End Figure Social Icons -->
                </figcaption>
                <!-- End Figure Caption -->
              </figure>
              <!-- End Figure -->

              <!-- Figure Info -->
              <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Co-Founder</em>
              <h4 class="h5 g-color-black g-mb-5">David Olsson</h4>
              <p class="g-font-size-12">creative director</p>
              <!-- End Figure Info-->
            </div>
          </div>

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

                <!-- Figure Caption -->
                <figcaption class="u-block-hover__additional--fade g-bg-primary-opacity-0_9 g-flex-middle g-px-10">
                  <q class="u-quote-v1 g-flex-middle-item g-color-white g-font-weight-700 g-font-size-16 text-uppercase">changing your mind and changing world</q>

                  <!-- Figure Social Icons -->
                  <ul class="list-inline g-flex-middle-item--bottom g-mb-30 mt-0">
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-twitter"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-pinterest"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-facebook"></i>
                      </a>
                    </li>
                    <li class="list-inline-item g-mx-3">
                      <a class="u-icon-v3 u-icon-size--xs g-bg-white g-color-primary g-color-primary--hover g-bg-black--hover" href="#">
                        <i class="fa fa-linkedin"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- End Figure Social Icons -->
                </figcaption>
                <!-- End Figure Caption -->
              </figure>
              <!-- End Figure -->

              <!-- Figure Info -->
              <em class="d-block g-font-style-normal g-font-size-11 text-uppercase g-color-primary g-mb-5">Co-Founder</em>
              <h4 class="h5 g-color-black g-mb-5">Sara Lisbon</h4>
              <p class="g-font-size-12">marketing director</p>
              <!-- End Figure Info-->
            </div>
          </div>
        </div>
      </section>
      <!-- End Team Blocks -->

      <!-- Testimonials -->
      <section class="g-bg-gray-light-v5 g-pt-100 g-pb-50">
        <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="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-md-6 g-mb-50">
              <!-- Testimonials -->
              <blockquote class="lead u-blockquote-v1 rounded g-pl-60 g-pr-30 g-py-30 g-mb-40">Dear Htmlstream team, I just bought the Unify template some weeks ago. The template is really nice and offers quite a large set of options.</blockquote>
              <div class="media">
                <img class="d-flex align-self-center rounded-circle g-width-60 g-brd-around g-brd-3 g-brd-white mr-3" src="{{ root }}assets/img-temp/100x100/img16.jpg" alt="Image Description">
                <div class="media-body align-self-center">
                  <h4 class="h6 g-font-weight-700 g-mb-0">Alexandra Pottorf</h4>
                  <em class="g-color-gray-dark-v4 g-font-style-normal">Web Developer</em>
                </div>
              </div>
              <!-- End Testimonials -->
            </div>

            <div class="col-md-6 g-mb-50">
              <!-- Testimonials -->
              <blockquote class="lead u-blockquote-v1 rounded g-pl-60 g-pr-30 g-py-30 g-mb-40">Hi there purchased a couple of days ago and the site looks great, big thanks to the htmlstream guys, they gave me some great help with some fiddly setup issues.</blockquote>
              <div class="media">
                <img class="d-flex align-self-center rounded-circle g-width-60 g-brd-around g-brd-3 g-brd-white mr-3" src="{{ root }}assets/img-temp/100x100/img14.jpg" alt="Image Description">
                <div class="media-body align-self-center">
                  <h4 class="h6 g-font-weight-700 g-mb-0">Bastien Rojanawisut</h4>
                  <em class="g-color-gray-dark-v4 g-font-style-normal">UX/UI Designer</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": 768,
               "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/hs-megamenu/src/hs.megamenu.js"></script>
    {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}
    <script src="{{ root }}assets/vendor/slick-carousel/slick/slick.js"></script>
    <script src="{{ root }}assets/vendor/fancybox/jquery.fancybox.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.carousel.js"></script>
    <script src="{{ root }}assets/js/components/hs.progress-bar.js"></script>
    <script src="{{ root }}assets/js/components/hs.popup.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');
      });

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

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

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

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

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