Bootstrap 5 Team Components

<section class="py-12 py-lg-16 bg-light position-relative overflow-hidden">
  <div class="container">
    <div class="mw-xl mx-auto mb-24 text-center">
      <h2 class="font-heading mb-8">
        <span>Amazing</span>
        <span style="font-family: 'Playfair Display', 'ui-serif', 'Georgia', 'Cambria', 'Times New Roman';">Team</span>
      </h2>
      <p class="lead text-secondary">We provide experienced advisors to help your company become more successful in the future.</p>
    </div>
    <div class="mw-sm mx-auto mw-md-none">
      <div class="row mb-n8">
        <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-8">
          <div class="bg-white pt-3 pb-5 px-3">
            <img class="img-fluid d-block mb-4 w-100" src="saturn-assets/images/team/photo-team-1.png" alt="">
            <div class="text-center">
              <span class="d-block fs-6 fw-bold">Cameron Williamson</span>
              <span class="fs-9 text-secondary fw-semibold">Founder</span>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-8">
          <div class="bg-white pt-3 pb-5 px-3">
            <img class="img-fluid d-block mb-4 w-100" src="saturn-assets/images/team/photo-team-6.png" alt="">
            <div class="text-center">

<section class="py-12 py-sm-24 py-md-32">
  <div class="container">
    <div class="mw-7xl mx-auto">
      <div class="row">
        <div class="col-12 col-lg-4 mb-8 mb-lg-0">
          <div class="d-flex mw-md mx-auto pb-10 px-10 bg-primary rounded-4" style="height: 533px;">
            <div class="mt-auto">
              <h4 class="text-white mb-4" >Who We Are</h4>
              <p class="text-info-light mb-8" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat enim.</p><a class="btn btn-light" href="#" >Learn about us</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4 mb-8 mb-lg-0">
          <div class="d-flex mw-md mx-auto pb-10 px-10 bg-primary rounded-4 position-relative overflow-hidden" style="height: 533px;"><img class="position-absolute top-0 start-0 h-100 w-100" src="flaro-assets/images/team/bg.png" alt="" style="object-fit: cover;"/><img class="position-absolute bottom-0 start-0 w-100" src="flaro-assets/images/team/white-gradient-bottom.png" alt=""/>
            <div class="position-relative mt-auto">
              <h4 class="fs-5 mb-1" >Leslie Alexander</h4><span class="text-secondary" >Co-Founder, CEO</span>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4">
          <div class="d-flex mw-md mx-auto pb-10 px-10 bg-primary rounded-4 position-relative overflow-hidden" style="height: 533px;"><img class="position-absolute top-0 start-0 h-100 w-100" src="flaro-assets/images/team/bg2.png" alt="" style="object-fit: cover;"/><img class="position-absolute bottom-0 start-0 w-100" src="flaro-assets/images/team/white-gradient-bottom.png" alt=""/>
            <div class="position-relative mt-auto">
              <h4 class="fs-5 mb-1" >Jenny Wilson</h4><span class="text-secondary" >Co-Founder, CEO</span>
            </div>

