Shuffle Components in Gradia library

<section class="pt-20 pb-32 bg-black overflow-hidden">
  <div class="container">
    <div class="text-center"><a class="d-inline-block mb-28" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a></div>
    <div class="row g-16">
      <div class="col-12 col-md-6">
        <div class="d-flex justify-content-center">
          <div class="d-inline-block p-1 rounded-pill" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);"><img class="img-fluid rounded-pill" src="gradia-assets/images/sign-up/woman.jpeg" alt=""/></div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="mw-md-lg">
          <h2 class="fs-10 text-white mb-2" >Sign up for free</h2>
          <p class="fs-17 text-dark mb-16" >Lorem ipsum dolor sit amet, consectetur adipis.</p>
          <form>
            <div class="row mb-4 g-4">
              <div class="col-12">
                <div class="form-group">
                  <label class="fs-18 fw-medium text-white mb-3" for="signUpInput3-1" >Full name</label>
                  <div class="rounded-1" style="padding: 1px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
                    <input class="bg-black text-dark px-5 py-4 w-100 border-0 rounded-1" id="signUpInput3-1" style="border-radius: 3px;" type="email" placeholder="i.e. John Doe"/>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="form-group">
                  <label class="fs-18 fw-medium text-white mb-3" for="signUpInput3-2" >Email address</label>
                  <div class="rounded-1" style="padding: 1px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
                    <input class="bg-black text-dark px-5 py-4 w-100 border-0 rounded-1" id="signUpInput3-2" style="border-radius: 3px;" type="email" placeholder="i.e. john@example.com"/>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="form-group">
                  <label class="fs-18 fw-medium text-white mb-3" for="signUpInput3-3" >Password</label>
                  <div class="rounded-1" style="padding: 1px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
                    <input class="bg-black text-dark px-5 py-4 w-100 border-0 rounded-1" id="signUpInput3-3" style="border-radius: 3px;" type="email" placeholder="********"/>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-check mb-5">
              <input class="form-check-input" id="signUpInput3-4" type="checkbox" value=""/>
              <label class="fs-19 text-dark form-check-label" for="signUpInput3-4"><span >I agree to the </span> <span class="text-white" >Terms &amp; Conditions</span> <span > of Gradia</span></label>
            </div>
            <button class="btn btn-light-light fs-20 fw-semibold px-16 py-5 border-0 text-white text-uppercase mb-5 rounded-pill" type="submit" style="letter-spacing: 1px; background: linear-gradient(98.24deg, #56C1E3 0%, #5B6AF0 100%);">Sign Up</button>
            <p class="text-dark mb-0"><span >Already have an account? </span> <a class="text-white" href="#" >Login now</a></p>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-28 pb-36 bg-secondary overflow-hidden">
  <div class="container">
    <div class="text-center mb-20">
      <p class="d-inline-block fs-20 fw-semibold text-white text-uppercase mb-6" 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-white mb-5" >Expert Team Members</h2>
    </div>
    <div class="container">
      <div class="row g-6">
        <div class="col-12 col-md-6 col-lg-3">
          <div class="position-relative d-flex flex-column justify-content-end h-100 rounded-1 overflow-hidden" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);">
            <div class="d-flex justify-content-center"><img class="w-100" src="gradia-assets/images/teams/avatar-xl.png" alt=""/></div>
            <div class="position-absolute bottom-0 start-0 p-3 w-100">
              <div class="py-4 px-5 bg-white rounded-1">
                <h3 class="fs-17 mb-1" >Cody Fisher</h3>
                <p class="text-muted mb-0" >Plains GP Holdings</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="position-relative d-flex flex-column justify-content-end h-100 rounded-1 overflow-hidden" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);">
            <div class="d-flex justify-content-center"><img class="w-100" src="gradia-assets/images/teams/avatar-xl2.png" alt=""/></div>
            <div class="position-absolute bottom-0 start-0 p-3 w-100">
              <div class="py-4 px-5 bg-white rounded-1">
                <h3 class="fs-17 mb-1" >Eleanor Pena</h3>
                <p class="text-muted mb-0" >Co-Founder, CTO</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="position-relative d-flex flex-column justify-content-end h-100 rounded-1 overflow-hidden" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);">
            <div class="d-flex justify-content-center"><img class="w-100" src="gradia-assets/images/teams/avatar-xl3.png" alt=""/></div>
            <div class="position-absolute bottom-0 start-0 p-3 w-100">
              <div class="py-4 px-5 bg-white rounded-1">
                <h3 class="fs-17 mb-1" >Devon Lane</h3>
                <p class="text-muted mb-0" >Chief Marketing Officer</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
          <div class="position-relative d-flex flex-column justify-content-end h-100 rounded-1 overflow-hidden" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);">
            <div class="d-flex justify-content-center"><img class="w-100" src="gradia-assets/images/teams/avatar-xl4.png" alt=""/></div>
            <div class="position-absolute bottom-0 start-0 p-3 w-100">
              <div class="py-4 px-5 bg-white rounded-1">
                <h3 class="fs-17 mb-1" >Robert Fox</h3>
                <p class="text-muted mb-0" >Senior Software Developer</p>
              </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-lg mx-auto text-center mb-14">
      <h2 class="fs-10 fw-semibold text-white mb-5" >Get in touch</h2>
      <p class="fs-17 text-secondary-light" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis.</p>
    </div>
    <form class="mw-md-xl mx-auto">
      <div class="form-group mb-5">
        <input class="bg-transparent text-dark px-5 py-4 w-100 border border-dark-light" id="contactsInput3-1" style="border-radius: 3px;" type="email" placeholder="Your full name"/>
      </div>
      <div class="form-group mb-5">
        <input class="bg-transparent text-dark px-5 py-4 w-100 border border-dark-light" id="contactsInput3-2" style="border-radius: 3px;" type="email" placeholder="Your email address"/>
      </div>
      <div class="form-group mb-5">
        <textarea class="form-control text-dark bg-transparent" id="contactsInput3-3" rows="3" placeholder="Write message" style="height: 155px;"></textarea>
      </div>
      <button class="btn btn-light-light fs-20 w-100 px-11 py-5 text-uppercase border-0 mb-6" type="submit" style="letter-spacing: 1px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">Send message</button>
      <p class="fs-19 text-center text-dark"><span >By clicking the send button, you agree with our </span><a class="text-dark text-decoration" href="#" style="text-decoration: underline;" >Terms &amp; Conditions</a></p>
    </form>
  </div>
