Bootstrap 5 Call to action Components

<section class="py-12 py-lg-24 py-xl-32 position-relative overflow-hidden">
  <img class="position-absolute top-0 start-0" src="saturn-assets/images/cta/blue-light-left-top.png" alt="">
  <img class="position-absolute end-0 bottom-0" src="saturn-assets/images/cta/orange-right-bottom.png" alt="">
  <div class="position-relative container">
    <div>
      <h1 class="font-heading mb-10">
        <span>Build stunning websites are going easy with</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">saturn</span>
        <span>ui library</span>
      </h1>
      <p class="mw-xl lead text-secondary fs-6 mb-10">Nisi eu pellentesque felis volutpat aliquet pulvinar sed. Vitae fames vestibulum urna vel odio mauris urna orci est. Eget amet elementum fames nisl eu.</p>
      <div class="d-md-flex align-items-center">
        <a class="btn mb-14 mb-md-0 me-md-16 btn-primary rounded-pill" href="#">
          <span>Learn More</span>
          <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.8299 12.04L10.5899 7.80001C10.497 7.70628 10.3864 7.63189 10.2645 7.58112C10.1427 7.53035 10.012 7.50421 9.87994 7.50421C9.74793 7.50421 9.61723 7.53035 9.49537 7.58112C9.37351 7.63189 9.26291 7.70628 9.16994 7.80001C8.98369 7.98737 8.87915 8.24082 8.87915 8.50501C8.87915 8.7692 8.98369 9.02265 9.16994 9.21001L12.7099 12.75L9.16994 16.29C8.98369 16.4774 8.87915 16.7308 8.87915 16.995C8.87915 17.2592 8.98369 17.5126 9.16994 17.7C9.26338 17.7927 9.3742 17.866 9.49604 17.9158C9.61787 17.9655 9.74834 17.9908 9.87994 17.99C10.0115 17.9908 10.142 17.9655 10.2638 17.9158C10.3857 17.866 10.4965 17.7927 10.5899 17.7L14.8299 13.46C14.9237 13.367 14.9981 13.2564 15.0488 13.1346C15.0996 13.0127 15.1257 12.882 15.1257 12.75C15.1257 12.618 15.0996 12.4873 15.0488 12.3654C14.9981 12.2436 14.9237 12.133 14.8299 12.04Z" fill="#FFF2EE"></path>
          </svg>
        </a>
        <div class="d-flex align-items-center">
          <img class="img-fluid d-block" src="saturn-assets/images/cta/image-small.png" alt="">
          <span class="ms-6 fs-9 text-secondary">Our office is always open to having you anytime</span>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-sm-24">
  <div class="container">
    <div class="mw-xl mx-auto text-center">
      <h1 class="text-center h3 mb-5" >Collaborate efficiently with the teams today</h1>
      <p class="fs-8 text-secondary mb-8" >Amet minim mollit non deserunt ullamco.</p><a class="btn mb-8 btn-primary shadow" href="#" >Join Free for 30 Days</a>
      <div><img class="d-inline-block" src="flaro-assets/images/cta/avatar-circle.png" alt=""/><img class="d-inline-block ms-n4" src="flaro-assets/images/cta/avatar-circle2.png" alt=""/><img class="d-inline-block ms-n4" src="flaro-assets/images/cta/avatar-circle3.png" alt=""/><span class="d-inline-block ms-2 fs-9 text-secondary"><span >Join </span><span class="fw-bold" >250+</span><span >other startup founders</span></span></div>
    </div>
  </div>
</section>

