Bootstrap 5 Logo clouds Components

<section class="py-12 py-sm-24 py-md-32 bg-info-light">
  <div class="container">
    <h6 class="text-center fs-9 text-secondary text-uppercase mb-16" >Powering next-gen companies</h6>
    <div class="mw-6xl mx-auto">
      <div class="row mb-n6">
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-6">
          <div class="d-flex align-items-center justify-content-center p-4 bg-white rounded-4" style="height: 105px;"><img class="img-fluid d-block" src="flaro-assets/logos/brands/logo-xxl.png" alt=""/></div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-6">
          <div class="d-flex align-items-center justify-content-center p-4 bg-white rounded-4" style="height: 105px;"><img class="img-fluid d-block" src="flaro-assets/logos/brands/logo-xxl2.png" alt=""/></div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-6">
          <div class="d-flex align-items-center justify-content-center p-4 bg-white rounded-4" style="height: 105px;"><img class="img-fluid d-block" src="flaro-assets/logos/brands/logo-xxl3.png" alt=""/></div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-6">
          <div class="d-flex align-items-center justify-content-center p-4 bg-white rounded-4" style="height: 105px;"><img class="img-fluid d-block" src="flaro-assets/logos/brands/logo-xxl4.png" alt=""/></div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-6">
          <div class="d-flex align-items-center justify-content-center p-4 bg-white rounded-4" style="height: 105px;"><img class="img-fluid d-block" src="flaro-assets/logos/brands/logo-xxl5.png" alt=""/></div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-6">
          <div class="d-flex align-items-center justify-content-center p-4 bg-white rounded-4" style="height: 105px;"><img class="img-fluid d-block" src="flaro-assets/logos/brands/logo-xxl6.png" alt=""/></div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-6">
          <div class="d-flex align-items-center justify-content-center p-4 bg-white rounded-4" style="height: 105px;"><img class="img-fluid d-block" src="flaro-assets/logos/brands/logo-xxl7.png" alt=""/></div>
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-6">
          <div class="d-flex align-items-center justify-content-center p-4 bg-white rounded-4" style="height: 105px;"><img class="img-fluid d-block" src="flaro-assets/logos/brands/logo-xxl8.png" alt=""/></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-28 pb-32 bg-white overflow-hidden">
  <div class="container">
    <p class="fs-15 text-center text-secondary mb-5" >Best rated design tool in G2 and loved by world&rsquo;s best designers</p>
    <div class="row justify-content-center text-center">
      <div class="col-12 col-md-4 col-lg-auto p-10"><img class="img-fluid" src="gradia-assets/logos/brands/brand1.png" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-auto p-10"><img class="img-fluid" src="gradia-assets/logos/brands/brand2.png" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-auto p-10"><img class="img-fluid" src="gradia-assets/logos/brands/brand3.png" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-auto p-10"><img class="img-fluid" src="gradia-assets/logos/brands/brand4.png" alt=""/></div>
      <div class="col-12 col-md-4 col-lg-auto p-10"><img class="img-fluid" src="gradia-assets/logos/brands/brand5.png" alt=""/></div>
    </div>
  </div>
</section>

