function slide(direction) {
    // Find the button that triggered the event
    const button = event.currentTarget;
  
    // Find the parent .slider-container and the slider inside it
    const container = button.closest(".slider-container");
    const slider = container.querySelector(".slider");
    const cards = slider.querySelectorAll(".card , .ee,.powerful-slid");
    const containerRect = slider.getBoundingClientRect();
    const containerCenterX = slider.scrollLeft + containerRect.width / 2;
  
    let closestCard = null;
    let minDistance = Infinity;
  
    cards.forEach((card) => {
      const cardCenterX = card.offsetLeft + card.offsetWidth / 2;
      const distance = Math.abs(containerCenterX - cardCenterX);
      if (distance < minDistance) {
        minDistance = distance;
        closestCard = card;
      }
    });
  
    // Move to next or previous card
    let targetCard = closestCard;
    if (direction === 1 && closestCard.nextElementSibling) {
      targetCard = closestCard.nextElementSibling;
    } else if (direction === -1 && closestCard.previousElementSibling) {
      targetCard = closestCard.previousElementSibling;
    }
  
    const targetScrollX =
      targetCard.offsetLeft - containerRect.width / 2 + targetCard.offsetWidth / 2;
  
    slider.scrollTo({
      left: targetScrollX,
      behavior: "smooth",
    });
  }
  
  
  
  
  
  
  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
      const accordionItems = document.querySelectorAll('.accordion-item');
  
  accordionItems.forEach(item => {
    const header = item.querySelector('.accordion-header');
    header.addEventListener('click', () => {
      item.classList.toggle('active');
      const icon = header.querySelector('.accordion-icon');
      icon.textContent = item.classList.contains('active') ? '–' : '+';
    });
  });
  
  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>..
   document.getElementById('hamburger').addEventListener('click', function () {
    document.getElementById('navLinks').classList.toggle('open');
  });
  // .>>>>>>>>>>>>>>>>>>>>>>>>>>
  let selectedPlan = null;
  
  document.querySelectorAll('.option').forEach(option => {
    option.addEventListener('click', function() {
      document.querySelectorAll('.option').forEach(opt => opt.classList.remove('selected'));
      this.classList.add('selected');
      selectedPlan = this.getAttribute('data-plan');
      console.log("Selected:", selectedPlan);
    });
  });
  
  document.querySelector('.add-to-cart').addEventListener('click', function() {
    if (selectedPlan) {
      alert(`Added to cart: ${selectedPlan}`);
    } else {
      alert('Please select a plan first.');
    }
  });
  // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
  
  const thumbnails = document.querySelectorAll('#thumbnails img');
    const mainImage = document.getElementById('mainImage');
    let currentIndex = 0;
    let timer;
  
    function showImage(index) {
      thumbnails.forEach((thumb, i) => {
        thumb.classList.toggle('active', i === index);
      });
      const src = thumbnails[index].src.replace("150x100", "800x450");
      mainImage.src = src;
      currentIndex = index;
    }
  
    function nextImage() {
      currentIndex = (currentIndex + 1) % thumbnails.length;
      showImage(currentIndex);
    }
  
    thumbnails.forEach((thumb, index) => {
      thumb.addEventListener('click', () => {
        showImage(index);
        clearInterval(timer);
        timer = setInterval(nextImage, 3000);
      });
    });
  
    // Initial setup
    showImage(currentIndex);
    timer = setInterval(nextImage, 3000);