I am making a website but there are lot of bugs and issues. some buttons just dont work (like the darkmode button thats supposed to turn everything into darkmode and change its icon from a moon to a sun). Some sections just don't appear on the website despite being in the html. Some text is just formattaed incorrectly and animations arent working right. please fix it all:

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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
</head>
<body>
    <header>
        <div class="container">
            <div class="header-content">
                <h1>Dharma Down Under</h1>
                <nav>
                    <button id="menu-toggle" aria-label="Toggle menu">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                    <ul id="nav-menu">
                        <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" class="parallax">
        <div class="container">
            <h2 class="fade-in">Connect. Serve. Grow.</h2>
            <p class="fade-in">Empowering young Australian Hindus through Seva and Vedic Wisdom.</p>
            <div class="cta-buttons">
                <a href="#about" class="cta-button fade-in">Learn More</a>
                <a href="#contact" class="cta-button secondary fade-in">Join Our Community</a>
            </div>
        </div>
    </section>

    <section id="about">
        <div class="container">
            <h2 class="section-title" data-aos="fade-up">About Dharma Down Under</h2>
            <div class="about-content">
                <div class="image-placeholder" data-aos="fade-right"></div>
                <div class="about-text" data-aos="fade-left">
                    <p>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>
        </div>
    </section>

    <section id="seva">
        <div class="container">
            <h2 class="section-title" data-aos="fade-up">Seva (Service)</h2>
            <div class="seva-activities">
                <div class="activity" data-aos="fade-up">
                    <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="100">
                    <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="200">
                    <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 class="section-title">What Our Community Says</h2>
            <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">- Priya S.</p>
                </div>
                <div class="testimonial">
                    <p>"The Seva activities have taught me the true meaning of selfless service."</p>
                    <p class="author">- Rahul M.</p>
                </div>
                <div class="testimonial">
                    <p>"I've deepened my understanding of Vedic wisdom through this amazing community."</p>
                    <p class="author">- Anita K.</p>
                </div>
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="container">
            <h2 class="section-title">Contact Us</h2>
            <form id="contact-form">
                <div class="form-group">
                    <input type="text" id="name" placeholder="Your Name" required>
                    <label for="name">Your Name</label>
                </div>
                <div class="form-group">
                    <input type="email" id="email" placeholder="Your Email" required>
                    <label for="email">Your Email</label>
                </div>
                <div class="form-group">
                    <textarea id="message" placeholder="Your Message" required></textarea>
                    <label for="message">Your Message</label>
                </div>
                <button type="submit" class="cta-button">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="#" aria-label="TikTok"><i class="fab fa-tiktok"></i></a>
                <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                <a href="#" aria-label="Instagram"><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="script.js"></script>
</body>
</html>

style.css:

:root {
  --primary-color: #4a90e2;
  --secondary-color: #50c878;
  --text-color: #333;
  --bg-color: #f8f9fa;
  --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;
}

.section-title {
  text-align: center;
  margin-bottom: 2rem;
}

p {
  line-height: 1.6;
}

/* 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 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

#menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--primary-color);
  margin: 5px 0;
}

@media (max-width: 768px) {
  #menu-toggle {
    display: block;
  }

  #nav-menu {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background-color: white;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
  }

  #nav-menu.active {
    display: flex;
  }

  #nav-menu li {
    margin: 10px 0;
  }
}

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: 2rem;
}

.about-content .image-placeholder,
.about-content .about-text {
  flex: 1;
}

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

.activity {
  background-color: #f8f8f8;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.activity:hover {
  transform: translateY(-5px);
}

.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(--primary-color);
  color: #fff;
}

.testimonial-container {
  max-width: 800px;
  margin: 0 auto;
}

.testimonial {
  text-align: center;
  padding: 2rem;
}

.testimonial p {
  font-size: 1.2rem;
  font-style: italic;
  margin-bottom: 1rem;
}

.testimonial .author {
  font-weight: 600;
}

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

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-group textarea {
  height: 150px;
}

#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 {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#darkModeToggle:hover {
  background-color: var(--primary-color);
  color: white;
}

body.dark-mode #darkModeToggle {
  color: white;
  border-color: white;
}

body.dark-mode #darkModeToggle:hover {
  background-color: white;
  color: var(--primary-color);
}

#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: #121212;
  color: #f0f0f0;
}

body.dark-mode .activity,
body.dark-mode #contact {
  background-color: #1e1e1e;
}

body.dark-mode .activity h3 {
  color: var(--primary-color);
}

#darkModeToggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#darkModeToggle:hover {
  background-color: var(--secondary-color);
}

/* 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;
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Script.js:

// 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();
        if (form.querySelector('input[type="text"]').value === '' ||
            form.querySelector('input[type="email"]').value === '' ||
            form.querySelector('textarea').value === '') {
            alert('Please fill in all fields.');
            return;
        }
        alert('Form submitted successfully!');
        form.reset();
    });
}

// // 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);
//     });
// }

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

// 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
const scrollToTopBtn = document.getElementById('scrollToTop');
if (scrollToTopBtn) {
    window.addEventListener('scroll', () => {
        if (window.pageYOffset > 300) {
            scrollToTopBtn.classList.add('visible');
        } else {
            scrollToTopBtn.classList.remove('visible');
        }
    });

    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,
});

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

// Smooth scroll for navigation 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'
            });
        }
    });
});

// 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);
window.addEventListener('load', fadeInElements);

// Testimonial slider
const testimonialSlider = document.querySelector('.testimonial-slider');
let currentTestimonial = 0;

function showNextTestimonial() {
    const testimonials = testimonialSlider.querySelectorAll('.testimonial');
    testimonials[currentTestimonial].style.opacity = '0';
    currentTestimonial = (currentTestimonial + 1) % testimonials.length;
    testimonials[currentTestimonial].style.opacity = '1';
}

setInterval(showNextTestimonial, 5000);

// Form interaction
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');
        }
    });
});

// Mobile menu toggle
const menuToggle = document.getElementById('menu-toggle');
const navMenu = document.getElementById('nav-menu');

menuToggle.addEventListener('click', () => {
    navMenu.classList.toggle('active');
});