{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "pages" %}
{% set mainNavActive_2 = "pages-portfolios" %}
{% set mainNavActive_3 = "page-portfolio-case-study-2" %}
{% set title = "Portfolio Case Study 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">
    {% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
    <link rel="stylesheet" href="{{ root }}assets/vendor/cubeportfolio-full/cubeportfolio/css/cubeportfolio.min.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" %}

      <!-- Page Title -->
      <section class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll loaded dzsprx-readyall" data-options="{direction: 'reverse', settings_mode_oneelement_max_offset: '150'}">
        <!-- Parallax Image -->
        <div class="divimage dzsparallaxer--target w-100 g-bg-size-cover g-bg-pos-center-center" style="height: 130%; background-image: url({{ root }}assets/img-temp/1920x1080/img47.jpg);"></div>
        <!-- End Parallax Image -->

        <div class="container g-color-white g-z-index-1 g-py-170">
          <h1 class="display-4 g-font-weight-600 g-letter-spacing-1 g-mb-25">Portfolio Case Study 2</h1>
          <div class="lead g-line-height-2 g-letter-spacing-0_5">
            <p class="mb-0">These team blocks are perfect for any content and It could be used within<br>the any pages in Unify Template.</p>
          </div>
        </div>
      </section>
      <!-- End Page Title -->

      <!-- Video Block -->
      <div class="container g-py-100">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe src="https://www.youtube.com/embed/gO61pJKeKp8" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
      </div>
      <!-- End Video Block -->

      <!-- Portfolio Case Study -->
      <section class="container">
        <div class="text-center g-pb-100">
          <h2 class="h1 g-color-black g-font-weight-700 mb-4">More than a look, design is functional</h2>
          <p class="lead mb-0">This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key. Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs. Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.</p>
        </div>

        <img class="img-fluid" src="{{ root }}assets/img-temp/1920x700/img1.jpg" alt="Image Designers">

        <!-- Testimonials -->
        <div class="row justify-content-center g-py-100">
          <div class="col-lg-9 text-center">
            <blockquote class="u-blockquote-v4 g-color-primary g-color-primary--before g-color-primary--after g-font-weight-600 g-font-size-30 g-line-height-1_8 mb-5">This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is key.
            </blockquote>
            <h4 class="h4 g-mb-0">Kathy Reyes, CEO</h4>
          </div>
        </div>
        <!-- Testimonials -->

        <!-- Images -->
        <div class="row g-mb-100">
          <div class="col-md-6">
            <img class="img-fluid" src="{{ root }}assets/img-temp/1200x900/img1.jpg" alt="Image Designers">
          </div>
          <div class="col-md-6">
            <img class="img-fluid" src="{{ root }}assets/img-temp/1200x900/img2.jpg" alt="Image Designers">
          </div>
        </div>
        <!-- End Images -->

        <div class="row justify-content-center">
          <div class="col-lg-9">
            <p class="lead text-center mb-0">We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt. 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. 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.</p>
          </div>
        </div>

        <div class="g-py-100">
          <img class="img-fluid" src="{{ root }}assets/img-temp/1920x700/img2.jpg" alt="Image Designers">
        </div>

        <div class="row justify-content-center g-mb-100">
          <div class="col-lg-9">
            <p class="lead text-center mb-0">We aim high at being focused on building relationships with our clients and community. Using our creative gifts drives this foundation. Working together on the daily requires each individual to let the greater good of the team’s work surface above their own ego. It’s important to stay detail oriented with every project we tackle. Staying focused allows us to turn every project we complete into something we love.</p>
          </div>
        </div>
      </section>
      <!-- End Portfolio Case Study -->

      <!-- Cube Portfolio Blocks -->
      <section class="g-bg-gray-light-v5">
        <div class="container g-py-100">
          <div class="text-center g-mb-40">
            <h2 class="h2 g-color-black g-font-weight-700 mb-4">More Case Studies</h2>
            <div class="d-inline-block g-width-70 g-height-2 g-bg-black mb-4"></div>
          </div>

          <div class="cbp"
               data-animation="quicksand"
               data-x-gap="30"
               data-y-gap="30"
               data-media-queries='[{"width": 1500, "cols": 3}, {"width": 1100, "cols": 3}, {"width": 800, "cols": 3}, {"width": 480, "cols": 2}, {"width": 300, "cols": 1}]'>
            <!-- Cube Portfolio Blocks - Item -->
            <div id="shortcode" class="cbp-item identity design">
              <div class="u-block-hover g-parent">
                <img class="img-fluid g-transform-scale-1_1--parent-hover g-transition-0_5 g-transition--ease-in-out" src="{{ root }}assets/img-temp/400x270/img13.jpg" alt="Image description">
                <div class="d-flex w-100 h-100 g-bg-black-opacity-0_6 opacity-0 g-opacity-1--parent-hover g-pos-abs g-top-0 g-left-0 g-transition-0_3 g-transition--ease-in u-block-hover__additional--fade u-block-hover__additional--fade-in g-pa-20">
                  <ul class="align-items-end flex-column list-inline mt-auto ml-auto mb-0">
                    <li class="list-inline-item">
                      <a class="u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="#">
                        <i class="icon-communication-095 u-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="cbp-lightbox u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="{{ root }}assets/img-temp/400x270/img13.jpg">
                        <i class="icon-communication-017 u-line-icon-pro"></i>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="u-shadow-v19 g-bg-white text-center g-pa-25 mb-1">
                <h3 class="h5 g-color-black g-font-weight-600 mb-1">Branding work</h3>
                <p class="mb-0">Identity, Design</p>
              </div>
            </div>
            <!-- End Cube Portfolio Blocks - Item -->

            <!-- Cube Portfolio Blocks - Item -->
            <div class="cbp-item design">
              <div class="u-block-hover g-parent">
                <img class="img-fluid g-transform-scale-1_1--parent-hover g-transition-0_5 g-transition--ease-in-out" src="{{ root }}assets/img-temp/400x270/img14.jpg" alt="Image description">
                <div class="d-flex w-100 h-100 g-bg-black-opacity-0_6 opacity-0 g-opacity-1--parent-hover g-pos-abs g-top-0 g-left-0 g-transition-0_3 g-transition--ease-in u-block-hover__additional--fade u-block-hover__additional--fade-in g-pa-20">
                  <ul class="align-items-end flex-column list-inline mt-auto ml-auto mb-0">
                    <li class="list-inline-item">
                      <a class="u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="#">
                        <i class="icon-communication-095 u-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="cbp-lightbox u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="{{ root }}assets/img-temp/400x270/img14.jpg">
                        <i class="icon-communication-017 u-line-icon-pro"></i>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="u-shadow-v19 g-bg-white text-center g-pa-25 mb-1">
                <h3 class="h5 g-color-black g-font-weight-600 mb-1">Development</h3>
                <p class="mb-0">Design</p>
              </div>
            </div>
            <!-- End Cube Portfolio Blocks - Item -->

            <!-- Cube Portfolio Blocks - Item -->
            <div class="cbp-item graphic identity">
              <div class="u-block-hover g-parent">
                <img class="img-fluid g-transform-scale-1_1--parent-hover g-transition-0_5 g-transition--ease-in-out" src="{{ root }}assets/img-temp/400x270/img15.jpg" alt="Image description">
                <div class="d-flex w-100 h-100 g-bg-black-opacity-0_6 opacity-0 g-opacity-1--parent-hover g-pos-abs g-top-0 g-left-0 g-transition-0_3 g-transition--ease-in u-block-hover__additional--fade u-block-hover__additional--fade-in g-pa-20">
                  <ul class="align-items-end flex-column list-inline mt-auto ml-auto mb-0">
                    <li class="list-inline-item">
                      <a class="u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="#">
                        <i class="icon-communication-095 u-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="list-inline-item">
                      <a class="cbp-lightbox u-icon-v2 u-icon-size--sm g-brd-white g-color-black g-bg-white rounded-circle" href="{{ root }}assets/img-temp/400x270/img15.jpg">
                        <i class="icon-communication-017 u-line-icon-pro"></i>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="u-shadow-v19 g-bg-white text-center g-pa-25 mb-1">
                <h3 class="h5 g-color-black g-font-weight-600 mb-1">Project planner</h3>
                <p class="mb-0">Graphic, Identity</p>
              </div>
            </div>
            <!-- End Cube Portfolio Blocks - Item -->
          </div>
        </div>
      </section>
      <!-- End Cube Portfolio Blocks -->

      <!-- Contact Form -->
      <section class="container g-py-100">
        <div class="row justify-content-center g-mb-70">
          <div class="col-lg-7">
            <!-- Heading -->
            <div class="text-center">
              <h2 class="h2 g-color-black g-font-weight-700 mb-4">We're Accepting Projects Today.</h2>
              <div class="d-inline-block g-width-70 g-height-2 g-bg-black mb-4"></div>
              <p class="g-font-size-18 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">
            <form>
              <div class="row">
                <div class="col-md-6 form-group g-mb-20">
                  <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-13 g-px-15" type="text" placeholder="Name">
                </div>

                <div class="col-md-6 form-group g-mb-20">
                  <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-13 g-px-15" type="email" placeholder="Email">
                </div>

                <div class="col-md-6 form-group g-mb-20">
                  <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-13 g-px-15" type="text" placeholder="Subject">
                </div>

                <div class="col-md-6 form-group g-mb-20">
                  <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover rounded-3 g-py-13 g-px-15" type="tel" placeholder="Phone">
                </div>

                <div class="col-md-12 form-group g-mb-40">
                  <textarea class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v3 g-brd-primary--hover g-resize-none rounded-3 g-py-13 g-px-15" rows="7" placeholder="Message"></textarea>
                </div>
              </div>

              <div class="text-center">
                <button class="btn u-btn-primary g-font-weight-600 g-font-size-13 text-uppercase g-rounded-25 g-py-15 g-px-30" type="submit" role="button">Send Request</button>
              </div>
            </form>
          </div>
        </div>
      </section>
      <!-- End Contact Form -->

      {% 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/hs-megamenu/src/hs.megamenu.js"></script>
    {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}
    <script src="{{ root }}assets/vendor/cubeportfolio-full/cubeportfolio/js/jquery.cubeportfolio.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.cubeportfolio.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 go to
        $.HSCore.components.HSGoTo.init('.js-go-to');

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

      $(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 cubeportfolio
        $.HSCore.components.HSCubeportfolio.init('.cbp');
      });

      $(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>
