Instructor List

<!-- Instructor List (Bootstrap Cards) -->
<section class="py-5 bg-light">
  <div class="container">
    <h3 class="fw-bold mb-4 border-start border-primary border-4 ps-3">Senior Instructors</h3>
    <div class="row g-4">
      <!-- Instructor 1 -->
      <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm overflow-hidden h-100 instructor-card">
          <img src="https://i.pravatar.cc/300?u=ins1" class="card-img-top" alt="Instructor">
          <div class="card-body">
            <h6 class="fw-bold mb-1">Mr. Karim Ahmed</h6>
            <p class="text-muted small mb-3">Senior Web Instructor</p>
            <hr class="my-2 opacity-25">
            <p class="card-text small text-secondary">Expert in MERN Stack and Industrial Web Solutions for various clients.</p>
          </div>
        </div>
      </div>
      <!-- Instructor 2 -->
      <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm overflow-hidden h-100 instructor-card">
          <img src="https://i.pravatar.cc/300?u=ins2" class="card-img-top" alt="Instructor">
          <div class="card-body">
            <h6 class="fw-bold mb-1">Ms. Fatema Begum</h6>
            <p class="text-muted small mb-3">Graphic Design Mentor</p>
            <hr class="my-2 opacity-25">
            <p class="card-text small text-secondary">10+ years of experience in Branding, UI/UX, and Digital Artistry.</p>
          </div>
        </div>
      </div>
      <!-- Instructor 3 -->
      <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm overflow-hidden h-100 instructor-card">
          <img src="https://i.pravatar.cc/300?u=ins3" class="card-img-top" alt="Instructor">
          <div class="card-body">
            <h6 class="fw-bold mb-1">Engr. Asif Zaman</h6>
            <p class="text-muted small mb-3">Civil Engr. Instructor</p>
            <hr class="my-2 opacity-25">
            <p class="card-text small text-secondary">Lead consultant for municipal construction and bridge design.</p>
          </div>
        </div>
      </div>
      <!-- Instructor 4 -->
      <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm overflow-hidden h-100 instructor-card">
          <img src="https://i.pravatar.cc/300?u=ins4" class="card-img-top" alt="Instructor">
          <div class="card-body">
            <h6 class="fw-bold mb-1">Mr. Tanvir Hossain</h6>
            <p class="text-muted small mb-3">Automobile Specialist</p>
            <hr class="my-2 opacity-25">
            <p class="card-text small text-secondary">Master Technician specializing in EFI engines and Hybrid systems.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>