<section class="py-12 py-md-16 py-lg-24 overflow-hidden">
  <div class="container mb-10">
    <p class="text-center text-light-dark mb-0">Backed by leading education companies</p>
  </div>
  <div class="d-flex mb-4 justify-content-start">
    <div class="flex-shrink-0 ms-n12 py-6 px-10 mx-2 bg-light-light bg-opacity-50 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo1.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-light-light bg-opacity-50 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo2.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-light-light bg-opacity-50 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo3.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-light-light bg-opacity-50 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo4.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-light-light bg-opacity-50 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo5.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-light-light bg-opacity-50 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo1.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-light-light bg-opacity-50 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo2.png" alt="">
    </div>
  </div>
  <div class="d-flex justify-content-center">
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-light-light bg-opacity-50 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo1.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-light-light bg-opacity-50 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo2.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-light-light bg-opacity-50 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo1.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-light-light bg-opacity-50 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo2.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-light-light bg-opacity-50 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo3.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-light-light bg-opacity-50 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo4.png" alt="">
    </div>
    <div class="flex-shrink-0 py-6 px-10 mx-2 bg-light-light bg-opacity-50 rounded-2">
      <img class="img-fluid" src="solstice-assets/images/logos/placeholder-logo5.png" alt="">
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-light">
  <div class="container">
    <div class="text-center mb-16">
      <p class="lead fw-semibold mb-0">Millions of businesses use Basko</p>
    </div>
    <div class="mw-xs mw-sm-3xl mx-auto">
      <div class="row mb-n12">
        <div class="col-12 col-sm-6 col-md-4 mb-12">
          <img class="img-fluid d-block mx-auto" src="basko-assets/images/brands/logo6.svg" alt="">
        </div>
        <div class="col-12 col-sm-6 col-md-4 mb-12">
          <img class="img-fluid d-block mx-auto" src="basko-assets/images/brands/logo5.svg" alt="">
        </div>
        <div class="col-12 col-sm-6 col-md-4 mb-12">
          <img class="img-fluid d-block mx-auto" src="basko-assets/images/brands/logo4.svg" alt="">
        </div>
        <div class="col-12 col-sm-6 col-md-4 mb-12">
          <img class="img-fluid d-block mx-auto" src="basko-assets/images/brands/logo3.svg" alt="">
        </div>
        <div class="col-12 col-sm-6 col-md-4 mb-12">
          <img class="img-fluid d-block mx-auto" src="basko-assets/images/brands/logo2.svg" alt="">
        </div>
        <div class="col-12 col-sm-6 col-md-4 mb-12">
          <img class="img-fluid d-block mx-auto" src="basko-assets/images/brands/logo.svg" alt="">
        </div>
      </div>
      <div class="text-center mt-16">
        <p class="fw-medium text-secondary-dark">Join a growing group of satisfied customers who have made the switch.</p>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="d-flex flex-column flex-sm-row flex-wrap gap-8 gap-xl-10 align-items-center justify-content-center"><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/rbs.png" alt=""><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/nine.png" alt=""><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/drift.png" alt=""><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/seek.png" alt=""><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/deloitte.png" alt=""><img class="img-fluid d-block mx-auto" src="nightsable-assets/images/logo-clouds/wise.png" alt=""></div>
  </div>
</section>

<section class="py-20">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-6 col-lg-3 p-4">
        <div class="bg-light rounded py-12"><img class="d-block mx-auto" style="height: 32px;" src="zeus-assets/logo/slack-gray.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 p-4">
        <div class="bg-light rounded py-12"><img class="d-block mx-auto" style="height: 32px;" src="zeus-assets/logo/dropbox-gray.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 p-4">
        <div class="bg-light rounded py-12"><img class="d-block mx-auto" style="height: 32px;" src="zeus-assets/logo/spotify-gray.svg" alt=""/></div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 p-4">
        <div class="bg-light rounded py-12"><img class="d-block mx-auto" style="height: 32px;" src="zeus-assets/logo/stripe-gray.svg" alt=""/></div>
      </div>
    </div>
  </div>
</section>