</section>

<section class="position-relative pt-28 pb-32 bg-black overflow-hidden"><img class="h-100 position-absolute top-0 start-50 translate-middle-x" src="gradia-assets/elements/how-it-works/radial.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="mw-md-xl">
      <h2 class="fs-10 text-white mb-6" >Three steps to get started</h2>
      <p class="text-secondary-light mb-16" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
    </div>
    <div class="d-flex flex-nowrap mb-11">
      <div class="flex-shrink-0 me-6 bg-secondary pt-12 pb-10 px-9 mw-md rounded-3">
        <div class="d-flex align-items-center justify-content-center mb-11 rounded-pill" style="width: 50px; height:50px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">
          <h3 class="fs-16 mb-0" >1</h3>
        </div>
        <p class="fs-16 text-white mb-0" >Subscribe to a plan that suits you better and place orders as many as you want.</p>
      </div>
      <div class="flex-shrink-0 me-6 bg-secondary pt-12 pb-10 px-9 mw-md rounded-3">
        <div class="d-flex align-items-center justify-content-center mb-11 rounded-pill" style="width: 50px; height:50px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">
          <h3 class="fs-16 mb-0" >2</h3>
        </div>
        <p class="fs-16 text-white mb-0" >Subscribe to a plan that suits you better and place orders as many as you want.</p>
      </div>
      <div class="flex-shrink-0 me-6 bg-secondary pt-12 pb-10 px-9 mw-md rounded-3">
        <div class="d-flex align-items-center justify-content-center mb-11 rounded-pill" style="width: 50px; height:50px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">
          <h3 class="fs-16 mb-0" >3</h3>
        </div>
        <p class="fs-16 text-white mb-0" >Subscribe to a plan that suits you better and place orders as many as you want.</p>
      </div>
      <div class="flex-shrink-0 bg-secondary pt-12 pb-10 px-9 mw-md rounded-3">
        <div class="d-flex align-items-center justify-content-center mb-11 rounded-pill" style="width: 50px; height:50px; background: linear-gradient(98.24deg, #CEE9C1 0%, #83C8DE 100%);">
          <h3 class="fs-16 mb-0" >4</h3>
        </div>
        <p class="fs-16 text-white mb-0" >Subscribe to a plan that suits you better and place orders as many as you want.</p>
      </div>
    </div>
    <div class="d-flex justify-content-center justify-content-md-end"><a class="nav-link m-2" 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="#3F3F46" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a><a class="nav-link m-2" 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="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg></a></div>
  </div>
</section>

<section class="pt-28 pb-32 bg-secondary overflow-hidden">
  <div class="container">
    <h2 class="fs-10 fw-semibold text-white text-center text-secondary mb-16" >Trusted by popular marketing brands</h2>
    <div class="mw-md-6xl mx-auto border-bottom border-dark-light pb-20 mb-16">
      <div class="row justify-content-center align-items-center text-center">
        <div class="col-12 col-md-6 col-lg-3 p-5"><img class="img-fluid" src="gradia-assets/logos/brands/brand-light4.png" alt=""/></div>
        <div class="col-12 col-md-6 col-lg-3 p-5"><img class="img-fluid" src="gradia-assets/logos/brands/brand-light1.png" alt=""/></div>
        <div class="col-12 col-md-6 col-lg-3 p-5"><img class="img-fluid" src="gradia-assets/logos/brands/brand-light2.png" alt=""/></div>
        <div class="col-12 col-md-6 col-lg-3 p-5"><img class="img-fluid" src="gradia-assets/logos/brands/brand-light3.png" alt=""/></div>
      </div>
    </div>
    <div class="d-flex align-items-center justify-content-center mb-10"><img class="p-1" src="gradia-assets/elements/logos/star.svg" alt=""/><img class="p-1" src="gradia-assets/elements/logos/star.svg" alt=""/><img class="p-1" src="gradia-assets/elements/logos/star.svg" alt=""/><img class="p-1" src="gradia-assets/elements/logos/star.svg" alt=""/><img class="p-1" src="gradia-assets/elements/logos/star.svg" alt=""/></div>
    <div class="text-center mw-md-3xl mx-auto">
      <p class="fs-16 text-secondary-dark mb-5" >&ldquo;You made it so simple. My new team is so much faster and easier to work with than my old site. I just choose the page, make the change.&rdquo;</p>
      <h3 class="fs-16 fw-medium text-white mb-0" >Denny Jones, founder of Growthio</h3>
    </div>
  </div>
</section>