<section class="position-relative pt-36 lg:pb-14 bg-secondary overflow-hidden"><img class="position-absolute top-0 start-50 translate-middle-x" src="gradia-assets/elements/cta/radial.png" alt=""/>
  <div class="position-relative container" style="z-index: 50;">
    <div class="row mb-12">
      <div class="col-12 col-xl-6">
        <div class="mw-xl-xl">
          <h1 class="fs-10 mb-6 text-white lh-sm" >Get maximum results from all projects.</h1>
          <p class="fs-17 text-white mb-20" >Amet minim mollit non deserunt ullamco est sit aliqua.</p>
          <button class="btn btn-primary text-uppercase px-6 mb-11" type="button" style="letter-spacing: 1px;" >Connect Now</button>
          <ul class="list-group-flush p-0 m-n2">
            <li class="d-inline-flex align-items-center p-2 fw-semibold list-group-item bg-transparent text-white border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="11" cy="11" r="11" fill="#3F3F46"></circle>
                <path d="M6.7959 11.6006L9.1982 14.0029L15.2039 7.99713" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0" >No hidden fees</p>
            </li>
            <li class="d-inline-flex align-items-center p-2 fw-semibold list-group-item bg-transparent text-white border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="11" cy="11" r="11" fill="#3F3F46"></circle>
                <path d="M6.7959 11.6006L9.1982 14.0029L15.2039 7.99713" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0" >Start with a free account</p>
            </li>
            <li class="d-inline-flex align-items-center p-2 fw-semibold list-group-item bg-transparent text-white border-0">
              <svg class="me-3" width="22" height="22" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="11" cy="11" r="11" fill="#3F3F46"></circle>
                <path d="M6.7959 11.6006L9.1982 14.0029L15.2039 7.99713" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p class="mb-0" >Edit online, no software needed</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex px-3 px-xl-0 position-xl-absolute end-0 bottom-0 mw-xl-xl mw-xxl-none"><img class="img-fluid mx-auto" src="gradia-assets/images/cta/screen.png" alt=""/></div>
</section>

<section class="py-64 py-lg-40 position-relative">
  <div class="position-absolute top-0 start-0 w-100 h-100 py-10">
    <div class="container d-flex flex-column h-100">
      <div class="d-flex mb-auto w-100 justify-content-between align-items-start">
        <div class="d-inline-block me-auto mt-10 px-5 pt-2 bg-primary-light rounded-2">
          <img class="img-fluid" src="solstice-assets/images/cta/men-picture1.png" alt="">
        </div>
        <div class="d-inline-block ms-auto px-5 pt-2 bg-secondary rounded-2">
          <img class="img-fluid" src="solstice-assets/images/cta/woman-picture1.png" alt="">
        </div>
      </div>
      <div class="d-flex w-100 justify-content-between align-items-start">
        <div class="d-inline-block ms-lg-20 px-5 pt-2 bg-info-dark rounded-2">
          <img class="img-fluid" src="solstice-assets/images/cta/woman-picture2.png" alt="">
        </div>
        <div class="d-inline-block ms-auto me-lg-20 px-5 pt-2 bg-warning-light rounded-2">
          <img class="img-fluid" src="solstice-assets/images/cta/men-picture2.png" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="container position-relative">
    <div class="mw-lg mw-xl-2xl mx-auto text-center">
      <div class="mb-6">
        <svg width="68" height="34" viewBox="0 0 68 34" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M2 34C1.99977 29.7976 2.8273 25.6364 4.43533 21.7539C6.04336 17.8713 8.40039 14.3436 11.3718 11.3721C14.3433 8.40056 17.8709 6.04346 21.7533 4.43539C25.6358 2.82732 29.7969 1.99977 33.9991 2C51.6726 2 66 16.3261 66 34" stroke="#530031" stroke-width="4" stroke-miterlimit="10"></path>
          <path d="M9.22571 34C9.22571 27.4084 11.8358 21.0868 16.4819 16.4258C21.128 11.7649 27.4294 9.14639 33.9999 9.14639C40.5704 9.14639 46.8718 11.7649 51.5179 16.4258C56.164 21.0868 58.7741 27.4084 58.7741 34" stroke="#FF7100" stroke-width="4" stroke-miterlimit="10"></path>
          <path d="M16.1339 34C16.1339 29.2617 18.0162 24.7174 21.3667 21.3669C24.7173 18.0163 29.2616 16.134 33.9999 16.134C38.7383 16.134 43.2826 18.0163 46.6331 21.3669C49.9836 24.7174 51.8659 29.2617 51.8659 34" stroke="#FFC96D" stroke-width="4" stroke-miterlimit="10"></path>
        </svg>
      </div>
      <h3 class="font-heading mb-10">What are you waiting for? Join now and learn together!</h3>
      <a class="btn btn-primary border-primary-dark" href="#">Sign Up Now</a>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row mx-0">
        <div class="col-12 col-lg-6 px-0" style="min-height: 380px;">
          <div class="position-relative h-100">
            <img class="position-absolute top-0 start-0 w-100 h-100" src="basko-assets/images/cta/bg.jpg" alt="">
            <div class="position-absolute bottom-0 start-0 mb-10 mx-4 mx-lg-10 d-flex align-items-center">
              <button class="btn border-0 p-0">
                <svg width="99" height="99" viewbox="0 0 99 99" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="49.0879" cy="49.0874" r="30.9375" fill="white"></circle>
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M49.5004 89.0999C71.3709 89.0999 89.1004 71.3704 89.1004 49.4999C89.1004 27.6294 71.3709 9.8999 49.5004 9.8999C27.6299 9.8999 9.90039 27.6294 9.90039 49.4999C9.90039 71.3704 27.6299 89.0999 49.5004 89.0999ZM47.2962 35.4813C45.7772 34.4686 43.8242 34.3742 42.2147 35.2356C40.6052 36.097 39.6004 37.7744 39.6004 39.5999V59.3999C39.6004 61.2254 40.6052 62.9028 42.2147 63.7642C43.8242 64.6256 45.7772 64.5312 47.2962 63.5186L62.1462 53.6186C63.5232 52.7005 64.3504 51.155 64.3504 49.4999C64.3504 47.8449 63.5232 46.2993 62.1462 45.3813L47.2962 35.4813Z" fill="#171A1F"></path>
                </svg>
              </button>
              <div>
                <span class="d-block fs-4 fw-semibold">Watch this</span>
                <span class="d-block fs-4 fw-semibold">How to video</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6 px-0">
          <div class="py-10 px-6 px-sm-10 bg-black">
            <h2 class="text-white mb-8">Get more traffic with customized marketing strategies.</h2>
            <a class="btn btn-primary mb-40" href="#">Try 14 Days Free Trial</a>
            <div class="mw-sm">
              <p class="fs-4 text-white fw-semibold mb-0">Start with a free trial -</p>
              <p class="fs-4 text-white fw-semibold mb-2">no credit card required.</p>
              <p class="text-secondary-dark mb-0">We never share your data with third parties.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container">
    <h2 class="mb-8 mb-lg-16 display-1">Let&apos;s start something completely new together</h2>
    <div class="row">
      <div class="col col-lg-7 mb-3 mb-lg-0">
        <p class="lead text-muted mb-1">Drop us a line, and we&apos;ll get in touch.</p>
        <p class="lead text-muted">We&apos;ll see if we&apos;re a match and how we can help each other.</p>
      </div>
      <div class="col-12 col-lg-auto ms-auto"><a class="btn btn-primary w-100 px-12 w-lg-auto" href="#">Sign up</a></div>
    </div>
  </div>