<section class="bg-secondary-dark py-24 pt-md-40 pb-md-52">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-5 col-xl-4 mb-16 mb-lg-0">
        <div class="mw-md"><span class="h6 text-primary" >Clouds</span>
          <h2 class="h3 text-white mt-10 mb-14" >Trusted by brands all over the world</h2>
          <p class="text-secondary-light mb-0" >The brown fox jumps over the lazy dog.</p>
        </div>
      </div>
      <div class="col-12 col-lg-6 offset-xl-2">
        <div class="row mw-xs mw-sm-xl mw-lg-2xl mx-auto">
          <div class="col-12 col-sm-3 mb-3 mb-sm-0 align-self-center">
            <div class="d-flex align-items-center justify-content-center rounded bg-secondary py-8"><img class="d-block mx-auto img-fluid" src="zospace-assets/logos/spotify-box.svg" alt=""/></div>
          </div>
          <div class="col-12 col-sm-4 mb-3 mb-sm-0">
            <div class="d-flex w-50 py-10 ms-auto mb-3 align-items-center justify-content-center rounded bg-secondary"><img class="mx-auto img-fluid" src="zospace-assets/logos/we-box.svg" alt=""/></div>
            <div class="d-flex w-100 py-16 align-items-center justify-content-center rounded bg-secondary"><img class="mx-auto img-fluid" src="zospace-assets/logos/slack-box.svg" alt=""/></div>
          </div>
          <div class="col-12 col-sm-4 mt-sm-20">
            <div class="d-flex w-100 py-8 mb-3 align-items-center justify-content-center rounded bg-secondary"><img class="mx-auto img-fluid" src="zospace-assets/logos/miro-box.svg" alt=""/></div>
            <div class="d-flex w-75 py-12 align-items-center justify-content-center rounded bg-secondary"><img class="mx-auto img-fluid" src="zospace-assets/logos/dropbox-box.svg" alt=""/></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-24 pb-lg-52 bg-light"><img class="d-none d-lg-block position-absolute bottom-0 end-0 img-fluid col-7 col-xxl-5" src="wrexa-assets/logos/brands/brands-with-circles.svg" alt=""/>
  <div class="container">
    <div class="row mb-24 mb-lg-64">
      <div class="col-md-auto col-xl-4 me-md-24 me-xl-0 mb-4 mb-md-0"><a class="btn p-0" href="#" >Download application</a></div>
      <div class="col-md-auto col-xl-auto mb-4 mb-md-0"><a class="btn p-0" href="#" >Select plan</a></div>
      <div class="col-md-auto col-xl-3 ms-auto text-md-end"><a class="btn p-0" href="#" >Start a conversation</a></div>
    </div>
    <div class="row">
      <div class="col-12 col-lg-5">
        <div class="mw-md mx-auto">
          <h2 class="display-3 mb-14" >Cloud backup solutions for home and business</h2>
          <p class="mw-xs text-secondary lh-lg mb-20" >The house like a sense of truth that comes from within. The final game.</p><a class="btn btn-primary" href="#" >Learn More</a>
        </div>
      </div>
    </div>
  </div><img class="d-lg-none mt-24 img-fluid d-block ms-auto" src="wrexa-assets/logos/brands/brands-with-circles.svg" alt=""/>
</section>

<section class="position-relative py-20 bg-secondary-dark overflow-hidden" 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;">
    <h3 class="mb-8 font-heading fs-11 text-secondary-light fw-medium text-center">Trusted by the top companies in this industry</h3>
    <div class="row justify-content-center g-16">
      <div class="col-auto">
        <img class="img-fluid" src="flex-assets/logos/brands/jiggle-normal-light.png" alt="">
      </div>
      <div class="col-auto">
        <img class="img-fluid" src="flex-assets/logos/brands/symetric-normal-light.png" alt="">
      </div>
      <div class="col-auto">
        <img class="img-fluid" src="flex-assets/logos/brands/wishelp-normal-light.png" alt="">
      </div>
      <div class="col-auto">
        <img class="img-fluid" src="flex-assets/logos/brands/resecurb-normal-light.png" alt="">
      </div>
      <div class="col-auto">
        <img class="img-fluid" src="flex-assets/logos/brands/welytics-normal-light.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-20">
  <div class="position-absolute top-0 start-0 bottom-0 col-1 bg-light"></div>
  <div class="container">
    <div class="col-11 ms-auto row mb-n8 justify-content-between align-items-center">
      <div class="col-6 col-md-4 col-lg-2 mb-8"><img class="img-fluid d-block mx-auto" src="yofte-assets/brands/exxon.svg" alt="" /></div>
      <div class="col-6 col-md-4 col-lg-2 mb-8"><img class="img-fluid d-block mx-auto" src="yofte-assets/brands/ea-sports.svg" alt="" /></div>
      <div class="col-6 col-md-4 col-lg-2 mb-8"><img class="img-fluid d-block mx-auto" src="yofte-assets/brands/eurosport.svg" alt="" /></div>
      <div class="col-6 col-md-4 col-lg-2 mb-8"><img class="img-fluid d-block mx-auto" src="yofte-assets/brands/nike.svg" alt="" /></div>
      <div class="col-6 col-md-4 col-lg-2 mb-8"><img class="img-fluid d-block mx-auto" src="yofte-assets/brands/aol.svg" alt="" /></div>
      <div class="col-6 col-md-4 col-lg-2 mb-8"><img class="img-fluid d-block mx-auto" src="yofte-assets/brands/north-face.svg" alt="" /></div>
    </div>
  </div>
