 document.addEventListener('DOMContentLoaded', () => {
        const searchInput = document.getElementById('instructorSearch');
        const instructorList = document.getElementById('instructorList');
        const cards = instructorList.getElementsByClassName('instructor-card');
        const noResult = document.getElementById('noResult');

        searchInput.addEventListener('input', function() {
          const searchTerm = this.value.toLowerCase().trim();
          let hasVisibleCards = false;

          Array.from(cards).forEach(card => {
            const name = card.querySelector('.instructor-name').textContent.toLowerCase();
            const role = card.querySelector('.instructor-role').textContent.toLowerCase();

            if (name.includes(searchTerm) || role.includes(searchTerm)) {
              card.style.display = 'flex';
              hasVisibleCards = true;
            } else {
              card.style.display = 'none';
            }
          });

          if (hasVisibleCards) {
            noResult.classList.add('hidden');
          } else {
            noResult.classList.remove('hidden');
          }
        });
      });