Icon Blocks

<!-- Icon Blocks Section -->
<div class="container space-top-2">
  <div class="row">
    <div class="col-md-4 mb-7">
      <div class="text-center px-lg-3">
        <span class="btn btn-icon btn-lg btn-soft-danger rounded-circle mb-5">
          <span class="fab fa-yelp btn-icon__inner fa-2x btn-icon__inner-bottom-minus"></span>
        </span>
        <h3 class="h5">Professional Design</h3>
        <p class="mb-md-0">Achieve virtually any design and layout from within the one template.</p>
      </div>
    </div>

    <div class="col-md-4 mb-7">
      <div class="text-center px-lg-3">
        <span class="btn btn-icon btn-lg btn-soft-primary rounded-circle mb-5">
          <span class="fas fa-fire btn-icon__inner fa-2x btn-icon__inner-bottom-minus"></span>
        </span>
        <h3 class="h5">Front Strategy</h3>
        <p class="mb-md-0">We strive to figure out ways to help your business grow through all platforms.</p>
      </div>
    </div>

    <div class="col-md-4 mb-7">
      <div class="text-center px-lg-3">
        <span class="btn btn-icon btn-lg btn-soft-success rounded-circle mb-5">
          <span class="fab fa-whmcs btn-icon__inner fa-2x btn-icon__inner-bottom-minus"></span>
        </span>
        <h3 class="h5">Unlimited Power</h3>
        <p class="mb-md-0">Find what you need in one template and combine features at will.</p>
      </div>
    </div>
  </div>
</div>
<!-- End Icon Blocks Section -->

<!-- Process Section -->
<div class="container space-2">
  <div class="row">
    <div class="col-md-4 mb-7 mb-md-0">
      <!-- Process -->
      <div class="text-center">
        <div class="position-relative">
          <div id="SVGcircleProcess1" class="svg-preloader u-indicator-dots min-height-155 mb-2">
            <!-- Icon -->
            <span class="text-success btn btn-lg btn-icon mt-7">
              <span class="fab fa-yelp font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
            </span>
            <!-- End Icon -->

            <!-- SVG Shape -->
            <figure class="w-100 position-absolute top-0 right-0 left-0 z-index-n1">
              <img class="js-svg-injector" src="../../assets/svg/components/circle-process-1.svg" alt="Image Description"
                   data-parent="#SVGcircleProcess1">
            </figure>
            <!-- End SVG Shape -->
          </div>
        </div>

        <h3 class="h5">Professional Design</h3>
        <p class="mb-md-0">Achieve virtually any design and layout from within the one template.</p>
      </div>
      <!-- End Process -->
    </div>

    <div class="col-md-4 mb-7 mb-md-0">
      <!-- Process -->
      <div class="text-center">
        <div class="position-relative">
          <div id="SVGcircleProcess2" class="svg-preloader u-indicator-dots min-height-155 mb-2">
            <!-- Icon -->
            <span class="text-primary btn btn-lg btn-icon mt-7">
              <span class="fas fa-fire font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
            </span>
            <!-- End Icon -->

            <!-- SVG Shape -->
            <figure class="w-100 position-absolute top-0 right-0 left-0 z-index-n1">
              <img class="js-svg-injector" src="../../assets/svg/components/circle-process-2.svg" alt="Image Description"
                   data-parent="#SVGcircleProcess2">
            </figure>
            <!-- End SVG Shape -->
          </div>
        </div>

        <h3 class="h5">Front Strategy</h3>
        <p class="mb-md-0">We strive to figure out ways to help your business grow through all platforms.</p>
        <!-- End Process -->
      </div>
    </div>

    <div class="col-md-4">
      <!-- Process -->
      <div class="text-center">
        <div id="SVGcircleProcess3" class="svg-preloader min-height-155 mb-2">
          <!-- Icon -->
          <span class="text-danger btn btn-lg btn-icon mt-7">
            <span class="fab fa-whmcs font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
          </span>
          <!-- End Icon -->

          <!-- SVG Shape -->
            <figure class="w-100 position-absolute top-0 right-0 left-0 z-index-n1">
              <img class="js-svg-injector" src="../../assets/svg/components/circle-process-3.svg" alt="Image Description"
                   data-parent="#SVGcircleProcess3">
            </figure>
            <!-- End SVG Shape -->
        </div>

        <h3 class="h5">Unlimited Power</h3>
        <p class="mb-md-0">Find what you need in one template and combine features at will.</p>
        <!-- End Process -->
      </div>
    </div>
  </div>