</section>

<section class="py-24 bg-white position-relative">
  <div class="pt-12 pb-36 bg-dark">
    <div class="container">
      <p class="mb-20 lh-lg text-center text-muted" >Trusted by brands all over the world</p>
      <div class="row align-items-center">
        <div class="col-12 col-sm-6 col-md-3 text-center mb-14 mb-md-0"><img class="img-fluid d-block mx-auto" src="pstls-assets/logos/coca-cola-w-xl.svg" alt="" /></div>
        <div class="col-12 col-sm-6 col-md-3 text-center mb-14 mb-md-0"><img class="img-fluid d-block mx-auto" src="pstls-assets/logos/apple-w-xl.svg" alt="" /></div>
        <div class="col-12 col-sm-6 col-md-3 mb-14 mb-sm-0"><img class="img-fluid d-block mx-auto" src="pstls-assets/logos/champion-w-xl.svg" alt="" /></div>
        <div class="col-12 col-sm-6 col-md-3"><img class="img-fluid d-block mx-auto" src="pstls-assets/logos/sony-w-xl.svg" alt="" /></div>
      </div>
    </div>
  </div>
  <div class="position-absolute top-0 start-0 px-1 bg-primary-light">
    <div class="p-12 px-32"></div>
  </div>
  <div class="position-absolute bottom-0 end-0 px-1 bg-primary-light">
    <div class="p-12 px-32"></div>
  </div>
</section>

<section class="py-20 overflow-hidden">
  <div class="container">
    <div class="mw-sm mw-md-6xl mx-auto px-lg-24 py-12 py-md-24 bg-light-light position-relative"><img class="d-none d-sm-block position-absolute top-0 start-0 translate-middle" src="cronos-assets/elements/left-squares.svg" alt=""/><img class="d-none d-sm-block position-absolute top-100 start-100 translate-middle" src="cronos-assets/elements/right-squares.svg" alt=""/>
      <div class="row align-items-center">
        <div class="col-12 col-md-6 col-lg-3 mb-12 mb-lg-0"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/slack-color.svg" alt=""/></div>
        <div class="col-12 col-md-6 col-lg-3 mb-12 mb-lg-0"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/dropbox-color.svg" alt=""/></div>
        <div class="col-12 col-md-6 col-lg-3 mb-12 mb-md-0"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/spotify-color.svg" alt=""/></div>
        <div class="col-12 col-md-6 col-lg-3"><img class="d-block mx-auto img-fluid" src="cronos-assets/logos/brands/stripe-color.svg" alt=""/></div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24">
  <div class="container position-relative">
    <p class="text-center fs-7 fw-medium mb-16">Trusted by 2400+ brands &amp; companies worldwide</p>
    <div class="d-flex flex-wrap gap-12 align-items-center justify-content-center"><img class="img-fluid" src="consulty-assets/logos/logoipsum4.svg" alt=""><img class="img-fluid" src="consulty-assets/logos/logoipsum1.svg" alt=""><img class="img-fluid" src="consulty-assets/logos/logoipsum2.svg" alt=""><img class="img-fluid" src="consulty-assets/logos/logoipsum3.svg" alt=""><img class="img-fluid" src="consulty-assets/logos/logoipsum5.svg" alt=""></div>
    <div class="position-absolute top-0 start-0 h-100 px-0 px-md-20 px-lg-40" style="background-image: linear-gradient(90deg, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%);"></div>
    <div class="position-absolute top-0 end-0 h-100 px-0 px-md-20 px-lg-40" style="background-image: linear-gradient(-90deg, rgba(255,255,255,1) 5%, rgba(255,255,255,0) 100%,  rgba(255,255,255,0) 100%);"></div>
  </div>
