text: ///// Adding functionalities to the Tab-Menu Section /////
  
  const tabs = document.querySelectorAll('[data-tab-target]');
  const tabsContents = document.querySelectorAll('[data-tab-content]');
  
  tabs.forEach(tab => {
    tab.addEventListener('click', (e) => {
  
      const target = document.querySelector(tab.dataset.tabTarget);
  
      // Loop through 'menu-content' and remove 'active' class
      tabsContents.forEach(tabContent => {
        tabContent.classList.remove('active');
      })
      // Add 'active' class to 'menu-content'
      target.classList.add('active');
  
      // loop through 'li' items and remove 'active' class
      tabs.forEach(tab => {
        tab.classList.remove('active');
      })
  
      // Add 'active' class to clicked 'li' item
      e.target.classList.add("active");
  
    })
  })
  
  
  ///// Inject Testimony to HTML /////
  
  // Global UI Variables
  const img = document.querySelector('.avatar');
  const personName = document.querySelector('.name');
  const info = document.querySelector('.info');
  const nextBtn = document.querySelector('.next-btn');
  const prevBtn = document.querySelector('.prev-btn');
  
  const testimonials = [{
    name: 'Eric Lemon',
    info: 'Posuere lorem ipsum dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh sit amet, congue mauris rhoncus aenean vel. lorem ipsum dolor sit amet consectetur adipiscing.',
    avatar: 'https://i.ibb.co/d7S9dBL/avatar-1.jpg'
  },
  {
    name: 'Malika Emroud',
    info: 'Varius quam quisque id diam vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere, congue mauris rhoncus aenean vel.',
    avatar: 'https://i.ibb.co/nbp1D8W/avatar-2.jpg'
  },
  {
    name: 'Linda Clair',
    info: 'Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus.',
    avatar: 'https://i.ibb.co/fHXtpQC/avatar-3.jpg'
  },
  {
    name: 'Semantha Moon',
    info: 'Congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis.',
    avatar: 'https://i.ibb.co/Mp8t3XD/avatar-4.jpg'
  }
  ]
  // Starting Item
  let currentItem = 0;
  
  // Load initial item (on refresh)
  window.addEventListener('DOMContentLoaded', () => {
    showPerson(currentItem);
  });
  
  // Display person based on item
  function showPerson(person) {
    const item = testimonials[person];
    img.src = item.avatar;
    personName.textContent = item.name;
    info.textContent = item.info;
  };
  
  // Next Person Testimony
  nextBtn.addEventListener('click', (e) => {
    currentItem++
    if (currentItem > testimonials.length - 1) {
      currentItem = 0;
    }
    showPerson(currentItem);
  });
  
  // Previous Person Testimony
  prevBtn.addEventListener('click', (e) => {
    currentItem--
    if (currentItem < 0) {
      currentItem = testimonials.length - 1;
    }
    showPerson(currentItem);
  });
  
  
  ///// Mobile Navigation Menu /////
  
  navSlide = () => {
    const burger = document.querySelector('.burger-menu');
    const navLinks = document.querySelector('.nav-links');
  
    burger.addEventListener("click", () => {
      console.log('test')
      navLinks.classList.toggle("nav-links-active");
    });
  
  
    document.addEventListener("click", (e) => {
      if (!['bars', 'burger-menu'].some(el => e.target.classList.contains(el))) {
        navLinks.classList.remove("nav-links-active");
      }
    });
  
  };
  
  navSlide();
  
  
  