Bootstrap 5 Components

<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>

<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>

<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;">

<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>

<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>

<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">

<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>

<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>

<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;">

<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">

<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 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>

<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>

<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>

<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>

<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">

<section class="pb-12 pb-lg-24">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect y="4" width="32" height="32" rx="8" fill="#282828"></rect>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M28 18L28 13C28 12.4477 27.5523 12 27 12L24 12C23.4477 12 23 12.4477 23 13L23 17C23 20.3137 20.3137 23 17 23L13 23C12.4477 23 12 23.4477 12 24L12 27C12 27.5523 12.4477 28 13 28L18 28C23.5228 28 28 23.5228 28 18Z" fill="white"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4 22L4 27C4 27.5523 4.44772 28 5 28L8 28C8.55228 28 9 27.5523 9 27L9 23C9 19.6863 11.6863 17 15 17L19 17C19.5523 17 20 16.5523 20 16L20 13C20 12.4477 19.5523 12 19 12L14 12C8.47715 12 4 16.4772 4 22Z" fill="white"></path>
        </svg>
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse ms-6" id="nav01">
        <div class="border-2 border-start border-light py-3 pe-2"></div>
        <ul class="navbar-nav me-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>

<section class="pb-12 pb-lg-24">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</a></li>

<section class="pb-12 pb-lg-24">
  <nav class="navbar mb-12 navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img class="img-fluid" src="solstice-assets/images/logos/solstice-logo-dark.svg" alt="">
      </a>
      <button class="d-lg-none navbar-burger btn p-0 rounded-pill" style="border: none;" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg class="text-secondary" 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 class="collapse navbar-collapse position-relative" id="nav01">
        <ul class="navbar-nav position-absolute top-50 start-50 translate-middle">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="nav-1-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Platform</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Option 1</a></li>
              <li><a class="dropdown-item" href="#">Option 2</a></li>
              <li><a class="dropdown-item" href="#">Option 3</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Community</a></li>