Bootstrap 5 How it works Components

<section class="py-12 py-sm-24 pb-md-32">
  <div class="container">
    <div class="mw-xs mw-sm-2xl mx-auto mw-lg-none">
      <h3 class="mw-md mw-lg-lg mb-24" >We make things easy for your business</h3>
      <div class="row">
        <div class="col-12 col-sm-6 col-lg-3 mb-12 mb-lg-0 position-relative">
          <div class="d-none d-sm-block position-absolute top-0 start-0 ms-12 w-100 bg-light-dark bg-opacity-50 mt-6" style="height: 1px;"></div>
          <div class="mw-xs pe-10 overflow-hidden position-relative">
            <div class="d-inline-flex px-4 bg-white rounded-pill">
              <div class="d-flex mb-7 align-items-center justify-content-center fs-5 fw-bold bg-primary-light rounded-pill" style="width: 54px; height: 54px;"><span >1</span></div>
            </div>
            <p class="fs-6 fw-semibold" >A complete UI kit for building your business</p>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 mb-12 mb-lg-0 position-relative">
          <div class="d-none d-lg-block position-absolute top-0 start-0 ms-12 w-100 bg-light-dark bg-opacity-50 mt-6" style="height: 1px;"></div>
          <div class="mw-xs pe-10 overflow-hidden position-relative">
            <!-- <div class="d-block d-sm-none d-lg-block position-absolute top-0 start-0 ms-20 w-100 bg-light-dark bg-opacity-50 mt-6" style="height: 1px;"></div>-->
            <div class="d-inline-flex px-4 bg-white rounded-pill">
              <div class="position-relative d-flex mb-7 align-items-center justify-content-center fs-5 text-white fw-bold bg-primary rounded-pill" style="width: 54px; height: 54px;"><img class="position-absolute top-0 start-0" src="flaro-assets/images/how-it-works/gradient.svg" alt=""/><span class="position-relative" >2</span></div>
            </div>
            <p class="fs-6 fw-semibold" >A complete UI kit for building your business</p>
          </div>
        </div>

<section class="position-relative pt-20 pb-xl-32 bg-black overflow-hidden">
  <div class="container mb-16 mb-xl-0">
    <div class="row">
      <div class="col-12 col-xl-6">
        <h2 class="fs-10 text-white mb-16" >Three steps to get started</h2>
        <div class="row mb-12">
          <div class="col-auto">
            <div class="d-inline-block rounded-pill" style="width:50px; height:50px; padding: 1px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
              <div class="d-flex align-items-center justify-content-center bg-black w-100 h-100 rounded-pill">
                <h3 class="fs-16 fw-medium text-white mb-0" >1</h3>
              </div>
            </div>
          </div>
          <div class="col col-md-6">
            <h3 class="fs-16 fw-medium text-white mb-4" >Create A Free Account</h3>
            <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>
        <div class="row mb-12">
          <div class="col-auto">
            <div class="d-inline-block rounded-pill" style="width:50px; height:50px; padding: 1px; background: linear-gradient(98.24deg, #6CD5F7 0%, #FEE2CE 35.94%, #B0A9DF 69.27%, #5B6AF0 100%);">
              <div class="d-flex align-items-center justify-content-center bg-black w-100 h-100 rounded-pill">
                <h3 class="fs-16 fw-medium text-white mb-0" >2</h3>
              </div>

