    <script>
        let currentCardIndex = 0;
        const cards = document.querySelectorAll('.slide-card');
        let slideInterval;

        // Display specific card with enhanced transitions
        function showCard(cardIndex) {
            // If there's a currently active card, start its exit animation
            const currentCard = document.querySelector('.slide-card.active');
            if (currentCard) {
                // Add fade-out class to start exit animation
                currentCard.classList.add('fade-out');
                currentCard.classList.remove('active');

                // Wait for the exit animation to complete before showing new card
                setTimeout(() => {
                    currentCard.classList.remove('fade-out');

                    // Now show the new card
                    activateNewCard(cardIndex);
                }, 800); // Match this with transition time
            } else {
                // No active card, just show the new one
                activateNewCard(cardIndex);
            }

            // Update current index
            currentCardIndex = cardIndex;
        }

        // Activate new card and its animations
        function activateNewCard(cardIndex) {
            // Activate the selected card
            cards[cardIndex].classList.add('active');
        }

        // Navigate to next card
        function nextCard() {
            let nextIndex = (currentCardIndex + 1) % cards.length;
            showCard(nextIndex);
        }

        // Start automatic slideshow
        function startAutoSlide() {
            // Make sure to clear any previous interval
            clearInterval(slideInterval);
            // Start new interval
            slideInterval = setInterval(nextCard, 5000); // Increased to 5 seconds to see animations better
        }

        // Start operation when page loads
        document.addEventListener('DOMContentLoaded', function () {
            showCard(0); // Show first card
            startAutoSlide(); // Start automatic navigation
        });

        // Run start function immediately (in case DOM is already loaded)
        if (document.readyState === 'complete' || document.readyState === 'interactive') {
            showCard(0);
            startAutoSlide();
        }
    </script>