</div>
<!-- End Process Section -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });
</script>

<!-- Contacts Section -->
<div class="container">
  <div class="row space-2">
    <div class="col-lg-6 u-ver-divider u-ver-divider--none-lg mb-7 mb-lg-0">
      <!-- Contacts Info -->
      <div class="media pr-lg-9">
        <figure id="icon15" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-15.svg" alt="SVG"
               data-parent="#icon15">
        </figure>
        <div class="media-body">
          <h3 class="h5">Can't find your answer?</h3>
          <p class="mb-1">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 class="font-size-1" href="#">Email us <span class="fas fa-angle-right align-middle ml-2"></span></a>
        </div>
      </div>
      <!-- End Contacts Info -->
    </div>

    <div class="col-lg-6">
      <!-- Contacts Info -->
      <div class="media pl-lg-9">
        <figure id="icon4" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-4.svg" alt="SVG"
               data-parent="#icon4">
        </figure>
        <div class="media-body">
          <h3 class="h5">Technical questions</h3>
          <p class="mb-1">Have some technical questions? Hit us on community page or just say hello.</p>
          <a class="font-size-1" href="#">Open ticket <span class="fas fa-angle-right align-middle ml-2"></span></a>
        </div>
      </div>
      <!-- End Contacts Info -->
    </div>
  </div>
</div>
<!-- End Contacts Section -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });
</script>

<!-- Icon Blocks Section -->
<div class="container space-2">
  <div class="row justify-content-md-between">
    <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-0 mb-9 mb-lg-0">
      <!-- Icon Block -->
      <div class="text-center px-lg-5">
        <figure id="icon12" class="svg-preloader ie-height-72 max-width-10 mx-auto mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-12.svg" alt="SVG"
               data-parent="#icon12">
        </figure>
        <h3 class="h5">Property guides</h3>
        <p>A must-have read for anyone buying or selling property.</p>
        <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
          Learn More
          <span class="fas fa-angle-right ml-2"></span>
        </a>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-sm-6 col-lg-4 mb-9 mb-lg-0">
      <!-- Icon Block -->
      <div class="text-center px-lg-5">
        <figure id="icon10" class="svg-preloader ie-height-72 max-width-10 mx-auto mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-10.svg" alt="SVG"
               data-parent="#icon10">
        </figure>
        <h3 class="h5">Affordability calculator</h3>
        <p>Find out how much you could borrow.</p>
        <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
          Check Now
          <span class="fas fa-angle-right ml-2"></span>
        </a>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-sm-6 col-lg-4">
      <!-- Icon Block -->
      <div class="text-center px-lg-5">
        <figure id="icon11" class="svg-preloader ie-height-72 max-width-10 mx-auto mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-11.svg" alt="SVG"
               data-parent="#icon11">
        </figure>
        <h3 class="h5">Mortgage calculator</h3>
        <p>Calculate monthly mortgage payments.</p>
        <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
          Check Now
          <span class="fas fa-angle-right ml-2"></span>
        </a>
      </div>
      <!-- End Icon Block -->
    </div>
  </div>
</div>
<!-- End Icon Blocks Section -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });
</script>

<!-- Contacts Info Section -->
<div class="clearfix space-2">
  <div class="row no-gutters">
    <div class="col-sm-6 col-lg-3 u-ver-divider u-ver-divider--none-lg">
      <!-- Contacts Info -->
      <div class="text-center py-5">
        <figure id="icon8" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-8.svg" alt="SVG"
               data-parent="#icon8">
        </figure>
        <h2 class="h6 mb-0">Address</h2>
        <p class="mb-0">153 Williamson Plaza, 09514</p>
      </div>
      <!-- End Contacts Info -->
    </div>

    <div class="col-sm-6 col-lg-3 u-ver-divider u-ver-divider--none-lg">
      <!-- Contacts Info -->
      <div class="text-center py-5">
        <figure id="icon15" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-15.svg" alt="SVG"
               data-parent="#icon15">
        </figure>
        <h3 class="h6 mb-0">Email</h3>
        <p class="mb-0">support@htmlstream.com</p>
      </div>
      <!-- End Contacts Info -->
    </div>

    <div class="col-sm-6 col-lg-3 u-ver-divider u-ver-divider--none-lg">
      <!-- Contacts Info -->
      <div class="text-center py-5">
        <figure id="icon16" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-16.svg" alt="SVG"
               data-parent="#icon16">
        </figure>
        <h3 class="h6 mb-0">Phone Number</h3>
        <p class="mb-0">+1 (062) 109-9222</p>
      </div>
      <!-- End Contacts Info -->
    </div>

    <div class="col-sm-6 col-lg-3">
      <!-- Contacts Info -->
      <div class="text-center py-5">
        <figure id="icon17" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-17.svg" alt="SVG"
               data-parent="#icon17">
        </figure>
        <h3 class="h6 mb-0">Fax</h3>
        <p class="mb-0">+1 (062) 109-9223</p>
      </div>
      <!-- End Contacts Info -->
    </div>
  </div>