<section class="py-12 py-md-16 py-lg-24">
  <div class="container">
    <div class="mw-6xl mx-auto">
      <div class="mw-md mw-lg-xl mx-auto mb-24 text-center">
        <span class="d-inline-block mb-6 text-uppercase small text-primary fw-bold">HOW IT WORKS</span>
        <h3 class="font-heading">What steps do I need to take to join?</h3>
      </div>
      <div class="position-relative rounded-3 overflow-hidden">
        <img class="position-absolute top-0 start-0 w-100 h-100" src="solstice-assets/images/how-it-works/picture1.png" alt="">
        <div class="position-relative px-8 px-md-14 py-10">
          <div class="row">
            <div class="col-12 col-md-10 col-lg-7 mb-6">
              <div class="position-relative">
                <div class="position-absolute bottom-100 start-0 mb-4 w-100 mw-sm px-6 py-12 bg-white bg-opacity-25 rounded-2"></div>
                <div class="d-flex align-items-center w-100 mw-sm p-6 bg-white rounded-2">
                  <div class="d-flex align-items-center justify-content-center bg-secondary rounded-pill" style="width: 40px; height: 40px;">
                    <span class="fs-5 fw-bold text-white">1</span>
                  </div>
                  <span class="ms-4 display-5 fw-bold">Create Account</span>
                </div>
              </div>
            </div>
            <div class="col-12 col-md-10 col-lg-7 mx-auto mb-6">
              <div class="d-flex mx-auto align-items-center w-100 mw-sm p-6 bg-white rounded-2">

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="mw-xl mx-auto text-center mb-20">
      <h2 class="mb-5">Master your workflow with Basko&apos;s productivity tools</h2>
      <p class="lead mb-0">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
    </div>
    <div class="row mb-20 align-items-center">
      <div class="col-12 col-lg-4 mb-12 mb-lg-0">
        <div class="mw-sm mx-auto">
          <img class="img-fluid d-block mb-10" src="basko-assets/images/how-it-works/tool.svg" alt="">
          <span class="d-block fw-semibold mb-3">Choose the right tool</span>
          <p class="text-secondary-dark">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
        </div>
      </div>
      <div class="col-12 col-lg-4 mb-12 mb-lg-0">
        <div class="mw-sm mx-auto">
          <img class="img-fluid d-block mb-10" src="basko-assets/images/how-it-works/account.svg" alt="">
          <span class="d-block fw-semibold mb-3">Set up your account</span>
          <p class="text-secondary-dark">Use and reuse tons of responsive sections to create the perfect layout. Sections are ready.</p>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="mw-sm mx-auto">
          <img class="img-fluid d-block mb-10" src="basko-assets/images/how-it-works/start.svg" alt="">

<section class="position-relative py-20 overflow-hidden"><img class="d-none d-lg-block position-absolute bottom-0 start-0 mb-64" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt=""/>
  <div class="container">
    <div class="row align-items-center">
      <div class="position-relative col-12 col-lg-6"><img class="img-fluid mx-auto d-block" style="width: 544px;" src="zeus-assets/images/z-picture.png" alt=""/></div>
      <div class="col-12 col-lg-6 mb-6 mb-lg-0">
        <div class="max-w-xl">
          <h2 class="mb-10 mb-lg-24">Lorem ipsum dolor sit amet consectetur</h2>
          <div class="position-relative row pt-5">
            <div class="position-relative col-12 col-lg-6 mb-12 mt-n8"><img class="d-none d-lg-block position-absolute top-0 start-0 ms-32 mt-n10" src="zeus-assets/icons/line-little-top.svg" alt=""/><span class="d-flex align-items-center justify-content-center mb-6 mb-lg-8 rounded-circle bg-info text-white" style="width: 48px; height: 48px;">1</span>
              <h3 class="mb-4 h4">Dolor sit amet</h3>
              <p class="lead text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="position-relative col-12 col-lg-6 mb-12"><span class="d-flex align-items-center justify-content-center mb-6 mb-lg-8 rounded-circle bg-danger text-white" style="width: 48px; height: 48px;">2</span>
              <h3 class="mb-4 h4">Dolor sit amet</h3>
              <p class="lead text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="position-relative col-12 col-lg-6 mb-12 mt-n8"><img class="d-none d-lg-block position-absolute top-0 start-0 ms-32 mt-n16" src="zeus-assets/icons/line-little.svg" alt=""/><span class="d-flex align-items-center justify-content-center mb-5 mb-lg-8 rounded-circle bg-warning text-white" style="width: 48px; height: 48px;">3</span>
              <h3 class="mb-4 h4">Dolor sit amet</h3>
              <p class="lead text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="position-relative col-12 col-lg-6 mb-12" style="margin-bottom: -32px;"><span class="d-flex align-items-center justify-content-center mb-6 mb-lg-8 rounded-circle bg-success text-white" style="width: 48px; height: 48px;">4</span>
              <h3 class="mb-4 h4">Dolor sit amet</h3>
              <p class="lead text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>

