Here is my website, there is currently an issue where the testimonials are not showing. Also I want you to improve upon the design of the website by adding more animations and effects, as well as more sections/pages with alot of animations and effects. If you need to use any images, just use a placeholder for now. Here is my current code:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dharma Down Under</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
</head>
<body>
    <header>
        <div class="container">
            <div class="header-content">
                <h1>Dharma Down Under</h1>
                <nav>
                    <ul>
                        <li><a href="#about">About</a></li>
                        <li><a href="#seva">Seva</a></li>
                        <li><a href="#testimonials">Testimonials</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <section id="hero">
        <div class="container">
            <h2>Connect. Serve. Grow.</h2>
            <p>Empowering young Australian Hindus through Seva and Vedic Wisdom.</p>
            <a href="#about" class="cta-button">Learn More</a>
            <a href="#contact" class="cta-button secondary">Join Our Community</a>
        </div>
    </section>

    <section id="about">
        <div class="container">
            <h2 data-aos="fade-up">About Dharma Down Under</h2>
            <div class="about-content">
                <div class="image-placeholder" data-aos="fade-right"></div>
                <p data-aos="fade-left">We are a community of young Australian Hindus dedicated to fostering spiritual growth and giving back to the community through selfless service (Seva). We believe in the power of Vedic philosophies to guide us towards a more meaningful and fulfilling life.</p>
            </div>
        </div>
    </section>

    <section id="seva">
        <div class="container">
            <h2 data-aos="fade-up">Seva (Service)</h2>
            <div class="seva-activities">
                <div class="activity" data-aos="fade-up" data-aos-delay="100">
                    <div class="image-placeholder"></div>
                    <div class="activity-content">
                        <h3>Food Drive</h3>
                        <p>Organizing and distributing food to those in need.</p>
                    </div>
                </div>
                <div class="activity" data-aos="fade-up" data-aos-delay="200">
                    <div class="image-placeholder"></div>
                    <div class="activity-content">
                        <h3>Clothing Donation</h3>
                        <p>Collecting and providing warm clothing to the homeless.</p>
                    </div>
                </div>
                <div class="activity" data-aos="fade-up" data-aos-delay="300">
                    <div class="image-placeholder"></div>
                    <div class="activity-content">
                        <h3>Shelter Support</h3>
                        <p>Volunteering at local shelters and providing assistance.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="testimonials">
        <div class="container">
            <h2 data-aos="fade-up">What Our Community Says</h2>
            <div class="testimonial-container" data-aos="fade-up" data-aos-delay="100">
                <div class="testimonial-slider">
                    <div class="testimonial">
                        <p>"This community has changed my life. I've found a sense of belonging and purpose."</p>
                        <p class="author">- test 1.</p>
                    </div>
                    <div class="testimonial">
                        <p>"The seva activities have taught me the true meaning of selfless service."</p>
                        <p class="author">- test 2.</p>
                    </div>
                    <div class="testimonial">
                        <p>"I've learned so much about my culture and spirituality through this organization."</p>
                        <p class="author">- test 3.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="container">
            <h2 data-aos="fade-up">Contact Us</h2>
            <form data-aos="fade-up" data-aos-delay="100">
                <input type="text" placeholder="Your Name" required>
                <input type="email" placeholder="Your Email" required>
                <textarea placeholder="Your Message" required></textarea>
                <button type="submit">Send Message</button>
            </form>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2023 Dharma Down Under. All rights reserved.</p>
            <div class="social-icons">
                <a href="#"><i class="fab fa-facebook"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
            </div>
        </div>
    </footer>

    <button id="darkModeToggle" aria-label="Toggle dark mode">
        <i class="fas fa-moon"></i>
    </button>
    <button id="scrollToTop" aria-label="Scroll to top">
        <i class="fas fa-arrow-up"></i>
    </button>

    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="script.js"></script>
</body>
</html>

styles.css:

:root {
  --primary-color: #e8491d; /* Orangish-red color */
  --secondary-color: #35424a;
  --text-color: #333;
  --bg-color: #f4f4f4;
  --accent-color: #ff6b6b;
}

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

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
}

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

/* Header */
header {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: fixed;
  width: 100%;
  z-index: 1000;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

header h1 {
  font-size: 1.5rem;
  color: var(--primary-color);
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin-left: 2rem;
}

nav a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
  transition: color 0.3s ease;
}

nav a:hover {
  color: var(--primary-color);
}

