Make the headder part and the hero part look vvisually good when i enter into the mobile view...
"
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kv Nexus</title>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.21/vanta.net.min.js"></script>
    <!-- Add Font Awesome for the menu icon -->
    <link rel="icon" href="main_logo.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> 
    <style>
        .weather-info {
            font-size: 0.9rem;
            color: var(--text-color);
            display: flex;
            align-items: center;
        }
        
        .weather-info img {
            width: 30px;
            height: 30px;
            margin-right: 5px;
        }
        :root {
            --primary-color: #00ffff;
            --secondary-color: #ff00ff;
            --bg-color: #0a0a0a;
            --text-color: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        header {
            position: fixed;
            width: 100%;
            z-index: 1000;
            padding: 1rem 0;
            background: linear-gradient(to right, #00ffff, #ff00ff);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        

        header nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }
        

        .nav-links {
            display: flex;
            align-items: center;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-family: 'Orbitron', sans-serif;
            font-size: 2rem;
            color: #0a0a0a;
            text-decoration: none;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            transition: text-shadow 0.3s ease;
        }
        
        .logo:hover {
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
        }

        .nav-links a {
            margin-left: 1.5rem;
            color: #0a0a0a;
            text-decoration: none;
            font-weight: 700;
            transition: color 0.3s ease;
        }
        .nav-links a:hover {
            color: #00ffff;
        }
        .nav-toggle {
            display: none;
            cursor: pointer;
            color: #0a0a0a;
            font-size: 1.5rem;
        }
        

        #hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
        }

        .hero-content {
            position: relative;
            z-index: 1;
        }

        h1 {
            font-family: 'Orbitron', sans-serif;
            font-size: 4rem;
            margin-bottom: 1rem;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            opacity: 0;
        }

        .hero-content p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto 2rem;
            opacity: 0;
        }

        .cta-btn {
            display: inline-block;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: var(--bg-color);
            padding: 1rem 2rem;
            text-decoration: none;
            font-weight: 700;
            border-radius: 50px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            opacity: 0;
        }

        .cta-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
        }

        #features {
            padding: 6rem 0;
        }

        h2 {
            font-family: 'Orbitron', sans-serif;
            text-align: center;
            font-size: 3rem;
            margin-bottom: 3rem;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .feature-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 2rem;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg, transparent, var(--primary-color), transparent 30%);
            animation: rotate 4s linear infinite;
        }

        .feature-card::after {
            content: '';
            position: absolute;
            inset: 3px;
            background: var(--bg-color);
            border-radius: 15px;
            z-index: 1;
        }

        .feature-content {
            position: relative;
            z-index: 2;
        }

        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }

        .feature-card h3 {
            font-family: 'Orbitron', sans-serif;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

        .feature-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        footer {
            background-color: rgba(255, 255, 255, 0.05);
            text-align: center;
            padding: 2rem 0;
        }

        /* CSS for the team section */
        #team {
            padding: 6rem 0;
        }

        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

        .team-member {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 2rem;
            text-align: center;
        }

        .team-member h3 {
            font-family: 'Orbitron', sans-serif;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .team-member p {
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background-color: rgba(10, 10, 10, 0.9);
                text-align: center;
                padding: 1rem 0;
                z-index: 999;
            }
        
            .nav-links a {
                margin: 0.5rem 0;
                display: block;
                color: var(--text-color);
                text-decoration: none;
                padding: 0.5rem 0;
                transition: color 0.3s ease;
            }
        
            .nav-links a:hover {
                color: var(--primary-color);
            }
        
            .nav-links.show {
                display: flex;
            }
        
            .nav-toggle {
                display: block;
                position: absolute;
                top: 15px;
                right: 20px;
                z-index: 1000;
            }
        }
        footer {
            background-color: #0a0a0a;
            color: var(--text-color);
            padding: 2rem 0;
            position: relative;
            overflow: hidden;
        }
        
        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            opacity: 0.1;
            z-index: 0;
        }
        
        footer .container {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        footer p {
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }
        
        footer a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 700;
            transition: color 0.3s ease;
        }
        
        footer a:hover {
            color: var(--secondary-color);
        }
        
        footer .about-link {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 700;
            transition: color 0.3s ease;
            display: inline-block;
        }
        
        footer .about-link:hover {
            color: var(--secondary-color);
        }
        
        @media (max-width: 768px) {
            footer .container {
                padding: 0 1rem;
            }
        }
             /* Updated CSS for the Contact Form */
             .contact-form {
                background-color: rgba(255, 255, 255, 0.05);
                padding: 4rem 2rem;
                border-radius: 15px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
                max-width: 800px;
                margin: 3rem auto;
                transition: max-width 0.5s ease; /* Added transition for smooth resizing */
            }
            .contact-form.submitted {
                max-width: 500px; /* Adjust as needed */
            }
        .contact-form h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 2rem;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .contact-form form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .contact-form input[type="text"],
        .contact-form input[type="email"],
        .contact-form textarea {
            background-color: #0a0a0a;
            border: 2px solid var(--primary-color);
            color: var(--text-color);
            padding: 1rem;
            border-radius: 10px;
            font-size: 1rem;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .contact-form input[type="text"]:focus,
        .contact-form input[type="email"]:focus,
        .contact-form textarea:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
            outline: none;
        }

        .contact-form textarea {
            resize: vertical;
            min-height: 150px;
        }

        .contact-form button[type="submit"] {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: var(--bg-color);
            padding: 1rem 2rem;
            font-size: 1.2rem;
            font-weight: 700;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .contact-form button[type="submit"]:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
        }

        @media (max-width: 768px) {
            .contact-form {
                padding: 3rem 1.5rem;
            }

            .contact-form h2 {
                font-size: 2rem;
            }

            .contact-form button[type="submit"] {
                font-size: 1rem;
                padding: 0.75rem 1.5rem;
            }
        }
        /* Confirmation Message Styles */
        #confirmationMessage {
            margin-top: 1rem;
            text-align: center;
            font-size: 1.5rem;
            font-family: 'Orbitron', sans-serif;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: fadeInScale 1s ease forwards;
            opacity: 0;
            transform: scale(0.8);
        }

        .hidden {
            display: none;
        }

        /* Animation for the Confirmation Message */
        @keyframes fadeInScale {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        .hidden {
            display: none;
        }

        #confirmationMessage {
            opacity: 0;
            font-size: 1.2rem;
            text-align: center;
            color: #fff;
            margin-top: 20px;
            transition: opacity 0.5s ease;
        }

        .fadeIn {
            opacity: 1;
            transition: opacity 0.5s ease;
        }

        .bounce {
            animation: bounce 1s ease infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-30px);
            }
            60% {
                transform: translateY(-15px);
            }
        }


        .team-member {
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
    
        .team-member:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
        }
    
        .linkedin-icon {
            position: absolute;
            top: 10px;
            right: 10px;
            opacity: 0;
            transform: translateY(-20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
    
        .team-member:hover .linkedin-icon {
            opacity: 1;
            transform: translateY(0);
        }
    
        .linkedin-link {
            color: #0077B5;
            text-decoration: none;
            font-size: 24px;
            transition: transform 0.3s ease, color 0.3s ease;
        }
    
        .linkedin-link:hover {
            color: var(--primary-color);
            transform: scale(1.2);
        }
    
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
    
        .team-member:hover .linkedin-link {
            animation: pulse 1s infinite;
        }


        .error {
            color: #ff0000;
            font-size: 0.8rem;
            margin-top: 0.2rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
    
        .error.show {
            opacity: 1;
        }
    
        .contact-form input.invalid {
            border-color: #ff0000;
            animation: shake 0.5s ease-in-out;
        }
    
        @keyframes shake {
            0%, 100% {
                transform: translateX(0);
            }
            25% {
                transform: translateX(-10px);
            }
            75% {
                transform: translateX(10px);
            }
        }
    
        .validation-icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
    
        .validation-icon.show {
            opacity: 1;
        }
    
        .input-container {
            position: relative;
        }
    

        
    </style>
</head>
<body>
    
    <header>
        <nav class="container">
            <a href="#" class="logo">Kv Nexus</a>
            <div class="nav-links">
                <a href="#features">Features</a>
                <a href="#about">About</a>
                <a href="#contact-us">Contact</a>
                <a href="#team">Team</a>
            </div>
            <div class="nav-toggle" onclick="toggleNavigation()">
                <i class="fas fa-bars"></i> </div>
            <div class="weather-info" id="weatherInfo"></div>
        </nav>
    </header>

    <main>
        
        <section id="hero">
            <div class="hero-content">
                <h1>The Future of AI is Here</h1>
                <p>Experience the next generation of artificial intelligence, powering innovations beyond imagination.</p>
                <a href="#features" class="cta-btn">Explore Our AI Suite</a>
            </div>
        </section>

        <section id="features">
            <div class="container">
                <h2>Cutting-Edge AI Tools</h2>
                <div class="feature-grid">
                    <div class="feature-card">
                        <div class="feature-content">
                            <div class="feature-icon">🧠</div>
                            <h3>Health Analyzer</h3>
                            <p>Diagnose potential health concerns with AI-powered analysis.</p>
                            <a href="/analyze" class="cta-btn">Analyze</a>
                        </div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-content">
                            <div class="feature-icon">💬</div>
                            <h3>Conversational AI</h3>
                            <p>Engage in natural language conversations with our intelligent chatbot.</p>
                            <a href="/chat" class="cta-btn">Chat</a>
                        </div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-content">
                            <div class="feature-icon">🔗</div>
                            <h3>NeuraChart</h3>
                            <p>Unleash Your Creativity with AI-Powered Flowchart Wizardry!.</p>
                            <a href="/flowchart" class="cta-btn">Generate Flowchart</a>
                        </div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-content">
                            <div class="feature-icon">🍳</div>
                            <h3>Creative Chef</h3>
                            <p>Discover culinary inspiration and generate delicious recipes with ease.</p>
                            <a href="/chef" class="cta-btn">Generate Recipe</a>
                        </div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-content">
                            <div class="feature-icon">📖</div>
                            <h3>Story Weaver</h3>
                            <p>Craft captivating tales and unlock your creative potential with AI assistance.</p>
                            <a href="/story_generator" class="cta-btn">Generate Story</a>
                        </div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-content">
                            <div class="feature-icon">🔍</div>
                            <h3>Psychology Insights</h3>
                            <p>Gain valuable insights into human behavior and personality traits with AI-driven predictions.</p>
                            <a href="/psychology_prediction" class="cta-btn">Predict</a>
                        </div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-content">
                            <div class="feature-icon">💻</div>
                            <h3>Code Architect</h3>
                            <p>Generate code in multiple languages to automate tasks and bring your ideas to life.</p>
                            <a href="/code_generation" class="cta-btn">Generate Code</a>
                        </div>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-content">
                            <div class="feature-icon">🤖</div>
                            <h3>Algorithm Builder</h3>
                            <p>Create algorithms and implement them in Python for various applications.</p>
                            <a href="/algorithm_generation" class="cta-btn">Generate Algorithm</a>
                        </div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-content">
                            <div class="feature-icon">📚</div>
                            <h3>Document Summarizer</h3>
                            <p>Turn long documents into concise summaries.</p>
                            <a href="/document_summarizer" class="cta-btn">Summarize Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="about">
            <div class="container">
                <center>
                <h2>About Kv Nexus</h2>
                <p>NexusAI is at the forefront of artificial intelligence. Our suite of AI tools is designed to provide users with intuitive, powerful, and efficient ways to interact with technology, making the impossible possible.</p>
                </center>
            </div>
        </section>

        <section id="contact-us">
            <div class="contact-form">
                <center>
                <h2>Contact Us</h2>
                <form id="contactForm">
                    <p>Have questions or Suggest changes? Reach out to our team, and we'll be happy to assist you.</p>
                    <input type="text" id="name" name="name" placeholder="Your Name" required>
                    <input type="email" id="email" name="email" placeholder="Your Email" required>
                    <textarea id="message" name="message" placeholder="Your Message" required></textarea>
                    <button type="submit">Send</button>
                </form>
                <div id="confirmationMessage" class="hidden">
                    <h3>Message has been sent!</h3>
                </div>
            </center>
            </div>
        </section>

        <section id="team">
            <div class="container">
                <h2>Our Team</h2>
                <div class="team-grid">
                    <div class="team-member">
                        <div class="linkedin-icon">
                            <a href=<PRESIDIO_ANONYMIZED_URL> target="_blank" class="linkedin-link">
                                <i class="fab fa-linkedin"></i>
                            </a>
                        </div>
                        <h3>K. Vamsi Krishna</h3>
                        <p>Project Founder & Lead Developer</p>
                    </div>
                    <div class="team-member">
                        <div class="linkedin-icon">
                            <a href=<PRESIDIO_ANONYMIZED_URL> target="_blank" class="linkedin-link">
                                <i class="fab fa-linkedin"></i>
                            </a>
                        </div>
                        <h3>M. Girish</h3>
                        <p>UI/UX Designer</p>
                    </div>
                    <div class="team-member">
                        <div class="linkedin-icon">
                            <a href=<PRESIDIO_ANONYMIZED_URL> target="_blank" class="linkedin-link">
                                <i class="fab fa-linkedin"></i>
                            </a>
                        </div>
                        <h3>G. Manohar</h3>
                        <p>AI/ML Research & Development Contributor</p>
                    </div>
                    <div class="team-member">
                        <div class="linkedin-icon">
                            <a href=<PRESIDIO_ANONYMIZED_URL> target="_blank" class="linkedin-link">
                                <i class="fab fa-linkedin"></i>
                            </a>
                        </div>
                        <h3>J. Manikanta Naik</h3>
                        <p>Quality Assurance Specialist</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>© KV. Modernize the thinking. <a href="https://vamsikrishna28.vercel.app/" target="_blank" class="about-link">About Me</a></p>
        </div>
    </footer>

    <div class="weather-info" id="weatherInfo"></div>

    <!-- Scroll to Top Button -->
    <button onclick="scrollToTop()" id="scrollToTopBtn" title="Go to top"><i class="fas fa-angle-up"></i></button>

    <script>
        async function getWeatherInfo() {
            try {
                const response = await fetch('/api/weather');
                const data = await response.json();
        
                if (data.error) {
                    document.getElementById('weatherInfo').innerHTML = 'Weather information not available';
                    return;
                }
        
                const weatherHtml = `
                    <img src="${data.icon}" alt="${data.description}">
                    <span>${data.city}: ${data.description}, ${data.temperature.toFixed(1)}°C</span>
                `;
        
                document.getElementById('weatherInfo').innerHTML = weatherHtml;
            } catch (error) {
                console.error('Error:', error);
                document.getElementById('weatherInfo').innerHTML = 'Weather information not available';
            }
        }
        
        getWeatherInfo();
        // Scroll to top functionality
        function scrollToTop() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        window.onscroll = function() {
            const scrollToTopBtn = document.getElementById('scrollToTopBtn');
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                scrollToTopBtn.style.display = 'block';
            } else {
                scrollToTopBtn.style.display = 'none';
            }
        };

        // GSAP animations
        document.addEventListener('DOMContentLoaded', () => {
            gsap.fromTo("header", { y: -100 }, { y: 0, duration: 0.5, ease: "power4.out" });
            gsap.fromTo(".hero-content h1", { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 1, ease: "power4.out", delay: 0.5 });
            gsap.fromTo(".hero-content p", { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 1, ease: "power4.out", delay: 1 });
            gsap.fromTo(".cta-btn", { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 1, ease: "power4.out", delay: 1.5 });

            ScrollTrigger.create({
                trigger: "#features",
                start: "top center",
                onEnter: () => {
                    gsap.fromTo(".feature-card", { opacity: 0, y: 50 }, { opacity: 1, y: 0, duration: 1, stagger: 0.2, ease: "power4.out" });
                }
            });
        });

        // Vanta.js background
        VANTA.NET({
            el: "#hero",
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0x00ffff,
            backgroundColor: 0x0a0a0a
        });
        function toggleNavigation() {
            const navLinks = document.querySelector('.nav-links');
            navLinks.classList.toggle('show');
        }
        // Add this code after the existing script
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
        //for contact us 
            document.getElementById('contactForm').addEventListener('submit', async function(event) {
            event.preventDefault();
    
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const message = document.getElementById('message').value;
    
            const response = await fetch('/send-email', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ name, email, message }),
            });
    
            if (response.ok) {
                // Hide the form and show the confirmation message with animation
                const form = document.getElementById("contactForm");
                const confirmationMessage = document.getElementById("confirmationMessage");
    
                form.style.transition = "opacity 0.5s ease";
                form.style.opacity = 0;
    
                setTimeout(function() {
                    form.classList.add("hidden");
                    confirmationMessage.classList.remove("hidden");
                    confirmationMessage.classList.add("fadeIn");
    
                    setTimeout(function() {
                        confirmationMessage.classList.add("bounce");
                    }, 500); // Start bounce animation after fadeIn
                }, 500); // Wait for fade-out to complete
            } else {
                alert('Failed to send your message.');
            }
        });
    </script>
</body>
</html>
"