<section class="py-24 pt-md-40 pb-md-40 pb-xl-64">
  <div class="container">
    <div class="mw-xl mx-auto text-center mb-32"><span class="h6 text-primary" >How it works</span>
      <h2 class="h3 mt-6 mb-12" >Build and launch without problems</h2>
      <p class="text-secondary mb-0" >The brown fox jumps over the lazy dog.</p>
    </div>
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 col-xl-7 mb-40 mb-lg-0 position-relative">
        <div class="position-relative mw-md mx-auto" style="z-index: 1;"><img class="img-fluid w-100 h-100" src="https://images.pexels.com/photos/7148031/pexels-photo-7148031.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt=""/>
          <div class="position-absolute bottom-0 start-0 w-100 d-flex justify-content-center"><a class="text-decoration-none d-flex w-100 pt-10 pb-14 pe-6 mx-12 align-items-center border-top border-white" href="#">
              <div class="d-flex ps-2 pt-2 justify-content-center align-items-center bg-white" style="width: 80px; height: 80px; border-radius: 10px;">
                <svg width="38" height="38" viewbox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M0.791667 6.33333C0.354667 6.33333 0 5.97867 0 5.54167V3.95833C0 1.7765 1.7765 0 3.95833 0H5.54167C5.97867 0 6.33333 0.354667 6.33333 0.791667C6.33333 1.22867 5.97867 1.58333 5.54167 1.58333H3.95833C2.64892 1.58333 1.58333 2.64892 1.58333 3.95833V5.54167C1.58333 5.97867 1.22867 6.33333 0.791667 6.33333Z" fill="#1F40FF"></path>
                  <path d="M30.8747 6.33333C30.4377 6.33333 30.083 5.97867 30.083 5.54167V3.95833C30.083 2.64892 29.0174 1.58333 27.708 1.58333H26.1247C25.6877 1.58333 25.333 1.22867 25.333 0.791667C25.333 0.354667 25.6877 0 26.1247 0H27.708C29.8898 0 31.6664 1.7765 31.6664 3.95833V5.54167C31.6664 5.97867 31.3117 6.33333 30.8747 6.33333Z" fill="#1F40FF"></path>
                  <path d="M19.7914 1.58333H11.8747C11.4377 1.58333 11.083 1.22867 11.083 0.791667C11.083 0.354667 11.4377 0 11.8747 0H19.7914C20.2284 0 20.583 0.354667 20.583 0.791667C20.583 1.22867 20.2284 1.58333 19.7914 1.58333Z" fill="#1F40FF"></path>
                  <path d="M16.6247 31.6667H11.8747C11.4377 31.6667 11.083 31.312 11.083 30.875C11.083 30.438 11.4377 30.0834 11.8747 30.0834H16.6247C17.0617 30.0834 17.4163 30.438 17.4163 30.875C17.4163 31.312 17.0617 31.6667 16.6247 31.6667Z" fill="#1F40FF"></path>
                  <path d="M5.54167 31.6667H3.95833C1.7765 31.6667 0 29.8902 0 27.7084V26.125C0 25.688 0.354667 25.3334 0.791667 25.3334C1.22867 25.3334 1.58333 25.688 1.58333 26.125V27.7084C1.58333 29.0178 2.64892 30.0834 3.95833 30.0834H5.54167C5.97867 30.0834 6.33333 30.438 6.33333 30.875C6.33333 31.312 5.97867 31.6667 5.54167 31.6667Z" fill="#1F40FF"></path>
                  <path d="M0.791667 20.5833C0.354667 20.5833 0 20.2286 0 19.7916V11.8749C0 11.4379 0.354667 11.0833 0.791667 11.0833C1.22867 11.0833 1.58333 11.4379 1.58333 11.8749V19.7916C1.58333 20.2286 1.22867 20.5833 0.791667 20.5833Z" fill="#1F40FF"></path>
                  <path d="M30.8747 17.4166C30.4377 17.4166 30.083 17.0619 30.083 16.6249V11.8749C30.083 11.4379 30.4377 11.0833 30.8747 11.0833C31.3117 11.0833 31.6663 11.4379 31.6663 11.8749V16.6249C31.6663 17.0619 31.3117 17.4166 30.8747 17.4166Z" fill="#1F40FF"></path>
                  <path d="M22.0118 38C21.4418 38 20.9795 37.5377 20.9795 36.9677V15.2823C20.9795 14.7123 21.4418 14.25 22.0118 14.25C22.2873 14.25 22.547 14.3577 22.7417 14.5524L37.6773 29.488C37.8721 29.6812 37.9829 29.9472 37.9829 30.2211C37.9829 30.7911 37.5206 31.2534 36.9506 31.2534H28.9563L22.7544 37.6849C22.5533 37.8908 22.2921 38 22.0118 38ZM22.5628 16.6123V35.6044L28.0507 29.9139C28.1995 29.7587 28.4053 29.6717 28.6207 29.6717H35.6206L22.5628 16.6123ZM36.5658 30.6153H36.5817H36.5658Z" fill="#1F40FF"></path>
                </svg>
              </div>
              <div class="ms-12"><span class="h6 text-primary" >Zospace</span>
                <h4 class="text-white mt-1 mb-0" >How it works</h4>