</section>

<section class="position-relative py-12 py-lg-24 bg-danger-dark">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <p class="mb-12 text-center">Powering financial insights for business owners.</p>
      <div class="row justify-content-center mb-n10">
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/aurevo-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/axiomatic-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/acme-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/cronix-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-dark position-relative overflow-hidden"><img class="position-absolute top-0 end-0 me-n52 mt-n80" src="casper-assets/blur/blur-center-violet.svg" alt=""/>
  <div class="container position-relative"><img class="d-none d-lg-block position-absolute top-0 end-0 mt-10 mt-lg-0 me-n20 me-lg-0" src="casper-assets/logo-clouds/axe.png" alt=""/><img class="d-none d-md-block position-absolute top-0 start-0 mt-12 mt-lg-n8 ms-lg-n10 ms-lg-4 animate-spinStar" src="casper-assets/logo-clouds/blink-star.png" alt=""/>
    <div class="mw-xl mw-md-2xl mw-xl-3xl mx-auto mb-20 text-center">
      <h2 class="font-heading fw-medium text-white mb-3">Over 100+ Company Use Casper</h2>
      <p class="mw-lg mx-auto fs-6 text-light-light mb-0">Nunc et tellus non erat accumsan aliquam eget non mi. Integer fringilla pellentesque finibus.</p>
    </div>
    <div class="mw-6xl mx-auto">
      <div class="row mx-n6 mb-n8 justify-content-center">
        <div class="col-12 col-sm-6 col-md-4 col-lg-auto px-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons1.svg" alt=""/></div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-auto px-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons2.svg" alt=""/></div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-auto px-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons3.svg" alt=""/></div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-auto px-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons4.svg" alt=""/></div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-auto px-6 mb-8"><img class="img-fluid d-block mx-auto" src="casper-assets/logo-clouds/logo-icons5.svg" alt=""/></div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-20 bg-light bg-opacity-25">
  <div class="container mw-8xl">
    <div class="col-md-8 col-lg-6">
      <div class="bg-white rounded-4 py-10 px-8 px-sm-12 overflow-hidden">
        <span class="d-inline-block text-muted fw-semibold mb-4">Our Partners</span>
        <h6 class="font-heading fs-2 fw-medium mb-20 mb-md-40 mw-sm">Trusted by brands all over:</h6>
        <div class="d-flex align-items-center m-n7">
          <div class="flex-shrink-0 p-7">
            <img class="img-fluid" src="mirga-assets/images/logos/placeholder-logo1.svg" alt="">
          </div>
          <div class="flex-shrink-0 p-7">
            <img class="img-fluid" src="mirga-assets/images/logos/placeholder-logo2.svg" alt="">
          </div>
          <div class="flex-shrink-0 p-7">
            <img class="img-fluid" src="mirga-assets/images/logos/placeholder-logo3.svg" alt="">
          </div>
          <div class="flex-shrink-0 p-7">
            <img class="img-fluid" src="mirga-assets/images/logos/placeholder-logo4.svg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row justify-content-center align-items-center">
      <div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0">
        <div class="py-5 bg-light rounded">
          <img class="d-block mx-auto img-fluid" src="bootstrap5-plain-assets/logos/slack.svg" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-4 mb-lg-0">
        <div class="py-5 bg-light rounded">
          <img class="d-block mx-auto img-fluid" src="bootstrap5-plain-assets/logos/dropbox.svg" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-4 mb-md-0">
        <div class="py-5 bg-light rounded">
          <img class="d-block mx-auto img-fluid" src="bootstrap5-plain-assets/logos/spotify.svg" alt="">
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3">
        <div class="py-5 bg-light rounded">
          <img class="d-block mx-auto img-fluid" src="bootstrap5-plain-assets/logos/stripe.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-md-24 bg-light-light">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-5 mb-20 mb-lg-0">
        <div class="mw-lg">
          <h2 class="fs-1 mb-10" >Meet our partners</h2><a class="d-inline-block pb-2 fw-semibold border-0 border-2 border-dark border-bottom" href="#"><span class="me-3" >I will become a sponsor</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="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9 8.83571V1.5H1.66429" stroke="black" stroke-width="1.3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a>
        </div>
      </div>
      <div class="col-12 col-lg-7">
        <div class="row">
          <div class="col-6 col-sm-3">
            <div class="d-flex align-items-center" style="height: 88px"><img class="img-fluid" src="asitrastudio-assets/logo-clouds/brand-youtube.png" alt=""/></div>
          </div>
          <div class="col-6 col-sm-3">
            <div class="d-flex align-items-center" style="height: 88px"><img class="img-fluid" src="asitrastudio-assets/logo-clouds/brand-visa.png" alt=""/></div>
          </div>
          <div class="col-6 col-sm-3">
            <div class="d-flex align-items-center" style="height: 88px"><img class="img-fluid" src="asitrastudio-assets/logo-clouds/brand-ikea.png" alt=""/></div>
          </div>
          <div class="col-6 col-sm-3">
            <div class="d-flex align-items-center" style="height: 88px"><img class="img-fluid" src="asitrastudio-assets/logo-clouds/brand-microsoft.png" alt=""/></div>
          </div>
          <div class="col-6 col-sm-3">
            <div class="d-flex align-items-center" style="height: 88px"><img class="img-fluid" src="asitrastudio-assets/logo-clouds/brand-microsoft.png" alt=""/></div>
          </div>
          <div class="col-6 col-sm-3">
            <div class="d-flex align-items-center" style="height: 88px"><img class="img-fluid" src="asitrastudio-assets/logo-clouds/brand-amazon.png" alt=""/></div>
          </div>
          <div class="col-6 col-sm-3">
            <div class="d-flex align-items-center" style="height: 88px"><img class="img-fluid" src="asitrastudio-assets/logo-clouds/brand-paypal.png" alt=""/></div>
          </div>
          <div class="col-6 col-sm-3">
            <div class="d-flex align-items-center" style="height: 88px"><img class="img-fluid" src="asitrastudio-assets/logo-clouds/brand-youtube.png" alt=""/></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 py-xl-32 bg-dark overflow-hidden">
  <div class="container">
    <div class="mw-lg mx-auto mw-lg-none">
      <div class="row align-items-center">
        <div class="col-lg-5 mb-16 mb-lg-0">
          <div>
            <h3 class="font-heading text-white mb-10">They trusted us</h3>
            <p class="fs-6 text-light-dark fw-medium mb-14">Nullam dignissim diam sed velit molestie, at auctor lectus finibus. Phasellus risus nisl, cursus dictum orci a, fermentum finibus tellus.</p><a class="btn btn-primary" href="#">Read more</a>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="d-flex flex-column align-items-center align-items-lg-end">
            <div class="d-flex flex-column flex-sm-row mb-8 mb-lg-12 mb-xl-16 gap-8 gap-lg-12 gap-xl-16">
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/spotify.svg" alt=""></div>
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/slack.svg" alt=""></div>
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/figma.svg" alt=""></div>
            </div>
            <div class="d-flex flex-column flex-sm-row mb-8 mb-lg-12 mb-xl-16 gap-8 gap-lg-12 gap-xl-16">
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/apple.svg" alt=""></div>
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/mastercard.svg" alt=""></div>
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/microsoft.svg" alt=""></div>
            </div>
            <div class="d-flex flex-column flex-sm-row gap-8 gap-lg-12 gap-xl-16">
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/visa.svg" alt=""></div>
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/brand.svg" alt=""></div>
              <div class="d-flex align-items-center justify-content-center bg-light bg-opacity-10 rounded-2" style="width: 120px; height: 120px;"><img class="img-fluid" src="fily-assets/brands/opera.svg" alt=""></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>