Statistics Section (using JS counters)

<!-- Key Statistics Section -->
<section class="py-5 bg-primary text-white">
  <div class="container py-4">
    <div class="row text-center g-4">
      <!-- Stat Item 1 -->
      <div class="col-6 col-md-3">
        <div class="p-3">
          <i class="bi bi-people-fill h1 opacity-75 mb-3 d-block"></i>
          <h2 class="display-4 fw-bold mb-0">
            <span class="counter" data-target="2500">0</span>+
          </h2>
          <p class="text-white-50 text-uppercase small fw-semibold ls-wide mb-0">Students Enrolled</p>
        </div>
      </div>
      <!-- Stat Item 2 -->
      <div class="col-6 col-md-3">
        <div class="p-3">
          <i class="bi bi-mortarboard-fill h1 opacity-75 mb-3 d-block"></i>
          <h2 class="display-4 fw-bold mb-0">
            <span class="counter" data-target="45">0</span>
          </h2>
          <p class="text-white-50 text-uppercase small fw-semibold ls-wide mb-0">Certified Courses</p>
        </div>
      </div>
      <!-- Stat Item 3 -->
      <div class="col-6 col-md-3">
        <div class="p-3">
          <i class="bi bi-person-badge-fill h1 opacity-75 mb-3 d-block"></i>
          <h2 class="display-4 fw-bold mb-0">
            <span class="counter" data-target="120">0</span>
          </h2>
          <p class="text-white-50 text-uppercase small fw-semibold ls-wide mb-0">Expert Faculty</p>
        </div>
      </div>
      <!-- Stat Item 4 -->
      <div class="col-6 col-md-3">
        <div class="p-3">
          <i class="bi bi-graph-up-arrow h1 opacity-75 mb-3 d-block"></i>
          <h2 class="display-4 fw-bold mb-0">
            <span class="counter" data-target="95">0</span>%
          </h2>
          <p class="text-white-50 text-uppercase small fw-semibold ls-wide mb-0">Placement Rate</p>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  .ls-wide {
    letter-spacing: 1px;
  }

</style>