/* Hero Section */
#hero {
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('hero-image.jpg');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
  color: #fff;
}

#hero .container {
  max-width: 800px;
}

#hero h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

#hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.cta-button {
  display: inline-block;
  background-color: var(--primary-color);
  color: #fff;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #3a7bc8;
}

.cta-button.secondary {
  background-color: transparent;
  border: 2px solid #fff;
  margin-left: 1rem;
}

.cta-button.secondary:hover {
  background-color: #fff;
  color: var(--primary-color);
}

/* Section Styles */
section {
  padding: 5rem 0;
}

section h2 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
  color: var(--primary-color);
}

/* About Section */
.about-content {
  display: flex;
  align-items: center;
  gap: 4rem;
}

.about-content .image-placeholder {
  flex: 1;
  height: 400px;
  background-color: #ddd;
  border-radius: 10px;
}

.about-content p {
  flex: 1;
  font-size: 1.1rem;
}

/* Seva Section */
.seva-activities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.activity {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.activity:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.activity .image-placeholder {
  height: 200px;
  background-color: #ddd;
}

.activity-content {
  padding: 1.5rem;
}

.activity h3 {
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

/* Testimonials Section */
#testimonials {
  background-color: var(--secondary-color);
  color: #fff;
  padding: 4rem 0;
  overflow: hidden;
}

.testimonial-container {
  width: 100%;
  overflow: hidden;
}

.testimonial-slider {
  display: flex;
  transition: transform 30s linear infinite;
}

.testimonial {
  flex: 0 0 33.333%;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 2rem;
  margin: 0 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.testimonial p {
  font-size: 1.1rem;
  font-style: italic;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.testimonial .author {
  font-weight: 600;
  text-align: right;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Contact Section */
#contact form {
  max-width: 600px;
  margin: 0 auto;
}

#contact input,
#contact textarea {
  width: 100%;
  padding: 0.8rem;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

#contact button {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#contact button:hover {
  background-color: #3a7bc8;
}

/* Footer */
footer {
  background-color: #333;
  color: #fff;
  padding: 3rem 0;
  text-align: center;
}

.social-icons a {
  color: #fff;
  font-size: 1.5rem;
  margin: 0 0.5rem;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: var(--primary-color);
}

/* Dark Mode Toggle and Scroll to Top */
#darkModeToggle,
#scrollToTop {
  position: fixed;
  right: 20px;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}

#darkModeToggle {
  top: 80px;
}

#scrollToTop {
  bottom: 20px;
  opacity: 0;
  visibility: hidden;
}

#darkModeToggle:hover,
#scrollToTop:hover {
  background-color: #3a7bc8;
}

#scrollToTop.visible {
  opacity: 1;
  visibility: visible;
}

/* Dark Mode Styles */
body.dark-mode {
  background-color: #1a1a1a;
  color: #f0f0f0;
}

body.dark-mode header {
  background-color: #2a2a2a;
}

body.dark-mode nav a {
  color: #f0f0f0;
}

body.dark-mode .activity,
body.dark-mode #contact input,
body.dark-mode #contact textarea {
  background-color: #2a2a2a;
  border-color: #444;
}

body.dark-mode footer {
  background-color: #111;
}

/* Responsive Design */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
  }

  nav ul {
    margin-top: 1rem;
  }

  nav ul li {
    margin-left: 0;
    margin-right: 1rem;
  }

  .about-content {
    flex-direction: column;
  }

  .about-content .image-placeholder,
  .about-content p {
    width: 100%;
  }

  #hero h2 {
    font-size: 2.5rem;
  }

  #hero p {
    font-size: 1rem;
  }
}

/* Add these new styles */

/* Smooth scrolling for the whole page */
html {
  scroll-behavior: smooth;
}

/* Header animation */
header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

header.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Navigation link hover effect */
nav a {
  position: relative;
}

nav a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: 100%;
}