<section class="position-relative pt-32 pb-24 overflow-hidden bg-light">
  <div class="d-none d-lg-block position-absolute top-0 end-0 col-6 col-xl-5 mt-32 mt-xxl-16"><img class="img-fluid" src="wrexa-assets/images/app-message-background-photo.png" alt=""/></div>
  <div class="container mb-24 mb-lg-52">
    <div class="row mb-24 mb-lg-0">
      <div class="col-lg-6">
        <div class="d-flex align-items-center mb-24 mb-lg-40"><span class="display-6 h5 mb-0" >01</span>
          <div class="mx-4 bg-light-dark rounded-circle" style="width: 4px; height: 4px;"></div><span class="display-6 h5 mb-0" >Introduction.</span>
        </div>
        <div class="mw-md mw-xl-xl ms-xl-auto">
          <h1 class="display-2 mb-16" >I&rsquo;m happy my home found me</h1>
          <p class="mw-sm mb-20 mb-lg-32 text-secondary lh-lg" >The house by the pond cras ornare, some chords for a three moments, like a sense of truth that comes from within. The final game.</p><a class="btn py-3 px-8 btn-primary" href="#" >Learn More</a>
        </div>
      </div>
    </div>
    <div class="d-lg-none me-n8"><img class="img-fluid" src="wrexa-assets/images/app-message-background-photo.png" alt=""/></div>
  </div>
  <div class="container">
    <div class="d-flex flex-column flex-md-row align-items-start w-100"><a class="me-md-24 text-dark" href="#" >Download application</a><a class="me-md-24 text-dark" href="#" >Select plan</a><a class="ms-md-auto text-dark" href="#" >Start a conversation</a></div>
  </div>
</section>

<section class="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="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentcolor"></path>
    </svg>
  </div>
  <div class="position-relative py-20 bg-secondary-dark" style="background-image: url('flex-assets/elements/pattern-dark.png')">
    <div class="position-absolute top-0 start-0 h-100 w-100" style="background: radial-gradient(50% 50% at 50% 50%, rgba(42, 51, 66, 0) 0%, #2A3342 100%);"></div>
    <div class="position-relative container" style="z-index:1;">
      <div class="row align-items-xl-center g-16">
        <div class="col-12 col-md-6">
          <div class="row justify-content-center justify-content-md-start">
            <div class="col-auto">
              <div class="position-relative">
                <img class="w-100" src="flex-assets/images/how-it-works/ideas.png" alt="">
                <img class="position-absolute top-0 end-0 mt-n8 me-n8" src="flex-assets/elements/circle-orange.svg" alt="">
                <img class="position-absolute bottom-0 start-0 mb-n8 ms-n10" src="flex-assets/elements/dots-blue.svg" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="mw-md-xl">
            <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">How it works</span>

<section class="py-24 bg-white position-relative">
  <div class="h-100 col-4 col-lg-5 position-absolute top-0 end-0 bg-warning-light" style="background-image: url('pstls-assets/images/how-it-works/colors-right.png'); background-size: cover; background-repeat: no-repeat; background-position: center;" ></div>
  <div class="position-relative container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-5 mb-20 mb-lg-0">
        <h1 class="mb-0 mw-md lh-sm font-heading" >Build and launch without problems</h1>
      </div>
      <div class="col-12 col-lg-7">
        <div class="bg-dark px-6 py-12 px-md-12 mw-lg-2xl mx-auto position-relative" style="z-index: 1;">
          <div class="d-md-flex mb-14">
            <div>
              <div class="d-inline-block p-6 position-relative transform-rotate-45deg bg-primary">
                <h2 class="mb-0 lh-sm start-50 top-50 transform-rt-middle position-absolute">1</h2>
              </div>
            </div>
            <div class="ms-md-10">
              <h2 class="mt-6 mt-md-0 mb-4 text-white lh-sm" >Register account</h2>
              <h5 class="mb-0 text-white lh-lg" >It&rsquo;s over, maecenas tincidunt malesuada dolor sit amet malesuada.</h5>
            </div>
          </div>
          <div class="d-md-flex mb-14">
            <div>
              <div class="d-inline-block p-6 position-relative transform-rotate-45deg bg-warning">
                <h2 class="mb-0 lh-sm start-50 top-50 transform-rt-middle position-absolute">2</h2>

