Feature Cards

                    
                      <!-- Muse Section -->
                      <section class="muse-section">
                        <div class="row">
                          <div class="col-md-6 col-lg-4 mb-md-4 mb-lg-0">
                            <div class="card rounded-12 p-4 px-xl-5 pt-xl-5 pb-4 border-gray-200 transition-3d-hover h-100 shadow">
                              <h4>Powerful Editing</h4>
                              <p>Never worry about resizing</p>
                              <img src="../assets/img/templates/powerfull.svg" class="img-fluid mt-4" alt="Powerfull">
                              <div class="ml-auto mt-4 mt-lg-5 mb-1 pt-md-4">
                                <a href="javascript:void(0);" class="btn btn-icon shadow-dark-80 circle circle-md p-2 green-hover">
                                  <svg data-name="icons/tabler/play-fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                    <rect data-name="Icons/Tabler/Play Fill background" width="16" height="16" fill="none"></rect>
                                    <path d="M0,.687V15.313a.672.672,0,0,0,1.025.584L12.68,8.584a.693.693,0,0,0,0-1.168L1.025.1A.672.672,0,0,0,0,.687Z" transform="translate(3)" fill="#1e1e1e"></path>
                                  </svg>
                                </a>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-4 mb-md-4 mb-lg-0">
                            <div class="card rounded-12 p-4 px-xl-5 pt-xl-5 pb-4 border-gray-200 transition-3d-hover h-100 shadow">
                              <h4>Timeline</h4>
                              <p>Pixel perfect animation</p>
                              <img src="../assets/img/templates/timeline.svg" class="img-fluid mt-4" alt="Powerfull">
                              <div class="ml-auto mt-4 mt-lg-5 mb-1 pt-md-4">
                                <a href="javascript:void(0);" class="btn btn-icon shadow-dark-80 circle circle-md p-2 green-hover">
                                  <svg data-name="icons/tabler/play-fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                    <rect data-name="Icons/Tabler/Play Fill background" width="16" height="16" fill="none"></rect>
                                    <path d="M0,.687V15.313a.672.672,0,0,0,1.025.584L12.68,8.584a.693.693,0,0,0,0-1.168L1.025.1A.672.672,0,0,0,0,.687Z" transform="translate(3)" fill="#1e1e1e"></path>
                                  </svg>                
                                </a>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-6 col-lg-4">
                            <div class="card rounded-12 p-4 px-xl-5 pt-xl-5 pb-4 border-gray-200 transition-3d-hover h-100 shadow">
                              <h4>Smart Curves</h4>
                              <p>Smooth actions at ease</p>
                              <img src="../assets/img/templates/smart-curves.svg" class="img-fluid mt-4" alt="Powerfull">
                              <div class="ml-auto mt-4 mt-lg-5 mb-1 pt-md-4">
                                <a href="javascript:void(0);" class="btn btn-icon shadow-dark-80 circle circle-md p-2 green-hover">
                                  <svg data-name="icons/tabler/play-fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                                    <rect data-name="Icons/Tabler/Play Fill background" width="16" height="16" fill="none"></rect>
                                    <path d="M0,.687V15.313a.672.672,0,0,0,1.025.584L12.68,8.584a.693.693,0,0,0,0-1.168L1.025.1A.672.672,0,0,0,0,.687Z" transform="translate(3)" fill="#1e1e1e"></path>
                                  </svg>  
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </section>
                    
                  

                    
                      <div class="bg-black-800 saas-template">
                        <div class="container">
                          <!-- Muse Section -->
                          <section class="muse-section">
                            <div class="row">
                              <div class="col-xl-10">
                                <h2 class="display-4 mb-3">Trusted by millions of users.</h2>
                                <p class="has-line big lh-lg pr-lg-5">The main goal was to further improve Sketch user interface for a non-obstructive workflow while maintaining familiarity.</p>
                              </div>
                            </div>
                            <div class="row mt-md-3">
                              <div class="col-md-6 aos-init">
                                <figure class="p-4 pt-xl-5 pb-xl-4 px-xl-5 mt-4 mb-0 rounded-12 bg-gray-800 transition-3d-hover users-watch h-100">
                                  <div class="py-4 py-lg-5 my-5 text-center">
                                    <div class="icon-circle rounded-pill bg-danger"><img src="../assets/img/templates/cloud.svg" alt="img"></div>
                                  </div>
                                  <figcaption>
                                    <h6 class="font-weight-semibold">
                                      <a href="#0" class="d-inline-flex align-items-center text-white">
                                        <span class="btn btn-icon circle circle-md mr-3 bg-white">
                                          <svg data-name="icons/tabler/play-fill" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16">
                                            <rect data-name="Icons/Tabler/Play Fill background" width="16" height="16" fill="none"></rect>
                                            <path d="M0,.687V15.313a.672.672,0,0,0,1.025.584L12.68,8.584a.693.693,0,0,0,0-1.168L1.025.1A.672.672,0,0,0,0,.687Z" transform="translate(3)" fill="#1e1e1e"></path>
                                          </svg>                    
                                        </span>
                                        Watch example
                                      </a>
                                    </h6>
                                    <h2>Cloud sharing platform for designers</h2>
                                  </figcaption>
                                </figure>
                              </div>
                              <div class="col-md-6 aos-init">
                                <figure class="p-4 pt-xl-5 pb-xl-4 px-xl-5 mt-4 mb-0 rounded-12 bg-gray-800 transition-3d-hover users-watch h-100">
                                  <div class="py-4 py-lg-5 my-5 text-center">
                                    <div class="icon-circle rounded-pill bg-danger"><img src="../assets/img/templates/volt.svg" alt="img"></div>
                                  </div>
                                  <figcaption>
                                    <h6 class="font-weight-semibold">
                                      <a href="#0" class="d-inline-flex align-items-center text-white">
                                        <span class="btn btn-icon circle circle-md mr-3 bg-white">
                                          <svg data-name="icons/tabler/play-fill" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16">
                                            <rect data-name="Icons/Tabler/Play Fill background" width="16" height="16" fill="none"></rect>
                                            <path d="M0,.687V15.313a.672.672,0,0,0,1.025.584L12.68,8.584a.693.693,0,0,0,0-1.168L1.025.1A.672.672,0,0,0,0,.687Z" transform="translate(3)" fill="#1e1e1e"></path>
                                          </svg>                    
                                        </span>
                                        Watch example
                                      </a>
                                    </h6>
                                    <h2>Supercharged with new plugins</h2>
                                  </figcaption>
                                </figure>
                              </div>
                            </div>
                          </section>
                        </div>
                      </div>
                    
                  

                    
                      <div class="agency-template bg-dark">
                        <div class="container">
                          <!-- Muse Section -->
                          <section class="muse-section">
                            <div class="row pb-2 pb-md-5">
                              <div class="col-lg-12">
                                <h6>Integrations</h6>
                                <h2 class="h1 mb-3 mb-md-2">Services we provide</h2>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-lg-4 col-md-6 mb-4">
                                <figure class="card branding-card border-gray-800 bg-transparent p-4 rounded-12 transition-3d-hover h-100 mb-0">
                                  <figcaption class="px-md-3 pt-2">
                                    <small class="branding-tag mb-2 d-block">Mobile</small>
                                    <h5 class="lh-base text-white">User interface and user <br>experience</h5>
                                  </figcaption>
                                  <div class="p-3 text-center">
                                    <img src="../assets/img/templates/agency-service1.svg" alt="img">
                                  </div>
                                  <a href="#" class="circle bg-gray-800 stretched-link ml-auto">
                                    <svg data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 16 16">
                                      <rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
                                      <path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#ADB5BD"></path>
                                    </svg>              
                                  </a>
                                </figure>
                              </div>
                              <div class="col-lg-4 col-md-6 mb-4">
                                <figure class="card branding-card border-gray-800 bg-transparent p-4 rounded-12 transition-3d-hover h-100 mb-0">
                                  <figcaption class="px-md-3 pt-2">
                                    <small class="branding-tag mb-2 d-block">Web</small>
                                    <h5 class="lh-base text-white">Development and <br>consultation</h5>
                                  </figcaption>
                                  <div class="p-3 text-center">
                                    <img src="../assets/img/templates/agency-service2.svg" alt="img">
                                  </div>
                                  <a href="#" class="circle bg-gray-800 stretched-link ml-auto">
                                    <svg data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 16 16">
                                      <rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
                                      <path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#ADB5BD"></path>
                                    </svg>
                                  </a>
                                </figure>
                              </div>
                              <div class="col-lg-4 col-md-6 mb-4">
                                <figure class="card branding-card border-gray-800 bg-transparent p-4 rounded-12 transition-3d-hover h-100 mb-0">
                                  <figcaption class="px-md-3 pt-2">
                                    <small class="branding-tag mb-2 d-block">Game</small>
                                    <h5 class="lh-base text-white">Stage design and store <br>launch</h5>
                                  </figcaption>
                                  <div class="p-3 text-center">
                                    <img src="../assets/img/templates/agency-service3.svg" alt="img">
                                  </div>
                                  <a href="#" class="circle bg-gray-800 stretched-link ml-auto">
                                    <svg data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 16 16">
                                      <rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
                                      <path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#ADB5BD"></path>
                                    </svg>
                                  </a>
                                </figure>
                              </div>
                            </div>
                          </section>
                        </div>
                      </div>