</div>
<!-- End Contacts Info Section -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });
</script>

<!-- Features Section -->
<div class="container space-2">
  <div class="row">
    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
      <!-- Icon Block -->
      <div class="pr-lg-4">
        <figure id="icon2" class="svg-preloader ie-height-56 max-width-8 mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-2.svg" alt="SVG"
               data-parent="#icon2">
        </figure>
        <p>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 a key point.</p>
        <a href="#">Learn More</a>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
      <!-- Icon Block -->
      <div class="pr-lg-4">
        <figure id="icon1" class="svg-preloader ie-height-56 max-width-8 mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-1.svg" alt="SVG"
               data-parent="#icon1">
        </figure>
        <p>Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.</p>
        <a href="#">Learn More</a>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
      <!-- Icon Block -->
      <div class="pr-lg-4">
        <figure id="icon3" class="svg-preloader ie-height-56 max-width-8 mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-3.svg" alt="SVG"
               data-parent="#icon3">
        </figure>
        <p>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="#">Learn More</a>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
      <!-- Icon Block -->
      <div class="pr-lg-4">
        <figure id="icon4" class="svg-preloader ie-height-56 max-width-8 mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-4.svg" alt="SVG"
               data-parent="#icon4">
        </figure>
        <p>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.</p>
        <a href="#">Learn More</a>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
      <!-- Icon Block -->
      <div class="pr-lg-4">
        <figure id="icon5" class="svg-preloader ie-height-56 max-width-8 mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-5.svg" alt="SVG"
               data-parent="#icon5">
        </figure>
        <p>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>
        <a href="#">Learn More</a>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
      <!-- Icon Block -->
      <div class="pr-lg-4">
        <figure id="icon6" class="svg-preloader ie-height-56 max-width-8 mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-6.svg" alt="SVG"
               data-parent="#icon6">
        </figure>
        <p>We get it, you're busy and it is important that someone keep up with marketing and driving people to your brand. We've got you covered.</p>
        <a href="#">Learn More</a>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
      <!-- Icon Block -->
      <div class="pr-lg-4">
        <figure id="icon7" class="svg-preloader ie-height-56 max-width-8 mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-7.svg" alt="SVG"
               data-parent="#icon7">
        </figure>
        <p>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>
        <a href="#">Learn More</a>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
      <!-- Icon Block -->
      <div class="pr-lg-4">
        <figure id="icon8" class="svg-preloader ie-height-56 max-width-8 mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-8.svg" alt="SVG"
               data-parent="#icon8">
        </figure>
        <p>We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
        <a href="#">Learn More</a>
      </div>
      <!-- End Icon Block -->
    </div>

    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9 mb-lg-0">
      <!-- Icon Block -->
      <div class="pr-lg-4">
        <figure id="icon9" class="svg-preloader ie-height-56 max-width-8 mb-3">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-9.svg" alt="SVG"
               data-parent="#icon9">
        </figure>
        <p>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.</p>
        <a href="#">Learn More</a>
      </div>
      <!-- End Icon Block -->
    </div>
  </div>

  <!-- Divider -->
  <div class="w-65 w-lg-50 mx-auto">
    <hr class="mt-0 mb-9">
  </div>
  <!-- End Divider -->

  <div class="text-center">
    <a href="#" class="btn btn-primary transition-3d-hover">See all Features</a>
  </div>
</div>
<!-- End Features Section -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });
</script>