<section class="pt-24 pb-36 bg-white overflow-hidden">
  <div class="container">
    <div class="mw-md-md mx-auto text-center mb-24">
      <h2 class="fs-10 fw-semibold text-secondary mb-5" >Our happy team</h2>
      <p class="text-muted" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="container">
      <div class="row g-16">
        <div class="col-12 col-md-6">
          <div class="container">
            <div class="row g-7">
              <div class="col-auto"><img src="gradia-assets/images/teams/avatar1.png" alt=""/></div>
              <div class="col">
                <p class="fs-17 text-muted mb-6" >Lorem ipsum dolor sit amet, consec tetur adipis cing elit. Eleifend id vulpu tate amet nunc. Elit sagittis sollici tudin cursus aliquam quis dui. Ut curabitur morbi nunc sit leo tellus neque dolor. Amet sem egestas.</p>
                <h3 class="fs-17 mb-0" >Darrell Steward, CEO</h3>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-6">
          <div class="container">
            <div class="row g-7">
              <div class="col-auto"><img src="gradia-assets/images/teams/avatar2.png" alt=""/></div>
              <div class="col">

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="text-center mb-20"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-0" style="letter-spacing: -0.2rem;">Our Team</h1>
    </div>
    <div class="row mb-n16">
      <div class="col-md-6 col-lg-4 mb-16">
        <div class="text-center"><img class="img-fluid d-block mb-8 mx-auto" src="nightsable-assets/images/team/avatar2.png" alt=""><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block fs-4">Guy Hawkins</span></div>
      </div>
      <div class="col-md-6 col-lg-4 mb-16">
        <div class="text-center"><img class="img-fluid d-block mb-8 mx-auto" src="nightsable-assets/images/team/avatar1.png" alt=""><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block fs-4">Brooklyn Simmons</span></div>
      </div>
      <div class="col-md-6 col-lg-4 mb-16">
        <div class="text-center"><img class="img-fluid d-block mb-8 mx-auto" src="nightsable-assets/images/team/avatar3.png" alt=""><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block fs-4">Floyd Miles</span></div>
      </div>
      <div class="col-md-6 col-lg-4 mb-16">
        <div class="text-center"><img class="img-fluid d-block mb-8 mx-auto" src="nightsable-assets/images/team/avatar4.png" alt=""><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block fs-4">Guy Hawkins</span></div>
      </div>
      <div class="col-md-6 col-lg-4 mb-16">
        <div class="text-center"><img class="img-fluid d-block mb-8 mx-auto" src="nightsable-assets/images/team/avatar5.png" alt=""><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block fs-4">Brooklyn Simmons</span></div>
      </div>
      <div class="col-md-6 col-lg-4 mb-16">
        <div class="text-center"><img class="img-fluid d-block mb-8 mx-auto" src="nightsable-assets/images/team/avatar6.png" alt=""><span class="d-block fs-9 text-secondary-light">CEO at Nightsable Studio</span><span class="d-block fs-4">Floyd Miles</span></div>
      </div>

<section class="position-relative py-20"><img class="d-none d-lg-block position-absolute top-0 start-0 mt-20" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt=""/><img class="d-none d-lg-block position-absolute top-0 end-0 mt-20" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt=""/>
  <div class="container">
    <div class="max-w-3xl mx-auto mb-12 mb-lg-20 text-center"><span class="small text-info fw-bold">What&apos;s new at Shuffle</span>
      <h2 class="mt-8 mb-10">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
    </div>
    <div class="row">
      <div class="col-12 col-lg-6 mb-6">
        <div class="p-6 border rounded">
          <div class="row">
            <div class="col-12 col-md-4 mb-4 mb-lg-0"><img class="rounded w-100" style="height: 208px; object-fit: cover;" src="https://images.unsplash.com/photo-1544717305-f9c88f2897bc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt=""/></div>
            <div class="col-12 col-md-8">
              <h3 class="h4">Esther Howard</h3>
              <p class="mb-6 text-muted">CEO &amp; Founder</p>
              <p class="text-muted">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-6 mb-6">
        <div class="p-6 border rounded">
          <div class="row">
            <div class="col-12 col-md-4 mb-4 mb-lg-0"><img class="rounded w-100" style="height: 208px; object-fit: cover;" src="https://images.unsplash.com/photo-1525129498994-580709352e20?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt=""/></div>
            <div class="col-12 col-md-8">

