Shuffle Components in Gradia library

<section class="pt-28 pb-40 bg-light-light overflow-hidden">
  <div class="container">
    <div class="mw-md-lg mx-auto">
      <h2 class="fs-7 text-secondary mb-5" >Plan, Select, Grow</h2>
      <p class="text-muted mb-20" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada nisl, ullamcorper pulvinar sed tincidunt tempus. In mi diam neque consectetur quis vitae.</p>
      <div class="rounded-3 shadow-lg" style="padding: 2px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
        <div class="p-12 text-center bg-white rounded-1">
          <p class="fs-20 fw-semibold text-secondary text-uppercase mb-7" style="letter-spacing: 1px;" >Pricing</p>
          <h3 class="fs-12 fw-semibold mb-4" >$9/user/month</h3>
          <p class="fs-16 text-muted mb-12" >Create unlimited project, invite everyone from your team, grow everything fast </p>
          <button class="btn btn-secondary fs-18 w-100 mw-xs mx-auto mb-6" >Create Your First Project</button>
          <p class="text-muted mb-0" >30 days free trial, No credit card required</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <nav class="navbar navbar-dark navbar-expand-lg bg-secondary py-5 py-lg-3 px-5"  >
    <div class="container-fluid"><a class="navbar-brand" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a>
      <div class="collapse navbar-collapse me-5 justify-content-center">
        <ul class="navbar-nav">
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Features</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Solutions</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Resources</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Pricing</h3></a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block">
        <div class="rounded-3" style="padding:2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
          <button class="btn btn-secondary px-4 py-3 rounded-1" type="button">
            <h4 class="fs-17 fw-medium text-white mb-0" >Start Free Trial</h4>
          </button>
        </div>
      </div>
      <div class="d-lg-none">
        <button class="btn navbar-burger p-0">
          <svg class="text-dark-light" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="56" height="56" rx="28" fill="currentColor"></rect>
            <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column justify-content-between py-8 px-8 bg-secondary overflow-auto"  >
      <div class="d-flex align-items-center"><a class="me-auto h4 mb-0 text-decoration-none" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a><a class="navbar-close text-white" href="#">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <div class="py-16">
        <ul class="nav flex-column">
          <li class="nav-item mb-12"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Features</h3></a></li>
          <li class="nav-item mb-12"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Solutions</h3></a></li>
          <li class="nav-item mb-12"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Resources</h3></a></li>
          <li class="nav-item"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Pricing</h3></a></li>
        </ul>
      </div>
      <div>
        <button class="btn btn-secondary px-4 py-3 w-100 mb-5 rounded-1" type="button">
          <h4 class="fs-17 fw-medium text-white mb-0" >Login</h4>
        </button>
        <div class="d-inline-block w-100 rounded-3" style="padding:2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
          <button class="btn btn-secondary px-4 py-3 w-100 rounded-1" type="button">
            <h4 class="fs-17 fw-medium text-white mb-0" >Start Free Trial</h4>
          </button>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="py-24 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-7xl mx-auto">
      <div class="container">
        <div class="row align-items-lg-center g-16 g-lg-24">
          <div class="col-12 col-md-7">
            <div style="border-radius: 15px; background: linear-gradient(98.24deg, #FF9483 0%, #FFCBA4 0.01%, #8479F9 100%);"><img class="position-relative w-100" style="top: 12px;" src="gradia-assets/images/features/team.png" alt=""/></div>
          </div>
          <div class="col-12 col-md-4">
            <div>
              <h2 class="fs-12 mb-11" >Control every project from a place without hassle.</h2>
              <div>
                <div class="mb-6 h-px" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%); height: 1px;"></div>
                <div class="d-flex align-items-center justify-content-between mb-4">
                  <h3 class="fs-17 mb-0" >Video Analytics</h3><a href="#">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M3.75 11.25L9 6L14.25 11.25" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg></a>
                </div>
                <p class="text-muted mb-6" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
              </div>
              <div>
                <div class="mb-6 h-px" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%); height: 1px;"></div>
                <div class="d-flex align-items-center justify-content-between mb-6">
                  <h3 class="fs-17 mb-0" >Transaction History</h3><a href="#">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M14.25 6.75L9 12L3.75 6.75" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg></a>
                </div>
              </div>
              <div>
                <div class="mb-6 h-px" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%); height: 1px;"></div>
                <div class="d-flex align-items-center justify-content-between mb-6">
                  <h3 class="fs-17 mb-0" >Secured Payment</h3><a href="#">
                    <svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M14.25 6.75L9 12L3.75 6.75" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg></a>
                </div>
                <div class="h-px" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%); height: 1px;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-44 bg-white overflow-hidden">
  <div class="container">
    <div class="row g-12">
      <div class="col-12 col-md-6">
        <div class="mw-md-lg">
          <p class="d-inline-block fs-20 fw-semibold text-white text-uppercase mb-9" style="letter-spacing: 1px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">The team that made us successful</p>
          <h2 class="fs-10 fw-semibold text-secondary mb-7" >Our mission is making the customers lives easier now.</h2>
          <p class="fs-16 text-secondary mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="container">
          <div class="row justify-content-center g-12">
            <div class="col-12 col-xl-auto d-flex justify-content-center">
              <div>
                <div class="d-inline-block mb-5 pt-4" style="background: linear-gradient(98.24deg, #FFB36D 0%, #EC5353 100%);"><img class="img-fluid" src="gradia-assets/images/teams/avatar-bg.png" alt=""/></div>
                <h3 class="fs-17 text-secondary mb-1" >Albert Flores</h3>
                <p class="fs-20 text-muted" >Digital Marketer @ Grower.io</p>
              </div>
            </div>
            <div class="col-12 col-xl-auto d-flex justify-content-center">
              <div class="mt-xl-32">
                <div class="d-inline-block mb-5 pt-4" style="background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);"><img class="img-fluid" src="gradia-assets/images/teams/avatar-bg2.png" alt=""/></div>
                <h3 class="fs-17 text-secondary mb-1" >Albert Flores</h3>
                <p class="fs-20 text-muted" >Digital Marketer @ Grower.io</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-28 pb-36 bg-light-light overflow-hidden"><img class="position-absolute top-0 start-50 translate-middle-x" src="gradia-assets/elements/testimonials/radial3.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="mw-4xl mx-auto">
      <h2 class="fs-11 text-center mb-16 lh-sm" >Hear from Gradia&rsquo;s users who saved thousands on building websites</h2>
      <div class="bg-white px-16 py-12 rounded-3 shadow-sm"><img class="img-fluid mb-11" src="gradia-assets/images/testimonials/logo.svg" alt=""/>
        <h3 class="fs-15 fw-medium text-black mb-9 lh-sm" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae et ultricies sapien mauris, urna. Arcu justo, tellus in tellus, sed sed venenatis velit. Nisl nam augue elit at viverra euismod vitae. Est praesent mattis velit morbi nec sit.</h3>
        <div class="container">
          <div class="row align-items-center justify-content-between">
            <div class="col-auto">
              <div class="container">
                <div class="row align-items-center g-3">
                  <div class="col-auto"><img src="gradia-assets/images/testimonials/avatar10.png" alt=""/></div>
                  <div class="col-auto">
                    <h3 class="fs-17 mb-1" >Albert Flores</h3>
                    <p class="fs-19 text-muted mb-0" >Co-Founder, CEO</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-auto d-flex">
              <div class="p-2"><a href="#">
                  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10 19L3 12M3 12L10 5M3 12L21 12" stroke="#A1A1AA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg></a></div>
              <div class="p-2"><a href="#">
                  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14 5L21 12M21 12L14 19M21 12L3 12" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg></a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <nav class="navbar navbar-dark navbar-expand-lg bg-secondary py-5 py-lg-3 px-5"  >
    <div class="container-fluid"><a class="navbar-brand" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a>
      <div class="collapse navbar-collapse ms-11">
        <ul class="navbar-nav">
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Features</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Solutions</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Resources</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Pricing</h3></a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block">
        <div class="row">
          <div class="col-auto">
            <button class="btn btn-secondary px-4 py-3 rounded-1" type="button">
              <h4 class="fs-17 fw-medium text-white mb-0" >Login</h4>
            </button>
          </div>
          <div class="col-auto">
            <div class="bg-light rounded-3" style="padding:2px;">
              <button class="btn btn-secondary px-4 py-3 rounded-1" type="button">
                <h4 class="fs-17 fw-medium text-white mb-0" >Start Free Trial</h4>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="d-lg-none">
        <button class="btn navbar-burger p-0">
          <svg class="text-dark-light" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="56" height="56" rx="28" fill="currentColor"></rect>
            <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column justify-content-between py-8 px-8 bg-secondary overflow-auto"  >
      <div class="d-flex align-items-center"><a class="me-auto h4 mb-0 text-decoration-none" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a><a class="navbar-close text-white" href="#">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <div class="py-16">
        <ul class="nav flex-column">
          <li class="nav-item mb-12"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Features</h3></a></li>
          <li class="nav-item mb-12"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Solutions</h3></a></li>
          <li class="nav-item mb-12"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Resources</h3></a></li>
          <li class="nav-item"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Pricing</h3></a></li>
        </ul>
      </div>
      <div>
        <button class="btn btn-secondary px-4 py-3 w-100 mb-5 rounded-1" type="button">
          <h4 class="fs-17 fw-medium text-white mb-0" >Login</h4>
        </button>
        <div class="d-inline-block w-100 rounded-3" style="padding:2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
          <button class="btn btn-secondary px-4 py-3 w-100 rounded-1" type="button">
            <h4 class="fs-17 fw-medium text-white mb-0" >Start Free Trial</h4>
          </button>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="py-40 bg-white overflow-hidden">
  <div class="container">
    <div>
      <div class="container">
        <div class="row align-items-center g-16">
          <div class="col-12 col-md-6">
            <div class="mw-md-xl">
              <h2 class="fs-10 mb-6" >Manage projects easily.</h2>
              <p class="text-muted mw-md-md mb-9" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p>
              <button class="btn btn-primary fs-18 fw-medium px-6 py-4 rounded-pill" type="button" >Start 14 Days Free Trial</button>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="mw-md-md mx-auto">
              <div class="d-flex align-items-center p-5 mb-5 bg-white shadow" style="border-radius: 15px;"><img class="me-4" src="gradia-assets/elements/features/web1.svg" alt=""/>
                <div>
                  <h3 class="fs-18 fw-medium mb-0" >Web Design for Markoland</h3>
                  <p class="fs-20 text-muted mb-0" >Mar 14, 2022</p>
                </div>
              </div>
              <div class="position-relative d-flex align-items-center p-5 mb-5 bg-white opacity-75 shadow" style="left: -24px; border-radius: 15px;"><img class="me-4" src="gradia-assets/elements/features/web2.svg" alt=""/>
                <div>
                  <h3 class="fs-18 fw-medium mb-0" >App Development for Apollo</h3>
                  <p class="fs-20 text-muted mb-0" >Apr 27, 2022</p>
                </div>
              </div>
              <div class="d-flex align-items-center p-5 mb-5 bg-white opacity-50 shadow" style="border-radius: 15px;"><img class="me-4" src="gradia-assets/elements/features/web3.svg" alt=""/>
                <div>
                  <h3 class="fs-18 fw-medium mb-0" >UI Design - Sarlight</h3>
                  <p class="fs-20 text-muted mb-0" >Apr 29, 2022</p>
                </div>
              </div>
              <div class="position-relative d-flex align-items-center p-5 bg-white opacity-25 shadow" style="left: -24px; border-radius: 15px;"><img class="me-4" src="gradia-assets/elements/features/web4.svg" alt=""/>
                <div>
                  <h3 class="fs-18 fw-medium mb-0" >Web Design - Karko</h3>
                  <p class="fs-20 text-muted mb-0" >Mar 14, 2022</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-24 pb-32 bg-black overflow-hidden">
  <div class="container">
    <div class="mw-md-md mx-auto text-center mb-20">
      <h2 class="fs-10 text-white mb-5" >Pricing &amp; Plans</h2>
      <p class="text-secondary-light mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="row g-6">
      <div class="col-12 col-md-6 col-lg-3">
        <div class="h-100 bg-secondary text-center px-7 py-9 rounded-3">
          <h3 class="fs-20 fw-bold text-white text-uppercase mb-9" style="letter-spacing: 1px;" >Basic</h3>
          <h2 class="fs-10 text-white mb-1" >$29</h2>
          <p class="text-secondary-light mb-0 mb-8" >per month</p>
          <p class="fs-17 text-white mb-11" >Book up to 10 meetings with your clients per month</p>
          <div class="rounded-1 mb-4">
            <button class="btn btn-outline-dark w-100 fs-20 fw-semibold text-white text-uppercase px-9 py-4" type="button" style="letter-spacing: 1px;" >Try 14 Days free trial</button>
          </div>
          <p class="text-muted mb-0" >No credit card required</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="h-100 bg-secondary text-center px-7 py-9 rounded-3">
          <h3 class="fs-20 fw-bold text-white text-uppercase mb-9" style="letter-spacing: 1px;" >Standard</h3>
          <h2 class="fs-10 text-white mb-1" >$59</h2>
          <p class="text-secondary-light mb-0 mb-8" >per month</p>
          <p class="fs-17 text-white mb-11" >Book up to 50 meetings with your clients per month</p>
          <div class="rounded-1 mb-4">
            <button class="btn btn-outline-dark w-100 fs-20 fw-semibold text-white text-uppercase px-9 py-4" type="button" style="letter-spacing: 1px;" >Try 14 Days free trial</button>
          </div>
          <p class="text-muted mb-0" >No credit card required</p>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="position-relative h-100 bg-secondary text-center px-7 py-9 rounded-3"><img class="position-absolute start-0 top-0 w-100" src="gradia-assets/elements/pricing/radial2.svg" alt=""/>
          <div class="position-relative" style="z-index: 50;">
            <h3 class="fs-20 fw-bold text-white text-uppercase mb-9" style="letter-spacing: 1px;" >Pro</h3>
            <h2 class="fs-10 text-white mb-1" >$99</h2>
            <p class="text-secondary-light mb-0 mb-8" >per month</p>
            <p class="fs-17 text-white mb-11" >Book up to 100 meetings with your clients per month</p>
            <div class="rounded-1 mb-4">
              <button class="btn btn-outline-dark w-100 fs-20 fw-semibold text-white text-uppercase px-9 py-4" type="button" style="letter-spacing: 1px;" >Try 14 Days free trial</button>
            </div>
            <p class="text-muted mb-0" >No credit card required</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="h-100 bg-secondary text-center px-7 py-9 rounded-3">
          <h3 class="fs-20 fw-bold text-white text-uppercase mb-9" style="letter-spacing: 1px;" >Enterprise</h3>
          <h2 class="fs-10 text-white mb-1" >$199</h2>
          <p class="text-secondary-light mb-0 mb-8" >per month</p>
          <p class="fs-17 text-white mb-11" >Book up to 200 meetings with your clients per month</p>
          <div class="rounded-1 mb-4">
            <button class="btn btn-outline-dark w-100 fs-20 fw-semibold text-white text-uppercase px-9 py-4" type="button" style="letter-spacing: 1px;" >Try 14 Days free trial</button>
          </div>
          <p class="text-muted mb-0" >No credit card required</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 bg-white overflow-hidden">
  <div class="container">
    <div class="row align-items-center g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-md">
          <h2 class="fs-12 text-secondary mb-6 lh-sm" >Grow your business connecting with customers</h2>
          <p class="fs-18 text-secondary mb-9" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit justo, sit iaculis ultrices vitae pulvinar tellus. Volutpat, ut lacus tristique blandit ligula.</p>
          <div class="container">
            <div class="row g-4">
              <div class="col-12 col-md-auto">
                <button class="btn btn-primary w-100 fs-18 px-8 fw-bold" type="button" >Book A Call</button>
              </div>
              <div class="col-12 col-md-auto">
                <button class="btn btn-outline-secondary-dark text-secondary w-100 fs-18 px-8 fw-bold" type="button" >Learn More</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="container">
          <div class="row justify-content-center g-5">
            <div class="col-12 col-md-7">
              <div class="d-flex border-bottom pb-5">
                <div class="me-4"><img class="position-relative top-1" src="gradia-assets/elements/cta/file.svg" alt=""/></div>
                <div class="w-100 me-4">
                  <h3 class="fs-17 text-secondary mb-2" >Documentation</h3>
                  <p class="fs-19 text-secondary mb-0" >Lorem ipsum dolor sit amet, consectetur elit.</p>
                </div><a href="#">
                  <svg class="relative top-1" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.75 3.75L12 9L6.75 14.25" stroke="#18181B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg></a>
              </div>
            </div>
            <div class="col-12 col-md-7">
              <div class="d-flex pb-5">
                <div class="me-4"><img class="position-relative top-1" src="gradia-assets/elements/cta/file.svg" alt=""/></div>
                <div class="w-100 me-4">
                  <h3 class="fs-17 text-secondary mb-2" >Getting Started with API</h3>
                  <p class="fs-19 text-secondary mb-0" >Lorem ipsum dolor sit amet, consectetur elit.</p>
                </div><a href="#">
                  <svg class="relative top-1" width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.75 3.75L12 9L6.75 14.25" stroke="#18181B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-24 pb-32 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-md-lg mx-auto text-center mb-20">
      <h2 class="fs-10 lh-sm mb-5" >Everything you need to launch a website</h2>
    </div>
    <div class="mw-md-7xl mx-auto">
      <div class="row g-6">
        <div class="col-12 col-md-4">
          <div class="mb-8">
            <div class="h-100 bg-white text-center p-12 pt-9 border" style="border-radius: 3px;">
              <div class="d-inline-block mb-11 rounded-pill" style="padding: 2px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
                <div class="bg-white rounded-pill">
                  <h3 class="fs-20 fw-semibold px-4 py-1 text-secondary text-uppercase mb-0" style="letter-spacing: 1px;" >Basic</h3>
                </div>
              </div>
              <h2 class="fs-10 text-black mb-0" >Free</h2>
              <p class="text-muted mb-14" >Forever</p>
              <button class="btn btn-primary fs-18 px-12 fw-bold rounded-pill" type="button" >Sign up. It&rsquo;s Free</button>
            </div>
          </div>
          <ul class="list-group list-group-flush px-7">
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
              <svg class="me-3" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p class="text-secondary mb-0" >10 GB Disk Space</p>
            </li>
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
              <svg class="me-3" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p class="text-secondary mb-0" >1 Year Support</p>
            </li>
            <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
              <svg class="me-3" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
              </svg>
              <p class="text-secondary mb-0" >50 Queries</p>
            </li>
          </ul>
        </div>
        <div class="col-12 col-md-4">
          <div class="mb-8">
            <div class="h-100 bg-white text-center p-12 pt-9 border" style="border-radius: 3px;">
              <div class="d-inline-block mb-11 rounded-pill" style="padding: 2px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
                <div class="bg-white rounded-pill">
                  <h3 class="fs-20 fw-semibold px-4 py-1 text-secondary text-uppercase mb-0" style="letter-spacing: 1px;" >Pro</h3>
                </div>
              </div>
              <h2 class="fs-10 text-black mb-0" >$49</h2>
              <p class="text-muted mb-14" >Per Month</p>
              <button class="btn btn-outline-light-dark fs-18 px-12 fw-bold text-secondary rounded-pill" type="button" >Sign up. It&rsquo;s Free</button>
            </div>
          </div>
          <div class="px-7">
            <p class="fs-18 fw-semibold text-dark" >Everything in Basic, Plus:</p>
            <ul class="list-group list-group-flush">
              <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
                <svg class="me-3" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
                <p class="text-secondary mb-0" >100 GB Disk Space</p>
              </li>
              <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
                <svg class="me-3" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
                <p class="text-secondary mb-0" >1 Year Support</p>
              </li>
              <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
                <svg class="me-3" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
                <p class="text-secondary mb-0" >1000 Queries</p>
              </li>
              <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
                <svg class="me-3" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
                <p class="text-secondary mb-0" >Video Collections</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="mb-8">
            <div class="h-100 bg-white text-center p-12 pt-9 border" style="border-radius: 3px;">
              <div class="d-inline-block mb-11 rounded-pill" style="padding: 2px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
                <div class="bg-white rounded-pill">
                  <h3 class="fs-20 fw-semibold px-4 py-1 text-secondary text-uppercase mb-0" style="letter-spacing: 1px;" >Enterprise</h3>
                </div>
              </div>
              <h2 class="fs-10 text-black mb-0" >Contact us</h2>
              <p class="text-muted mb-14" >For Custom Offer</p>
              <button class="btn btn-outline-light-dark fs-18 px-12 fw-bold text-secondary rounded-pill" type="button" >Sign up. It&rsquo;s Free</button>
            </div>
          </div>
          <div class="px-7">
            <p class="fs-18 fw-semibold text-dark" >Everything in Pro, Plus:</p>
            <ul class="list-group list-group-flush">
              <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
                <svg class="me-3" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
                <p class="text-secondary mb-0" >1TB Disk Space</p>
              </li>
              <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
                <svg class="me-3" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
                <p class="text-secondary mb-0" >1 Year Support</p>
              </li>
              <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
                <svg class="me-3" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
                <p class="text-secondary mb-0" >Unlimited Queries</p>
              </li>
              <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
                <svg class="me-3" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
                <p class="text-secondary mb-0" >Video Collections</p>
              </li>
              <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
                <svg class="me-3" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
                <p class="text-secondary mb-0" >Learning Path</p>
              </li>
              <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
                <svg class="me-3" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
                <p class="text-secondary mb-0" >Download Images</p>
              </li>
              <li class="d-flex align-items-center px-0 list-group-item fw-medium bg-transparent border-0">
                <svg class="me-3" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z" fill="#14B082"></path>
                </svg>
                <p class="text-secondary mb-0" >Free Custom Domain</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <nav class="navbar navbar-dark navbar-expand-lg bg-secondary py-5 py-lg-3 px-5 px-lg-40"  >
    <div class="container-fluid"><a class="navbar-brand" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a>
      <div class="collapse navbar-collapse justify-content-end">
        <ul class="navbar-nav">
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Features</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Solutions</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Resources</h3></a></li>
          <li class="nav-item p-5"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Pricing</h3></a></li>
        </ul>
      </div>
      <div class="d-lg-none">
        <button class="btn navbar-burger p-0">
          <svg class="text-dark-light" width="51" height="51" viewbox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="56" height="56" rx="28" fill="currentColor"></rect>
            <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-75 mw-xs" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column justify-content-between py-8 px-8 bg-secondary overflow-auto"  >
      <div class="d-flex align-items-center"><a class="me-auto h4 mb-0 text-decoration-none" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a><a class="navbar-close text-white" href="#">
          <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <div class="py-16">
        <ul class="nav flex-column">
          <li class="nav-item mb-12"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Features</h3></a></li>
          <li class="nav-item mb-12"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Solutions</h3></a></li>
          <li class="nav-item mb-12"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Resources</h3></a></li>
          <li class="nav-item"><a class="nav-link d-inline-block p-0" href="#">
              <h3 class="fs-17 fw-medium text-white mb-0" >Pricing</h3></a></li>
        </ul>
      </div>
      <div>
        <button class="btn btn-secondary px-4 py-3 w-100 mb-5 rounded-1" type="button">
          <h4 class="fs-17 fw-medium text-white mb-0" >Login</h4>
        </button>
        <div class="d-inline-block w-100 rounded-3" style="padding:2px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
          <button class="btn btn-secondary px-4 py-3 w-100 rounded-1" type="button">
            <h4 class="fs-17 fw-medium text-white mb-0" >Start Free Trial</h4>
          </button>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="pt-24 pb-32 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-7xl mx-auto">
      <h2 class="fs-11 text-center mb-24" >Grow team, anywhere, anytime online.</h2>
      <div class="mw-5xl mx-auto">
        <div class="container">
          <div class="row">
            <div class="col-12 col-md-6 border-bottom border-end">
              <div class="d-flex align-items-start p-11"><img class="me-8" src="gradia-assets/elements/features/users.svg" alt=""/>
                <div>
                  <h3 class="fs-17 mb-5" >Connect with experts</h3>
                  <p class="text-muted mb-5" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p><a class="d-inline-block" href="#" style="text-decoration: none;">
                    <h4 class="fs-18 fw-medium">
                      <p class="mb-2" >Learn more</p>
                      <div class="w-100 bg-black" style="height: 1px;"></div>
                    </h4></a>
                </div>
              </div>
            </div>
            <div class="col-12 col-md-6 border-bottom">
              <div class="d-flex align-items-start p-11"><img class="me-8" src="gradia-assets/elements/features/folder.svg" alt=""/>
                <div>
                  <h3 class="fs-17 mb-5" >Organize every project</h3>
                  <p class="text-muted mb-5" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p><a class="d-inline-block" href="#" style="text-decoration: none;">
                    <h4 class="fs-18 fw-medium">
                      <p class="mb-2" >Learn more</p>
                      <div class="w-100 bg-black" style="height: 1px;"></div>
                    </h4></a>
                </div>
              </div>
            </div>
            <div class="col-12 col-md-6 border-end">
              <div class="d-flex align-items-start p-11"><img class="me-8" src="gradia-assets/elements/features/inbox.svg" alt=""/>
                <div>
                  <h3 class="fs-17 mb-5" >Personalized inbox</h3>
                  <p class="text-muted mb-5" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p><a class="d-inline-block" href="#" style="text-decoration: none;">
                    <h4 class="fs-18 fw-medium">
                      <p class="mb-2" >Learn more</p>
                      <div class="w-100 bg-black" style="height: 1px;"></div>
                    </h4></a>
                </div>
              </div>
            </div>
            <div class="col-12 col-md-6">
              <div class="d-flex align-items-start p-11"><img class="me-8" src="gradia-assets/elements/features/finger-print.svg" alt=""/>
                <div>
                  <h3 class="fs-17 mb-5" >Secured payment service</h3>
                  <p class="text-muted mb-5" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p><a class="d-inline-block" href="#" style="text-decoration: none;">
                    <h4 class="fs-18 fw-medium">
                      <p class="mb-2" >Learn more</p>
                      <div class="w-100 bg-black" style="height: 1px;"></div>
                    </h4></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-24 pb-32 bg-secondary overflow-hidden">
  <div class="position-relative container" style="z-index: 50;">
    <div class="mw-lg mx-auto mb-12">
      <h2 class="fs-10 mb-0 text-center text-white lh-sm" >Hard to believe? Analyze your website</h2>
    </div>
    <div class="mw-xl mx-auto">
      <div class="mb-9 rounded-1">
        <div class="d-flex bg-white overflow-hidden" style="border-radius: 3px;">
          <input class="w-100 px-5 py-4 d-block text-dark border-0" type="text" placeholder="Enter email to get started"/>
          <div style="padding: 2px;">
            <button class="btn btn-secondary h-100 text-uppercase" type="button" style="letter-spacing: 1px; border-radius: 3px; width: 180px;" >Connect Now</button>
          </div>
        </div>
      </div>
      <p class="fs-18 text-dark text-center mb-0"><span >Or, learn more </span><a class="text-white" href="#" >about Gradia</a></p>
    </div>
  </div><img class="position-absolute bottom-0 start-50 translate-middle-x" src="gradia-assets/elements/cta/radial3.png" alt=""/>