/* Hero section fade-in animation */
#hero .container {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button hover animation */
.cta-button {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Activity card hover effect */
.activity {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.activity:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Testimonial fade-in animation */
.testimonial {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.testimonial.active {
  opacity: 1;
}

/* Form input focus animation */
#contact input,
#contact textarea {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#contact input:focus,
#contact textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* Dark mode toggle and scroll to top button animations */
#darkModeToggle,
#scrollToTop {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

#darkModeToggle:hover,
#scrollToTop:hover {
  transform: scale(1.1);
}

#scrollToTop {
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

#scrollToTop.visible {
  opacity: 1;
  visibility: visible;
}

script.js:

// Wait for the DOM to load before running scripts
document.addEventListener('DOMContentLoaded', () => {
    // Smooth scrolling to sections when clicking nav links
    document.querySelectorAll('nav a').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });

    // Form validation
    const form = document.querySelector('#contact-form');
    if (form) {
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            const name = form.querySelector('#name').value.trim();
            const email = form.querySelector('#email').value.trim();
            const message = form.querySelector('#message').value.trim();
            if (name === '' || email === '' || message === '') {
                alert('Please fill in all fields.');
                return;
            }
            alert('Form submitted successfully!');
            form.reset();
        });
    }

    // Sticky header
    window.addEventListener('scroll', () => {
        const header = document.querySelector('header');
        if (window.scrollY > 50) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }

        // Scroll to top button visibility
        const scrollToTopBtn = document.getElementById('scrollToTop');
        if (window.pageYOffset > 300) {
            scrollToTopBtn.classList.add('visible');
        } else {
            scrollToTopBtn.classList.remove('visible');
        }
    });

    // Dark mode toggle
    // const darkModeToggle = document.getElementById('darkModeToggle');
    // const body = document.body;

    // darkModeToggle.addEventListener('click', () => {
    //     body.classList.toggle('dark-mode');
    //     const icon = darkModeToggle.querySelector('i');
    //     if (body.classList.contains('dark-mode')) {
    //         icon.classList.replace('fa-moon', 'fa-sun');
    //     } else {
    //         icon.classList.replace('fa-sun', 'fa-moon');
    //     }
    // });
    // Dark mode toggle
    const darkModeToggle = document.getElementById('darkModeToggle');
    const body = document.body;

    darkModeToggle.addEventListener('click', () => {
    body.classList.toggle('dark-mode');
    const icon = darkModeToggle.querySelector('i');
    if (body.classList.contains('dark-mode')) {
        icon.classList.replace('fa-moon', 'fa-sun');
    } else {
        icon.classList.replace('fa-sun', 'fa-moon');
    }
    });


    // Scroll to top button functionality
    const scrollToTopBtn = document.getElementById('scrollToTop');
    if (scrollToTopBtn) {
        scrollToTopBtn.addEventListener('click', () => {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    }

    // Hero parallax effect
    const hero = document.querySelector('#hero');
    if (hero) {
        window.addEventListener('scroll', () => {
            const scrollPosition = window.pageYOffset;
            hero.style.backgroundPositionY = scrollPosition * 0.7 + 'px';
        });
    }

    // Initialize AOS
    AOS.init({
        duration: 1000,
        once: true,
    });

    // Fade-in animation
    function fadeInElements() {
        const elements = document.querySelectorAll('.fade-in');
        elements.forEach(element => {
            const elementTop = element.getBoundingClientRect().top;
            const windowHeight = window.innerHeight;
            if (elementTop < windowHeight - 50) {
                element.classList.add('visible');
            }
        });
    }

    window.addEventListener('scroll', fadeInElements);
    fadeInElements(); // Run on page load

    // Testimonial slider
    const testimonialSlider = document.querySelector('.testimonial-slider');
    const testimonials = document.querySelectorAll('.testimonial');

    if (testimonials.length > 0) {
        // Clone testimonials for seamless loop
        testimonials.forEach(testimonial => {
            const clone = testimonial.cloneNode(true);
            testimonialSlider.appendChild(clone);
        });

        // Set initial width of the slider
        testimonialSlider.style.width = `${testimonials.length * 200}%`;
        
        // Start the animation
        testimonialSlider.style.animation = 'scroll 30s linear infinite';
    }

    // Pause animation on hover
    testimonialSlider.addEventListener('mouseenter', () => {
        testimonialSlider.style.animationPlayState = 'paused';
    });

    testimonialSlider.addEventListener('mouseleave', () => {
        testimonialSlider.style.animationPlayState = 'running';
    });

    // Form interaction for labels
    const formGroups = document.querySelectorAll('.form-group');
    formGroups.forEach(group => {
        const input = group.querySelector('input, textarea');
        input.addEventListener('focus', () => group.classList.add('focused'));
        input.addEventListener('blur', () => {
            if (input.value === '') {
                group.classList.remove('focused');
            }
        });
    });

});