<!-- Icon Blocks -->
<div class="container space-2">
  <div class="row">
    <div class="col-md-4 mb-7 mb-md-0">
      <!-- Contacts -->
      <div class="media">
        <span class="btn btn-icon btn-soft-primary rounded-circle mr-3">
          <span class="fas fa-phone btn-icon__inner"></span>
        </span>
        <div class="media-body">
          <h4 class="h6 text-secondary font-weight-normal mb-0">Call us</h4>
          <span class="d-block font-size-1">+1 (062) 109-9222</span>
        </div>
      </div>
      <!-- End Contacts -->
    </div>

    <div class="col-md-4 mb-7 mb-md-0">
      <!-- Contacts -->
      <div class="media">
        <span class="btn btn-icon btn-soft-primary rounded-circle mr-3">
          <span class="fas fa-envelope btn-icon__inner"></span>
        </span>
        <div class="media-body">
          <h4 class="h6 text-secondary font-weight-normal mb-0">Email us</h4>
          <span class="d-block font-size-1">support@htmlstream.com</span>
        </div>
      </div>
      <!-- End Contacts -->
    </div>

    <div class="col-md-4">
      <!-- Contacts -->
      <div class="media">
        <span class="btn btn-icon btn-soft-primary rounded-circle mr-3">
          <span class="fas fa-map-marker-alt btn-icon__inner"></span>
        </span>
        <div class="media-body">
          <h4 class="h6 text-secondary font-weight-normal mb-0">Address</h4>
          <span class="d-block font-size-1">153 Williamson Plaza, Maggieberg</span>
        </div>
      </div>
      <!-- End Contacts -->
    </div>
  </div>
</div>
<!-- End Icon Blocks -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });
</script>

<!-- Icon Blocks -->
<div class="container space-2">
  <div class="row">
    <div class="col-md-6 col-lg-4">
      <!-- List Group -->
      <ul class="list-group list-group-transparent list-group-flush list-group-borderless mb-0">
        <li class="list-group-item pt-0 pb-4">
          <div class="media">
            <span class="fas fa-envelope list-group-icon mr-3"></span>
            <div class="media-body text-lh-sm">
              <span class="d-block mb-1">Email:</span>
              <a href="#">natalie.curtis@gmail.com</a>
            </div>
          </div>
        </li>
        <li class="list-group-item pt-0 pb-4">
          <div class="media">
            <span class="fas fa-link list-group-icon mr-3"></span>
            <div class="media-body text-lh-sm">
              <span class="d-block mb-1">Web page:</span>
              <a href="#">www.htmlstream.com/natalie</a>
            </div>
          </div>
        </li>
        <li class="list-group-item pt-0 pb-4">
          <div class="media">
            <span class="fas fa-map-marker-alt list-group-icon mr-3"></span>
            <div class="media-body text-lh-sm">
              <span class="d-block mb-1">Location:</span>
              <a href="#">London, England</a>
            </div>
          </div>
        </li>
      </ul>
      <!-- End List Group -->
    </div>

    <div class="col-md-6 col-lg-4">
      <!-- List Group -->
      <ul class="list-group list-group-transparent list-group-flush list-group-borderless mb-0">
        <li class="list-group-item pt-0 pb-4">
          <div class="media">
            <span class="fas fa-birthday-cake list-group-icon mr-3"></span>
            <div class="media-body text-lh-sm">
              <span class="d-block mb-1">Birthday:</span>
              <span class="d-block text-muted">May 3, 1986</span>
            </div>
          </div>
        </li>
        <li class="list-group-item pt-0 pb-4">
          <div class="media">
            <span class="fas fa-building list-group-icon mr-3"></span>
            <div class="media-body text-lh-sm">
              <span class="d-block mb-1">Organization:</span>
              <a href="#">Pixeel Ltd.</a>
            </div>
          </div>
        </li>
        <li class="list-group-item pt-0 pb-4">
          <div class="media">
            <span class="fas fa-mobile-alt list-group-icon mr-3"></span>
            <div class="media-body text-lh-sm">
              <span class="d-block mb-1">Phone number:</span>
              <a href="#">+44 (0161) 347 8854</a>
            </div>
          </div>
        </li>
      </ul>
      <!-- End List Group -->
    </div>

    <div class="col-md-6 col-lg-4">
      <!-- List Group -->
      <ul class="list-group list-group-transparent list-group-flush list-group-borderless mb-0">
        <li class="list-group-item pt-0 pb-4">
          <div class="media">
            <span class="fas fa-globe list-group-icon mr-3"></span>
            <div class="media-body text-lh-sm">
              <span class="d-block mb-1">Language:</span>
              <span class="d-block text-muted">English, French</span>
            </div>
          </div>
        </li>
        <li class="list-group-item pt-0 pb-4">
          <div class="media">
            <span class="fas fa-tags list-group-icon mr-3"></span>
            <div class="media-body text-lh-sm">
              <span class="d-block mb-1">Skills:</span>
              <a href="#">HTML5,</a>
              <a href="#">CSS3,</a>
              <a href="#">JavaScript,</a>
              <a href="#">jQuery</a>
            </div>
          </div>
        </li>
      </ul>
      <!-- End List Group -->
    </div>
  </div>