</section>

<section class="position-relative bg-secondary-dark pt-24 pt-md-48 pb-52 overflow-hidden"><img class="position-absolute top-0 start-100 translate-middle img-fluid" src="zospace-assets/lines/circle.svg" alt=""/><img class="position-absolute bottom-0 start-0 mb-n64 img-fluid" src="zospace-assets/lines/full-circle.svg" alt=""/><img class="position-absolute bottom-0 start-0 col-7 col-sm-5 col-md-auto img-fluid" src="zospace-assets/images/five-stars.svg" alt=""/><img class="position-absolute top-100 start-0 translate-middle img-fluid" src="zospace-assets/lines/circle.svg" alt=""/>
  <div class="container">
    <div class="mw-3xl mx-auto text-center position-relative"><span class="h6 text-primary" >What&apos;s new at Shuffle</span>
      <h2 class="h3 text-white mt-10 mb-10" >The quick brown fox jumps over the lazy dog.</h2>
      <div class="mw-md mx-auto mb-24">
        <p class="text-secondary-light"><span >A short message that will </span><span class="text-white" >bring your customers </span><span >into the world of your imagination.</span></p>
      </div>
      <div class="d-flex flex-column flex-sm-row justify-content-center"><a class="btn mb-5 mb-sm-0 me-sm-5 btn-primary" href="#" >Join us now</a><a class="btn btn-outline-light" href="#" >Active demo</a></div>
    </div>
  </div>
</section>