</section>

<section class="py-28 bg-white overflow-hidden">
  <div class="container">
    <div>
      <div class="container">
        <div class="row align-items-center g-12">
          <div class="col-12 col-lg-6">
            <div class="mw-md-xl">
              <h2 class="fs-10 fw-semibold mb-9" >Manage remote team, anywhere, anytime.</h2>
              <ul class="list-group list-group-flush mb-12">
                <li class="d-flex align-items-center px-0 fw-bold list-group-item border-0"><img class="me-3" src="gradia-assets/elements/features/check.svg" alt=""/>
                  <h3 class="fs-17 fw-semibold mb-0" >No hidden fees</h3>
                </li>
                <li class="d-flex align-items-center px-0 fw-bold list-group-item border-0"><img class="me-3" src="gradia-assets/elements/features/check.svg" alt=""/>
                  <h3 class="fs-17 fw-semibold mb-0" >Start with a free account</h3>
                </li>
                <li class="d-flex align-items-center px-0 fw-bold list-group-item border-0"><img class="me-3" src="gradia-assets/elements/features/check.svg" alt=""/>
                  <h3 class="fs-17 fw-semibold mb-0" >Edit online, no software needed</h3>
                </li>
              </ul>
              <button class="btn btn-primary px-4" type="button">
                <div class="row g-3">
                  <div class="col-auto"><span class="fs-18 fw-medium text-white mb-0" >Start Growing Team</span></div>
                  <div class="col-auto">
                    <svg width="19" height="18" viewbox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M11 3.75L16.25 9M16.25 9L11 14.25M16.25 9L2.75 9" stroke="#F9FAFB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </div>
                </div>
              </button>
            </div>
          </div>
          <div class="col-12 col-lg-6">
            <div class="container">
              <div class="row">
                <div class="p-3">
                  <div class="col-12 d-flex justify-content-center">
                    <div class="d-inline-flex p-3 w-100 bg-white shadow" style="max-width: 290px; border-radius: 15px;">
                      <div><img class="me-3" src="gradia-assets/images/hero/avatar-circle.png" alt=""/></div>
                      <div>
                        <h3 class="fs-18 fw-medium mb-0" >Albert Flores</h3>
                        <p class="fs-20 text-muted" >Software Engineer</p><span class="badge bg-light-light text-dark fw-medium">
                          <div class="d-flex align-items-center">
                            <svg class="me-1" width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                              <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                            <p class="mb-0" >Wyoming, USA</p>
                          </div></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-12 col-12 d-flex justify-content-center">
                  <div class="p-3 w-100" style="max-width: 290px;">
                    <div class="d-inline-flex p-3 w-100 bg-white shadow" style="border-radius: 15px;">
                      <div><img class="me-3" src="gradia-assets/images/hero/avatar-circle2.png" alt=""/></div>
                      <div>
                        <h3 class="fs-18 fw-medium mb-0" >Darlene Robertson</h3>
                        <p class="fs-20 text-muted" >Software Tester</p><span class="badge bg-light-light text-dark fw-medium">
                          <div class="d-flex align-items-center">
                            <svg class="me-1" width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                              <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                            <p class="mb-0" >New York, USA</p>
                          </div></span>
                      </div>
                    </div>
                  </div>
                  <div class="p-3 w-100" style="max-width: 290px;">
                    <div class="d-inline-flex p-3 w-100 bg-white shadow" style="border-radius: 15px;">
                      <div><img class="me-3" src="gradia-assets/images/hero/avatar-circle3.png" alt=""/></div>
                      <div>
                        <h3 class="fs-18 fw-medium mb-0" >Kristin Watson</h3>
                        <p class="fs-20 text-muted" >Project Manager</p><span class="badge bg-light-light text-dark fw-medium">
                          <div class="d-flex align-items-center">
                            <svg class="me-1" width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                              <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                            <p class="mb-0" >Pennsylvania, USA</p>
                          </div></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row me-md-28">
                <div class="col-12 col-12 d-flex justify-content-center">
                  <div class="p-3 w-100" style="max-width: 290px;">
                    <div class="d-inline-flex p-3 w-100 bg-white shadow" style="border-radius: 15px;">
                      <div><img class="me-3" src="gradia-assets/images/hero/avatar-circle4.png" alt=""/></div>
                      <div>
                        <h3 class="fs-18 fw-medium mb-0" >Guy Hawkins</h3>
                        <p class="fs-20 text-muted" >Scrum Master</p><span class="badge bg-light-light text-dark fw-medium">
                          <div class="d-flex align-items-center">
                            <svg class="me-1" width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                              <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                            <p class="mb-0" >North Carolina, USA</p>
                          </div></span>
                      </div>
                    </div>
                  </div>
                  <div class="p-3 w-100" style="max-width: 290px;">
                    <div class="d-inline-flex p-3 w-100 bg-white shadow" style="border-radius: 15px;">
                      <div><img class="me-3" src="gradia-assets/images/hero/avatar-circle5.png" alt=""/></div>
                      <div>
                        <h3 class="fs-18 fw-medium mb-0" >Annette Black</h3>
                        <p class="fs-20 text-muted" >Software Engineer</p><span class="badge bg-light-light text-dark fw-medium">
                          <div class="d-flex align-items-center">
                            <svg class="me-1" width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                              <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                            <p class="mb-0" >North Dakota, USA</p>
                          </div></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-12 col-12 d-flex justify-content-center">
                  <div class="p-3 w-100" style="max-width: 290px;">
                    <div class="d-inline-flex p-3 w-100 bg-white shadow" style="border-radius: 15px;">
                      <div><img class="me-3" src="gradia-assets/images/hero/avatar-circle.png" alt=""/></div>
                      <div>
                        <h3 class="fs-18 fw-medium mb-0" >Robert Fox</h3>
                        <p class="fs-20 text-muted" >UI/UX Designer</p><span class="badge bg-light-light text-dark fw-medium">
                          <div class="d-flex align-items-center">
                            <svg class="me-1" width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                              <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                            <p class="mb-0" >Maine, USA</p>
                          </div></span>
                      </div>
                    </div>
                  </div>
                  <div class="p-3 w-100" style="max-width: 290px;">
                    <div class="d-inline-flex p-3 w-100 bg-white shadow" style="border-radius: 15px;">
                      <div><img class="me-3" src="gradia-assets/images/hero/avatar-circle2.png" alt=""/></div>
                      <div>
                        <h3 class="fs-18 fw-medium mb-0" >Cody Fisher</h3>
                        <p class="fs-20 text-muted" >Ethical Hacker</p><span class="badge bg-light-light text-dark fw-medium">
                          <div class="d-flex align-items-center">
                            <svg class="me-1" width="13" height="13" viewbox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                              <path d="M9.56413 9.02246C9.19416 9.39243 8.5298 10.0568 7.91404 10.6726C7.13299 11.4536 5.867 11.4536 5.08595 10.6725C4.4823 10.0689 3.82786 9.41446 3.43587 9.02246C1.7436 7.33019 1.7436 4.58648 3.43587 2.8942C5.12814 1.20193 7.87185 1.20193 9.56413 2.8942C11.2564 4.58648 11.2564 7.33019 9.56413 9.02246Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                              <path d="M8.125 5.95833C8.125 6.8558 7.39746 7.58333 6.5 7.58333C5.60253 7.58333 4.875 6.8558 4.875 5.95833C4.875 5.06087 5.60253 4.33333 6.5 4.33333C7.39746 4.33333 8.125 5.06087 8.125 5.95833Z" stroke="#71717A" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                            <p class="mb-0" >Alaska, USA</p>
                          </div></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-24 pb-32 bg-secondary overflow-hidden">
  <div class="position-relative container" style="z-index: 50;">
    <div class="mw-2xl mb-12">
      <h2 class="fs-10 mb-4 text-white" >Grow with latest job updates</h2>
      <p class="fs-17 text-white" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sit justo, sit iaculis ultrices vitae pulvinar tellus. Volutpat, ut lacus tristique ligula.</p>
    </div>
    <div class="mw-2xl">
      <div class="container mb-8">
        <div class="row g-3">
          <div class="col-12 col-md-auto">
            <div style="border-radius: 53px; padding: 2px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
              <div class="d-flex overflow-hidden" style="border-radius: 53px;">
                <input class="w-100 px-7 py-4 d-block border-0 bg-secondary text-secondary-dark" style="border-top-left-radius: 8px; border-bottom-left-radius: 8px;" type="text" placeholder="Enter email to get started"/>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-auto">
            <button class="d-md-inline-block h-100 btn btn-light fs-17 px-14 w-100 rounded-pill" type="button" style="border-radius: 3px; width: 180px;" >Join Now</button>
          </div>
        </div>
      </div>
      <p class="fs-18 text-secondary-light mb-0 mw-xs"><a class="text-white" href="#" >12,000+ People</a><span > are already using Gradia for their business</span></p>
    </div>
  </div><img class="position-absolute start-0 bottom-0" src="gradia-assets/elements/cta/radial4.png" alt=""/><img class="position-absolute end-0 top-0 left-50" src="gradia-assets/elements/cta/radial5.png" alt=""/>