</div>
<!-- End Icon Blocks -->

<!-- Social Profiles -->
<div class="card mb-4">
  <div class="card-header pt-4 pb-3 px-0 mx-4">
    <h3 class="h6 mb-0">Social Profiles</h3>
  </div>

  <div class="card-body pt-3 pb-4 px-4">
    <!-- Social Profiles -->
    <a class="media mb-4" href="#">
      <div class="u-sm-avatar mr-3">
        <img class="img-fluid" src="../../assets/img/160x160/img18.png" alt="Image Description">
      </div>
      <div class="media-body">
        <span class="d-block text-dark">Behance</span>
        <small class="d-block text-secondary">1.2k followers</small>
      </div>
    </a>
    <!-- End Social Profiles -->

    <!-- Social Profiles -->
    <a class="media mb-4" href="#">
      <div class="u-sm-avatar mr-3">
        <img class="img-fluid" src="../../assets/img/160x160/img21.png" alt="Image Description">
      </div>
      <div class="media-body">
        <span class="d-block text-dark">Dribbble</span>
        <small class="d-block text-secondary">4.5k followers</small>
      </div>
    </a>
    <!-- End Social Profiles -->

    <!-- Social Profiles -->
    <a class="media mb-4" href="#">
      <div class="u-sm-avatar mr-3">
        <img class="img-fluid" src="../../assets/img/160x160/img19.png" alt="Image Description">
      </div>
      <div class="media-body">
        <span class="d-block text-dark">Twitter</span>
        <small class="d-block text-secondary">2.7k followers</small>
      </div>
    </a>
    <!-- End Social Profiles -->

    <!-- Social Profiles -->
    <a class="media" href="#">
      <div class="u-sm-avatar mr-3">
        <img class="img-fluid" src="../../assets/img/160x160/img20.png" alt="Image Description">
      </div>
      <div class="media-body">
        <span class="d-block text-dark">Facebook</span>
        <small class="d-block text-secondary">3k followers</small>
      </div>
    </a>
    <!-- End Social Profiles -->
  </div>
</div>
<!-- End Social Profiles -->

<!-- Icon Blocks Section -->
<div class="container space-2">
  <div class="row justify-content-lg-center">
    <div class="col-md-6 col-lg-5 mb-7">
      <!-- Icon Blocks -->
      <div class="media pr-lg-5">
        <figure id="icon9" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-9.svg" alt="SVG"
               data-parent="#icon9">
        </figure>
        <div class="media-body">
          <h3 class="h5">Responsive</h3>
          <p class="mb-1">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
          <a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-md-6 col-lg-5 mb-7">
      <!-- Icon Blocks -->
      <div class="media pl-lg-5">
        <figure id="icon3" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-3.svg" alt="SVG"
               data-parent="#icon3">
        </figure>
        <div class="media-body">
          <h3 class="h5">Customizable</h3>
          <p class="mb-1">Front template can be easily customized with its cutting-edge components and features.</p>
          <a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="w-100"></div>

    <div class="col-md-6 col-lg-5 mb-7 mb-lg-0">
      <!-- Icon Blocks -->
      <div class="media pr-lg-5">
        <figure id="icon5" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-5.svg" alt="SVG"
               data-parent="#icon5">
        </figure>
        <div class="media-body">
          <h3 class="h5">Premium</h3>
          <p class="mb-1">Front is not only for developers but also for designers, and includes a Sketch file.</p>
          <a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>

    <div class="col-md-6 col-lg-5">
      <!-- Icon Blocks -->
      <div class="media pl-lg-5">
        <figure id="icon2" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
          <img class="js-svg-injector" src="../../assets/svg/icons/icon-2.svg" alt="SVG"
               data-parent="#icon2">
        </figure>
        <div class="media-body">
          <h3 class="h5">Documentation <span class="badge badge-success font-weight-medium badge-pill ml-1">v2.0</span></h3>
          <p class="mb-1">Every component and plugin is well documented with live examples.</p>
          <a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
        </div>
      </div>
      <!-- End Icon Blocks -->
    </div>
  </div>
