{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "home" %}
{% set mainNavActive_2 = "home-showcase" %}
{% set title = "Home Showcase | " %}

{% 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/hs-megamenu/src/hs.megamenu.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">

    <link rel="stylesheet" href="{{ root }}assets/vendor/revolution-slider/revolution/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/revolution-slider/revolution/css/settings.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/revolution-slider/revolution/css/layers.css">
    <link rel="stylesheet" href="{{ root }}assets/vendor/revolution-slider/revolution/css/navigation.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" %}

      <!-- Revolution Slider -->
      <div class="g-overflow-hidden">
        <div id="rev_slider_26_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="mask-showcase" data-source="gallery" style="background:#aaaaaa;padding:0px;">
          <!-- START REVOLUTION SLIDER 5.4.1 fullscreen mode -->
          <div id="rev_slider_26_1" class="rev_slider fullscreenbanner tiny_bullet_slider" style="display:none;" data-version="5.4.1">
            <ul>  <!-- SLIDE  -->
              <li data-index="rs-73" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-thumb="http://works.themepunch.com/revolution_5_3/wp-content/" data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                <!-- MAIN IMAGE -->
                <img src="{{ root }}assets/img/bg/transparent2.png" data-bgcolor='linear-gradient(90deg, rgba(0, 0, 153, 0.5) 0%, rgba(0, 190, 214, 0.6) 100%)' style='background:linear-gradient(90deg, rgba(0, 0, 153, 0.5) 0%, rgba(0, 190, 214, 0.6) 100%)' alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg" data-no-retina>
                <!-- LAYERS -->

                <!-- LAYER NR. 1 -->
                <div class="tp-caption rev-btn  tp-resizeme"
                     id="slide-73-layer-4"
                     data-x="['left','left','left','left']" data-hoffset="['170','120','70','40']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['150','150','150','110']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="normal"

                     data-type="button"
                     data-responsive_offset="on"

                     data-frames='[{"delay":500,"speed":1000,"sfxcolor":"#ffff58","sfx_effect":"blockfromleft","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power4.easeOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(0,0,0);bg:rgb(255,255,255);"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[30,30,30,30]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[30,30,30,30]"

                     style="z-index: 5; white-space: normal; font-size: 15px; line-height: 50px; font-weight: 400; color: rgba(255,255,255,1); letter-spacing: 2px;border-color:rgb(255,255,255);border-style:solid;border-width:1px 1px 1px 1px;border-radius: 50px; outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">Launch
                </div>

                <!-- LAYER NR. 2 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-2"
                     id="slide-73-layer-1"
                     data-x="['center','center','center','center']" data-hoffset="['500','500','390','220']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

                     data-type="image"
                     data-responsive_offset="on"

                     data-frames='[{"delay":400,"speed":750,"sfxcolor":"#2f3b4a","sfx_effect":"blockfromleft","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power4.easeOut"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"

                     style="z-index: 6;">
                  <img src="{{ root }}assets/img-temp/900x600/img5.jpg" alt="" data-ww="['1000px','1000px','800px','500px']" data-hh="['563px','563px','450','281']" width="1200" height="675" data-no-retina>
                </div>

                <!-- LAYER NR. 3 -->
                <div class="tp-caption   tp-resizeme"
                     id="slide-73-layer-3"
                     data-x="['left','left','left','left']" data-hoffset="['150','100','50','20']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['-177','-177','-177','-157']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="normal"

                     data-type="text"
                     data-responsive_offset="on"

                     data-frames='[{"delay":300,"speed":750,"sfxcolor":"#ffff58","sfx_effect":"blockfromleft","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power4.easeOut"}]'
                     data-textAlign="['left','left','left','left']"
                     data-paddingtop="[10,10,10,10]"
                     data-paddingright="[20,20,20,20]"
                     data-paddingbottom="[10,10,10,10]"
                     data-paddingleft="[20,20,20,20]"

                     style="z-index: 7; white-space: normal; font-size: 20px; line-height: 20px; font-weight: 400; color: #ffffff; letter-spacing: 10px;">PROJECTS
                </div>

                <!-- LAYER NR. 4 -->
                <div class="tp-caption   tp-resizeme"
                     id="slide-73-layer-2"
                     data-x="['left','left','left','left']" data-hoffset="['150','100','50','20']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['-30','-30','-30','-30']"
                     data-fontsize="['70','70','70','50']"
                     data-lineheight="['70','70','70','50']"
                     data-width="['650','650','620','380']"
                     data-height="none"
                     data-whitespace="normal"

                     data-type="text"
                     data-responsive_offset="on"

                     data-frames='[{"delay":200,"speed":750,"sfxcolor":"#ffff58","sfx_effect":"blockfromleft","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx_effect":"blocktoleft","frame":"999","to":"z:0;","ease":"Power4.easeOut"}]'
                     data-textAlign="['left','left','left','left']"
                     data-paddingtop="[20,20,20,20]"
                     data-paddingright="[20,20,20,20]"
                     data-paddingbottom="[30,30,30,30]"
                     data-paddingleft="[20,20,20,20]"

                     style="z-index: 8; min-width: 650px; max-width: 650px; white-space: normal; font-size: 70px; font-weight: 600; line-height: 70px; color: #ffffff; letter-spacing: -2px;">The force of nature felt in waves crashing.
                </div>
              </li>
                  <!-- SLIDE  -->
              <li data-index="rs-74" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-thumb="http://works.themepunch.com/revolution_5_3/wp-content/" data-rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                <!-- MAIN IMAGE -->
                <img src="{{ root }}assets/img/bg/transparent2.png" data-bgcolor='linear-gradient(120deg, #b7ebf6 0%, rgba(228, 97, 210, 0.7) 100%)' style='background:linear-gradient(120deg, #b7ebf6 0%, rgba(228, 97, 210, 0.7) 100%)' alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg" data-no-retina>
                <!-- LAYERS -->

                <!-- LAYER NR. 5 -->
                <div class="tp-caption   tp-resizeme rs-parallaxlevel-2"
                     id="slide-74-layer-1"
                     data-x="['center','center','center','center']" data-hoffset="['-500','-500','-390','-220']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="nowrap"

                     data-type="image"
                     data-responsive_offset="on"

                     data-frames='[{"delay":200,"speed":750,"sfxcolor":"#243949","sfx_effect":"blockfromright","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx_effect":"blocktoright","frame":"999","to":"z:0;","ease":"Power4.easeOut"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"

                     style="z-index: 5;">
                  <img src="{{ root }}assets/img-temp/900x600/img6.jpg" alt="" data-ww="['1000px','1000px','800px','500px']" data-hh="['563px','563px','450px','281px']" width="1200" height="675" data-no-retina>
                </div>

                <!-- LAYER NR. 6 -->
                <div class="tp-caption rev-btn  tp-resizeme"
                     id="slide-74-layer-4"
                     data-x="['left','left','left','left']" data-hoffset="['880','760','600','330']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['150','150','150','110']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="normal"

                     data-type="button"
                     data-responsive_offset="on"

                     data-frames='[{"delay":500,"speed":750,"sfxcolor":"#cbbacc","sfx_effect":"blockfromright","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx_effect":"blocktoright","frame":"999","to":"z:0;","ease":"Power4.easeOut"},{"frame":"hover","speed":"0","ease":"Linear.easeNone","to":"o:1;rX:0;rY:0;rZ:0;z:0;","style":"c:rgb(0,0,0);bg:rgb(255,255,255);"}]'
                     data-textAlign="['inherit','inherit','inherit','inherit']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[30,30,30,30]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[30,30,30,30]"

                     style="z-index: 6; white-space: normal; font-size: 15px; line-height: 50px; font-weight: 400; color: rgba(255,255,255,1); letter-spacing: 2px;border-color:rgb(255,255,255);border-style:solid;border-width:1px 1px 1px 1px;border-radius: 50px; outline:none;box-shadow:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;">Launch
                </div>

                <!-- LAYER NR. 7 -->
                <div class="tp-caption   tp-resizeme"
                     id="slide-74-layer-3"
                     data-x="['left','left','left','left']" data-hoffset="['820','700','540','270']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['-177','-177','-177','-157']"
                     data-width="none"
                     data-height="none"
                     data-whitespace="normal"

                     data-type="text"
                     data-responsive_offset="on"

                     data-frames='[{"delay":400,"speed":750,"sfxcolor":"#cbbacc","sfx_effect":"blockfromright","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx_effect":"blocktoright","frame":"999","to":"z:0;","ease":"Power4.easeOut"}]'
                     data-textAlign="['left','left','left','left']"
                     data-paddingtop="[10,10,10,10]"
                     data-paddingright="[20,20,20,20]"
                     data-paddingbottom="[10,10,10,10]"
                     data-paddingleft="[20,20,20,20]"

                     style="z-index: 7; white-space: normal; font-size: 20px; line-height: 20px; font-weight: 400; color: #ffffff; letter-spacing: 10px;">PROJECTS
                </div>

                <!-- LAYER NR. 8 -->
                <div class="tp-caption   tp-resizeme"
                     id="slide-74-layer-2"
                     data-x="['left','left','left','left']" data-hoffset="['360','240','110','80']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['-30','-30','-30','-30']"
                     data-fontsize="['70','70','70','50']"
                     data-lineheight="['70','70','70','50']"
                     data-width="['650','650','620','380']"
                     data-height="none"
                     data-whitespace="normal"

                     data-type="text"
                     data-responsive_offset="on"

                     data-frames='[{"delay":300,"speed":750,"sfxcolor":"#cbbacc","sfx_effect":"blockfromright","frame":"0","from":"z:0;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":500,"sfxcolor":"#ffffff","sfx_effect":"blocktoright","frame":"999","to":"z:0;","ease":"Power4.easeOut"}]'
                     data-textAlign="['right','right','right','right']"
                     data-paddingtop="[20,20,20,20]"
                     data-paddingright="[20,20,20,20]"
                     data-paddingbottom="[30,30,30,30]"
                     data-paddingleft="[20,20,20,20]"

                     style="z-index: 8; min-width: 650px; max-width: 650px; white-space: normal; font-size: 70px; font-weight: 600; line-height: 70px; color: #ffffff; letter-spacing: -2px;">The beauty of nature is hidden in details.
                </div>
              </li>
            </ul>
            <div class="tp-bannertimer" style="height: 10px; background: rgba(0, 0, 0, 0.15);"></div>
          </div>
        </div>
      </div>
      <!-- End Revolution Slider -->

      <!-- Section 1 -->
      <section class="g-py-100">
        <div class="container">
          <div class="row">
            <div class="col-md-6 align-self-center g-mb-50--md g-mb-0--md">
              <div class="u-heading-v2-3--bottom g-brd-primary g-mb-30">
                <h2 class="h1 u-heading-v2__title g-color-gray-dark-v2 text-uppercase g-font-weight-700">We Are Unify Agency</h2>
              </div>

              <div class="g-font-size-18 g-line-height-2 g-mb-30">
                <p>Unify
                  <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                  <strong>successful</strong> business on web and mobile.</p>
                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
              </div>

              <a href="#!" class="btn u-btn-primary u-shadow-v21 g-font-size-12 text-uppercase g-font-weight-600 g-rounded-50 g-py-15 g-px-25 g-mr-15 g-mb-10 g-mb-0--sm">
                <i class="icon-layers g-pos-rel g-top-1 g-mr-5"></i> Buy Full Version
              </a>
              <small class="d-block d-sm-inline-block g-color-gray-dark-v5 g-font-size-12">*Exclusive item on Wrapboostrap Marketpalce</small>
            </div>

            <div class="col-md-6 align-self-center text-center g-overflow-hidden">
              <img class="img-fluid w-75" src="{{ root }}assets/img-temp/350x600/img1.png" alt="Image Description"
                   data-animation="fadeInUp"
                   data-animation-delay="0"
                   data-animation-duration="1000">
            </div>
          </div>
        </div>
      </section>
      <!-- End Section 1 -->

      <!-- Section 2 -->
      <section class="g-bg-purple g-color-white g-py-100">
        <div class="container">
          <div class="row">
            <div class="col-md-6 align-self-center text-center g-overflow-hidden g-mb-50--md g-mb-0--md">
              <img class="img-fluid w-75" src="{{ root }}assets/img-temp/350x600/img1.png" alt="Image Description"
                   data-animation="fadeInUp"
                   data-animation-delay="0"
                   data-animation-duration="1000">
            </div>

            <div class="col-md-6 align-self-center">
              <div class="u-heading-v2-3--bottom g-brd-white g-mb-30">
                <h2 class="h1 u-heading-v2__title text-uppercase g-font-weight-700">Focused on Product</h2>
              </div>


              <div class="g-font-size-18 g-line-height-2 g-mb-30">
                <p>Unify
                  <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                  <strong>successful</strong> business on web and mobile.</p>
                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
              </div>

              <a href="#!" 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-15 g-px-25 g-mr-15 g-mb-10 g-mb-0--sm">
                <i class="icon-wallet g-pos-rel g-top-1 g-mr-5"></i> Buy Full Version
              </a>
              <small class="d-block d-sm-inline-block g-color-white-opacity-0_8 g-font-size-12">*Exclusive item on Wrapboostrap Marketpalce</small>
            </div>
          </div>
        </div>
      </section>
      <!-- End Section 2 -->

      <!-- Section 4 -->
      <section class="g-py-100">
        <div class="container">
          <div class="row">
            <div class="col-md-6 align-self-center g-mb-50--md g-mb-0--md">
              <div class="u-heading-v2-3--bottom g-brd-primary g-mb-30">
                <h2 class="h1 u-heading-v2__title g-color-gray-dark-v2 text-uppercase g-font-weight-700">Solutions For Web</h2>
              </div>

              <div class="g-font-size-18 g-line-height-2 g-mb-30">
                <p>Unify
                  <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                  <strong>successful</strong> business on web and mobile.</p>
                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
              </div>

              <a href="#!" class="btn u-btn-primary u-shadow-v21 g-font-size-12 text-uppercase g-font-weight-600 g-rounded-50 g-py-15 g-px-25 g-mr-15 g-mb-10 g-mb-0--sm">
                <i class="icon-speedometer g-pos-rel g-top-1 g-mr-5"></i> Buy Full Version
              </a>
              <small class="d-block d-sm-inline-block g-color-gray-dark-v5 g-font-size-12">*Exclusive item on Wrapboostrap Marketpalce</small>
            </div>

            <div class="col-md-6 align-self-center text-center g-overflow-hidden">
              <img class="img-fluid w-75" src="{{ root }}assets/img-temp/350x600/img1.png" alt="Image Description"
                   data-animation="fadeInUp"
                   data-animation-delay="0"
                   data-animation-duration="1000">
            </div>
          </div>
        </div>
      </section>
      <!-- End Section 4 -->

      <!-- Section 5 -->
      <section class="g-bg-pink g-color-white g-py-100">
        <div class="container">
          <div class="row">
            <div class="col-md-6 align-self-center text-center g-overflow-hidden g-mb-50 g-mb-0--md">
              <img class="img-fluid w-75" src="{{ root }}assets/img-temp/350x600/img1.png" alt="Image Description"
                   data-animation="fadeInUp"
                   data-animation-delay="0"
                   data-animation-duration="1000">
            </div>

            <div class="col-md-6 align-self-center">
              <div class="u-heading-v2-3--bottom g-brd-white g-mb-30">
                <h2 class="h1 u-heading-v2__title text-uppercase g-font-weight-700">Our Vision and Mission</h2>
              </div>


              <div class="g-font-size-18 g-line-height-2 g-mb-30">
                <p>Unify
                  <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                  <strong>successful</strong> business on web and mobile.</p>
                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
              </div>

              <a href="#!" 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-15 g-px-25 g-mr-15 g-mb-10 g-mb-0--sm">
                <i class="icon-handbag g-pos-rel g-top-1 g-mr-5"></i> Buy Full Version
              </a>
              <small class="d-block d-sm-inline-block g-color-white-opacity-0_8 g-font-size-12">*Exclusive item on Wrapboostrap Marketpalce</small>
            </div>
          </div>
        </div>
      </section>
      <!-- End Section 5 -->

      <!-- Section 6 -->
      <section class="g-py-100">
        <div class="container">
          <div class="row">
            <div class="col-md-6 align-self-center g-mb-50--md g-mb-0--md">
              <div class="u-heading-v2-3--bottom g-brd-primary g-mb-30">
                <h2 class="h1 u-heading-v2__title g-color-gray-dark-v2 text-uppercase g-font-weight-700">Variations of Passages</h2>
              </div>

              <div class="g-font-size-18 g-line-height-2 g-mb-30">
                <p>Unify
                  <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                  <strong>successful</strong> business on web and mobile.</p>
                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
              </div>

              <a href="#!" class="btn u-btn-primary u-shadow-v21 g-font-size-12 text-uppercase g-font-weight-600 g-rounded-50 g-py-15 g-px-25 g-mr-15 g-mb-10 g-mb-0--sm">
                <i class="icon-pie-chart g-pos-rel g-top-1 g-mr-5"></i> Buy Full Version
              </a>
              <small class="d-block d-sm-inline-block g-color-gray-dark-v5 g-font-size-12">*Exclusive item on Wrapboostrap Marketpalce</small>
            </div>

            <div class="col-md-6 align-self-center text-center g-overflow-hidden">
              <img class="img-fluid w-75" src="{{ root }}assets/img-temp/350x600/img1.png" alt="Image Description"
                   data-animation="fadeInUp"
                   data-animation-delay="0"
                   data-animation-duration="1000">
            </div>
          </div>

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

          <div class="row">
            <div class="col-md-6 align-self-center text-center g-overflow-hidden g-mb-50--md g-mb-0--md">
              <img class="img-fluid w-75" src="{{ root }}assets/img-temp/350x600/img1.png" alt="Image Description"
                   data-animation="fadeInUp"
                   data-animation-delay="0"
                   data-animation-duration="1000">
            </div>

            <div class="col-md-6 align-self-center">
              <div class="u-heading-v2-3--bottom g-brd-primary g-mb-30">
                <h2 class="h1 u-heading-v2__title g-color-gray-dark-v2 text-uppercase g-font-weight-700">Key Digital Services</h2>
              </div>

              <div class="g-font-size-18 g-line-height-2 g-mb-30">
                <p>Unify
                  <strong>creative</strong> technology company providing key digital services. Focused on helping our clients to build a
                  <strong>successful</strong> business on web and mobile.</p>
                <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
              </div>

              <a href="#!" class="btn u-btn-primary u-shadow-v21 g-font-size-12 text-uppercase g-font-weight-600 g-rounded-50 g-py-15 g-px-25 g-mr-15 g-mb-10 g-mb-0--sm">
                <i class="icon-pie-chart g-pos-rel g-top-1 g-mr-5"></i> Buy Full Version
              </a>
              <small class="d-block d-sm-inline-block g-color-gray-dark-v5 g-font-size-12">*Exclusive item on Wrapboostrap Marketpalce</small>
            </div>
          </div>
        </div>
      </section>
      <!-- End Section 6 -->

      <!-- Icon Blocks -->
      <section class="text-center">
        <div class="row no-gutters">
          <!-- Icon Blocks -->
          <div class="col-lg-4 u-bg-overlay g-bg-img-hero g-bg-cyan-opacity-0_9--after g-color-white text-center g-pa-60" style="background-image: url({{ root }}assets/img-temp/400x270/img6.jpg);">
            <div class="u-bg-overlay__inner">
              <span class="u-icon-v2 u-icon-size--lg u-shadow-v24 rounded-circle g-mb-25">
                <i class="icon-finance-226 u-line-icon-pro"></i>
              </span>
              <h3 class="h5 text-uppercase g-font-weight-600 g-mb-15">Invest To Us</h3>
              <p class="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 g-color-cyan g-color-white--hover g-bg-white-opacity-0_4--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>
          </div>
          <!-- End Icon Blocks -->

          <!-- Icon Blocks -->
          <div class="col-lg-4 u-bg-overlay g-bg-img-hero g-bg-purple-opacity-0_9--after g-color-white text-center g-pa-60" style="background-image: url({{ root }}assets/img-temp/400x270/img15.jpg);">
            <div class="u-bg-overlay__inner">
              <span class="u-icon-v2 u-icon-size--lg u-shadow-v24 rounded-circle g-mb-25">
                <i class="icon-finance-196 u-line-icon-pro"></i>
              </span>
              <h3 class="h5 text-uppercase g-font-weight-600 g-mb-15">Increase Income</h3>
              <p class="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 g-color-purple g-color-white--hover g-bg-white-opacity-0_4--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>
          </div>
          <!-- End Icon Blocks -->

          <!-- Icon Blocks -->
          <div class="col-lg-4 u-bg-overlay g-bg-img-hero g-bg-teal-opacity-0_9--after g-color-white text-center g-pa-60" style="background-image: url({{ root }}assets/img-temp/400x270/img7.jpg);">
            <div class="u-bg-overlay__inner">
              <span class="u-icon-v2 u-icon-size--lg u-shadow-v24 rounded-circle g-mb-25">
                <i class="icon-finance-147 u-line-icon-pro"></i>
              </span>
              <h3 class="h5 text-uppercase g-font-weight-600 g-mb-15">Collect Cash</h3>
              <p class="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 g-color-teal g-color-white--hover g-bg-white-opacity-0_4--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>
          </div>
          <!-- End Icon Blocks -->
        </div>
      </section>
      <!-- End Icon Blocks -->

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

    <!-- JS Revolution Slider -->
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/jquery.themepunch.tools.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/jquery.themepunch.revolution.min.js"></script>

    <script src="{{ root }}assets/vendor/revolution-slider/revolution-addons/slicey/js/revolution.addon.slicey.min.js"></script>

    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.actions.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.carousel.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.migration.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.navigation.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.parallax.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
    <script src="{{ root }}assets/vendor/revolution-slider/revolution/js/extensions/revolution.extension.video.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.onscroll-animation.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>
      // initialization of slider revolution
      var tpj = jQuery,
        revapi26;

      tpj(document).ready(function () {
        if (tpj("#rev_slider_26_1").revolution == undefined) {
          revslider_showDoubleJqueryError("#rev_slider_26_1");
        } else {
          revapi26 = tpj("#rev_slider_26_1").show().revolution({
            sliderType: "standard",
            jsFileLocation: "revolution/js/",
            sliderLayout: "fullscreen",
            dottedOverlay: "none",
            delay: 9000,
            navigation: {
              keyboardNavigation: "off",
              keyboard_direction: "horizontal",
              mouseScrollNavigation: "off",
              mouseScrollReverse: "default",
              onHoverStop: "off",
              touch: {
                touchenabled: "on",
                touchOnDesktop: "off",
                swipe_threshold: 75,
                swipe_min_touches: 1,
                swipe_direction: "horizontal",
                drag_block_vertical: false
              },
              arrows: {
                style: "uranus",
                enable: true,
                hide_onmobile: true,
                hide_under: 778,
                hide_onleave: false,
                tmp: '',
                left: {
                  h_align: "left",
                  v_align: "center",
                  h_offset: 15,
                  v_offset: 0
                },
                right: {
                  h_align: "right",
                  v_align: "center",
                  h_offset: 15,
                  v_offset: 0
                }
              },
              bullets: {
                enable: true,
                hide_onmobile: false,
                style: "bullet-bar",
                hide_onleave: false,
                direction: "horizontal",
                h_align: "center",
                v_align: "bottom",
                h_offset: 0,
                v_offset: 30,
                space: 5,
                tmp: ''
              }
            },
            responsiveLevels: [1240, 1024, 778, 480],
            visibilityLevels: [1240, 1024, 778, 480],
            gridwidth: [1240, 1024, 778, 480],
            gridheight: [868, 768, 960, 720],
            lazyType: "none",
            parallax: {
              type: "scroll",
              origo: "slidercenter",
              speed: 2000,
              levels: [5, 10, 15, 20, 25, 30, 35, 40, 45, 46, 47, 48, 49, 50, 51, 55]
            },
            shadow: 0,
            spinner: "off",
            stopLoop: "off",
            stopAfterLoops: -1,
            stopAtSlide: -1,
            shuffle: "off",
            autoHeight: "off",
            fullScreenAutoWidth: "off",
            fullScreenAlignForce: "off",
            fullScreenOffsetContainer: "",
            fullScreenOffset: "60px",
            hideThumbsOnMobile: "off",
            hideSliderAtLimit: 0,
            hideCaptionAtLimit: 0,
            hideAllCaptionAtLilmit: 0,
            debugMode: false,
            fallbacks: {
              simplifyAll: "off",
              nextSlideOnWindowFocus: "off",
              disableFocusListener: false
            }
          });
        }
      });

      $(document).on('ready', function () {
        // initialization of tabs
        $.HSCore.components.HSTabs.init('[role="tablist"]');

        // initialization of scroll animation
        $.HSCore.components.HSOnScrollAnimation.init('[data-animation]');

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