<div class="section">
  <div class="row">
    <div class="columns"> %%slider/master|plugin|3|5%% </div>
  </div>
</div>
<div class="section" style="padding:128px 0 32px 0">
  <div class="wojo-grid">
    <div class="row double-gutters align-middle">
      <div class="columns mobile-100 phone-100">
        <div data-weditable="true">
          <h2 class="wojo primary text">CMS Pro in <span class="wojo semi text">frames</span>
          </h2>
          <p>Enhance your brand with easy-to-use powerful customization features.</p>
          <p class="margin-bottom">The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
          <a href="#" class="wojo small primary right button" data-type="button">Find out More <i class="icon chevron right"></i></a>
        </div>
      </div>
      <div class="columns relative mobile-100 phone-100">
        <div class="row half-gutters">
          <div class="columns screen-40 tablet-40 mobile-50 phone-50 align-self-bottom">
            <a href="[SITEURL]/uploads/images/content_img4.jpg" class="wojo basic rounded image lightbox" data-gallery="images">
              <img src="[SITEURL]/uploads/thumbs/content_img4.jpg" data-weditable="true">
              <span class="viewer"><i class="icon plus"></i></span>
            </a>
          </div>
          <div class="columns screen-60 tablet-60 mobile-50 phone-50">
            <a href="[SITEURL]/uploads/images/content_img3.jpg" class="wojo basic rounded image lightbox" data-gallery="images">
              <img src="[SITEURL]/uploads/thumbs/content_img3.jpg" data-weditable="true">
              <span class="viewer"><i class="icon plus"></i></span>
            </a>
          </div>
          <div class="columns screen-offset-10 tablet-offset-10 screen-40 tablet-40 mobile-50 phone-50">
            <a href="[SITEURL]/uploads/images/content_img2.jpg" class="wojo basic rounded image lightbox" data-gallery="images">
              <img src="[SITEURL]/uploads/thumbs/content_img2.jpg" data-weditable="true" class="">
              <span class="viewer"><i class="icon plus"></i></span>
            </a>
          </div>
          <div class="columns screen-50 tablet-50 mobile-50 phone-50">
            <a href="[SITEURL]/uploads/images/content_img1.jpg" class="wojo basic rounded image lightbox" data-gallery="images">
              <img src="[SITEURL]/uploads/thumbs/content_img1.jpg" data-weditable="true">
              <span class="viewer"><i class="icon plus"></i></span>
            </a>
          </div>
        </div>
        <div style="z-index:-1;position: absolute;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);max-width: 100%">
          <figure class="wojo basic image">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1109.8 797.1">
              <path fill="#377dff" d="M105.1 267.1C35.5 331.5-3.5 423 .3 517.7 6.1 663 111 831.9 588.3 790.8c753-64.7 481.3-358.3 440.4-398.3-4-3.9-7.9-7.9-11.7-12L761.9 104.8C639.4-27.6 432.5-35.6 299.9 87L105.1 267.1z" opacity=".1"></path>
            </svg>
          </figure>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="section relative" style="padding:96px 0;background-color: #377dff;">
  <div class="wojo-grid">
    <div class="row align-center">
      <div class="columns screen-60 tablet-80 mobile-100 phone-100">
        <div class="content-center" data-weditable="true" style="position:relative;z-index:1">
          <a class="wojo white large passive circular icon button" data-type="button">
            <i class="icon big umbrella"></i>
          </a>
          <h1 class="wojo white text half-top-margin">Device <span class="wojo semi text">friendly</span> features</h1>
          <p class="wojo white dimmed thin medium text">Your website is fully responsive so visitors can view your content from their choice of device.</p>
        </div>
      </div>
    </div>
  </div>
  <figure class="absolute" style="top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);width:100%;z-index:0">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="803 -87.1 1653 222.1">
      <g fill="none" stroke="#FFF" stroke-miterlimit="10" opacity=".3">
        <path d="M803.5 113.1s1.3.4 3.8 1.2"></path>
        <path stroke-dasharray="7.9643,7.9643" d="M815 116.3c31.8 8.4 125.8 28.7 233.9 11.3 74.3-12 150.4-23.1 219.4-55 51.4-23.8 93.7-64.1 147.1-84.2 24.2-9.1 49.4-15.5 74.7-20.5 65.8-12.9 137.3-16.7 205.9-8 67.6 8.6 125.9 33.9 179.7 52.6 335.2 116.6 538.6-59.1 574.2-93.5"></path>
        <path d="M2452.7-83.7c1.8-1.9 2.8-2.9 2.8-2.9"></path>
      </g>
      <circle cx="2089.1" cy="52" r="7.9" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-opacity=".15" stroke-width="12"></circle>
      <circle cx="2089.1" cy="52" r="4.5" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-width="5"></circle>
      <circle cx="1400.1" cy="-5" r="7.9" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-opacity=".15" stroke-width="12"></circle>
      <circle cx="1400.1" cy="-5" r="4.5" fill="none" stroke="#FFF" stroke-miterlimit="10" stroke-width="5"></circle>
      <g fill="none" stroke="#FFF" stroke-miterlimit="10">
        <circle cx="1251.1" cy="79" r="7.9" stroke-opacity=".15" stroke-width="12"></circle>
        <circle cx="1251.1" cy="79" r="4.5" stroke-width="5"></circle>
      </g>
    </svg>
  </figure>