</div>
<!-- End Icon Blocks Section -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });
</script>

<!-- What We Do Section -->
<div class="container space-2">
  <div class="row justify-content-lg-between">
    <div class="col-lg-4 mb-7 mb-lg-0">
      <!-- Title -->
      <small class="text-secondary text-uppercase font-weight-medium mb-2">What we do?</small>
      <h3 class="font-weight-medium">More control and greater overview from simple, powerful features</h3>
      <p>This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
      <!-- End Title -->
    </div>

    <div class="col-lg-7">
      <div class="row">
        <div class="col-sm-6 mb-3">
          <!-- Icon Blocks -->
          <figure id="icon26" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
            <img class="js-svg-injector" src="../../assets/svg/icons/icon-26.svg" alt="SVG"
                 data-parent="#icon26">
          </figure>
          <h4 class="h5">Marketing</h4>
          <p class="font-size-1">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
          <!-- End Icon Blocks -->
        </div>

        <div class="col-sm-6 mb-3">
          <!-- Icon Blocks -->
          <figure id="icon27" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
            <img class="js-svg-injector" src="../../assets/svg/icons/icon-27.svg" alt="SVG"
                 data-parent="#icon27">
          </figure>
          <h4 class="h5">Clean design</h4>
          <p class="font-size-1">Front template can be easily customized with its cutting-edge components and features.</p>
          <!-- End Icon Blocks -->
        </div>

        <div class="w-100"></div>

        <div class="col-sm-6 mb-3 mb-sm-0">
          <!-- Icon Blocks -->
          <figure id="icon25" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
            <img class="js-svg-injector" src="../../assets/svg/icons/icon-25.svg" alt="SVG"
                 data-parent="#icon25">
          </figure>
          <h4 class="h5">Social services <span class="badge badge-success font-weight-medium badge-pill ml-1">beta</span></h4>
          <p class="font-size-1">Front is not only for developers but also for designers, and includes a Sketch file.</p>
          <!-- End Icon Blocks -->
        </div>

        <div class="col-sm-6">
          <!-- Icon Blocks -->
          <figure id="icon28" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
            <img class="js-svg-injector" src="../../assets/svg/icons/icon-28.svg" alt="SVG"
                 data-parent="#icon28">
          </figure>
          <h4 class="h5">Creative ideas</h4>
          <p class="font-size-1">Every component and plugin is well documented with live examples.</p>
          <!-- End Icon Blocks -->
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End What We Do Section -->

<!-- Sidebar Info -->
<div class="card border-0 shadow-sm mb-3">
  <!-- Header -->
  <header id="SVGwave1BottomShapeID1" class="svg-preloader card-header border-bottom-0 bg-primary text-white p-0">
    <div class="pt-5 px-5">
      <h3 class="h5">Job Summary</h3>
    </div>

    <figure class="ie-wave-1-bottom mt-n5">
      <img class="js-svg-injector" src="../../assets/svg/components/wave-1-bottom.svg" alt="Image Description"
           data-parent="#SVGwave1BottomShapeID1">
    </figure>
  </header>
  <!-- End Header -->

  <!-- Content -->
  <div class="card-body pt-1 px-5 pb-5">
    <!-- Icon Block -->
    <div class="media mb-3">
      <div class="min-width-4 text-center text-primary mt-1 mr-3">
        <span class="fas fa-globe"></span>
      </div>
      <div class="media-body">
        <a class="font-weight-medium" href="#">www.slack.com</a>
        <small class="d-block text-secondary">Website</small>
      </div>
    </div>
    <!-- End Icon Block -->

    <!-- Icon Block -->
    <div class="media mb-3">
      <div class="min-width-4 text-center text-primary mt-1 mr-3">
        <span class="fas fa-map-marked-alt"></span>
      </div>
      <div class="media-body">
        <span class="d-block font-weight-medium">London, UK</span>
        <small class="d-block text-secondary">Location</small>
      </div>
    </div>
    <!-- End Icon Block -->

    <!-- Icon Block -->
    <div class="media mb-3">
      <div class="min-width-4 text-center text-primary mt-1 mr-3">
        <span class="fas fa-clock"></span>
      </div>
      <div class="media-body">
        <span class="d-block font-weight-medium">Full time</span>
        <small class="d-block text-secondary">Job type</small>
      </div>
    </div>
    <!-- End Icon Block -->

    <!-- Icon Block -->
    <div class="media mb-3">
      <div class="min-width-4 text-center text-primary mt-1 mr-3">
        <span class="fas fa-business-time"></span>
      </div>
      <div class="media-body">
        <span class="d-block font-weight-medium">1 to 3 months</span>
        <small class="d-block text-secondary">Project length</small>
      </div>
    </div>
    <!-- End Icon Block -->

    <!-- Icon Block -->
    <div class="media mb-3">
      <div class="min-width-4 text-center text-primary mt-1 mr-3">
        <span class="fas fa-money-bill-alt"></span>
      </div>
      <div class="media-body">
        <span class="d-block font-weight-medium">Salary</span>
        <small class="d-block text-secondary">$28k - $32k</small>
      </div>
    </div>
    <!-- End Icon Block -->

    <!-- Icon Block -->
    <div class="media mb-3">
      <div class="min-width-4 text-center text-primary mt-1 mr-3">
        <span class="fas fa-briefcase"></span>
      </div>
      <div class="media-body">
        <span class="d-block font-weight-medium">Entry level</span>
        <small class="d-block text-secondary">We are looking for freelancers with the lowest rates.</small>
      </div>
    </div>
    <!-- End Icon Block -->
  </div>
  <!-- End Content -->