<section class="position-relative pb-24 pb-md-52 bg-dark overflow-hidden">
  <div class="position-relative py-9 bg-white">
    <div class="position-absolute top-0 start-50">
      <div class="py-9 bg-dark" style="width: 1.5px;"></div>
      <div class="py-14 bg-white" style="width: 1.5px;"></div>
    </div>
  </div>
  <div class="container pt-40 pt-xxl-60">
    <div class="mw-xxl">
      <h1 class="text-white mb-20"><span >Thurnover.</span><span class="d-block" >Even more</span><span class="position-relative" style="z-index: 1;" >than you expect
          <div class="position-absolute bottom-0 start-0 mb-3 mb-md-6 w-100 border-bottom" style="z-index: -1;"></div></span></h1>
      <div class="mb-20"><a class="btn p-0 btn-lg d-inline-flex align-items-center text-white" href="#"><span class="me-6" >Exploring the shift of today</span>
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="currentColor"></path>
          </svg></a></div><a class="btn btn-primary" href="#" >Get Started</a>
    </div>
  </div>
</section>

<section class="bg-white overflow-hidden">
  <div class="d-flex mb-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="position-relative py-14 bg-secondary-dark">
    <img class="position-absolute top-0 start-0 ms-12" src="flex-assets/elements/dots-blue.svg" alt="">
    <img class="position-absolute bottom-0 end-0 me-12" src="flex-assets/elements/dots-blue.svg" alt="">
    <div class="container">
      <div class="position-relative mw-4xl mx-auto text-center" style="z-index: 10;">
        <h2 class="mb-4 fs-6 font-heading text-white" style="letter-spacing: -1px;">The fastest way from idea to live site. Period.</h2>
        <p class="mb-6 fs-9 fw-medium text-secondary-light">Flex is a Small SaaS Business. Flex isn&rsquo;t a traditional company. We believe a diverse team, approaches to work and transparency are key to our success.</p>
        <div class="row justify-content-center">
          <div class="col col-md-auto"><a class="btn btn-success w-100 px-7 py-4 fs-10 fw-medium text-success-light rounded shadow" href="#">Get Started</a></div>
        </div>
      </div>
    </div>
  </div>
  <div class="d-flex mt-n1 text-secondary-dark">
    <svg class="w-100" viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 51.4091H1090.08C833.336 51.4091 580.229 116 360 116C139.771 116 0 51.4091 0 51.4091V0H1440V51.4091Z" fill="currentColor"></path>
    </svg>
  </div>
</section>

<section class="py-20 bg-light overflow-hidden">
  <div class="container position-relative">
    <div class="position-absolute top-50 start-0 end-0 translate-middle-y bg-info-light ms-n12 me-n12" style="height: 90%;"></div>
    <div class="position-relative bg-info overflow-hidden"><img class="position-absolute top-0 start-0 ms-xl-n40 w-100 h-100" src="yofte-assets/elements/cta-lines.svg" alt=""/>
      <div class="position-relative row align-items-center">
        <div class="col-12 col-md-8 p-10 ps-lg-40"><span class="lead text-white" >New Products</span>
          <h2 class="mt-4 mb-14 font-bold text-white" >Check our new collection</h2><a class="btn btn-primary py-4 text-uppercase" href="#" >More</a>
        </div><img class="position-relative ms-auto col-12 col-md-4" style="height: 384px; object-fit: cover;" src="https://images.unsplash.com/photo-1554244933-d876deb6b2ff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=80" alt=""/>
      </div>
    </div>
  </div>
</section>

