let slideIndex = 0;
showSlides();

function showSlides() {
    let i;
    const slides = document.querySelectorAll('.slide');
    const navBtns = document.querySelectorAll('.nav-btn');

    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none';
    }

    slideIndex++;
    if (slideIndex > slides.length) {
        slideIndex = 1;
    }

    for (i = 0; i < navBtns.length; i++) {
        navBtns[i].className = navBtns[i].className.replace(' active', '');
    }

    slides[slideIndex - 1].style.display = 'block';
    navBtns[slideIndex - 1].className += ' active';

    setTimeout(showSlides, 20000); // Change slide every 4 seconds
}

function currentSlide(n) {
    slideIndex = n - 1;
    showSlides();
}