Bootstrap Project 1 Section

          
<!-- Project 1 - Bootstrap Brain Component -->
<section class="bg-light py-3 py-md-5">
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6">
        <h2 class="mb-4 display-5 text-center">Our Projects</h2>
        <p class="text-secondary mb-5 text-center lead fs-4">We are passionate about creating innovative products. We believe that technology can make people's lives better.</p>
        <hr class="w-50 mx-auto mb-5 mb-xl-9 border-dark-subtle">
      </div>
    </div>
  </div>

  <div class="container overflow-hidden">
    <div class="row gy-3 gy-md-2 bsb-project-1-grid">
      <div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
        <figure class="rounded rounded-4 overflow-hidden bsb-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-1.jpg" alt="Photography">
          </a>
          <figcaption>
            <h3 class="text-white bsb-hover-fadeInLeft">Charming Concept</h3>
            <div class="text-white bsb-hover-fadeInRight">Photography</div>
          </figcaption>
        </figure>
      </div>

      <div class="col-12 col-md-6 col-lg-6 bsb-project-1-item">
        <figure class="rounded rounded-4 overflow-hidden bsb-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale bsb-hover-scale-up" src="./assets/img/project-img-2.jpg" alt="Inspiration">
          </a>
          <figcaption>
            <h3 class="text-white bsb-hover-fadeInUp">Linear Architecture</h3>
            <div class="text-white bsb-hover-fadeInDown">Inspiration</div>
          </figcaption>
        </figure>
      </div>

      <div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
        <figure class="rounded rounded-4 overflow-hidden bsb-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-3.jpg" alt="Nature">
          </a>
          <figcaption>
            <h3 class="text-white bsb-hover-fadeInLeft">Endless Looks</h3>
            <div class="text-white bsb-hover-fadeInRight">Nature</div>
          </figcaption>
        </figure>
      </div>

      <div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
        <figure class="rounded rounded-4 overflow-hidden bsb-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-4.jpg" alt="Design">
          </a>
          <figcaption>
            <h3 class="text-white bsb-hover-fadeInLeft">Sleek Typography</h3>
            <div class="text-white bsb-hover-fadeInRight">Design</div>
          </figcaption>
        </figure>
      </div>

      <div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
        <figure class="rounded rounded-4 overflow-hidden bsb-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-5.jpg" alt="Fashion">
          </a>
          <figcaption>
            <h3 class="text-white bsb-hover-fadeInLeft">Ebony Vintage</h3>
            <div class="text-white bsb-hover-fadeInRight">Fashion</div>
          </figcaption>
        </figure>
      </div>

      <div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
        <figure class="rounded rounded-4 overflow-hidden bsb-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-6.jpg" alt="Food">
          </a>
          <figcaption>
            <h3 class="text-white bsb-hover-fadeInLeft">Orange Shine</h3>
            <div class="text-white bsb-hover-fadeInRight">Food</div>
          </figcaption>
        </figure>
      </div>

      <div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
        <figure class="rounded rounded-4 overflow-hidden bsb-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-7.jpg" alt="Health">
          </a>
          <figcaption>
            <h3 class="text-white bsb-hover-fadeInLeft">Boat Adventure</h3>
            <div class="text-white bsb-hover-fadeInRight">Health</div>
          </figcaption>
        </figure>
      </div>

      <div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
        <figure class="rounded rounded-4 overflow-hidden bsb-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-8.jpg" alt="Nature">
          </a>
          <figcaption>
            <h3 class="text-white bsb-hover-fadeInLeft">Offroad Moves</h3>
            <div class="text-white bsb-hover-fadeInRight">Nature</div>
          </figcaption>
        </figure>
      </div>

      <div class="col-12 col-md-6 col-lg-3 bsb-project-1-item">
        <figure class="rounded rounded-4 overflow-hidden bsb-overlay-hover">
          <a href="#!">
            <img class="img-fluid bsb-scale-up bsb-hover-scale" src="./assets/img/project-img-9.jpg" alt="Design">
          </a>
          <figcaption>
            <h3 class="text-white bsb-hover-fadeInLeft">Cozy Occupancy</h3>
            <div class="text-white bsb-hover-fadeInRight">Design</div>
          </figcaption>
        </figure>
      </div>
    </div>
  </div>
</section>