<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6 d-flex">
        <div class="my-auto">
          <h2 class="mb-4 fs-1 fw-bold">Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst.</h2>
          <p class="mb-4 text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce sit amet dui tellus.</p>
          <a class="btn btn-primary" href="#">Learn More</a>
        </div>
      </div>
      <div class="col-12 col-lg-6 mt-5 mt-lg-0 pt-3 pt-lg-0">
        <ul class="px-lg-5 list-unstyled">
          <li class="d-flex mb-5">
            <div class="pe-4">
              <span class="d-flex align-items-center justify-content-center bg-light text-primary rounded-circle fs-3" style="width: 64px; height: 64px;">1</span>
            </div>
            <div>
              <h4 class="fw-bold">Key Elements</h4>
              <p class="text-muted lh-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
            </div>
          </li>
          <li class="d-flex mb-5">
            <div class="pe-4">
              <span class="d-flex align-items-center justify-content-center bg-light text-primary rounded-circle fs-3" style="width: 64px; height: 64px;">2</span>

<section class="py-20">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6 mb-10 mb-lg-0">
        <div class="position-relative mw-lg-md" style="height: 536px;"><img class="d-none d-xl-block position-absolute bottom-0 start-0 translate-middle-x" src="cronos-assets/elements/green-light-left.svg" alt=""/><img class="d-none d-xl-block position-absolute top-0 end-0" src="cronos-assets/elements/warning-light-small.svg" alt=""/><img class="img-fluid h-100 w-100" style="object-fit: cover;" src="https://images.unsplash.com/photo-1542330952-bffc55e812b2?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80" alt=""/></div>
      </div>
      <div class="col-12 col-lg-6 mb-10 mb-lg-0">
        <div class="mw-lg-md">
          <h3 class="mb-14">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
          <div class="row">
            <div class="col-12 col-lg-6 mb-10"><span class="d-flex mb-6 align-items-center justify-content-center h6 bg-light" style="width: 64px; height: 64px;">1</span>
              <h6 class="mb-3">Lorem ipsum dolor</h6>
              <p class="lead lh-lg text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="col-12 col-lg-6 mb-10"><span class="d-flex mb-6 align-items-center justify-content-center h6 bg-light" style="width: 64px; height: 64px;">2</span>
              <h6 class="mb-3">Lorem ipsum dolor</h6>
              <p class="lead lh-lg text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="col-12 col-lg-6 mb-10 mb-lg-0"><span class="d-flex mb-6 align-items-center justify-content-center h6 bg-light" style="width: 64px; height: 64px;">3</span>
              <h6 class="mb-3">Lorem ipsum dolor</h6>
              <p class="lead lh-lg text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="col-12 col-lg-6"><span class="d-flex mb-6 align-items-center justify-content-center h6 bg-light" style="width: 64px; height: 64px;">4</span>
              <h6 class="mb-3">Lorem ipsum dolor</h6>

<section class="py-12 py-lg-24">
  <div class="container">
    <h1 class="font-heading text-center mb-6" style="letter-spacing: -1.2px;">Get started with 3 steps</h1>
    <p class="text-center text-dark-light fs-7 mb-20">There are many variations of passages of available</p>
    <div class="row">
      <div class="col-12 col-lg-4 mb-8 mb-lg-0">
        <div class="position-relative rounded-3 overflow-hidden" style="height: 518px;"><img class="position-absolute top-0 start-0 w-100 h-100" src="consulty-assets/how-it-works/picture1.png" alt="">
          <div class="position-absolute top-0 end-0 mt-8 me-8">
            <div class="bg-white rounded-pill d-flex align-items-center justify-content-center" style="width: 56px; height: 56px;">
              <p class="fs-7 fw-semibold mb-0">01</p>
            </div>
          </div>
          <div class="position-absolute bottom-0 mb-8 start-0 ms-8">
            <p class="text-white fs-6 fw-semibold mb-2">Book Time</p>
            <p class="text-light-light mw-xs mb-0">It is a long established fact that a reader will be distracted by the readable</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4 mb-8 mb-lg-0">
        <div class="position-relative rounded-3 overflow-hidden" style="height: 518px;"><img class="position-absolute top-0 start-0 w-100 h-100" src="consulty-assets/how-it-works/picture2.png" alt="">
          <div class="position-absolute top-0 end-0 mt-8 me-8">
            <div class="bg-white rounded-pill d-flex align-items-center justify-content-center" style="width: 56px; height: 56px;">
              <p class="fs-7 fw-semibold mb-0">02</p>
            </div>