<section class="position-relative bg-secondary-dark py-24 py-md-40"><img class="position-absolute top-50 start-0 w-100 translate-middle-y img-fluid" src="zospace-assets/lines/line-two-montain.svg" alt=""/>
  <div class="container position-relative mx-auto">
    <h2 class="h3 text-white text-center mb-24" >Our Team</h2>
    <div class="row mw-xl-6xl mx-auto justify-content-center mb-24">
      <div class="col-12 col-lg-4 mb-20 mb-lg-0">
        <div class="mw-xs mx-auto"><img class="w-100 img-fluid mb-8" src="https://images.pexels.com/photos/5325840/pexels-photo-5325840.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt="" style="height: 350px; object-fit: cover;"/><a class="btn w-100 text-start p-10 bg-primary rounded" href="#">
            <h4 class="text-white mb-2" >L&eacute;a Herrera</h4><span class="text-white" >UX Designer</span>
            <div class="mt-2 text-end">
              <svg width="27" height="15" viewbox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M26.2042 7.78599L19.5171 14.4731L18.6812 13.6372L24.3611 7.95734L0.709572 7.96153L0.709572 6.78292L24.3611 6.77874L19.0992 1.51681L19.9351 0.680916L26.2042 6.9501C26.4351 7.18093 26.4351 7.55515 26.2042 7.78599Z" fill="white"></path>
              </svg>
            </div></a></div>
      </div>
      <div class="col-12 col-lg-4 mb-20 mb-lg-0 mt-lg-40">
        <div class="mw-xs mx-auto"><img class="w-100 img-fluid mb-8" src="https://images.pexels.com/photos/5325885/pexels-photo-5325885.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940" alt="" style="height: 350px; object-fit: cover;"/><a class="btn w-100 text-start p-10 bg-primary rounded" href="#">
            <h4 class="text-white mb-2" >Maxi Svennson</h4><span class="text-white" >Social Media Manager</span>
            <div class="mt-2 text-end">
              <svg width="27" height="15" viewbox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M26.2042 7.78599L19.5171 14.4731L18.6812 13.6372L24.3611 7.95734L0.709572 7.96153L0.709572 6.78292L24.3611 6.77874L19.0992 1.51681L19.9351 0.680916L26.2042 6.9501C26.4351 7.18093 26.4351 7.55515 26.2042 7.78599Z" fill="white"></path>
              </svg>
            </div></a></div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="mw-xs mx-auto"><img class="w-100 img-fluid mb-8" src="https://images.unsplash.com/photo-1615803795804-06a0c2a0030e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt="" style="height: 350px; object-fit: cover;"/><a class="btn w-100 text-start p-10 bg-primary rounded" href="#">

<section class="position-relative pt-24 bg-light">
  <div class="container">
    <div class="d-flex align-items-center mb-24 mb-md-44"><span class="display-6 h5 mb-0" >02</span>
      <div class="mx-4 bg-light-dark rounded-circle" style="width: 4px; height: 4px;"></div><span class="display-6 h5 mb-0" >Creative Team</span>
    </div>
    <div class="mw-3xl mb-24 mb-md-40">
      <h1 class="display-3 mb-10" >&ldquo;Alone we can do so little, together we can do so much.&rdquo;</h1><span class="h5" >Helen Keller</span>
    </div>
    <div class="row pb-40 position-relative"><img class="d-xl-none position-absolute bottom-0 start-50 translate-middle-x img-fluid" src="wrexa-assets/elements/half-circles-triple.svg" alt=""/><img class="d-none d-xl-block position-absolute top-0 start-50 translate-middle img-fluid" src="wrexa-assets/elements/half-circles-triple.svg" alt=""/>
      <div class="col-12 col-xl-4 mb-12 mb-xl-0">
        <div class="position-relative mw-md mx-auto">
          <div class="position-absolute bottom-100 start-0 mb-n3 w-100">
            <div class="col-11 mx-auto pb-5 bg-secondary-dark rounded opacity-50"></div>
          </div>
          <div class="position-relative d-sm-flex py-16 ps-4 ps-10 pe-sm-10 bg-white rounded">
            <div class="flex-shrink-0 d-flex mb-6 mb-sm-0 me-sm-8 align-items-center justify-content-center border rounded-circle" style="width: 90px; height: 90px;"><img class="img-fluid rounded-circle" style="width: 70px; height: 70px;" src="wrexa-assets/images/avatar-women1.png" alt=""/></div>
            <div class="text-start"><span class="text-secondary" >Co-Founder</span>
              <h4 class="mt-2 mb-8" >Hannah Redmond</h4><a class="btn p-0 btn-link text-success text-decoration-none" href="#">
                <svg width="14" height="11" viewbox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                </svg><span class="ms-3" >Learn More</span></a>
            </div>
          </div>
        </div>