<section class="py-24 position-relative">
  <div class="container">
    <div class="bg-dark py-20 px-4">
      <div class="mw-2xl mx-auto mb-8 text-center"><span class="text-uppercase fw-bold text-muted" >New feature</span>
        <h1 class="mt-2 mb-6 text-white lh-sm font-heading"><span >Take</span> <span class="text-primary" >quick action</span> <span >that increases your brand&apos;s regular profit.</span></h1>
        <p class="text-white lh-lg" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      </div>
      <div class="row justify-content-center">
        <div class="col-12 col-md-auto mb-3 mb-md-0"><a class="btn btn-primary w-100" href="#" >Activate Demo</a></div>
        <div class="col-12 col-md-auto"><a class="btn btn-outline-primary w-100 text-white" href="#" >Share with friends</a></div>
      </div>
    </div>
  </div>
  <div class="p-20 p-md-40 position-absolute top-0 end-0 bg-primary-light" style="z-index: -1;"></div>
  <div class="p-20 p-md-40 position-absolute bottom-0 start-0 bg-warning-light" style="z-index: -1;"></div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row text-center">
      <div class="col-12 col-md-8 col-lg-6 mx-auto text-center">
        <span class="badge rounded-pill bg-primary">Lorem ipsum</span>
        <h2 class="my-4 fs-1 fw-bold">Lorem ipsum dolor sit amet consectutar domor</h2>
        <p class="text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
        <div><a class="btn btn-primary me-3" href="#">Check Now</a><a class="btn btn-outline-secondary" href="#">Learn more</a></div>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container">
    <div class="mw-4xl mx-auto text-center"><span class="badge bg-secondary-light">New feature</span>
      <h2 class="mt-6 mb-4">Take quick action that increases your brand&apos;s regular profit.</h2>
      <p class="mb-6 mw-2xl mx-auto lead lh-lg text-muted">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p><a class="btn btn-primary d-block d-md-inline-block mb-2 mb-md-0 mb-lg-0 me-md-4" href="#">Activate your demo</a><a class="btn btn-dark d-block d-md-inline-block" href="#">Share with friends</a>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 position-relative overflow-hidden">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <div class="row">
        <div class="col-12 col-lg-5">
          <div class="d-flex flex-column justify-content-between gap-8 h-100">
            <div>
              <h1 class="font-heading mb-8 mw-sm mw-md-lg" style="letter-spacing: -1.2px;">Get help from the industry experts.</h1>
              <p class="text-dark-light fs-7 mb-8 mw-lg">We are passionate about transforming spaces into extraordinary experiences. With a seamless fusion of architecture and interior design.</p><a class="btn btn-dark d-inline-flex align-items-center justify-content-center gap-2" href="#"><span>Book A Free Call</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M14 6.66669H7.33333C4.38781 6.66669 2 9.0545 2 12V13.3334M14 6.66669L10 10.6667M14 6.66669L10 2.66669" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg></a>
            </div>
            <div class="d-flex flex-wrap align-items-center gap-6 pb-8 pt-14 position-relative">
              <div class="position-absolute top-0 start-0 w-100 border-top" style="transform: scaleX(3);"></div>
              <div>
                <h1 class="font-heading mb-0">159%</h1>
                <div>
                  <p class="fs-7 fw-semibold mb-1">Average Revenue</p>
                  <p class="text-dark-light mb-0">From customers worldwide</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-7 position-relative"><img class="img-fluid d-block w-100 rounded-3" style="height: 815px; object-fit:  cover;" src="consulty-assets/cta/picture1.png" alt=""></div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-12 pt-lg-24 bg-gradient-danger-bottom">
  <div class="container">
    <div class="mw-2xl mx-auto text-center">
      <h3 class="font-heading mb-4">Optimize your finances now</h3>
      <p class="fs-7 text-white mb-10">Take control of your money. Optimize your finances for a brighter tomorrow!</p><a class="btn d-inline-flex align-items-center btn-danger border-2 border-white border-opacity-10" href="#">Get started for free</a>
    </div>
  </div><img class="img-fluid d-block mx-auto px-4 mt-24" src="vista-assets/images/cta/vista-text.svg" alt="">
