{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "home" %}
{% set mainNavActive_2 = "home-web-agency" %}
{% set title = "Home Web Agency | " %}

{% 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/fancybox/jquery.fancybox.min.css">
    <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="g-pos-rel">
        <!-- Promo Block - Slider -->
        <div class="js-carousel"
             data-autoplay="true"
             data-infinite="true"
             data-fade="true"
             data-speed="5000">
          <div class="js-slide g-min-height-100vh g-flex-centered g-bg-cover g-bg-pos-top-center g-bg-img-hero g-bg-black-opacity-0_3--after" style="background-image: url({{ root }}assets/img-temp/1920x1080/img20.jpg);"></div>

          <div class="js-slide g-min-height-100vh g-flex-centered g-bg-cover g-bg-pos-top-center g-bg-img-hero g-bg-black-opacity-0_3--after" style="background-image: url({{ root }}assets/img-temp/1920x1080/img17.jpg);"></div>
        </div>
        <!-- End Promo Block - Slider -->

        <!-- Promo Block Content -->
        <div class="g-absolute-centered--y g-left-0 g-right-0">
          <div class="container g-z-index-1">
            <div class="g-max-width-600">
              <h1 class="g-color-white g-font-weight-700 g-font-size-40 g-font-size-60--md g-mb-30">Unify Agency</h1>
              <p class="h3 g-color-white g-font-weight-300 g-letter-spacing-1 mb-5">We are a creative studio focusing on culture, luxury, editorial &amp; art. Somewhere between sophistication and simplicity.</p>
            </div>

            <div class="input-group u-shadow-v19 g-rounded-50 g-max-width-400">
              <input class="form-control g-font-size-default g-color-gray-dark-v4 g-placeholder-gray-dark-v3 border-0 g-rounded-left-50 g-px-20" type="email" placeholder="Enter email" aria-label="Enter email">
              <div class="input-group-append">
                <span class="input-group-text g-bg-white border-0 g-rounded-right-50">
                    <button class="btn u-btn-primary g-width-40 g-height-40 rounded-circle" type="submit">
                      <i class="fa fa-send"></i>
                    </button>
                  </span>
              </div>
            </div>
          </div>
        </div>
        <!-- End Promo Block Content -->
      </section>
      <!-- End Promo Block -->

      <!-- About Us -->
      <section class="g-py-100">
        <div class="container">
          <article class="row">
            <!-- Article Content -->
            <div class="col-lg-6 g-mb-30">
              <header class="u-heading-v6-2 g-mb-20">
                <h6 class="g-font-size-12 text-uppercase g-font-weight-600 g-pl-90">About Us</h6>
                <h3 class="u-heading-v6__title g-color-gray-dark-v2 g-brd-primary text-uppercase g-font-weight-600 g-mb-15">Quality results with us</h3>
              </header>

              <div class="g-pl-90--sm">
                <p class="lead g-mb-40">Etiam dolor tortor, egestas a libero eget, sollicitudin maximus nulla. Nunc vitae maximus ipsum. Vestibulum sodales nisi massa, vitae blandit massa luctus id.</p>

                <div class="d-flex">
                  <!-- Video Bock -->
                  <div class="u-shadow-v21 g-bg-img-hero g-pos-rel g-height-160 g-width-300 rounded" style="background-image: url('../../assets/img-temp/400x270/img1.jpg');"
                       data-bg-img-src="{{ root }}assets/img-temp/400x270/img1.jpg">
                    <a class="js-fancybox-media g-absolute-centered" href="javascript:;"
                       data-src="//vimeo.com/167434033"
                       data-speed="1000"
                       data-animate-in="flipInX"
                       data-animate-out="flipOutX">
                      <i class="fa fa-play g-font-size-40"></i>
                    </a>
                  </div>
                  <!-- End Video Block -->

                  <div class="align-self-center g-color-gray-dark-v2 text-uppercase g-font-weight-600 g-px-40">
                    View Our Promo Video
                  </div>
                </div>
              </div>
            </div>
            <!-- End Article Content -->

            <!-- Article Image -->
            <div class="col-lg-6 align-self-center">
              <img class="img-fluid w-100 u-shadow-v21 rounded" src="{{ root }}assets/img-temp/900x600/img3.jpg" alt="Iamge Description">
            </div>
            <!-- End Article Image -->
          </article>
        </div>
      </section>
      <!-- End About Us -->

      <!-- Testimonials & Icon Blocks -->
      <section class="text-center">
        <!-- Testimonials -->
        <div class="row align-items-stretch no-gutters g-bg-black-opacity-0_9 g-min-height-80vh" style="background-image: url('../../assets/img/bg/pattern3.png');">
          <div class="col-lg-6 g-bg-img-hero g-min-height-400" style="background-image: url('../../assets/img-temp/900x900/img3.jpg');"></div>

          <div class="col-lg-6 align-self-center g-pa-100">
            <img class="g-width-70 g-height-70 g-brd-3 g-brd-style-solid g-brd-white rounded-circle g-mb-30" src="{{ root }}assets/img-temp/100x100/img5.jpg" alt="Image Description">

            <blockquote class="u-blockquote-v3 g-color-white g-font-size-22 g-mb-30">Everyone knows that debugging is twice as hard as writing a program in the first place. So if you're as clever as you can be when you write it, how will you ever debug it.</blockquote>

            <h4 class="h5 g-color-primary g-mb-0">Emmy Howell</h4>

            <span class="d-block g-color-white-opacity-0_7">Director</span>
          </div>
        </div>
        <!-- End Testimonials -->

        <!-- Icon Blocks -->
        <div class="row no-gutters">
          <!-- Icon Blocks -->
          <div class="col-lg-4 g-bg-pink g-color-white text-center g-pa-60">
            <span class="u-icon-v2 u-shadow-v24 g-brd-2 rounded-circle g-mb-25">
              <i class="icon-chemistry"></i>
            </span>
            <h3 class="h5 text-uppercase g-font-weight-600 g-mb-15">Clean code</h3>
            <p class="g-color-white-opacity-0_8 g-font-size-16 g-mb-20">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
            <a class="btn u-shadow-v21 g-bg-white-opacity-0_2 g-color-white g-brd-white--hover g-color-pink--hover g-bg-white--hover g-font-size-12 text-uppercase g-font-weight-600 g-rounded-50 g-py-12 g-px-20" href="#">Learn More</a>
          </div>
          <!-- End Icon Blocks -->

          <!-- Icon Blocks -->
          <div class="col-lg-4 g-bg-teal g-color-white text-center g-pa-60">
            <span class="u-icon-v2 u-shadow-v24 g-brd-2 rounded-circle g-mb-25">
              <i class="icon-layers"></i>
            </span>
            <h3 class="h5 text-uppercase g-font-weight-600 g-mb-15">Extensive documentation</h3>
            <p class="g-color-white-opacity-0_8 g-font-size-16 g-mb-20">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
            <a class="btn u-shadow-v21 g-bg-white-opacity-0_2 g-color-white g-brd-white--hover g-color-teal--hover g-bg-white--hover g-font-size-12 text-uppercase g-font-weight-600 g-rounded-50 g-py-12 g-px-20" href="#">Check It Now</a>
          </div>
          <!-- End Icon Blocks -->

          <!-- Icon Blocks -->
          <div class="col-lg-4 g-bg-purple g-color-white text-center g-pa-60">
            <span class="u-icon-v2 u-shadow-v24 g-brd-2 rounded-circle g-mb-25">
              <i class="icon-trophy"></i>
            </span>
            <h3 class="h5 text-uppercase g-font-weight-600 g-mb-15">Modern design</h3>
            <p class="g-color-white-opacity-0_8 g-font-size-16 g-mb-20">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
            <a class="btn u-shadow-v21 g-bg-white-opacity-0_2 g-color-white g-brd-white--hover g-color-purple--hover g-bg-white--hover g-font-size-12 text-uppercase g-font-weight-600 g-rounded-50 g-py-12 g-px-20" href="#">Discover More</a>
          </div>
          <!-- End Icon Blocks -->
        </div>
        <!-- End Icon Blocks -->
      </section>
      <!-- End Testimonials & Icon Blocks -->

      <!-- Latest News -->
      <section class="g-py-100">
        <div class="container">
          <header class="text-center g-width-80x--md mx-auto g-mb-50">
            <div class="u-heading-v6-2 text-center text-uppercase g-mb-20">
              <h6 class="g-font-size-12 g-font-weight-600">Our Blog</h6>
              <h2 class="h3 u-heading-v6__title g-brd-primary g-color-gray-dark-v2 g-font-weight-600">Latest Posts</h2>
            </div>
            <p class="lead"> Lorem ipsum dolor <span class="g-color-primary">sit amet consectetur</span> adipiscing elit. Nam eget varius leo, at elementum eros. Fusce tristique, ipsum egestas fermentum imperdiet, ex nunc iaculis sem, a semper augue turpis ut nulla.</p>
          </header>

          <div class="row g-mb-30">
            <div class="col-lg-4 g-mb-30 g-mb-0--lg">
              <!-- Article -->
              <article class="g-brd-around g-brd-gray-light-v4 g-brd-top-2 g-brd-primary-top rounded g-pa-25">
                <div class="u-heading-v2-6--bottom g-mb-20">
                  <h2 class="h3 u-heading-v2__title g-font-weight-300 g-mb-0">
                    <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Unify - Responsive Bootstrap Template</a>
                  </h2>
                </div>

                <div class="lead">
                  <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at.</p>
                </div>

                <hr class="g-mt-50 g-mb-20">

                <ul class="u-list-inline font-italic g-font-size-12">
                  <li class="list-inline-item">
                    By: <a class="g-color-main" href="#">Alex</a>
                  </li>
                  <li class="list-inline-item">/</li>
                  <li class="list-inline-item">
                    In: <a class="g-color-main" href="#">Web Trends</a>
                  </li>
                  <li class="list-inline-item">/</li>
                  <li class="list-inline-item">
                    Posted: <a class="g-color-main" href="#">Aug 24, 2016</a>
                  </li>
                </ul>
              </article>
              <!-- End Article -->
            </div>

            <div class="col-lg-4 g-mb-30 g-mb-0--lg">
              <!-- Article -->
              <article class="g-brd-around g-brd-gray-light-v4 g-brd-top-2 g-brd-black-top rounded g-pa-25">
                <div class="u-heading-v2-6--bottom g-mb-20">
                  <h2 class="h3 u-heading-v2__title g-font-weight-300 g-mb-0">
                    <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Over 1000 UI Components For Your Projects</a>
                  </h2>
                </div>

                <div class="lead">
                  <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at.</p>
                </div>

                <hr class="g-mt-50 g-mb-20">

                <ul class="u-list-inline font-italic g-font-size-12">
                  <li class="list-inline-item">
                    By: <a class="g-color-main" href="#">Tom</a>
                  </li>
                  <li class="list-inline-item">/</li>
                  <li class="list-inline-item">
                    In: <a class="g-color-main" href="#">Tech</a>
                  </li>
                  <li class="list-inline-item">/</li>
                  <li class="list-inline-item">
                    Posted: <a class="g-color-main" href="#">Aug 24, 2016</a>
                  </li>
                </ul>
              </article>
              <!-- End Article -->
            </div>

            <div class="col-lg-4">
              <!-- Article -->
              <article class="g-brd-around g-brd-gray-light-v4 g-brd-top-2 g-brd-darkred-top rounded g-pa-25">
                <div class="u-heading-v2-6--bottom g-mb-20">
                  <h2 class="h3 u-heading-v2__title g-font-weight-300 g-mb-0">
                    <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Boosting Your Project With Unify Demos</a>
                  </h2>
                </div>

                <div class="lead">
                  <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at.</p>
                </div>

                <hr class="g-mt-50 g-mb-20">

                <ul class="u-list-inline font-italic g-font-size-12">
                  <li class="list-inline-item">
                    By: <a class="g-color-main" href="#">Kate</a>
                  </li>
                  <li class="list-inline-item">/</li>
                  <li class="list-inline-item">
                    In: <a class="g-color-main" href="#">Startups</a>
                  </li>
                  <li class="list-inline-item">/</li>
                  <li class="list-inline-item">
                    Posted: <a class="g-color-main" href="#">Aug 24, 2016</a>
                  </li>
                </ul>
              </article>
              <!-- End Article -->
            </div>
          </div>

          <div class="row">
            <div class="col-lg-4 g-mb-30 g-mb-0--lg">
              <!-- Article -->
              <article class="g-brd-around g-brd-gray-light-v4 g-brd-top-2 g-brd-yellow-top rounded g-pa-25">
                <div class="u-heading-v2-6--bottom g-mb-20">
                  <h2 class="h3 u-heading-v2__title g-font-weight-300 g-mb-0">
                    <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Over 1000 UI Components For Your Projects</a>
                  </h2>
                </div>

                <div class="lead">
                  <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at.</p>
                </div>

                <hr class="g-mt-50 g-mb-20">

                <ul class="u-list-inline font-italic g-font-size-12">
                  <li class="list-inline-item">
                    By: <a class="g-color-main" href="#">Alex</a>
                  </li>
                  <li class="list-inline-item">/</li>
                  <li class="list-inline-item">
                    In: <a class="g-color-main" href="#">Web Trends</a>
                  </li>
                  <li class="list-inline-item">/</li>
                  <li class="list-inline-item">
                    Posted: <a class="g-color-main" href="#">Aug 24, 2016</a>
                  </li>
                </ul>
              </article>
              <!-- End Article -->
            </div>

            <div class="col-lg-4 g-mb-30 g-mb-0--lg">
              <!-- Article -->
              <article class="g-brd-around g-brd-gray-light-v4 g-brd-top-2 g-brd-darkpurple-top rounded g-pa-25">
                <div class="u-heading-v2-6--bottom g-mb-20">
                  <h2 class="h3 u-heading-v2__title g-font-weight-300 g-mb-0">
                    <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Boosting Your Project With Unify Demos</a>
                  </h2>
                </div>

                <div class="lead">
                  <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at.</p>
                </div>

                <hr class="g-mt-50 g-mb-20">

                <ul class="u-list-inline font-italic g-font-size-12">
                  <li class="list-inline-item">
                    By: <a class="g-color-main" href="#">Tom</a>
                  </li>
                  <li class="list-inline-item">/</li>
                  <li class="list-inline-item">
                    In: <a class="g-color-main" href="#">Tech</a>
                  </li>
                  <li class="list-inline-item">/</li>
                  <li class="list-inline-item">
                    Posted: <a class="g-color-main" href="#">Aug 24, 2016</a>
                  </li>
                </ul>
              </article>
              <!-- End Article -->
            </div>

            <div class="col-lg-4">
              <!-- Article -->
              <article class="g-brd-around g-brd-gray-light-v4 g-brd-top-2 g-brd-cyan-top rounded g-pa-25">
                <div class="u-heading-v2-6--bottom g-mb-20">
                  <h2 class="h3 u-heading-v2__title g-font-weight-300 g-mb-0">
                    <a class="u-link-v5 g-color-main g-color-primary--hover" href="#">Unify - Responsive Bootstrap Template</a>
                  </h2>
                </div>

                <div class="lead">
                  <p>Nullam elementum tincidunt massa, a pulvinar leo ultricies ut. Ut fringilla lectus tellusimp imperdiet molestie est volutpat at.</p>
                </div>

                <hr class="g-mt-50 g-mb-20">

                <ul class="u-list-inline font-italic g-font-size-12">
                  <li class="list-inline-item">
                    By: <a class="g-color-main" href="#">Kate</a>
                  </li>
                  <li class="list-inline-item">/</li>
                  <li class="list-inline-item">
                    In: <a class="g-color-main" href="#">Startups</a>
                  </li>
                  <li class="list-inline-item">/</li>
                  <li class="list-inline-item">
                    Posted: <a class="g-color-main" href="#">Aug 24, 2016</a>
                  </li>
                </ul>
              </article>
              <!-- End Article -->
            </div>
          </div>
        </div>
      </section>
      <!-- End Latest News -->

      <!-- Counter -->
      <section class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll">
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100 u-bg-overlay g-bg-repeat g-bg-white-gradient-opacity-v1--after" style="height: 160%; background-image: url({{ root }}assets/img/bg/pattern3.png);"></div>
        <!-- End Parallax Image -->

        <div class="container u-bg-overlay__inner g-color-white g-py-100">
          <div class="row text-center">
            <div class="col-lg-3 col-sm-6 g-mb-30 g-mb-0--lg">
              <i class="icon-finance-078 u-line-icon-pro g-color-white-opacity-0_8 g-font-size-40 g-mb-25"></i>
              <div class="js-counter g-font-size-35 g-mb-15">12</div>
              <h4 class="h5 text-uppercase g-mb-15">Years</h4>
              <p class="mb-0">Sed feugiat porttitor nunc Etiam gravida ex justo ac rhoncus.</p>
            </div>

            <div class="col-lg-3 col-sm-6 g-mb-30 g-mb-0--lg">
              <i class="icon-finance-053 u-line-icon-pro g-color-white-opacity-0_8 g-font-size-40 g-mb-25"></i>
              <div class="js-counter g-font-size-35 g-mb-15" data-reduce-thousands-to="k">899000</div>
              <h4 class="h5 text-uppercase g-mb-15">Earnings</h4>
              <p class="mb-0">Ivitae blandit massa luctus fermentum lorem quis elit vitae</p>
            </div>

            <div class="col-lg-3 col-sm-6 g-mb-30 g-mb-0--lg">
              <i class="icon-finance-039 u-line-icon-pro g-color-white-opacity-0_8 g-font-size-40 g-mb-25"></i>
              <div class="js-counter g-font-size-35 g-mb-15" data-reduce-thousands-to="k">125000</div>
              <h4 class="h5 text-uppercase g-mb-15">Projects</h4>
              <p class="mb-0">Curabitur eget tortor sed urna nulla sed fringilla quam</p>
            </div>

            <div class="col-lg-3 col-sm-6">
              <i class="icon-finance-086 u-line-icon-pro g-color-white-opacity-0_8 g-font-size-40 g-mb-25"></i>
              <div class="js-counter g-font-size-35 g-mb-15">167</div>
              <h4 class="h5 text-uppercase g-mb-15">Investments</h4>
              <p class="mb-0">Duis dui turpis, consectetur non ultrices aliquam sapien</p>
            </div>
          </div>
        </div>
      </section>
      <!-- End Counter -->

      <!-- Work With Us -->
      <section class="text-center g-py-100">
        <div class="container">
          <header class="text-center g-width-80x--md mx-auto g-mb-50">
            <div class="u-heading-v6-2 text-center text-uppercase g-mb-20">
              <h6 class="g-font-size-12 g-font-weight-600">We Are Hiring</h6>
              <h2 class="h3 u-heading-v6__title g-brd-primary g-color-gray-dark-v2 g-font-weight-600">Work With Us</h2>
            </div>
            <p class="lead"> Lorem ipsum dolor <span class="g-color-primary">sit amet consectetur</span> adipiscing elit. Nam eget varius leo, at elementum eros. Fusce tristique, ipsum egestas fermentum imperdiet, ex nunc iaculis sem, a semper augue turpis ut nulla.</p>
          </header>

          <div class="g-bg-img-hero g-pb-70" style="background-image: url({{ root }}assets/img/maps/map3.png);">
            <div class="row justify-content-center g-pt-100--md">
              <div class="col-md-6 col-lg-4">
                <div class="g-brd-around g-brd-3 g-brd-gray-light-v4 rounded g-py-80 g-pl-50 g-pr-80">
                  <i class="d-block g-color-primary g-font-size-40 g-line-height-0_7 g-pos-rel g-top-15 g-mb-25">“</i>
                  <blockquote class="g-color-black-opacity-0_6 g-font-size-22 g-line-height-1_8 g-mb-40"><em>Great theme maker. I wish they would create more themes</em>.
                  </blockquote>
                  <h4 class="g-color-black-opacity-0_4 g-font-weight-700 g-font-size-13 text-uppercase g-mb-0">
                    <span class="d-inline-block g-width-40 g-height-2 g-bg-black-opacity-0_4 g-pos-rel g-top-minus-3 mr-2"></span>
                    Dan Watson
                  </h4>
                </div>
              </div>
              <div class="col-md-6 col-lg-4 g-hidden-sm-down g-bg-size-cover g-min-height-300 g-pos-rel rounded g-top-minus-70 g-ml-minus-50" data-bg-img-src="{{ root }}assets/img-temp/900x900/img2.jpg"></div>
            </div>
          </div>

          <p class="g-color-gray-dark-v5 mb-0">Be Our Exclusive Partner! <a href="#">Contact Us</a></p>
        </div>
      </section>
      <!-- End Work With Us -->

      <!-- Call To Action -->
      <section class="g-bg-primary g-color-white g-pa-40" style="background-image: url({{ root }}assets/img/bg/pattern5.png);">
        <div class="container u-bg-overlay__inner">
          <div class="row">
            <div class="col-md-8 align-self-center">
              <h2 class="h3 text-uppercase g-font-weight-300 g-mb-20 g-mb-0--md">Subscribe to our weekly <strong>newsletter</strong></h2>
            </div>

            <div class="col-md-4 align-self-center">
              <div class="input-group g-brd-white--focus g-rounded-50">
                <input class="form-control g-font-size-default g-placeholder-white g-color-white g-bg-transparent g-bg-transparent--focus g-brd-white-opacity-0_8 g-py-12 g-px-12" type="email" placeholder="Enter your email...">
                <div class="input-group-append">
                  <button class="btn u-btn-primary g-color-white g-bg-transparent g-brd-white-opacity-0_8 g-px-12" type="submit">
                    <i class="icon-envelope g-pos-rel g-top-1"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- End Call To Action -->

      {% 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" %}
    <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.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.popup.js"></script>
    <script src="{{ root }}assets/js/components/hs.counter.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 counters
        var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');

        // initialization of popups with media
        $.HSCore.components.HSPopup.init('.js-fancybox-media', {
          helpers: {
            media: {},
            overlay: {
              css: {
                'background': 'rgba(255, 255, 255, .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>