<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 pt-20 pb-24 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;">
      <span class="badge mb-4 bg-success-dark text-success text-uppercase shadow">Team</span>
      <h2 class="font-heading mb-4 fs-5 text-white" style="letter-spacing: -1px;">Our team is the best in the business.</h2>
      <p class="mb-24 fs-9 fw-medium text-secondary-light">Highly professional and capable of running your business across all digital channels.</p>
      <div class="row g-8">
        <div class="col-12 col-sm-6 col-lg-3">
          <div class="mw-xs">
            <img class="mb-6" src="flex-assets/images/team/avatar.png" alt="">
            <h3 class="mb-1 fs-10 fw-semibold text-white">Macauley Herring</h3>
            <h4 class="mb-4 fs-10 fw-medium text-success">CEO &amp; Founder</h4>
            <p class="mb-4 fw-medium text-secondary-light">Dance is the hidden language of the soul.</p>
            <ul class="nav ms-n4">
              <li class="nav-item">
                <a class="nav-link p-2 fs-9 link-secondary" href="#">
                  <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7273V12.766H16.3583L16.7669 9.66246H13.6349V7.68128C13.6349 6.78301 13.8882 6.17085 15.203 6.17085L16.8771 6.17017V3.39424C16.5876 3.35733 15.5938 3.27273 14.4371 3.27273C12.0217 3.27273 10.3681 4.71881 10.3681 7.37391V9.66246H7.63647V12.766H10.3681V20.7273H13.6349Z" fill="currentColor"></path>

<section class="py-24 bg-white overflow-hidden">
  <div class="position-relative container"><img class="position-absolute top-0 start-0 mt-n44 ms-n60" src="pstls-assets/images/teams/team-1-shadow.png" alt=""/>
    <div class="position-relative">
      <div class="row align-items-md-center">
        <div class="col-12 col-md-5 mb-6 mb-md-0">
          <h1 class="mb-0 lh-sm font-heading" >Team</h1>
        </div>
        <div class="col-12 col-md-7">
          <p class="mb-0 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>
      <div class="row mt-20 mt-xl-24">
        <div class="col-12 col-md-6 col-lg-4 mb-14">
          <div class="mx-auto mw-xs px-7">
            <div class="position-relative mb-12"><img class="img-fluid position-relative" src="pstls-assets/images/teams/team-1-photo.jpg" style="z-index: 1" alt="" />
              <div class="bg-primary-light position-absolute start-0 top-0 w-100 h-100 mt-6 ms-n6"></div>
            </div>
            <h5 class="mb-0 fw-bold lh-lg font-heading" >Sophie Kowalsky</h5><span class="text-muted small" >CTO at Shuffle</span>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4 mb-14">
          <div class="mx-auto mw-xs px-7">
            <div class="position-relative mb-12"><img class="img-fluid position-relative" src="pstls-assets/images/teams/team-1-photo-2.jpg" style="z-index: 1" alt="" />
              <div class="bg-danger-light position-absolute start-0 top-0 w-100 h-100 mt-n6 ms-6"></div>