<section class="position-relative py-12 py-lg-24 bg-danger-dark">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <h2 class="font-heading mb-16">How it works</h2>
      <div class="row">
        <div class="col-lg-4 mb-10 mb-lg-0">
          <div class="d-flex mb-4 align-items-center">
            <div class="d-flex flex-shrink-0 me-8 align-items-center justify-content-center border border-danger rounded-pill" style="width: 58px; height: 58px;">
              <div class="d-flex align-items-center justify-content-center bg-danger-light bg-opacity-10 border border-white border-opacity-10 rounded-pill" style="width: 44px; height: 44px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16 2H8C5.24 2 3 4.24 3 7V17C3 19.76 5.24 22 8 22H16C18.76 22 21 19.76 21 17V7C21 4.24 18.76 2 16 2ZM8.86 18.63C8.67 18.82 8.42 18.92 8.16 18.92C7.89 18.92 7.64 18.82 7.45 18.63C7.26 18.44 7.15 18.19 7.15 17.92C7.15 17.66 7.26 17.4 7.45 17.21C7.54 17.12 7.65 17.05 7.77 17C8.02 16.9 8.29 16.9 8.54 17C8.6 17.02 8.66 17.05 8.71 17.09C8.77 17.12 8.82 17.17 8.86 17.21C9.05 17.4 9.16 17.66 9.16 17.92C9.16 18.19 9.05 18.44 8.86 18.63ZM7.15 13.92C7.15 13.79 7.18 13.66 7.23 13.54C7.28 13.41 7.35 13.31 7.45 13.21C7.68 12.98 8.03 12.87 8.35 12.94C8.41 12.95 8.48 12.97 8.54 13C8.6 13.02 8.66 13.05 8.71 13.09C8.77 13.12 8.82 13.17 8.86 13.21C8.95 13.31 9.03 13.41 9.08 13.54C9.13 13.66 9.15 13.79 9.15 13.92C9.15 14.19 9.05 14.44 8.86 14.63C8.67 14.82 8.42 14.92 8.16 14.92C8.02 14.92 7.89 14.89 7.77 14.84C7.65 14.79 7.54 14.72 7.45 14.63C7.26 14.44 7.15 14.19 7.15 13.92ZM12.86 18.63C12.77 18.72 12.66 18.79 12.54 18.84C12.42 18.89 12.29 18.92 12.15 18.92C11.89 18.92 11.64 18.82 11.45 18.63C11.26 18.44 11.15 18.19 11.15 17.92C11.15 17.85 11.16 17.79 11.17 17.72C11.19 17.66 11.21 17.6 11.23 17.54C11.26 17.48 11.29 17.42 11.32 17.36C11.36 17.31 11.4 17.26 11.45 17.21C11.54 17.12 11.65 17.05 11.77 17C12.14 16.85 12.58 16.93 12.86 17.21C13.05 17.4 13.15 17.66 13.15 17.92C13.15 18.19 13.05 18.44 12.86 18.63ZM12.86 14.63C12.67 14.82 12.42 14.92 12.15 14.92C11.89 14.92 11.64 14.82 11.45 14.63C11.26 14.44 11.15 14.19 11.15 13.92C11.15 13.66 11.26 13.4 11.45 13.21C11.82 12.84 12.49 12.84 12.86 13.21C12.95 13.31 13.03 13.41 13.08 13.54C13.13 13.66 13.15 13.79 13.15 13.92C13.15 14.19 13.05 14.44 12.86 14.63ZM9 10.46C7.97 10.46 7.12 9.62 7.12 8.58V7.58C7.12 6.55 7.96 5.7 9 5.7H15C16.03 5.7 16.88 6.54 16.88 7.58V8.58C16.88 9.61 16.04 10.46 15 10.46H9ZM16.86 18.63C16.67 18.82 16.42 18.92 16.15 18.92C16.02 18.92 15.89 18.89 15.77 18.84C15.65 18.79 15.54 18.72 15.45 18.63C15.26 18.44 15.16 18.19 15.16 17.92C15.16 17.66 15.26 17.4 15.45 17.21C15.72 16.93 16.17 16.85 16.54 17C16.66 17.05 16.77 17.12 16.86 17.21C17.05 17.4 17.15 17.66 17.15 17.92C17.15 18.19 17.05 18.44 16.86 18.63ZM17.08 14.3C17.03 14.42 16.96 14.53 16.86 14.63C16.67 14.82 16.42 14.92 16.15 14.92C15.89 14.92 15.64 14.82 15.45 14.63C15.26 14.44 15.15 14.19 15.15 13.92C15.15 13.66 15.26 13.4 15.45 13.21C15.82 12.84 16.49 12.84 16.86 13.21C17.05 13.4 17.16 13.66 17.16 13.92C17.16 14.05 17.13 14.18 17.08 14.3Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                </svg>
              </div>
            </div>
            <div class="w-100 border-white border-opacity-10" style="border-bottom: 2px dashed"></div>
          </div>
          <div class="mw-sm">
            <h6 class="fs-6 fw-semibold">Input Transactions</h6>
            <p class="text-white text-opacity-50">Record your financial transactions such as receipts, and other relevant documents.</p>
          </div>
        </div>
        <div class="col-lg-4 mb-10 mb-lg-0">
          <div class="d-flex mb-4 align-items-center">
            <div class="d-flex flex-shrink-0 me-8 align-items-center justify-content-center border border-danger rounded-pill" style="width: 58px; height: 58px;">