<section class="py-36 bg-white overflow-hidden">
  <div class="container">
    <div class="p-16" style="background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%); border-radius: 10px;">
      <div class="container">
        <div class="row justify-content-sm-between align-items-md-center g-16">
          <div class="col-12 col-md-6">
            <div class="mw-md-md">
              <h3 class="fs-16 fw-medium text-secondary opacity-75 mb-4" >Start with a free account</h3>
              <h2 class="fs-11 text-secondary mb-0" >Ready to grow your online business?</h2>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="container">
              <div class="row justify-content-md-end g-4">
                <div class="col-12 col-md-auto">
                  <button class="btn btn-light h-100 px-10 py-5 w-100 text-uppercase" type="button" style="letter-spacing: 1px;" >Sign up now</button>
                </div>
                <div class="col-12 col-md-auto">
                  <button class="btn btn-outline-light h-100 d-flex justify-content-center align-items-center px-10 py-5 w-100 text-uppercase" type="button" style="letter-spacing: 1px;">
                    <div>
                      <svg class="me-2" width="19" height="18" viewbox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8.18003 13.4261C6.8586 14.3918 5 13.448 5 11.8113V5.43865C5 3.80198 6.8586 2.85821 8.18003 3.82387L12.5403 7.01022C13.6336 7.80916 13.6336 9.44084 12.5403 10.2398L8.18003 13.4261Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div><span class="mb-0" >How it works</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-20 pb-32 bg-black overflow-hidden">
  <div class="container">
    <div class="text-center"><a class="d-inline-block mb-28" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a></div>
    <div class="row g-16">
      <div class="col-12 col-md-6">
        <div class="d-flex justify-content-center">
          <div class="d-inline-block p-1 rounded-pill" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%);"><img class="img-fluid rounded-pill" src="gradia-assets/images/sign-in/woman.jpeg" alt=""/></div>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <div class="mw-md-lg">
          <h2 class="fs-10 text-white mb-2" >Welcome to Gradia</h2>
          <p class="fs-17 text-dark mb-16" >Lorem ipsum dolor sit amet, consectetur adipis.</p>
          <form>
            <div class="row mb-4 g-4">
              <div class="col-12">
                <div class="form-group">
                  <label class="fs-18 fw-medium text-white mb-3" for="signInInput3-1" >Email address</label>
                  <div class="rounded-1" style="padding: 1px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
                    <input class="bg-black text-dark px-5 py-4 w-100 border-0 rounded-1" id="signInInput3-1" style="border-radius: 3px;" type="email" placeholder="i.e. john@example.com"/>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="form-group">
                  <label class="fs-18 fw-medium text-white mb-3" for="signInInput3-2" >Password</label>
                  <div class="rounded-1" style="padding: 1px; background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%)">
                    <input class="bg-black text-dark px-5 py-4 w-100 border-0 rounded-1" id="signInInput3-2" style="border-radius: 3px;" type="email" placeholder="********"/>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-check mb-5">
              <input class="form-check-input" id="signInInput3-3" type="checkbox" value=""/>
              <label class="fs-19 text-dark form-check-label" for="signInInput3-3" >Remember me</label>
            </div>
            <button class="btn btn-light-light fs-20 fw-semibold px-16 py-5 border-0 text-white text-uppercase mb-5 rounded-pill" type="submit" style="letter-spacing: 1px; background: linear-gradient(98.24deg, #56C1E3 0%, #5B6AF0 100%);">Login</button>
            <p class="text-dark mb-0"><span >Don&rsquo;t have an account? </span> <a class="text-white" href="#" >Create free account</a></p>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-32 bg-black overflow-hidden">
  <div class="container">
    <div class="row g-16">
      <div class="col-12 col-md-6">
        <div class="mw-md-md">
          <h2 class="fs-10 text-white mb-6" >Open positions</h2>
          <p class="fs-17 text-secondary-light mb-0" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar id fames nunc. Turpis leo turpis non, id ut nunc.</p>
        </div>
      </div>
      <div class="col-12 col-md-6"><a class="d-block" href="#">
          <div class="p-6 border border-bottom-0 border-dark-light">
            <div class="row align-items-center g-4">
              <div class="col-12 col-md-6">
                <div class="mb-1">
                  <h3 class="d-inline-block bg-secondary text-secondary-dark fs-20 fw-semibold px-3 py-2 mb-6 text-uppercase rounded-pill" style="letter-spacing: 1px;" >Full-time</h3>
                  <h3 class="fs-17 text-white mb-0" >Team Leader</h3>
                </div>
                <div class="d-flex">
                  <p class="text-dark mb-0" >Toledo, USA</p>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="d-flex justify-content-md-end">
                  <button class="btn btn-outline-light fs-18 fw-medium px-4 py-3 rounded" type="button" >Apply Now</button>
                </div>
              </div>
            </div>
          </div></a><a class="d-block" href="#">
          <div class="p-6 border border-bottom-0 border-dark-light">
            <div class="row align-items-center g-4">
              <div class="col-12 col-md-6">
                <div class="mb-1">
                  <h3 class="d-inline-block bg-secondary text-secondary-dark fs-20 fw-semibold px-3 py-2 mb-6 text-uppercase rounded-pill" style="letter-spacing: 1px;" >Full-time</h3>
                  <h3 class="fs-17 text-white mb-0" >Software Tester</h3>
                </div>
                <div class="d-flex">
                  <p class="text-dark mb-0" >Remote</p>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="d-flex justify-content-md-end">
                  <button class="btn btn-outline-light fs-18 fw-medium px-4 py-3 rounded" type="button" >Apply Now</button>
                </div>
              </div>
            </div>
          </div></a><a class="d-block" href="#">
          <div class="p-6 border border-bottom-0 border-dark-light">
            <div class="row align-items-center g-4">
              <div class="col-12 col-md-6">
                <div class="mb-1">
                  <h3 class="d-inline-block bg-secondary text-secondary-dark fs-20 fw-semibold px-3 py-2 mb-6 text-uppercase rounded-pill" style="letter-spacing: 1px;" >Full-time</h3>
                  <h3 class="fs-17 text-white mb-0" >Software Developer</h3>
                </div>
                <div class="d-flex">
                  <p class="text-dark mb-0" >Toledo, USA</p>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="d-flex justify-content-md-end">
                  <button class="btn btn-outline-light fs-18 fw-medium px-4 py-3 rounded" type="button" >Apply Now</button>
                </div>
              </div>
            </div>
          </div></a><a class="d-block" href="#">
          <div class="p-6 border border-dark-light">
            <div class="row align-items-center g-4">
              <div class="col-12 col-md-6">
                <div class="mb-1">
                  <h3 class="d-inline-block bg-secondary text-secondary-dark fs-20 fw-semibold px-3 py-2 mb-6 text-uppercase rounded-pill" style="letter-spacing: 1px;" >Full-time</h3>
                  <h3 class="fs-17 text-white mb-0" >UI/UX Designer</h3>
                </div>
                <div class="d-flex">
                  <p class="text-dark mb-0" >Toledo, USA</p>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <div class="d-flex justify-content-md-end">
                  <button class="btn btn-outline-light fs-18 fw-medium px-4 py-3 rounded" type="button" >Apply Now</button>
                </div>
              </div>
            </div>
          </div></a></div>
    </div>
  </div>