<section class="py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-6 pe-lg-5 mb-5 mb-lg-0">
        <span class="badge bg-primary rounded-pill">Our Team</span>
        <h2 class="my-3 fs-1 fw-bold">Lorem ipsum dolor sit amet consectetur adipisicing</h2>
        <p class="text-muted lh-lg mb-0">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis quisquam cum aliquam rem.</p>
      </div>
      <div class="col-12 col-lg-6 pl-lg-5">
        <div class="row">
          <div class="col-6 px-4 py-2">
            <img class="mb-3 rounded-circle" style="object-fit: cover;" width="75" height="75" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <h4 class="mb-1">Anne Bailey</h4>
            <p class="text-muted">CEO</p>
          </div>
          <div class="col-6 px-4 py-2">
            <img class="mb-3 rounded-circle" style="object-fit: cover;" width="75" height="75" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <h4 class="mb-1">Julie Brown</h4>
            <p class="text-muted">Head of Development</p>
          </div>
          <div class="col-6 px-4 py-2">
            <img class="mb-3 rounded-circle" style="object-fit: cover;" width="75" height="75" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <h4 class="mb-1">Tom Jones</h4>
            <p class="text-muted">Head of Operations</p>

<section class="py-20">
  <div class="container">
    <div class="mw-3xl mx-auto text-center mb-12"><span class="badge bg-secondary-light">Lorem Ipsum</span>
      <h2 class="mt-6 mb-4">Lorem ipsum dolor sit amet consectutar</h2>
      <p class="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>
    </div>
    <div class="row">
      <div class="col-12 col-lg-10 mx-auto">
        <div class="row">
          <div class="col-12 col-lg-6 mb-8">
            <div class="p-8 bg-light-light">
              <div class="row align-items-center">
                <div class="col-12 col-lg-5 mb-4 mb-lg-0"><img class="img-fluid w-100" style="height: 223px; object-fit: cover;" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=334&amp;q=80" alt=""/></div>
                <div class="col-12 col-lg-7">
                  <h6 class="text-primary mb-2">Sophie Baialey</h6>
                  <p class="mb-2 fw-bold">CEO &amp; Founder</p>
                  <p class="lead lh-lg text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12 col-lg-6 mb-8">
            <div class="p-8 bg-light-light">
              <div class="row align-items-center">