<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="text-center mb-16">
      <h2 class="font-heading fw-medium text-white mb-6">How Does Casper Work</h2>
      <p class="display-5 lh-lg text-light-light mb-4">Mi turpis turpis in justo pellentesque id nibh praesent.</p>
    </div>
    <div class="mw-lg mw-md-none mx-auto">
      <div class="row mb-14 align-items-center">
        <div class="col-md-6 order-last order-md-first">
          <div class="mw-md mw-lg-lg position-relative"><img class="img-fluid d-block w-100" src="casper-assets/how-it-works/bg-square-gradient.png" alt=""/>
            <div class="position-absolute bottom-0 end-0 w-100 ps-10 pt-10"><img class="img-fluid d-block ms-auto" src="casper-assets/how-it-works/image-square-sm-2.png" alt=""/></div>
          </div>
        </div>
        <div class="col-md-6 mb-8 mb-md-0">
          <div class="mw-lg ms-md-auto">
            <h5 class="display-2 fw-semibold text-white mb-0">01. Upload</h5>
            <div class="my-6 pt-1 bg-white bg-opacity-10"></div>
            <p class="display-5 lh-lg text-white">Our user-friendly interface allows for quick setup, and our dedicated support team is ready to assist you every step of the way.</p>
          </div>
        </div>
      </div>
      <div class="row mb-14 align-items-center">
        <div class="col-md-6 mb-8 mb-md-0">
          <div class="mw-lg ms-md-auto">

<section class="py-5">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-5 mb-5">
        <img class="img-fluid" src="bootstrap5-plain-assets/images/blue-400-square.png" alt="">
      </div>
      <div class="col-12 col-lg-6 col-xl-5 offset-lg-1 offset-xl-2">
        <div>
          <h2 class="display-5 fw-bold mb-5">Lorem ipsum dolor sit amet consectetur</h2>
          <div class="row">
            <div class="col-12 col-md-6 mb-5">
              <span class="d-flex mb-2 justify-content-center align-items-center rounded-circle bg-primary text-white" style="width: 48px;height: 48px">1</span>
              <p class="mt-3 mb-0 lead text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="col-12 col-md-6 mb-5">
              <span class="d-flex mb-2 justify-content-center align-items-center rounded-circle bg-primary text-white" style="width: 48px;height: 48px">2</span>
              <p class="mt-3 mb-0 lead text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="col-12 col-md-6 mb-5 mb-mb-0">
              <span class="d-flex mb-2 justify-content-center align-items-center rounded-circle bg-primary text-white" style="width: 48px;height: 48px">3</span>
              <p class="mt-3 mb-0 lead text-muted">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum.</p>
            </div>
            <div class="col-12 col-md-6">
              <span class="d-flex mb-2 justify-content-center align-items-center rounded-circle bg-primary text-white" style="width: 48px;height: 48px">4</span>