</section>

<section class="py-44 bg-black overflow-hidden">
  <div class="container">
    <div class="row align-items-center g-24">
      <div class="col-12 col-md-8">
        <div class="mw-md-3xl">
          <div class="container">
            <div class="row align-items-center g-9">
              <div class="col-auto col-md-auto">
                <div class="d-inline-block overflow-hidden rounded-pill" style="background: linear-gradient(98.24deg, #6CD5F7 0%, #F89D5C 50.52%, #5B6AF0 100%);"><img class="img-fluid" src="gradia-assets/images/numbers/avatar-bg.png" alt=""/></div>
              </div>
              <div class="col-auto col-md-6">
                <p class="text-secondary-dark mb-6" >&ldquo;You made it so simple. My new team is so much faster and easier to work with than my old site. I just choose the page, make the change.&rdquo;</p>
                <h3 class="fs-16 fw-medium text-white mb-0" >Denny Jones, founder of Growthio</h3>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="mw-xs mx-auto p-4 py-9 text-center rounded-3" style="background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
          <h2 class="fs-2 mb-6" style="letter-spacing: -2px" >58:1</h2>
          <p class="fs-17 text-secondary mb-0" >Average Ad ROI when we do marketing for eCommerce</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-24 bg-white overflow-hidden" style="background: linear-gradient(98.24deg, #FFFFFF 0%, #F9F9FF 47.4%, #EBECF7 100%);">
  <div class="container">
    <div class="row border-bottom pb-20 g-16">
      <div class="col-12 col-md-6 col-lg-3">
        <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-9" style="letter-spacing: 1px;" >Company</h3>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Features</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Pricing</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Affiliate Program</h3></a></li>
          <li class="nav-item"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Press Kit</h3></a></li>
        </ul>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-9" style="letter-spacing: 1px;" >Support</h3>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Account</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Help</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Contact Us</h3></a></li>
          <li class="nav-item"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Customer Support</h3></a></li>
        </ul>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-9" style="letter-spacing: 1px;" >Products</h3>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Flex</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Zospace</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Artemis</h3></a></li>
          <li class="nav-item"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Gradia</h3></a></li>
        </ul>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <h3 class="fs-20 fw-semibold text-dark text-uppercase mb-9" style="letter-spacing: 1px;" >Legals</h3>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Terms &amp; Conditions</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Privacy Policy</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium mb-0" >Licensing</h3></a></li>
        </ul>
      </div>
    </div>
    <div class="row align-items-center justify-content-between py-8 g-4">
      <div class="col-auto">
        <p class="fs-19 text-secondary mb-0" >&copy; Copyright 2022. All Rights Reserved by Gradia.</p>
      </div>
      <div class="col-auto">
        <div class="d-flex align-items-center">
          <svg class="me-3" width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.5 6.66667L9.0755 11.0503C9.63533 11.4236 10.3647 11.4236 10.9245 11.0503L17.5 6.66667M4.16667 15.8333H15.8333C16.7538 15.8333 17.5 15.0871 17.5 14.1667V5.83334C17.5 4.91286 16.7538 4.16667 15.8333 4.16667H4.16667C3.24619 4.16667 2.5 4.91286 2.5 5.83334V14.1667C2.5 15.0871 3.24619 15.8333 4.16667 15.8333Z" stroke="#18181B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <h3 class="fs-18 fw-medium text-secondary mb-0" >info@gradia.com</h3>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-24 pb-32 bg-black overflow-hidden"><img class="position-absolute start-50 bottom-0 translate-middle-x" src="gradia-assets/elements/faq/radial.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <h2 class="fs-10 fw-semibold text-white mb-16" >Frequently Asked Question</h2>
    <div class="py-9 border-top border-dark-light">
      <div class="row g-12">
        <div class="col-12 col-md-6">
          <h3 class="fs-16 fw-medium text-white mb-0" >Is it really unlimited downloads?</h3>
        </div>
        <div class="col-12 col-md-6">
          <div class="mw-md-xl ms-auto">
            <p class="text-light-dark" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="py-9 border-top border-dark-light">
      <div class="row g-12">
        <div class="col-12 col-md-6">
          <h3 class="fs-16 fw-medium text-white mb-0" >What kind of file do you offer with the packages?</h3>
        </div>
        <div class="col-12 col-md-6">
          <div class="mw-md-xl ms-auto">
            <p class="text-light-dark" >Consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="py-9 border-top border-dark-light">
      <div class="row g-12">
        <div class="col-12 col-md-6">
          <h3 class="fs-16 fw-medium text-white mb-0" >Do you offer discounts on annual plans?</h3>
        </div>
        <div class="col-12 col-md-6">
          <div class="mw-md-xl ms-auto">
            <p class="text-light-dark" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-36 bg-light-light overflow-hidden">
  <div class="container">
    <div class="row align-items-center g-16">
      <div class="col-12 col-md-5">
        <div class="d-flex justify-content-center"><img class="img-fluid" src="gradia-assets/images/applications/phone.png" alt=""/></div>
      </div>
      <div class="position-relative col-12 col-md-7"><img class="position-absolute top-0 start-0" src="gradia-assets/elements/applications/radial.svg" alt=""/>
        <div class="position-relative mw-md-2xl text-center" style="z-index: 50;">
          <h2 class="fs-7 lh-sm mb-7" >Download. Use. Grow</h2>
          <p class="fs-17 text-muted mb-12" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
          <div class="row justify-content-center g-5 mb-7">
            <div class="col-auto"><a href="#"><img src="gradia-assets/logos/brands/app-store-rounded2.png" alt=""/></a></div>
            <div class="col-auto"><a href="#"><img src="gradia-assets/logos/brands/play-store-rounded2.png" alt=""/></a></div>
          </div>
          <p class="text-muted mb-0" >46k+ users are using Gradia app</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-24 bg-black overflow-hidden"><img class="position-absolute bottom-0 start-0" src="gradia-assets/elements/footers/radial2.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="row g-16">
      <div class="col-12 col-md-6 col-lg-6">
        <div class="d-flex flex-column justify-content-between h-100">
          <div class="mb-11"><a class="d-inline-block mb-11" href="#"><img class="img-fluid" src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a>
            <p class="text-light-dark fw-medium mw-md" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pretium dui convallis sagittis tempus mi viverra eget. Quisque justo, blandit orci.</p>
          </div>
          <div>
            <p class="fs-19 text-secondary-light mb-0" >&copy; Copyright 2022. All Rights Reserved by Gradia.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-2">
        <h3 class="fs-18 fw-medium text-dark mb-9" >Company</h3>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium text-white mb-0" >Features</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium text-white mb-0" >Pricing</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium text-white mb-0" >Affiliate Program</h3></a></li>
          <li class="nav-item"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium text-white mb-0" >Press Kit</h3></a></li>
        </ul>
      </div>
      <div class="col-12 col-md-6 col-lg-2">
        <h3 class="fs-18 fw-medium text-dark mb-9" >Support</h3>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium text-white mb-0" >Account</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium text-white mb-0" >Help</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium text-white mb-0" >Contact Us</h3></a></li>
          <li class="nav-item"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium text-white mb-0" >Customer Support</h3></a></li>
        </ul>
      </div>
      <div class="col-12 col-md-6 col-lg-2">
        <h3 class="fs-18 fw-medium text-dark mb-9" >Contact Info</h3>
        <ul class="nav flex-column">
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium text-white mb-0" >hi@gradia.com</h3></a></li>
          <li class="nav-item mb-2"><a class="nav-link px-0" href="#">
              <h3 class="fs-18 fw-medium text-white mb-0" >+1 (394) 593 1994</h3></a></li>
        </ul>
        <div class="row mt-6 ms-n4">
          <div class="col-auto p-5"><a href="#">
              <svg width="14" height="12" viewbox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.6488 1.58924C13.137 1.81672 12.5967 1.9589 12.028 2.0442C12.5967 1.70298 13.0517 1.16271 13.2507 0.508707C12.7105 0.821493 12.1133 1.04897 11.4593 1.19115C10.9475 0.650883 10.2082 0.309662 9.41201 0.309662C7.87652 0.309662 6.62537 1.5608 6.62537 3.0963C6.62537 3.32378 6.65381 3.52283 6.71068 3.72187C4.40744 3.60813 2.33168 2.49916 0.938358 0.793058C0.710877 1.21958 0.568702 1.67455 0.568702 2.18638C0.568702 3.15317 1.0521 4.00622 1.81985 4.51805C1.36488 4.48962 0.938358 4.37588 0.540266 4.17683V4.20527C0.540266 5.57015 1.50706 6.70755 2.78664 6.96347C2.55916 7.02034 2.30324 7.04877 2.04733 7.04877C1.87672 7.04877 1.67767 7.02034 1.50706 6.9919C1.87672 8.10087 2.90038 8.92549 4.12309 8.92549C3.15629 9.6648 1.96202 10.1198 0.654007 10.1198C0.426526 10.1198 0.199046 10.1198 0 10.0913C1.25114 10.8875 2.70133 11.3425 4.2937 11.3425C9.44045 11.3425 12.2555 7.07721 12.2555 3.38065C12.2555 3.26691 12.2555 3.12473 12.2555 3.01099C12.7958 2.64134 13.2792 2.15794 13.6488 1.58924Z" fill="white"></path>
              </svg></a></div>
          <div class="col-auto p-5"><a href="#">
              <svg width="8" height="15" viewbox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.34923 14.8715V8.08792H0.0664062V5.44422H2.34923V3.49457C2.34923 1.23201 3.73112 0 5.74948 0C6.71629 0 7.54722 0.0719815 7.78937 0.104155V2.46866L6.38954 2.4693C5.29184 2.4693 5.0793 2.9909 5.0793 3.75633V5.44422H7.6972L7.35634 8.08792H5.07929V14.8715H2.34923Z" fill="white"></path>
              </svg></a></div>
          <div class="col-auto p-5"><a href="#">
              <svg width="18" height="17" viewbox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.78828 1.49101C10.9976 1.49101 11.2592 1.49928 12.132 1.53908C12.6568 1.5455 13.1765 1.64186 13.6687 1.82396C14.0257 1.96161 14.3498 2.17247 14.6203 2.44298C14.8908 2.71348 15.1017 3.03763 15.2393 3.39456C15.4214 3.88675 15.5178 4.40652 15.5242 4.93127C15.5636 5.80404 15.5723 6.06568 15.5723 8.275C15.5723 10.4843 15.564 10.746 15.5242 11.6187C15.5178 12.1435 15.4214 12.6633 15.2393 13.1554C15.1017 13.5124 14.8908 13.8365 14.6203 14.107C14.3498 14.3775 14.0257 14.5884 13.6687 14.726C13.1765 14.9081 12.6568 15.0045 12.132 15.0109C11.2596 15.0503 10.998 15.059 8.78828 15.059C6.57857 15.059 6.31693 15.0507 5.44455 15.0109C4.91979 15.0045 4.40003 14.9081 3.90784 14.726C3.55091 14.5884 3.22676 14.3775 2.95626 14.107C2.68575 13.8365 2.47489 13.5124 2.33724 13.1554C2.15513 12.6633 2.05878 12.1435 2.05236 11.6187C2.01295 10.746 2.00428 10.4843 2.00428 8.275C2.00428 6.06568 2.01256 5.80404 2.05236 4.93127C2.05878 4.40652 2.15513 3.88675 2.33724 3.39456C2.47489 3.03763 2.68575 2.71348 2.95626 2.44298C3.22676 2.17247 3.55091 1.96161 3.90784 1.82396C4.40003 1.64186 4.91979 1.5455 5.44455 1.53908C6.31732 1.49967 6.57896 1.49101 8.78828 1.49101ZM8.78828 0C6.54232 0 6.2594 0.00945666 5.37678 0.0496476C4.69 0.0633078 4.01052 0.193342 3.36723 0.43422C2.81539 0.642135 2.31556 0.967957 1.90262 1.38895C1.48125 1.80204 1.15515 2.30215 0.947104 2.85435C0.706226 3.49764 0.576192 4.17712 0.562531 4.86389C0.523129 5.74573 0.513672 6.02864 0.513672 8.27461C0.513672 10.5206 0.523129 10.8035 0.56332 11.6861C0.57698 12.3729 0.707014 13.0524 0.947892 13.6957C1.15571 14.2478 1.48153 14.7479 1.90262 15.161C2.31579 15.5821 2.8159 15.908 3.36802 16.1158C4.01131 16.3567 4.69079 16.4867 5.37757 16.5004C6.26019 16.5398 6.54192 16.55 8.78907 16.55C11.0362 16.55 11.3179 16.5405 12.2006 16.5004C12.8873 16.4867 13.5668 16.3567 14.2101 16.1158C14.7596 15.9028 15.2586 15.5774 15.6752 15.1606C16.0918 14.7437 16.4168 14.2445 16.6295 13.6949C16.8703 13.0516 17.0004 12.3721 17.014 11.6853C17.0534 10.8035 17.0629 10.5206 17.0629 8.27461C17.0629 6.02864 17.0534 5.74573 17.0132 4.8631C16.9996 4.17633 16.8695 3.49685 16.6287 2.85356C16.4209 2.30144 16.095 1.80133 15.6739 1.38816C15.2608 0.967073 14.7607 0.641246 14.2085 0.433432C13.5653 0.192554 12.8858 0.0625198 12.199 0.0488596C11.3172 0.00945672 11.0342 0 8.78828 0Z" fill="white"></path>
                <path d="M8.78632 4.02582C7.94591 4.02582 7.12436 4.27503 6.42559 4.74194C5.72681 5.20885 5.18218 5.87248 4.86056 6.64892C4.53895 7.42537 4.4548 8.27974 4.61876 9.104C4.78272 9.92827 5.18741 10.6854 5.78168 11.2797C6.37594 11.8739 7.13307 12.2786 7.95734 12.4426C8.78161 12.6065 9.63598 12.5224 10.4124 12.2008C11.1889 11.8792 11.8525 11.3345 12.3194 10.6358C12.7863 9.93698 13.0355 9.11544 13.0355 8.27503C13.0355 7.14807 12.5878 6.06726 11.791 5.27038C10.9941 4.4735 9.91328 4.02582 8.78632 4.02582ZM8.78632 11.0332C8.2408 11.0332 7.70753 10.8715 7.25394 10.5684C6.80036 10.2653 6.44683 9.83454 6.23807 9.33054C6.02931 8.82655 5.97469 8.27197 6.08111 7.73693C6.18754 7.20189 6.45023 6.71042 6.83598 6.32468C7.22172 5.93894 7.71318 5.67625 8.24822 5.56982C8.78326 5.4634 9.33784 5.51802 9.84184 5.72678C10.3458 5.93554 10.7766 6.28907 11.0797 6.74265C11.3828 7.19623 11.5445 7.7295 11.5445 8.27503C11.5445 9.00655 11.2539 9.70811 10.7367 10.2254C10.2194 10.7426 9.51784 11.0332 8.78632 11.0332Z" fill="white"></path>
                <path d="M13.2058 4.85053C13.7542 4.85053 14.1988 4.40597 14.1988 3.85758C14.1988 3.30918 13.7542 2.86462 13.2058 2.86462C12.6575 2.86462 12.2129 3.30918 12.2129 3.85758C12.2129 4.40597 12.6575 4.85053 13.2058 4.85053Z" fill="white"></path>
              </svg></a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-24 pb-32 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-md-xl mx-auto text-center mb-20">
      <h2 class="fs-10 text-secondary lh-sm mb-9" >Everything you need to launch a website</h2>
      <div class="d-flex justify-content-center">
        <div class="form-check me-9">
          <input class="form-check-input" id="pricingInput4-1" type="radio" name="flexRadioDefault"/>
          <label class="form-check-label" for="pricingInput4-1">
            <p class="fs-18 fw-medium text-dark mb-0"><span >Annually </span><span class="text-primary" >(Save up to 25%)</span></p>
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" id="pricingInput4-2" type="radio" name="flexRadioDefault"/>
          <label class="form-check-label" for="pricingInput4-2">
            <p class="fs-18 fw-medium text-dark mb-0" >Monthly</p>
          </label>
        </div>
      </div>
    </div>
    <div class="row g-6">
      <div class="col-12 col-md-6 col-lg-3">
        <div class="h-100 bg-white p-10 border border-light-light rounded-3">
          <h2 class="fs-18 fw-medium mb-9" >Free Plan</h2>
          <div class="d-flex align-items-end border-bottom border-light-light pb-9 mb-8">
            <h3 class="fs-10 mb-0" >$0</h3><span class="fs-19" >/ Per Month</span>
          </div>
          <ul class="list-group list-group-flush mb-10">
            <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" >100GB Cloud Storage</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" >500 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="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p class="text-secondary-light 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="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p class="text-secondary-light 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="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p class="text-secondary-light 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="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p class="text-secondary-light mb-0" >Free Custom Domain</p>
            </li>
          </ul>
          <div class="rounded-1">
            <button class="btn btn-outline-light-dark w-100 fs-17 text-black px-9 py-4" type="button" >Sign up. It&rsquo;s Free</button>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="h-100 bg-white p-10 border border-light-light rounded-3">
          <h2 class="fs-18 fw-medium mb-9" >Basic Plan</h2>
          <div class="d-flex align-items-end border-bottom border-light-light pb-9 mb-8">
            <h3 class="fs-10 mb-0" >$5</h3><span class="fs-19" >/ Per Month</span>
          </div>
          <ul class="list-group list-group-flush mb-10">
            <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" >100GB Cloud Storage</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" >600 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="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p class="text-secondary-light 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="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p class="text-secondary-light 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="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p class="text-secondary-light mb-0" >Free Custom Domain</p>
            </li>
          </ul>
          <div class="rounded-1">
            <button class="btn btn-outline-light-dark w-100 fs-17 text-black px-9 py-4" type="button" >Start free 1 month trial</button>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="h-100 bg-secondary p-10 border border-light-light rounded-3">
          <h2 class="fs-18 fw-medium text-white mb-9" >Popular Plan</h2>
          <div class="d-flex align-items-end border-bottom border-dark-light pb-9 mb-8">
            <h3 class="fs-10 text-white mb-0" >$45</h3><span class="fs-19 text-white" >/ Per Month</span>
          </div>
          <ul class="list-group list-group-flush mb-10">
            <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-white mb-0" >100GB Cloud Storage</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-white 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-white mb-0" >500 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-white 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-white 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="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p class="text-secondary-light 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="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill="#A1A1AA"></path>
              </svg>
              <p class="text-secondary-light mb-0" >Free Custom Domain</p>
            </li>
          </ul>
          <div class="rounded-1">
            <button class="btn w-100 fs-17 text-black px-9 py-4" type="button" style="background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">Start free 1 month trial</button>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="h-100 bg-white p-10 border border-light-light rounded-3">
          <h2 class="fs-18 fw-medium mb-9" >Premium</h2>
          <div class="d-flex align-items-end border-bottom border-light-light pb-9 mb-8">
            <h3 class="fs-10 mb-0" >$99</h3><span class="fs-19" >/ Per Month</span>
          </div>
          <ul class="list-group list-group-flush mb-10">
            <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" >10GB Cloud Storage</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>
            <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 class="rounded-1">
            <button class="btn btn-outline-light-dark w-100 fs-17 text-black px-9 py-4" type="button" >Start free 1 month trial</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-16 pb-64 bg-black overflow-hidden"><img class="position-absolute top-0 start-50 translate-middle-x h-100" src="gradia-assets/elements/http-codes/radial2.svg" alt=""/>
  <div class="container">
    <div class="position-relative" style="z-index: 50;">
      <div class="text-center"><a class="d-inline-block mb-60" href="#"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""/></a></div>
      <div class="mb-24 text-center"><img class="img-fluid" src="gradia-assets/elements/http-codes/404.png" alt=""/></div>
      <div class="mw-2xl mx-auto">
        <div class="row align-items-end g-4">
          <div class="col-12 col-md-6">
            <h2 class="fs-12 fw-semibold lh-sm text-white mb-0" >Something went wrong!</h2>
          </div>
          <div class="col-12 col-md-6">
            <div class="d-flex align-items-center"><a class="d-flex align-items-center text-white" href="#">
                <svg class="me-3" width="19" height="19" viewbox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 14.75L2.75 9.5M2.75 9.5L8 4.25M2.75 9.5L16.25 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <h3 class="fs-20 fw-semibold text-white text-uppercase mb-0" style="letter-spacing: 1px;" >Go back to Homepage</h3></a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-24 pb-32 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-md-2xl mx-auto text-center mb-16">
      <h2 class="fs-10 mb-6 lh-sm" >A simple &amp; smart way to grow your marketing team</h2>
      <p class="mb-0 text-muted mx-auto mb-0 mw-md-lg" >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>
    <div class="mw-7xl mx-auto">
      <div class="container">
        <div class="row g-16">
          <div class="col-12 col-md-4">
            <div><a class="d-block mb-9" href="#"><img class="w-100" src="gradia-assets/images/features/experts.png" alt=""/></a>
              <h4 class="fs-16 mb-4" >2100+ marketing experts</h4>
              <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 h-px bg-black" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%); height: 2px;"></div>
                </h4></a>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div><a class="d-block mb-9" href="#"><img class="w-100" src="gradia-assets/images/features/insights.png" alt=""/></a>
              <h4 class="fs-16 mb-4" >Live analytics &amp; insights</h4>
              <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 h-px bg-black" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%); height: 2px;"></div>
                </h4></a>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div><a class="d-block mb-9" href="#"><img class="w-100" src="gradia-assets/images/features/results.png" alt=""/></a>
              <h4 class="fs-16 mb-4" >Proven results</h4>
              <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 h-px bg-black" style="background: linear-gradient(90deg, rgba(108,213,246,1 ) 0%, rgba(248,157,92,1) 50%, rgba(91,106,240,1) 100%); height: 2px;"></div>
                </h4></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-28 bg-black overflow-hidden"><img class="position-absolute start-0 bottom-0 w-100" src="gradia-assets/elements/applications/radial2.svg" alt=""/>
  <div class="container">
    <div class="position-relative mw-md-xl mx-auto text-center" style="z-index: 50;">
      <h2 class="fs-7 lh-sm text-white mb-7" >Try Gradia App Free</h2>
      <p class="fs-17 text-secondary-light mb-11" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
      <div class="row justify-content-center g-5 mb-28">
        <div class="col-auto"><a href="#"><img src="gradia-assets/logos/brands/app-store-gradient-green.png" alt=""/></a></div>
        <div class="col-auto"><a href="#"><img src="gradia-assets/logos/brands/play-store-gradient-green.png" alt=""/></a></div>
      </div><img class="img-fluid" src="gradia-assets/images/applications/phone-half.png" alt=""/>
    </div>
  </div>
</section>

<section>
  <nav class="navbar navbar-dark navbar-expand-lg bg-white 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-black.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-secondary 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-secondary 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-secondary 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-secondary 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-white 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-black.svg" alt=""/></a><a class="navbar-close" 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="#111827" 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-secondary 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-secondary 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-secondary 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-secondary mb-0" >Pricing</h3></a></li>
        </ul>
      </div>
      <div>
        <button class="btn btn-light px-4 py-3 w-100 mb-5 rounded-1" type="button">
          <h4 class="fs-17 fw-medium text-secondary 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-light px-4 py-3 w-100 rounded-1" type="button">
            <h4 class="fs-17 fw-medium text-secondary mb-0" >Start Free Trial</h4>
          </button>
        </div>
      </div>
    </nav>
  </div>
</section>

<section class="position-relative py-36 bg-light-light overflow-hidden"><img class="position-absolute top-0 start-50 translate-middle-x" src="gradia-assets/elements/testimonials/radial2.svg" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="mw-6xl mx-auto">
      <div class="container">
        <div class="row g-12">
          <div class="col-12 col-md-6">
            <h2 class="fs-11 fw-semibold px-8 mb-14 lh-sm" >5,920+ people think Gradia is the best</h2>
            <div class="p-12 bg-white rounded-3">
              <h2 class="fs-16 fw-medium mb-5" >&ldquo;Easy to use&rdquo;</h2>
              <p class="fs-17 text-black mb-7" >&ldquo;Amet minim mollit non deserunt ullam co est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.&rdquo;</p>
              <div class="container">
                <div class="row align-items-center g-3">
                  <div class="col-auto"><img src="gradia-assets/images/testimonials/avatar7.png" alt=""/></div>
                  <div class="col-auto">
                    <h3 class="fs-17 mb-1" >Marvin McKinney</h3>
                    <p class="fs-19 text-muted mb-0" >Co-founder at Parkon</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="p-12 mb-12 bg-white rounded-3">
              <h2 class="fs-16 fw-medium mb-5" >&ldquo;Very fast video output&rdquo;</h2>
              <p class="fs-17 text-black mb-7" >&ldquo;Amet minim mollit non deserunt ullam co est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.&rdquo;</p>
              <div class="container">
                <div class="row align-items-center g-3">
                  <div class="col-auto"><img src="gradia-assets/images/testimonials/avatar8.png" alt=""/></div>
                  <div class="col-auto">
                    <h3 class="fs-17 mb-1" >Kathryn Murphy</h3>
                    <p class="fs-19 text-muted mb-0" >Project Manager at Marron.ai</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="p-12 bg-white rounded-3">
              <h2 class="fs-16 fw-medium mb-5" >&ldquo;Better than anything&rdquo;</h2>
              <p class="fs-17 text-black mb-7" >&ldquo;Amet minim mollit non deserunt ullam co est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.&rdquo;</p>
              <div class="container">
                <div class="row align-items-center g-3">
                  <div class="col-auto"><img src="gradia-assets/images/testimonials/avatar9.png" alt=""/></div>
                  <div class="col-auto">
                    <h3 class="fs-17 mb-1" >Devon Lane</h3>
                    <p class="fs-19 text-muted mb-0" >Digital Marketer</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-36 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-4xl mx-auto">
      <div class="row mb-20">
        <div class="col-12 col-sm-4 d-flex justify-content-center">
          <div class="d-inline-block"><a class="nav-link d-inline-block px-7 mb-2" href="#">
              <h3 class="fs-17 fw-semibold text-secondary mb-0" >Create Free Account</h3></a>
            <div style="height: 3px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);"></div>
          </div>
        </div>
        <div class="col-12 col-sm-4 d-flex justify-content-center">
          <div class="d-inline-block"><a class="nav-link d-inline-block px-7 mb-2" href="#">
              <h3 class="fs-17 fw-semibold text-secondary mb-0" >Build A Team</h3></a>
            <div class="bg-light-light" style="height: 3px;"></div>
          </div>
        </div>
        <div class="col-12 col-sm-4 d-flex justify-content-center">
          <div class="d-inline-block"><a class="nav-link d-inline-block px-7 mb-2" href="#">
              <h3 class="fs-17 fw-semibold text-secondary mb-0" >Start Your Project</h3></a>
            <div class="bg-light-light" style="height: 3px;"></div>
          </div>
        </div>
      </div>
      <div class="row align-items-center g-16">
        <div class="col-12 col-md-6"><img class="img-fluid" src="gradia-assets/images/how-it-works/illustration.png" alt=""/></div>
        <div class="col-12 col-md-6">
          <h2 class="fs-12 lh-sm mb-6" >Start with creating a free account on Gradia.</h2>
          <p class="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="row g-4">
            <div class="col-12 col-md-auto">
              <button class="btn btn-primary w-100 fs-18 fw-medium px-8" 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 fw-medium px-8" type="button" >Learn More</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>