<section class="py-12 py-lg-24">
  <div class="container">
    <div class="mw-md mw-md-xl mw-lg-2xl mx-auto mx-md-0 mb-24">
      <h1 class="font-heading mb-6" style="letter-spacing: -1.2px;">The team behind successful product</h1>
      <p class="fs-7 text-dark-light mb-0">Consulty gives you the blocks &amp; components you need to create a truly professional website, landing page or admin panel for your SaaS.</p>
    </div>
    <div class="mw-sm mx-auto mw-md-none">
      <div class="row">
        <div class="col-12 col-md-6 col-lg-2 mb-6 mb-md-lg"><img class="img-fluid d-block w-100 mb-6" src="consulty-assets/team/picture1.png" alt=""><img class="img-fluid d-block w-100" src="consulty-assets/team/shapes-box1.png" alt=""></div>
        <div class="col-12 col-md-6 col-lg-3 mb-6 mb-md-lg align-self-end align-self-lg-start"><img class="img-fluid rounded-3" style="height: 360px; object-fit: cover;" src="consulty-assets/team/picture2.png" alt=""></div>
        <div class="col-12 col-md-6 col-lg-3 mb-6 mb-md-lg">
          <div class="d-flex gap-6"><img class="img-fluid rounded-3" style="height: 360px;" src="consulty-assets/team/shapes-box2.png" alt="">
            <div class="flex-grow-1"><img class="img-fluid d-block w-100 rounded-3 mb-6" style="height: 165px; object-fit: cover;" src="consulty-assets/team/picture3.png" alt=""><img class="img-fluid d-block w-100 rounded-3" style="height: 165px; object-fit: cover;" src="consulty-assets/team/picture4.png" alt=""></div>
          </div>
        </div>
        <div class="col-12 col-md-6 col-lg-4"><img class="img-fluid rounded-3" style="height: 360px; object-fit: cover;" src="consulty-assets/team/picture5.png" alt=""></div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative py-12 py-lg-24 pb-xl-32 bg-danger-dark">
  <div class="container">
    <div class="mw-xs mw-md-lg mx-auto mw-md-5xl">
      <div class="row mb-20 align-items-end">
        <div class="col-md-7 mb-10 mb-md-0">
          <div><span class="badge mb-3 text-danger-light text-uppercase" style="letter-spacing: 1.44px;">diverse and world-class</span>
            <h3 class="font-heading mb-0">Meet our team</h3>
          </div>
        </div>
        <div class="col-md-5">
          <div class="d-flex align-items-center justify-content-end">
            <div class="d-flex me-8 align-items-center">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.27232 5.86195L9.50687 6.42602L10.1158 6.47481L13.4188 6.73946L10.9024 8.89524L10.4387 9.29254L10.5803 9.88656L11.3486 13.1096L8.52091 11.3826L7.99968 11.0642L7.47844 11.3826L4.65075 13.1096L5.41909 9.88656L5.56069 9.29254L5.09694 8.89524L2.58054 6.73946L5.88355 6.47481L6.49248 6.42602L6.72703 5.86195L7.99968 2.80137L9.27232 5.86195ZM4.581 13.4022L4.58109 13.4019L4.581 13.4022ZM2.28065 6.76349L2.28088 6.76347L2.28065 6.76349Z" fill="#F53D6C" stroke="#F53D6C" style="fill:#F53D6C;fill:color(display-p3 0.9608 0.2392 0.4235);fill-opacity:1;stroke:#F53D6C;stroke:color(display-p3 0.9608 0.2392 0.4235);stroke-opacity:1;" stroke-width="2"></path>
              </svg><span class="ms-2 text-danger fw-semibold">We are hiring!</span>
            </div><a class="btn py-0 d-inline-flex align-items-center text-danger-dark btn-light border-2 border-secondary border-opacity-25" href="#"><span class="me-2 lh-lg">Careers</span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.43032 8.28862L9.4303 8.2886L9.42602 8.29289L6.45312 11.2658V8.20666V4.72754L8.11268 6.3871L9.42602 7.70044C9.59121 7.86563 9.58501 8.13579 9.43032 8.28862Z" fill="black" stroke="#2E0F17" style="fill:black;fill-opacity:1;stroke:#2E0F17;stroke:color(display-p3 0.1794 0.0598 0.0891);stroke-opacity:1;" stroke-width="2"></path>
              </svg></a>
          </div>
        </div>
      </div>
      <div class="mw-xs mx-auto mw-lg-none">
        <div class="row">