</div>
<!-- End Sidebar Info -->

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });
</script>

<div class="row">
  <div class="col-sm-6 mb-5">
    <!-- Icon Block -->
    <div class="media">
      <figure id="iconExample21" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
        <img class="js-svg-injector" src="../../assets/svg/illustrations/medal.svg" alt="SVG"
             data-parent="#iconExample21">
      </figure>
      <div class="media-body">
        <h3 class="h6 mb-1">Veteran Hiring Commitment</h3>
        <p>Committed to helping America's military veterans find work.</p>
      </div>
    </div>
    <!-- End Icon Block -->
  </div>

  <div class="col-sm-6 mb-5">
    <!-- Icon Block -->
    <div class="media">
      <figure id="iconExample25" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
        <img class="js-svg-injector" src="../../assets/svg/illustrations/social-responsibility.svg" alt="SVG"
             data-parent="#iconExample25">
      </figure>
      <div class="media-body">
        <h4 class="h6 mb-1">Social Responsibility Pledge</h4>
        <p>Formal programs or foundation to give back to communities.</p>
      </div>
    </div>
    <!-- End Icon Block -->
  </div>

  <div class="w-100"></div>

  <div class="col-sm-6 mb-5 mb-sm-0">
    <!-- Icon Block -->
    <div class="media">
      <figure id="iconExample7" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
        <img class="js-svg-injector" src="../../assets/svg/illustrations/diversity.svg" alt="SVG"
             data-parent="#iconExample7">
      </figure>
      <div class="media-body">
        <h4 class="h6 mb-1">Diversity Commitment</h4>
        <p>Has programs that support a diverse and inclusive workforce.</p>
      </div>
    </div>
    <!-- End Icon Block -->
  </div>

  <div class="col-sm-6">
    <!-- Icon Block -->
    <div class="media">
      <figure id="iconExample29" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
        <img class="js-svg-injector" src="../../assets/svg/illustrations/growth.svg" alt="SVG"
             data-parent="#iconExample29">
      </figure>
      <div class="media-body">
        <h4 class="h6 mb-1">Pledge to Thrive</h4>
        <p>Taking steps to prioritize employee well-being.</p>
      </div>
    </div>
    <!-- End Icon Block -->
  </div>
</div>

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.svg-injector.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(window).on('load', function () {
    // initialization of svg injector module
    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
  });
</script>