</section>

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0" src="casper-assets/blur/blur-circle-blue.svg" alt=""/>
  <div class="container position-relative">
    <div class="mw-lg mw-lg-6xl mx-auto">
      <div class="row mb-6 align-items-center">
        <div class="col-12 col-lg-6">
          <div class="mw-md">
            <h2 class="h3 font-heading fw-medium text-white mb-0">Engage your visitors</h2>
          </div>
        </div>
        <div class="col-12 col-lg-6 mt-md-n8 mt-lg-0"><img class="img-fluid d-block ms-auto" src="casper-assets/cta/robo-bubble.png" alt=""/></div>
      </div>
      <div class="row align-items-center">
        <div class="col-12 col-lg-6 mb-12 mb-lg-0"><img class="img-fluid d-block w-100 mw-lg-md" src="casper-assets/cta/robot-image.png" alt=""/></div>
        <div class="col-12 col-lg-6">
          <div class="mw-lg ms-lg-auto">
            <h5 class="lh-lg text-white fw-medium mb-8">Unlock the true potential of your website</h5>
            <p class="display-5 lh-lg text-light-light mb-8">Casper provide instant support, and boost conversions like never before. Join thousands of satisfied customers who have already elevated their online presence with our AI chat assistant.</p><a class="btn btn-primary text-black" href="#"><span class="me-2">CONTACT US</span>
              <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.44 13C19.22 13 18.99 12.93 18.77 12.88C18.3245 12.7818 17.8866 12.6515 17.46 12.49C16.9961 12.3212 16.4861 12.33 16.0283 12.5146C15.5704 12.6992 15.1971 13.0466 14.98 13.49L14.76 13.94C13.786 13.3982 12.891 12.7252 12.1 11.94C11.3147 11.149 10.6418 10.254 10.1 9.28L10.52 9.00001C10.9633 8.78292 11.3108 8.40954 11.4954 7.9517C11.68 7.49386 11.6888 6.98392 11.52 6.52001C11.3612 6.09243 11.2309 5.6548 11.13 5.21001C11.08 4.99001 11.04 4.76001 11.01 4.53001C10.8885 3.82563 10.5196 3.18775 9.9696 2.73124C9.4196 2.27474 8.72467 2.02961 8.00998 2.04001H5.00998C4.57901 2.03596 4.15223 2.12482 3.75869 2.30054C3.36515 2.47625 3.01409 2.7347 2.72941 3.05829C2.44473 3.38187 2.23311 3.763 2.10897 4.17572C1.98482 4.58844 1.95106 5.02306 2.00998 5.45001C2.54272 9.63939 4.45601 13.5319 7.44763 16.5126C10.4393 19.4934 14.3387 21.3925 18.53 21.91H18.91C19.6474 21.9111 20.3594 21.6405 20.91 21.15C21.2263 20.867 21.4791 20.5202 21.6514 20.1323C21.8238 19.7445 21.9119 19.3244 21.91 18.9V15.9C21.8977 15.2054 21.6448 14.5366 21.1943 14.0077C20.7439 13.4788 20.1238 13.1226 19.44 13ZM19.94 19C19.9398 19.142 19.9094 19.2823 19.8508 19.4116C19.7921 19.5409 19.7066 19.6563 19.6 19.75C19.4882 19.8465 19.3576 19.9185 19.2164 19.9616C19.0752 20.0047 18.9265 20.0177 18.78 20C15.0349 19.5198 11.5562 17.8065 8.89269 15.1303C6.22917 12.4541 4.53239 8.96734 4.06998 5.22001C4.05406 5.07352 4.06801 4.92534 4.11098 4.7844C4.15395 4.64346 4.22505 4.51269 4.31998 4.40001C4.41369 4.29334 4.52904 4.20785 4.65836 4.14922C4.78767 4.0906 4.92799 4.06019 5.06998 4.06001H8.06998C8.30253 4.05483 8.5296 4.13088 8.71212 4.27508C8.89464 4.41927 9.02119 4.62258 9.06998 4.85001C9.10998 5.12334 9.15998 5.39334 9.21998 5.66001C9.3355 6.18715 9.48924 6.70518 9.67998 7.21001L8.27998 7.86001C8.16028 7.91493 8.0526 7.99295 7.96314 8.0896C7.87367 8.18625 7.80418 8.29962 7.75865 8.4232C7.71312 8.54678 7.69245 8.67814 7.69783 8.80973C7.7032 8.94132 7.73452 9.07055 7.78998 9.19C9.22918 12.2728 11.7072 14.7508 14.79 16.19C15.0334 16.29 15.3065 16.29 15.55 16.19C15.6747 16.1454 15.7893 16.0765 15.8871 15.9872C15.985 15.8979 16.0641 15.7901 16.12 15.67L16.74 14.27C17.2569 14.4549 17.7846 14.6085 18.32 14.73C18.5866 14.79 18.8566 14.84 19.13 14.88C19.3574 14.9288 19.5607 15.0553 19.7049 15.2379C19.8491 15.4204 19.9252 15.6475 19.92 15.88L19.94 19ZM21.86 2.68001C21.7585 2.43566 21.5643 2.24148 21.32 2.14001C21.1998 2.08876 21.0707 2.06159 20.94 2.06001H16.94C16.6748 2.06001 16.4204 2.16536 16.2329 2.3529C16.0453 2.54043 15.94 2.79479 15.94 3.06001C15.94 3.32522 16.0453 3.57958 16.2329 3.76711C16.4204 3.95465 16.6748 4.06001 16.94 4.06001H18.52L15.23 7.36001C15.0437 7.54737 14.9392 7.80082 14.9392 8.065C14.9392 8.32919 15.0437 8.58264 15.23 8.77001C15.4173 8.95626 15.6708 9.0608 15.935 9.0608C16.1992 9.0608 16.4526 8.95626 16.64 8.77001L19.94 5.48001V7.06001C19.94 7.32522 20.0453 7.57958 20.2329 7.76711C20.4204 7.95465 20.6748 8.06001 20.94 8.06001C21.2052 8.06001 21.4595 7.95465 21.6471 7.76711C21.8346 7.57958 21.94 7.32522 21.94 7.06001V3.06001C21.9384 2.92933 21.9112 2.80023 21.86 2.68001Z" fill="currentColor"></path>
              </svg></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-light bg-opacity-25">
  <div class="container mw-8xl">
    <div class="px-10 py-20 py-md-40 py-lg-64 py-xl-72 rounded-4 bg-danger">
      <div class="mw-md mw-md-xl mx-auto text-center position-relative">
        <span class="d-block text-dark fs-6 fw-semibold mb-6">Design room</span>
        <h2 class="font-heading mb-16">Turn inspiration into reality</h2>
        <a class="btn btn-primary" href="#">Sign up</a>
      </div>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-9 col-xl-7 text-center">
        <span class="text-muted">New Feature</span>
        <h2 class="display-5 fw-bold mt-2 mb-3">Take quick action that increases your brand's regular profit.</h2>
        <p class="lead text-muted mb-4">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        <div class="d-flex flex-wrap justify-content-center"><a class="btn btn-primary me-2 mb-2 mb-sm-0" href="#">Active Demo</a><a class="btn btn-outline-secondary mb-2 mb-sm-0" href="#">Share with your friends</a></div>
      </div>
    </div>
  </div>
