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

{% 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">
    <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="container g-py-150">
        <div class="row">
          <div class="col-lg-8">
            <h2 class="h2 g-color-black g-font-weight-300 g-line-height-1_8 mb-5">We are
              <span class="g-color-primary g-font-weight-500">Unify</span> a creative studio focusing on culture, luxury, editorial &amp; art. Somewhere between sophistication and simplicity.
            </h2>
          </div>
        </div>
        <div class="d-flex">
          <a class="js-fancybox align-self-center u-icon-v2 u-block-hover--scale g-color-white g-bg-primary g-font-size-20 rounded-circle g-text-underline--none--hover mr-3" href="javascript:;"
             data-src="//vimeo.com/167434033"
             data-speed="350">
            <i class="g-font-size-default g-pos-rel g-left-2 hs-icon hs-icon-play"></i>
          </a>
          <span class="align-self-center g-font-weight-700">Watch intro video</span>
        </div>
      </section>
      <!-- End Promo Block -->

      <!-- Icon Blocks -->
      <div class="clearfix">
        <div class="row no-gutters">
          <div class="col-lg-4">
            <!-- Icon Blocks -->
            <div class="u-block-hover g-bg-purple g-color-white text-center g-py-120 g-px-50">
              <span class="d-block g-font-size-50 g-rounded-5 mb-2">
                <i class="icon-education-087 u-line-icon-pro"></i>
              </span>
              <h3 class="h3 g-font-weight-600 mb-30">Extensive documentation</h3>
              <p class="lead g-color-white-opacity-0_8 mb-5">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>

              <div class="u-block-hover__additional--fade u-block-hover__additional--fade-up">
                <a class="btn btn-lg u-btn-outline-white g-pos-abs g-bottom-80 g-absolute-centered--x g-font-weight-500 g-font-size-default g-rounded-4 g-px-25" href="#">Subscribe</a>
              </div>
            </div>
            <!-- End Icon Blocks -->
          </div>

          <div class="col-lg-4">
            <!-- Icon Blocks -->
            <div class="u-block-hover g-bg-teal g-color-white text-center g-py-120 g-px-50">
              <span class="d-block g-font-size-50 g-rounded-5 mb-2">
                <i class="icon-education-035 u-line-icon-pro"></i>
              </span>
              <h3 class="h3 g-font-weight-600 mb-30">Modern design</h3>
              <p class="lead g-color-white-opacity-0_8 mb-5">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
              <div class="u-block-hover__additional--fade u-block-hover__additional--fade-up">
                <a class="btn btn-lg u-btn-outline-white g-pos-abs g-bottom-80 g-absolute-centered--x g-font-weight-500 g-font-size-default g-rounded-4 g-px-25" href="#">Subscribe</a>
              </div>
            </div>
            <!-- End Icon Blocks -->
          </div>

          <div class="col-lg-4">
            <!-- Icon Blocks -->
            <div class="u-block-hover g-bg-purple g-color-white text-center g-py-120 g-px-50">
              <span class="d-block g-font-size-50 g-rounded-5 mb-2">
                <i class="icon-education-141 u-line-icon-pro"></i>
              </span>
              <h3 class="h3 g-font-weight-600 mb-30">Creative ideas</h3>
              <p class="lead g-color-white-opacity-0_8 mb-5">We strive to embrace and drive change in our industry which allows us to keep our clients relevant.</p>
              <div class="u-block-hover__additional--fade u-block-hover__additional--fade-up">
                <a class="btn btn-lg u-btn-outline-white g-pos-abs g-bottom-80 g-absolute-centered--x g-font-weight-500 g-font-size-default g-rounded-4 g-px-25" href="#">Subscribe</a>
              </div>
            </div>
            <!-- End Icon Blocks -->
          </div>
        </div>
      </div>
      <!-- End Icon Blocks -->

      <!-- Team -->
      <div class="container g-pt-100 g-pb-70">
        <div class="text-center g-mb-100">
          <h2 class="h1 g-font-weight-300">What people say</h2>
        </div>
        <div class="row justify-content-between">
          <div class="col-lg-6 g-mb-30">
            <em class="g-color-gray-light-v5 g-font-size-120 g-pos-abs g-top-minus-40 g-left-minus-15 g-z-index-minus-1">
              &#8220;
            </em>
            <blockquote class="lead g-font-style-italic g-line-height-2 g-pl-30 g-mb-30">I am an ambitious workaholic, but apart from that, pretty simple person. Understanding who you are and what you want is my strategy for your brand. I am always figuring out ways to capture your vision, so people can get on board.</blockquote>
            <h4 class="h5 g-mb-0">&#8212; Daniel Ramirez</h4>
            <span class="d-block g-color-gray-dark-v4">Designer</span>
          </div>
          <div class="col-lg-5">
            <img class="img-fluid w-100" src="{{ root }}assets/img-temp/450x300/img1.jpg" alt="Image Description">
            </iv>
          </div>
        </div>

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

        <div class="row justify-content-between">
          <div class="col-lg-5 g-mb-30">
            <img class="img-fluid w-100" src="{{ root }}assets/img-temp/450x300/img2.jpg" alt="Image Description">
          </div>
          <div class="col-lg-6">
            <em class="g-color-gray-light-v5 g-font-size-120 g-pos-abs g-top-minus-40 g-left-minus-15 g-z-index-minus-1">
              &#8220;
            </em>
            <blockquote class="lead g-font-style-italic g-line-height-2 g-pl-30 g-mb-30">I am an ambitious workaholic, but apart from that, pretty simple person. Understanding who you are and what you want is my strategy for your brand. I am always figuring out ways to capture your vision, so people can get on board.</blockquote>
            <h4 class="h5 g-mb-0">&#8212; Sara Anderson</h4>
            <span class="d-block g-color-gray-dark-v4">Developer</span>
          </div>
        </div>
      </div>
      <!-- End Team -->

      <!-- Gallery -->
      <section class="clearfix g-brd-bottom g-brd-gray-light-v4">
        <div class="row no-gutters">
          <div class="col-md-4 g-mb-30 g-mb-0--md">
            <article class="text-center u-block-hover g-bg-gray-dark-v2--hover g-transition-0_4">
              <figure>
                <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img13.jpg" alt="Image Description">
              </figure>
              <h3 class="h6 text-uppercase g-font-weight-600 g-letter-spacing-2 g-color-white--hover g-pa-30-20 g-mb-0">
                <em class="d-block g-font-size-12 g-font-style-normal g-font-weight-300 g-color-primary--hover g-mb-10">Popularised</em>
                Ipsum passages
              </h3>
              <a class="js-fancybox u-link-v2" href="javascript:;"
                 data-fancybox="lightbox-gallery--16"
                 data-src="{{ root }}assets/img-temp/400x270/img13.jpg"
                 data-speed="1000"
                 data-animate-in="bounceInDown"
                 data-animate-out="bounceOutDown"
                 data-overlay-blur-bg="true"
                 data-caption="Lightbox Gallery">See</a>
            </article>
          </div>
          <div class="col-md-4 g-mb-30 g-mb-0--md">
            <article class="text-center u-block-hover g-bg-gray-dark-v2--hover g-transition-0_4">
              <figure>
                <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img16.jpg" alt="Image Description">
              </figure>
              <h3 class="h6 text-uppercase g-font-weight-600 g-letter-spacing-2 g-color-white--hover g-pa-30-20 g-mb-0">
                <em class="d-block g-font-size-12 g-font-style-normal g-font-weight-300 g-color-primary--hover g-mb-10">Dictumst</em>
                Habitasse platea
              </h3>
              <a class="js-fancybox u-link-v2" href="javascript:;"
                 data-fancybox="lightbox-gallery--16"
                 data-src="{{ root }}assets/img-temp/400x270/img16.jpg"
                 data-speed="1000"
                 data-animate-in="bounceInDown"
                 data-animate-out="bounceOutDown"
                 data-overlay-blur-bg="true"
                 data-caption="Lightbox Gallery">See</a>
            </article>
          </div>
          <div class="col-md-4 g-mb-30 g-mb-0--md">
            <article class="text-center u-block-hover g-bg-gray-dark-v2--hover g-transition-0_4">
              <figure>
                <img class="img-fluid w-100" src="{{ root }}assets/img-temp/400x270/img15.jpg" alt="Image Description">
              </figure>
              <h3 class="h6 text-uppercase g-font-weight-600 g-letter-spacing-2 g-color-white--hover g-pa-30-20 g-mb-0">
                <em class="d-block g-font-size-12 g-font-style-normal g-font-weight-300 g-color-primary--hover g-mb-10">Simply dummy</em>
                Electronic typesetting
              </h3>
              <a class="js-fancybox u-link-v2" href="javascript:;"
                 data-fancybox="lightbox-gallery--16"
                 data-src="{{ root }}assets/img-temp/400x270/img15.jpg"
                 data-speed="1000"
                 data-animate-in="bounceInDown"
                 data-animate-out="bounceOutDown"
                 data-overlay-blur-bg="true"
                 data-caption="Lightbox Gallery">See</a>
            </article>
          </div>
        </div>
      </section>
      <!-- End Gallery -->

      <div class="container text-center g-py-100">
        <h2 class="h1 g-font-weight-300 mb-3">Join <span class="g-color-primary">Unify</span> Team</h2>
        <p class="g-color-gray g-font-weight-500 text-uppercase g-letter-spacing-1 g-mb-50">Sign up to our newsletter for latest news</p>
        <div class="row justify-content-center">
          <div class="col-lg-6">
            <form role="form">
              <div class="input-group">
                <input class="form-control g-font-size-default g-rounded-4 mr-4" type="text" placeholder="Your name">
                <div class="input-group-append">
                  <button class="btn btn-xl u-btn-primary g-font-weight-500 g-font-size-default g-rounded-4 g-px-35" type="button">Subscribe</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>

      {% 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" %}

    <!-- JS Global Compulsory -->
    {% include "html/assets/include/nunjucks/partials/core-js.njk" %}

    <!-- JS Implementing Plugins -->
    <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.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.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 tabs
        $.HSCore.components.HSTabs.init('[role="tablist"]');

        // initialization of popups
        $.HSCore.components.HSPopup.init('.js-fancybox', {
          transitionEffect: false
        });

        // 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>