</div>
<div class="section" style="padding:96px 0 32px 0">
  <div class="wojo-grid">
    <div class="row align-center">
      <div class="columns screen-50 tablet-80 phone-100 mobile-100 content-center">
        What we do?
        <h3 class="wojo semi text">Fast and easy design</h3>
      </div>
    </div>
  </div>
</div>
<div class="section" style="padding:32px 0">
  <div class="wojo-grid">
    <div class="row screen-block-2 tablet-block-2 mobile-block-1 phone-block-1 double-gutters">
      <div class="column">
        <div class="wojo basic icon message" data-weditable="true">
          <figure class="wojo basic small image margin-right">
            <img src="[SITEURL]/uploads/builder/icon9.svg" alt="Email us">
          </figure>
          <div class="content half-left-padding">
            <h5>Responsive</h5>
            <p>CMS Pro is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
            <a href="#">Explore now <i class="icon middle chevron right" data-type="icon"></i></a>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="wojo basic icon message" data-weditable="true">
          <figure class="wojo basic small image margin-right">
            <img src="[SITEURL]/uploads/builder/icon3.svg" alt="Email us">
          </figure>
          <div class="content half-left-padding">
            <h5>Customizable</h5>
            <p>CMS Pro can be easily customized with its cutting-edge components and features.</p>
            <a href="#">Explore now <i class="icon middle chevron right" data-type="icon"></i></a>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="wojo basic icon message" data-weditable="true">
          <figure class="wojo basic small image margin-right">
            <img src="[SITEURL]/uploads/builder/icon5.svg" alt="Email us">
          </figure>
          <div class="content half-left-padding">
            <h5>Premium</h5>
            <p>We want to answer all of your queries. Get in touch and we'll get back to you as soon as we can.</p>
            <a href="#">Explore now <i class="icon middle chevron right" data-type="icon"></i></a>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="wojo basic icon message" data-weditable="true">
          <figure class="wojo basic small image margin-right">
            <img src="[SITEURL]/uploads/builder/icon2.svg" alt="Email us">
          </figure>
          <div class="content half-left-padding">
            <h5>Documentation </h5>
            <p>Every component and plugin is well documented with live examples.</p>
            <a href="#">Explore now <i class="icon middle chevron right" data-type="icon"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="section" style="padding:32px 0">
  <div class="wojo-grid">
    <div class="row">
      <div class="columns screen-100 tablet-100 mobile-100 phone-100 content-center">
        <div data-weditable="true">
          <span class="wojo positive label half-bottom-margin">Our Team</span>
          <h2 class="wojo primary text">Trust the <span class="wojo semi text">professionals</span>
          </h2>
          <p>Our top professionals are ready to help with your business.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="section" style="padding:32px 0 128px 0">
  <div class="wojo-grid">
    <div class="row">
      <div class="columns"> %%carousel/team|plugin|3|36%% </div>
    </div>
  </div>
</div>
<div class="section" style="padding:128px 0;background-color: #f8f9fa">
  <div class="wojo-grid">
    <div class="row double-vertical-gutters align-center">
      <div class="columns screen-60 tablet-80 mobile-100 phone-100 content-center">
        <div data-weditable="true" class="">
          <span class="wojo positive label half-bottom-margin">news</span>
          <h2 class="wojo primary text">Read our <span class="wojo semi text">news &amp; blogs</span>
          </h2>
          <p>Our duty towards you is to share our experience we're reaching in our work path with you.</p>
        </div>
      </div>
      <div class="columns screen-100 tablet-100 mobile-100 phone-100"> %%blog/carousel|plugin|0|37%% </div>
    </div>
  </div>
</div>