<section class="pb-12 pt-40 py-lg-24 pt-lg-32 bg-dark-light position-relative overflow-hidden"><img class="position-absolute bottom-0 start-0" src="casper-assets/blur/blur-left-center-violet.svg" alt=""/>
  <div class="container position-relative">
    <div class="row align-items-center">
      <div class="col-12 col-lg-5 mb-14 mb-lg-0 position-relative"><img class="d-none d-md-block position-absolute top-0 end-0 mt-md-n52 mt-lg-n64 mt-xl-n52 img-fluid" src="casper-assets/team/planet.png" alt=""/><img class="d-block d-md-none position-absolute top-0 end-0 mt-n40 me-8 img-fluid" style="width: 164px;" src="casper-assets/team/planet.png" alt=""/>
        <div class="mw-sm mw-lg-lg mx-auto mx-lg-0">
          <h2 class="h3 font-heading fw-medium text-white mb-6">Meet our amazing Team</h2>
          <p class="display-5 lh-lg text-light-light mb-8">Mi turpis turpis in justo pellentesque id nibh praesent.</p><a class="btn btn-outline-light" href="#"><span class="me-2">SHOW ALL PEOPLE</span>
            <svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M17.9199 6.62C17.8185 6.37565 17.6243 6.18147 17.3799 6.08C17.2597 6.02876 17.1306 6.00158 16.9999 6H6.99994C6.73472 6 6.48037 6.10536 6.29283 6.29289C6.1053 6.48043 5.99994 6.73478 5.99994 7C5.99994 7.26522 6.1053 7.51957 6.29283 7.70711C6.48037 7.89464 6.73472 8 6.99994 8H14.5899L6.28994 16.29C6.19621 16.383 6.12182 16.4936 6.07105 16.6154C6.02028 16.7373 5.99414 16.868 5.99414 17C5.99414 17.132 6.02028 17.2627 6.07105 17.3846C6.12182 17.5064 6.19621 17.617 6.28994 17.71C6.3829 17.8037 6.4935 17.8781 6.61536 17.9289C6.73722 17.9797 6.86793 18.0058 6.99994 18.0058C7.13195 18.0058 7.26266 17.9797 7.38452 17.9289C7.50638 17.8781 7.61698 17.8037 7.70994 17.71L15.9999 9.41V17C15.9999 17.2652 16.1053 17.5196 16.2928 17.7071C16.4804 17.8946 16.7347 18 16.9999 18C17.2652 18 17.5195 17.8946 17.707 17.7071C17.8946 17.5196 17.9999 17.2652 17.9999 17V7C17.9984 6.86932 17.9712 6.74022 17.9199 6.62Z" fill="currentColor"></path>
            </svg></a>
        </div><img class="img-fluid d-block ms-auto animate-spinStar" src="casper-assets/team/blink-star.png" alt=""/>
      </div>
      <div class="col-12 col-lg-7">
        <div class="mw-2xl mx-auto me-lg-0">
          <div class="row">
            <div class="col-12 col-sm-6 mb-10 mb-sm-0 mt-sm-n8">
              <div class="d-flex mb-10 flex-column align-items-center justify-content-center p-10 text-center border-2 border border-white rounded"><img class="img-fluid d-block mb-6" src="casper-assets/team/avatar-1-sm.png" alt=""/>
                <h5 class="fw-medium text-white mb-1">Marvin McKinney</h5><span class="text-primary fw-medium">Tech Lead</span>
              </div>
              <div class="d-flex flex-column align-items-center justify-content-center p-10 text-center border-2 border border-white rounded"><img class="img-fluid d-block mb-6" src="casper-assets/team/avatar-2-sm.png" alt=""/>
                <h5 class="fw-medium text-white mb-1">Marvin McKinney</h5><span class="text-primary fw-medium">Tech Lead</span>
              </div>
            </div>
            <div class="col-12 col-sm-6 mt-sm-8">

<section class="position-relative py-12 py-lg-24 bg-light bg-opacity-25 overflow-hidden">
  <div class="container mw-2xl mx-auto mw-lg-9xl">
    <div class="row mb-32">
      <div class="col-12 col-lg-4 mb-12 mb-lg-0">
        <div>
          <h2 class="font-heading fw-semibold h1 mb-16">Team</h2>
          <p class="lead fs-5 mb-0">At the heart of our success is a diverse and talented team.</p>
        </div>
      </div>
      <div class="col-12 col-lg-8">
        <div class="mw-3xl ms-auto">
          <p class="fs-1 fw-semibold text-dark mb-14">
            <span>Our dedicated team of experts collaborates passionately to drive innovation and achieve</span>
            <span class="d-inline-block">
              <span>outstanding results</span>
              <span class="d-block py-1 bg-success rounded-pill"></span>
            </span>
          </p>
          <p class="mw-2xl lead fs-5 mb-0">At the heart of our success is a diverse and talented team, united by a shared commitment to excellence.</p>
        </div>
      </div>
    </div>
    <div class="d-flex mb-20 me-10 position-relative">
      <button class="position-absolute top-0 end-0 me-n6 mt-64 btn btn-primary py-5 px-4">

<section class="py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-8">
        <div class="mx-auto text-center mb-5">
          <span class="text-muted">Lorem Ipsum</span>
          <h2 class="display-5 fw-bold mt-2 mb-3">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
          <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
        </div>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-12 col-md-6 col-lg-10">
        <div class="row">
          <div class="col-12 col-lg-6 mb-4">
            <div class="p-4 bg-light rounded">
              <div class="row align-items-center">
                <div class="col-12 col-lg-5 mb-4 mb-lg-0">
                  <img class="img-fluid w-100" style="height: 208px; object-fit: cover;" src="bootstrap5-plain-assets/images/blue-400-square.png" alt="">
                </div>
                <div class="col-12 col-lg-7">
                  <h4 class="fw-bold">Danny Bailey</h4>
                  <p class="text-muted">CEO & Founder</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh.</p>