</section>

<section class="pt-28 pb-36 bg-secondary overflow-hidden">
  <div class="container">
    <div class="mw-md-2xl mx-auto text-center mb-20">
      <h4 class="fs-20 fw-semibold text-uppercase text-muted mb-5" style="letter-spacing: 1px;" >The features that made us special</h4>
      <h2 class="fs-10 mb-0 text-white lh-sm" >A simple &amp; smart way to grow your marketing team</h2>
    </div>
    <div class="mw-7xl mx-auto">
      <div class="container">
        <div class="row g-8">
          <div class="col-12 col-md-4">
            <div class="h-100 p-9 bg-dark-light" style="border-radius: 10px;"><img class="mb-12" src="gradia-assets/elements/features/users2.svg" alt=""/>
              <h3 class="fs-15 text-white mb-0 lh-sm"><span style="background: linear-gradient(98.24deg, #6CD5F7 0%, #F89D5C 50.52%, #5B6AF0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Connect</span><span > with experts without any issues.</span></h3>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="h-100 p-9 bg-dark-light" style="border-radius: 10px;"><img class="mb-12" src="gradia-assets/elements/features/sm-view-grid-add.svg" alt=""/>
              <h3 class="fs-15 text-white mb-0 lh-sm"><span style="background: linear-gradient(98.24deg, #FFB36D 0%, #EC5353 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Organize</span><span > your media files on cloud.</span></h3>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="h-100 p-9 bg-dark-light" style="border-radius: 10px;"><img class="mb-12" src="gradia-assets/elements/features/finger-print2.svg" alt=""/>
              <h3 class="fs-15 text-white mb-0 lh-sm"><span style="background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Secured</span><span > payment service, subscribe monthly.</span></h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-20 pb-32 bg-secondary overflow-hidden" style="background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
  <div class="container">
    <div class="mw-md-lg mx-auto text-center mb-20">
      <h2 class="fs-11 mb-0 text-secondary mb-5" >Recommended by world-class companies</h2>
      <p class="text-muted mw-md-md mx-auto mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
    </div>
    <div class="container">
      <div class="row justify-content-center mb-8 g-4">
        <div class="col-auto justify-content-center">
          <div class="d-inline-flex justify-content-center align-items-center p-4 bg-white" style="border-radius: 40px;">
            <div>
              <div class="inline-block me-3" style="width: 14px; height: 14px; border-radius: 40px; background: linear-gradient(98.24deg, #6CD5F7 0%, #F89D5C 50.52%, #5B6AF0 100%);"></div>
            </div>
            <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Manage remote team</h3>
          </div>
        </div>
        <div class="col-auto d-flex justify-content-center">
          <div class="d-inline-flex align-items-center p-4 bg-white" style="border-radius: 40px;">
            <div>
              <div class="inline-block me-3" style="width: 14px; height: 14px; border-radius: 40px; background: linear-gradient(98.24deg, #FFB36D 0%, #EC5353 100%);"></div>
            </div>
            <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Connect with experts</h3>
          </div>
        </div>
        <div class="col-auto d-flex justify-content-center">
          <div class="d-inline-flex align-items-center p-4 bg-white" style="border-radius: 40px;">
            <div>
              <div class="inline-block me-3" style="width: 14px; height: 14px; border-radius: 40px; background: linear-gradient(98.24deg, #6C2DD1 0%, #FF7DBC 100%);"></div>
            </div>
            <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Easy to chat</h3>
          </div>
        </div>
        <div class="col-auto d-flex justify-content-center">
          <div class="d-inline-flex align-items-center p-4 bg-white" style="border-radius: 40px;">
            <div>
              <div class="inline-block me-3" style="width: 14px; height: 14px; border-radius: 40px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);"></div>
            </div>
            <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Video analytics</h3>
          </div>
        </div>
        <div class="col-auto d-flex justify-content-center">
          <div class="d-inline-flex align-items-center p-4 bg-white" style="border-radius: 40px;">
            <div>
              <div class="inline-block me-3" style="width: 14px; height: 14px; border-radius: 40px; background: linear-gradient(98.24deg, #56C1E3 0%, #5B6AF0 100%);"></div>
            </div>
            <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Secured Payments</h3>
          </div>
        </div>
      </div>
      <div class="row justify-content-center mb-8 g-4">
        <div class="col-auto d-flex justify-content-center">
          <div class="d-inline-flex justify-content-center align-items-center p-4 bg-white" style="border-radius: 40px;">
            <div>
              <div class="inline-block me-3" style="width: 14px; height: 14px; border-radius: 40px; background: linear-gradient(98.24deg, #6C2DD1 0%, #FF7DBC 100%);"></div>
            </div>
            <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Live marketing reports</h3>
          </div>
        </div>
        <div class="col-auto d-flex justify-content-center">
          <div class="d-inline-flex align-items-center p-4 bg-white" style="border-radius: 40px;">
            <div>
              <div class="inline-block me-3" style="width: 14px; height: 14px; border-radius: 40px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);"></div>
            </div>
            <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Project management</h3>
          </div>
        </div>
        <div class="col-auto d-flex justify-content-center">
          <div class="d-inline-flex align-items-center p-4 bg-white" style="border-radius: 40px;">
            <div>
              <div class="inline-block me-3" style="width: 14px; height: 14px; border-radius: 40px; background: linear-gradient(98.24deg, #6CD5F7 0%, #F89D5C 50.52%, #5B6AF0 100%);"></div>
            </div>
            <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Edit videos &amp; audios</h3>
          </div>
        </div>
        <div class="col-auto d-flex justify-content-center">
          <div class="d-inline-flex align-items-center p-4 bg-white" style="border-radius: 40px;">
            <div>
              <div class="inline-block me-3" style="width: 14px; height: 14px; border-radius: 40px; background: linear-gradient(98.24deg, #56C1E3 0%, #5B6AF0 100%);"></div>
            </div>
            <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Transaction history</h3>
          </div>
        </div>
        <div class="col-auto d-flex justify-content-center">
          <div class="d-inline-flex align-items-center p-4 bg-white" style="border-radius: 40px;">
            <div>
              <div class="inline-block me-3" style="width: 14px; height: 14px; border-radius: 40px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);"></div>
            </div>
            <h3 class="fs-17 fw-semibold mb-0 text-secondary" >No hidden fees</h3>
          </div>
        </div>
      </div>
      <div class="row justify-content-center g-4">
        <div class="col-auto d-flex justify-content-center">
          <div class="d-inline-flex justify-content-center align-items-center p-4 bg-white" style="border-radius: 40px;">
            <div>
              <div class="inline-block me-3" style="width: 14px; height: 14px; border-radius: 40px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);"></div>
            </div>
            <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Manage remote team</h3>
          </div>
        </div>
        <div class="col-auto d-flex justify-content-center">
          <div class="d-inline-flex align-items-center p-4 bg-white" style="border-radius: 40px;">
            <div>
              <div class="inline-block me-3" style="width: 14px; height: 14px; border-radius: 40px; background: linear-gradient(98.24deg, #56C1E3 0%, #5B6AF0 100%);"></div>
            </div>
            <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Connect with experts</h3>
          </div>
        </div>
        <div class="col-auto d-flex justify-content-center">
          <div class="d-inline-flex align-items-center p-4 bg-white" style="border-radius: 40px;">
            <div>
              <div class="inline-block me-3" style="width: 14px; height: 14px; border-radius: 40px; background: linear-gradient(98.24deg, #FFB36D 0%, #EC5353 100%);"></div>
            </div>
            <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Easy to chat</h3>
          </div>
        </div>
        <div class="col-auto d-flex justify-content-center">
          <div class="d-inline-flex align-items-center p-4 bg-white" style="border-radius: 40px;">
            <div>
              <div class="inline-block me-3" style="width: 14px; height: 14px; border-radius: 40px; background: linear-gradient(98.24deg, #6C2DD1 0%, #FF7DBC 100%);"></div>
            </div>
            <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Video analytics</h3>
          </div>
        </div>
        <div class="col-auto d-flex justify-content-center">
          <div class="d-inline-flex align-items-center p-4 bg-white" style="border-radius: 40px;">
            <div>
              <div class="inline-block me-3" style="width: 14px; height: 14px; border-radius: 40px; background: linear-gradient(98.24deg, #56C1E3 0%, #5B6AF0 100%);"></div>
            </div>
            <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Secured Payments</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-28 pb-0 bg-secondary overflow-hidden">
  <div class="container">
    <h2 class="fs-10 mb-0 text-white text-center mb-4" >Connect with freelance developers</h2>
    <p class="text-secondary-light text-center mb-8" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint</p>
    <div class="container">
      <div class="row align-items-center g-16">
        <div class="col-12 col-md-6">
          <div class="mw-md-sm"><a href="#">
              <div class="overflow-hidden mb-5 rounded-3" style="padding: 1px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">
                <div class="p-7 rounded-3" style="background: linear-gradient(98.24deg, #212121 0.01%, #1D1D1D 100%);">
                  <div class="d-flex align-items-center mb-4">
                    <div class="me-3"><img src="gradia-assets/elements/features/chart-square-bar.svg" alt=""/></div>
                    <h3 class="fs-16 mb-0 text-white" >Chat with customers</h3>
                  </div>
                  <p class="text-secondary-light mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
                </div>
              </div></a><a href="#">
              <div class="overflow-hidden rounded-3" style="padding: 1px;">
                <div class="p-7 rounded-3">
                  <div class="d-flex align-items-center mb-4">
                    <div class="me-3"><img src="gradia-assets/elements/features/chat-alt.svg" alt=""/></div>
                    <h3 class="fs-16 mb-0 text-white" >Easy to chat</h3>
                  </div>
                  <p class="text-secondary-light mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
                </div>
              </div></a><a href="#">
              <div class="overflow-hidden rounded-3" style="padding: 1px;">
                <div class="p-7 rounded-3">
                  <div class="d-flex align-items-center mb-4">
                    <div class="me-3"><img src="gradia-assets/elements/features/folder-open.svg" alt=""/></div>
                    <h3 class="fs-16 mb-0 text-white" >Organize files</h3>
                  </div>
                  <p class="text-secondary-light mb-0" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
                </div>
              </div></a></div>
        </div>
        <div class="col-12 col-md-6 align-self-end"><img class="img-fluid" src="gradia-assets/images/features/connects.png" alt=""/></div>
      </div>
    </div>
  </div>
