please fix this codes (<!-- Include W3.CSS in your HTML head -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<!-- Styles -->
<style>
  /* ====================================================
     Section 2: Why Choose Longeva?
  ===================================================== */

  /* Unique Class Prefix: wc- (Why Choose) */

  /* Container for the Why Choose Section */
  .wc-section {
    width: 100%;
    padding: 4rem 1rem;
    background-color: #2b2b2b; /* Dark background */
    color: #ffffff; /* White text for contrast */
    font-family: var(--f-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden; /* To contain the particles */
  }

  /* Section Title */
  .wc-section-title {
    font-size: 2.5rem;
    color: var(--c-gold); /* Gold color for emphasis */
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
  }

  .wc-section-title::after {
    content: '';
    width: 60px;
    height: 3px;
    background: var(--c-gold);
    display: block;
    margin: 0.5rem auto 0 auto;
    border-radius: 2px;
  }

  /* Benefits Container */
  .wc-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: var(--max-width);
    width: 100%;
    margin-bottom: 3rem;
  }

  /* Individual Benefit Item */
  .wc-benefit-item {
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent for depth */
    padding: 1.5rem;
    border-radius: var(--s-border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: flex-start;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    position: relative; /* For pseudo-element positioning */
  }

  .wc-benefit-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--s-border-radius);
    background: rgba(255, 255, 255, 0.05); /* Slight overlay */
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .wc-benefit-item:hover::before {
    opacity: 1; /* Show overlay on hover */
  }

  .wc-benefit-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  }

  /* Icon for Benefit */
  .wc-benefit-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    margin-right: 1rem;
  }

  .wc-benefit-icon i {
    font-size: 2rem; /* Adjust icon size */
    color: #ffffff; /* White for visibility on dark background */
  }

  /* Benefit Content */
  .wc-benefit-content {
    flex-grow: 1;
  }

  .wc-benefit-title {
    font-size: 1.3rem;
    color: #ffffff; /* White text */
    margin-bottom: 0.5rem;
    font-weight: 600;
  }

  .wc-benefit-description {
    font-size: 1rem;
    color: #dddddd; /* Light gray for readability */
    line-height: 1.5;
  }




  /* Responsive Grid Layout */
  @media (min-width: 768px) {
    .wc-benefits {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .wc-benefits {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 480px) {
    .wc-section {
      padding: 2rem 1rem;
    }

    .wc-section-title {
      font-size: 2rem;
    }

    .wc-benefit-item {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .wc-benefit-icon {
      margin-right: 0;
      margin-bottom: 1rem;
    }
  }

  /* Animation Keyframes */
  @keyframes shimmer {
    0% {
      left: -75%;
    }
    100% {
      left: 125%;
    }
  }
</style>

<!-- Why Choose Longeva Section -->
<section class="wc-section" id="why-choose">
  <h2 class="wc-section-title">Why Choose Longeva?</h2>
  
  <!-- Benefits Grid -->
  <div class="wc-benefits">
    <!-- Benefit 1 -->
    <div class="wc-benefit-item">
      <div class="wc-benefit-icon">
        <i class="fa fa-user-md"></i> <!-- Replace with relevant W3.CSS icon -->
      </div>
      <div class="wc-benefit-content">
        <h3 class="wc-benefit-title">Personalized Care</h3>
        <p class="wc-benefit-description">
          Customized treatment plans tailored to your unique genetic and molecular profile.
        </p>
      </div>
    </div>
    
    <!-- Benefit 2 -->
    <div class="wc-benefit-item">
      <div class="wc-benefit-icon">
        <i class="fa fa-laptop-medical"></i> <!-- Replace with relevant W3.CSS icon -->
      </div>
      <div class="wc-benefit-content">
        <h3 class="wc-benefit-title">Advanced Technology</h3>
        <p class="wc-benefit-description">
          Utilizing the latest advancements in cellular and regenerative medicine.
        </p>
      </div>
    </div>
    
    <!-- Benefit 3 -->
    <div class="wc-benefit-item">
      <div class="wc-benefit-icon">
        <i class="fa fa-heartbeat"></i> <!-- Replace with relevant W3.CSS icon -->
      </div>
      <div class="wc-benefit-content">
        <h3 class="wc-benefit-title">Holistic Approach</h3>
        <p class="wc-benefit-description">
          Comprehensive health strategies that address the root causes of chronic conditions.
        </p>
      </div>
    </div>
    
    <!-- Benefit 4 -->
    <div class="wc-benefit-item">
      <div class="wc-benefit-icon">
        <i class="fa fa-user-check"></i> <!-- Replace with relevant W3.CSS icon -->
      </div>
      <div class="wc-benefit-content">
        <h3 class="wc-benefit-title">Expert Team</h3>
        <p class="wc-benefit-description">
          Dedicated healthcare professionals committed to your well-being and longevity.
        </p>
      </div>
    </div>
    
    <!-- Benefit 5 -->
    <div class="wc-benefit-item">
      <div class="wc-benefit-icon">
        <i class="fa fa-comments"></i> <!-- Replace with relevant W3.CSS icon -->
      </div>
      <div class="wc-benefit-content">
        <h3 class="wc-benefit-title">Comprehensive Support</h3>
        <p class="wc-benefit-description">
          Ongoing support to ensure your health journey is as smooth as possible.
        </p>
      </div>
    </div>
    
    <!-- Benefit 6 -->
    <div class="wc-benefit-item">
      <div class="wc-benefit-icon">
        <i class="fa fa-clipboard-check"></i> <!-- Replace with relevant W3.CSS icon -->
      </div>
      <div class="wc-benefit-content">
        <h3 class="wc-benefit-title">Proven Results</h3>
        <p class="wc-benefit-description">
          Clinical studies showcasing the efficacy of our innovative treatments.
        </p>
      </div>
    </div>
  </div>

</section>


<!-- Smooth Scroll Behavior and Interactive Particles (Existing Script) -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Smooth scrolling for all internal links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          target.scrollIntoView({ behavior: 'smooth' });
          // Update URL hash without default jump
          history.pushState(null, null, this.getAttribute('href'));
        }
      });
    });

    // Keyboard accessibility for CTA buttons
    const ctaButtons = document.querySelectorAll('.hero-cta, .wc-cta-button');
    ctaButtons.forEach(ctaButton => {
      ctaButton.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          ctaButton.click();
        }
      });
    });

    // Generate particles for particle background in Hero Section
    const particleContainer = document.querySelector('.particle-container');
    if (particleContainer) { // Ensure particle container exists
      const particleCount = 20; // Adjusted for performance

      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.classList.add('particle');
        // Randomize particle position and animation duration
        particle.style.left = `${Math.random() * 100}%`;
        particle.style.top = `${Math.random() * 100}%`;
        particle.style.animationDuration = `${5 + Math.random() * 10}s`;
        particle.style.animationDelay = `${Math.random() * 5}s`;
        particleContainer.appendChild(particle);
      }
    }
  });
</script>) make it great content and make it repsoinvse design for all devices, and fix icons and don't change the styles codes and ddon't add html and head tags, and make it Great For SEO