<section class="py-12 py-md-20 bg-light-light">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-xl-4 mb-20 mb-lg-0">
        <div>
          <h1 class="mb-10" >Meet the team</h1><a class="d-inline-block pb-2 fw-semibold border-0 border-2 border-dark border-bottom" href="#"><span class="me-3" >See more people</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-lg-7 col-xl-8">
        <div class="row">
          <div class="col-6 col-md-4 col-lg-6 col-xl-4 mb-12">
            <div><img class="img-fluid mb-6" src="asitrastudio-assets/team/team-avatar1.png" alt=""/><span class="d-block fs-9 text-secondary-light" >Executive Chairman</span><span class="d-block fs-4" >Jacob Jones</span></div>
          </div>
          <div class="col-6 col-md-4 col-lg-6 col-xl-4 mb-12">
            <div><img class="img-fluid mb-6" src="asitrastudio-assets/team/team-avatar2.png" alt=""/><span class="d-block fs-9 text-secondary-light" >Executive Chairman</span><span class="d-block fs-4" >Ronald Richards</span></div>
          </div>
          <div class="col-6 col-md-4 col-lg-6 col-xl-4 mb-12">
            <div><img class="img-fluid mb-6" src="asitrastudio-assets/team/team-avatar3.png" alt=""/><span class="d-block fs-9 text-secondary-light" >Executive Chairman</span><span class="d-block fs-4" >Leslie Alexander</span></div>
          </div>
          <div class="col-6 col-md-4 col-lg-6 col-xl-4 mb-12">

<section class="py-12 py-lg-24 py-xl-32 bg-light-light">
  <div class="container">
    <div class="mw-2xl mx-auto mb-12 text-center">
      <h2 class="font-heading mb-10">Meet our team</h2>
      <p class="fs-6 text-dark fw-medium mb-0">Our diverse team of experts brings a wealth of experience in task management, time optimization, and goal achievement to deliver the best solutions to you.</p>
    </div>
    <div class="mw-md mw-md-2xl mx-auto mw-xl-none">
      <div class="row mb-n5">
        <div class="col-xl-6 mb-5">
          <div class="h-100 px-8 pe-md-14 py-10 bg-white rounded-3">
            <div class="row align-items-center">
              <div class="col-md-4 mb-5 mb-md-0">
                <div class="pe-2"><img class="img-fluid rounded-2" src="fily-assets/team/pic.jpg" alt=""></div>
              </div>
              <div class="col-md-8">
                <div>
                  <div class="d-flex flex-column flex-sm-row mb-8 align-items-start justify-content-between">
                    <div class="mb-4 mb-sm-0 me-sm-4"><span class="d-block lh-sm fs-5 fw-bold">Deacon Galvan</span><span class="fs-9 fw-medium text-primary">Owner, Director</span></div>
                    <div class="d-flex flex-shrink-0 align-items-center"><a class="btn d-inline-flex align-items-center justify-content-center btn-light p-0" href="#" style="width: 40px; height: 40px;">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M12.3731 1.20053H14.7039L9.61187 7.02035L15.6022 14.9398H10.9118L7.23814 10.1367L3.03463 14.9398H0.702494L6.14886 8.71486L0.402344 1.20053H5.21177L8.53245 5.59076L12.3731 1.20053ZM11.5551 13.5447H12.8466L4.51001 2.52232H3.12411L11.5551 13.5447Z" fill="#060918"></path>
                        </svg></a><a class="btn d-inline-flex align-items-center justify-content-center ms-2 btn-light p-0" href="#" style="width: 40px; height: 40px;">
                        <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <g clip-path="url(#clip0_210_121)">