</section>

<section class="py-32 bg-white overflow-hidden">
  <div class="container">
    <div class="pt-16 px-16" style="background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%); border-radius: 15px;">
      <div class="container mb-24">
        <div class="row align-items-center">
          <div class="col-12 col-md-6">
            <div class="mw-md-md">
              <h2 class="fs-10 fw-semibold text-secondary mb-5 lh-sm" >Sync all teams in a single platform.</h2>
              <p class="text-muted mb-10" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.</p>
              <div class="container">
                <div class="row g-3">
                  <div class="col-auto">
                    <button class="btn btn-secondary fs-20 text-uppercase px-5" style="letter-spacing: 1px;" >Build your team</button>
                  </div>
                  <div class="col-auto">
                    <button class="btn btn-light fs-20 text-uppercase px-5" style="letter-spacing: 1px;" >Learn more</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6"><img class="img-fluid" src="gradia-assets/images/features/team2.png" alt=""/></div>
        </div>
      </div>
      <div class="container">
        <div class="bg-light bg-opacity-25" style="height:1px;"></div>
        <div class="row py-8 g-11">
          <div class="col">
            <div class="d-flex align-items-center"><img class="me-3" src="gradia-assets/elements/features/check2.svg" alt=""/>
              <h3 class="fs-17 fw-semibold mb-0 text-secondary" >No hidden fees</h3>
            </div>
          </div>
          <div class="col">
            <div class="d-flex align-items-center"><img class="me-3" src="gradia-assets/elements/features/check2.svg" alt=""/>
              <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Start with a free account</h3>
            </div>
          </div>
          <div class="col">
            <div class="d-flex align-items-center"><img class="me-3" src="gradia-assets/elements/features/check2.svg" alt=""/>
              <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Edit online, no software needed</h3>
            </div>
          </div>
          <div class="col">
            <div class="d-flex align-items-center"><img class="me-3" src="gradia-assets/elements/features/check2.svg" alt=""/>
              <h3 class="fs-17 fw-semibold mb-0 text-secondary" >Secured payment</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-32 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-4xl mx-auto">
      <div class="mw-md-lg mb-20">
        <h2 class="fs-11 text-secondary mb-6 lh" >Grow your video marketing channel fast</h2>
        <p class="text-muted" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat.</p>
      </div>
      <div class="container">
        <div class="row g-6">
          <div class="col-12 col-md-6">
            <div class="h-100 p-10" style="background: linear-gradient(125.68deg, #F4F4F5 0.59%, #FBFBFB 100%); border-radius: 15px;">
              <div class="d-flex align-items-center mb-36"><img class="me-4" src="gradia-assets/elements/features/video-camera.svg" alt=""/>
                <h3 class="fs-17 fw-semibold text-secondary mb-0" >Unlimited Videos</h3>
              </div>
              <h3 class="fs-14 fw-semibold text-secondary lh-sm" >Record Screen. Share with anyone without taking the hassle.</h3>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="d-flex justify-content-center align-content-center h-100" style="border-radius: 15px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);"><img class="position-relative img-fluid" style="top: 54px;" src="gradia-assets/images/features/card2.png" alt=""/></div>
          </div>
          <div class="col-12 col-md-6">
            <div class="d-flex flex-column justify-content-center p-10 p-md-16 h-100" style="border-radius: 15px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">
              <div class="pe-12">
                <div class="position-relative p-5 text-center bg-white rounded-3" style="z-index: 50">
                  <h3 class="fs-14" >162.9k</h3>
                  <p class="fs-20 fw-bold mb-1" >Last 7 Days Website Visits</p>
                  <p class="fs-20 text-muted mb-0" >10% Increase from Last Week</p>
                </div>
              </div>
              <div class="ps-7">
                <div class="mt-n12 p-5 text-center bg-white opacity-50 rounded-3">
                  <h3 class="fs-14" >162.9k</h3>
                  <p class="fs-20 fw-bold mb-1" >Last 7 Days Website Visits</p>
                  <p class="fs-20 text-muted mb-0" >10% Increase from Last Week</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="h-100 p-10" style="background: linear-gradient(125.68deg, #F4F4F5 0.59%, #FBFBFB 100%); border-radius: 15px;">
              <div class="d-flex align-items-center mb-36"><img class="me-4" src="gradia-assets/elements/features/chart-bar.svg" alt=""/>
                <h3 class="fs-17 fw-semibold text-secondary mb-0" >Details Report</h3>
              </div>
              <h3 class="fs-14 fw-semibold text-secondary lh-sm" >Get Unlimited Reports. Daily alert directly on your inbox.</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>