</section>

<section class="pt-12 pt-md-20 pt-lg-0 bg-light-light overflow-hidden">
  <div class="position-relative container"><img class="d-none d-lg-block position-absolute bottom-0 end-0 me-n40 me-xl-24" style="z-index: 1;" src="asitrastudio-assets/cta/woman-cta-right.png" alt=""/>
    <div class="position-relative py-lg-36 mw-lg-xl mw-xl-3xl"><span class="d-block mb-4 fw-medium fs-9 text-light-dark" >Lorem Ipsum</span>
      <h1 class="mb-14"><span >Share your travels with</span><span> </span><span class="d-inline-block pb-2 text-light-dark border-light-dark border-3 border-bottom" >friends &amp; family</span></h1>
      <div class="d-flex flex-column flex-sm-row position-relative" style="z-index: 2;"><a class="btn mb-3 mb-sm-0 me-sm-6 btn-primary" href="#"><span class="me-2" >Get consulation</span>
          <svg class="rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 1.5L1 9.5" stroke="white" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9 8.83571V1.5H1.66429" stroke="white" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a><a class="btn btn-outline-dark" href="#"><span class="me-2" >Get consulation</span>
          <svg class="rotate-45" width="10" height="11" viewbox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 1.5L1 9.5" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9 8.83571V1.5H1.66429" stroke="currentColor" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div><img class="d-block mt-6 img-fluid d-lg-none" src="asitrastudio-assets/cta/woman-cta-right.png" alt=""/>
    </div>
  </div>
</section>

<section class="py-12 py-md-24 py-lg-32 bg-dark">
  <div class="container">
    <div class="mw-xl mx-auto text-center">
      <h3 class="fs-4 text-white mb-5">Grab 30% Off Today</h3>
      <p class="text-muted mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing a elit. Nullam to the dictum aliquet accumsan porta lectus ridiculus in these mattis. Netus sodales in volutpat.</p>
      <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-sm-center"><a class="btn btn-lg mb-2 mb-sm-0 me-sm-5 btn-primary" href="#">Shop &amp; Save Now</a><a class="btn btn-lg btn-dark-light" href="#">Explore All</a></div>
    </div>
  </div>
</section>