<section class="position-relative py-12 py-lg-16 bg-dark overflow-hidden"><img class="position-absolute top-0 start-0 w-100 h-100" src="fily-assets/gradients/gradient-httpcodes2.png" alt="">
  <div class="mw-xl mw-sm-2xl mw-md-3xl mw-xl-8xl mx-auto px-5 position-relative">
    <div class="py-20 py-xl-32 px-12 px-xl-24 bg-dark rounded-3">
      <div class="row align-items-center">
        <div class="col-xl-6 mb-16 mb-xl-0 py-4">
          <div class="mw-2xl pe-xl-8">
            <h1 class="text-secondary opacity-25 mb-12">01</h1>
            <h3 class="fw-medium text-white mb-12">Simplicity Redefined: A Seamless and Intuitive User Experience</h3>
            <p class="fs-6 text-white fw-light mb-12">Aliquam erat enim, feugiat non ante tincidunt, efficitur molestie elit. Cras molestie lectus non risus laoreet tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. Aenean in orci tempor nunc gravida malesuada.</p>
            <div class="d-flex pe-20 align-items-center">
              <div class="w-100 bg-secondary-dark rounded-pill me-14">
                <div class="col-4 col-sm-3 col-md-2">
                  <div class="w-100 bg-primary rounded-pill" style="height: 3px;"></div>
                </div>
              </div>
              <div class="flex-shrink-0 d-flex ms-auto align-items-center justify-content-center"><a class="d-flex me-4 btn flex-shrink-0 align-items-center justify-content-center bg-secondary-dark p-0" href="#" style="width: 56px; height: 56px;">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.31536 13.7141C7.40574 13.6211 7.47747 13.5105 7.52643 13.3886C7.57538 13.2667 7.60059 13.1359 7.60059 13.0039C7.60059 12.8718 7.57538 12.7411 7.52643 12.6192C7.47747 12.4973 7.40574 12.3867 7.31536 12.2937L4.14286 9.00276L13.7857 9.00276C14.0415 9.00276 14.2867 8.89738 14.4676 8.70979C14.6484 8.5222 14.75 8.26777 14.75 8.00248C14.75 7.73719 14.6484 7.48277 14.4676 7.29518C14.2867 7.10759 14.0415 7.0022 13.7857 7.0022L4.14286 7.0022L7.31536 3.71127C7.40574 3.61828 7.47747 3.50765 7.52643 3.38576C7.57539 3.26387 7.60059 3.13312 7.60059 3.00107C7.60059 2.86903 7.57539 2.73828 7.52643 2.61639C7.47747 2.4945 7.40574 2.38386 7.31536 2.29087C7.13469 2.10457 6.89029 2 6.63553 2C6.38078 2 6.13638 2.10457 5.95571 2.29087L1.81893 6.59209C1.45675 6.96554 1.25215 7.47276 1.25 8.00248C1.25469 8.52874 1.4591 9.03187 1.81893 9.40288L5.95571 13.7041C6.13511 13.8917 6.37879 13.9981 6.63355 14C6.8883 14.0018 7.13341 13.8991 7.31536 13.7141Z" fill="#696D81"></path>
                  </svg></a><a class="d-flex btn flex-shrink-0 align-items-center justify-content-center bg-primary p-0" href="#" style="width: 56px; height: 56px;">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.68464 2.28591C8.59426 2.3789 8.52253 2.48953 8.47357 2.61142C8.42461 2.73332 8.39941 2.86406 8.39941 2.99611C8.39941 3.12816 8.42461 3.2589 8.47357 3.38079C8.52253 3.50269 8.59426 3.61332 8.68464 3.70631L11.8571 6.99723L2.21429 6.99724C1.95854 6.99724 1.71327 7.10262 1.53243 7.29021C1.35159 7.4778 1.25 7.73223 1.25 7.99752C1.25 8.26281 1.35159 8.51723 1.53243 8.70482C1.71327 8.89241 1.95854 8.9978 2.21429 8.9978L11.8571 8.9978L8.68464 12.2887C8.59426 12.3817 8.52253 12.4923 8.47357 12.6142C8.42461 12.7361 8.39941 12.8669 8.39941 12.9989C8.39941 13.131 8.42461 13.2617 8.47357 13.3836C8.52253 13.5055 8.59426 13.6161 8.68464 13.7091C8.86531 13.8954 9.10971 14 9.36447 14C9.61922 14 9.86362 13.8954 10.0443 13.7091L14.1811 9.40791C14.5432 9.03446 14.7478 8.52724 14.75 7.99752C14.7453 7.47126 14.5409 6.96812 14.1811 6.59712L10.0443 2.29591C9.86489 2.10827 9.62121 2.0019 9.36645 2.00002C9.1117 1.99815 8.86659 2.10093 8.68464 2.28591Z" fill="white"></path>
                  </svg></a></div>
            </div>
          </div>