<!-- Icons Section -->
<div class="position-relative gradient-overlay-half-primary-v3 overflow-hidden">
  <div class="container space-top-2 space-top-lg-3">
    <!-- Title -->
    <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-9">
      <h2 class="text-white font-weight-medium">Go Front with ease.</h2>
      <p class="text-white-70">Whether you’re a seasoned agile expert, or just getting started, Jira Software unlocks the power of agile.</p>
    </div>
    <!-- End Title -->

    <!-- Icon Blocks -->
    <div class="w-lg-80 mx-lg-auto mb-11">
      <div class="row mb-9">
        <div class="col-6 col-md-4 mb-7">
          <!-- Icon Block -->
          <span class="d-block text-white font-size-2 mb-3">
            <span class="fas fa-align-center"></span>
          </span>
          <h4 class="h6 text-white font-weight-semi-bold mb-3">Flexible planning</h4>
          <p class="text-white-70">Front Software's rich planning features enable your team to flexibly plan.</p>
          <!-- End Icon Block -->
        </div>

        <div class="col-6 col-md-4 mb-7">
          <!-- Icon Block -->
          <span class="d-block text-white font-size-2 mb-3">
            <span class="fas fa-code-branch"></span>
          </span>
          <h4 class="h6 text-white font-weight-semi-bold mb-3">Accurate estimations</h4>
          <p class="text-white-70">Use story points, hours, t-shirt sizes, or your own estimation technique.</p>
          <!-- End Icon Block -->
        </div>

        <div class="col-6 col-md-4 mb-7 mb-md-0">
          <!-- Icon Block -->
          <span class="d-block text-white font-size-2 mb-3">
            <span class="fas fa-shapes"></span>
          </span>
          <h4 class="h6 text-white font-weight-semi-bold mb-3">Value-driven prioritization</h4>
          <p class="text-white-70">Order user stories, issues, and bugs in your product backlog with simple dragging.</p>
          <!-- End Icon Block -->
        </div>

        <div class="col-6 col-md-4 mb-7 mb-md-0">
          <!-- Icon Block -->
          <span class="d-block text-white font-size-2 mb-3">
            <span class="fas fa-clone"></span>
          </span>
          <h4 class="h6 text-white font-weight-semi-bold mb-3">Transparent execution</h4>
          <p class="text-white-70">Front Software brings a new level of transparency to your team's work.</p>
          <!-- End Icon Block -->
        </div>

        <div class="col-6 col-md-4">
          <!-- Icon Block -->
          <span class="d-block text-white font-size-2 mb-3">
            <span class="fas fa-check-circle"></span>
          </span>
          <h4 class="h6 text-white font-weight-semi-bold mb-3">Actionable results</h4>
          <p class="text-white-70">Extensive reporting functionality gives your team critical insight into their agile process.</p>
          <!-- End Icon Block -->
        </div>

        <div class="col-6 col-md-4">
          <!-- Icon Block -->
          <span class="d-block text-white font-size-2 mb-3">
            <span class="fas fa-compress"></span>
          </span>
          <h4 class="h6 text-white font-weight-semi-bold mb-3">Scalable evolution <span class="badge badge-warning font-weight-medium badge-pill ml-1">Coming soon</span></h4>
          <p class="text-white-70">Front Software is agile project management designed for any teams.</p>
          <!-- End Icon Block -->
        </div>
      </div>

      <!-- Buttons -->
      <div class="text-center">
        <div class="mb-3">
          <a class="btn btn-sm btn-white btn-wide text-primary transition-3d-hover" href="#">Sign up and Start Building</a>
          <small class="d-block d-sm-inline-block text-white-70 my-3 my-sm-0 mx-sm-3">or</small>
          <a class="btn btn-sm btn-indigo btn-wide transition-3d-hover" href="#">Talk to our Experts</a>
        </div>
        <p class="small text-white-70">Start free trial. * No credit card required.</p>
      </div>
      <!-- End Buttons -->
    </div>
    <!-- End Icon Blocks -->

    <div class="w-85 w-md-75 w-lg-65 text-center mx-auto">
      <img class="img-fluid" src="../../assets/svg/illustrations/ai-creation.svg" alt="Image Description">
    </div>
  </div>

  <!-- SVG Background Shape -->
  <figure class="w-35 position-absolute top-0 right-0 z-index-n1">
    <div class="mt-n11 mr-n11">
      <img class="js-svg-injector" src="../../assets/svg/components/half-circle-3.svg" alt="Image Description"
           data-parent="#SVGHero">
    </div>
  </figure>
  <figure class="w-25 position-absolute bottom-0 left-0 z-index-n1">
    <div class="mb-n11 ml-n11">
      <img class="js-svg-injector" src="../../assets/svg/components/half-circle-2.svg" alt="Image Description"
           data-parent="#SVGHero">
    </div>
  </figure>
  <!-- End SVG Background Shape -->
</div>
<!-- End Icons Section -->