in this codes (<!-- Font Awesome CDN for Icons -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
  integrity="sha512-pOI0n+XAq0FTsym2ZxXWcN0xvNdfITAL5A+7zkyaH6kI0u8qvZ+V9Ckdz9cqi3IKXQjBlp0R3Brm0j5k8F36Qw=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

<!-- Styles -->
<style>
  /* ====================================================
     Global Styles
  ===================================================== */
  :root {
    --wd-primary-color: #ffffff; /* White */
    --wd-accent-color: #D1C287; /* Gold Accent */
    --wd-accent-dark: #4F3F02; /* Dark Gold/Brown Accent */
    --wd-font-primary: 'Poppins', sans-serif;
    --wd-font-secondary: 'Roboto', sans-serif;
    --wd-border-radius: 8px;
    --wd-transition-speed: 0.3s;
    --wd-max-container-width: 1200px;
    --wd-background-color: #121212; /* Dark Background for Contrast */
    --wd-section-padding: 4rem 1rem;
    --wd-content-padding: 2rem;
    --wd-shadow-light: rgba(0, 0, 0, 0.1);
    --wd-shadow-dark: rgba(0, 0, 0, 0.2);
  }

  body {
    margin: 0;
    padding: 0;
    background-color: var(--wd-background-color);
    font-family: var(--wd-font-primary);
    color: var(--wd-primary-color);
  }

  /* ====================================================
     Section: What We Do
     Unique Class Prefix: wd-
  ===================================================== */

  /* Container for the What We Do Section */
  .wd-what-we-do-section {
    padding: var(--wd-section-padding);
    text-align: center;
  }

  .wd-what-we-do-container {
    max-width: var(--wd-max-container-width);
    margin: 0 auto;
    padding: var(--wd-content-padding);
  }

  /* Section Title */
  .wd-section-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 3rem;
    position: relative;
    display: inline-block;
    color: var(--wd-primary-color);
    transition: color var(--wd-transition-speed);
  }

  .wd-section-title::after {
    content: '';
    width: 70px;
    height: 4px;
    background-color: var(--wd-accent-color);
    display: block;
    margin: 0.5rem auto 0;
    border-radius: 2px;
    transition: width var(--wd-transition-speed), background var(--wd-transition-speed);
  }

  .wd-section-title:hover::after {
    width: 120px;
    background: linear-gradient(135deg, #4F3F02, #D1C287);
  }

  /* Horizontal Divider */
  .wd-section-divider {
    margin: 2rem 0;
    border: none;
    height: 2px;
    background: var(--wd-accent-color);
    width: 60px;
    border-radius: var(--wd-border-radius);
    transition: background var(--wd-transition-speed);
  }

  /* Hover Effect on Divider */
  .wd-section-divider:hover {
    background: linear-gradient(135deg, #4F3F02, #D1C287);
  }

  /* Accordion Styles */
  .wd-accordion {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
  }

  .wd-accordion-item {
    background-color: transparent;
    border-bottom: 1px solid var(--wd-accent-dark);
    transition: background-color var(--wd-transition-speed);
  }

  .wd-accordion-item:last-child {
    border-bottom: none;
  }

  .wd-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    cursor: pointer;
    color: var(--wd-primary-color);
    transition: background-color var(--wd-transition-speed);
  }

  .wd-accordion-header:hover {
    background-color: rgba(209, 194, 135, 0.1); /* Semi-transparent Gold */
  }

  .wd-accordion-title {
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    align-items: center;
  }

  .wd-accordion-title i {
    margin-right: 0.75rem;
    color: var(--wd-accent-color);
    transition: transform var(--wd-transition-speed);
  }

  .wd-accordion-header.active .wd-accordion-title i {
    transform: rotate(180deg);
  }

  .wd-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--wd-transition-speed) ease, padding var(--wd-transition-speed) ease;
    background-color: rgba(209, 194, 135, 0.05); /* Light Gold Accent */
    padding: 0 1.5rem;
  }

  .wd-accordion-content.active {
    padding: 1.5rem;
  }

  .wd-accordion-content p,
  .wd-accordion-content a {
    margin: 1rem 0;
    color: var(--wd-primary-color);
    font-size: 1rem;
    line-height: 1.6;
  }

  .wd-accordion-content a {
    text-decoration: none;
    color: var(--wd-accent-color);
    font-weight: 700;
    position: relative;
    transition: color var(--wd-transition-speed);
  }

  .wd-accordion-content a::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    background-color: var(--wd-accent-color);
    left: 0;
    bottom: -2px;
    transition: width var(--wd-transition-speed);
  }

  .wd-accordion-content a:hover {
    color: var(--wd-accent-dark);
  }

  .wd-accordion-content a:hover::after {
    width: 100%;
  }

  /* Nested Accordion Content Styles */
  .wd-nested-accordion {
    margin-top: 1rem;
    margin-left: 1.5rem;
  }

  .wd-nested-accordion-item {
    border-bottom: none;
  }

  .wd-nested-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: rgba(209, 194, 135, 0.05);
    cursor: pointer;
    border-radius: var(--wd-border-radius);
    transition: background-color var(--wd-transition-speed);
  }

  .wd-nested-accordion-header:hover {
    background-color: rgba(209, 194, 135, 0.15);
  }

  .wd-nested-accordion-title {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
  }

  .wd-nested-accordion-title i {
    margin-right: 0.5rem;
    color: var(--wd-accent-color);
    transition: transform var(--wd-transition-speed);
  }

  .wd-nested-accordion-header.active .wd-nested-accordion-title i {
    transform: rotate(180deg);
  }

  .wd-nested-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--wd-transition-speed) ease, padding var(--wd-transition-speed) ease;
    padding: 0 1.5rem;
    background-color: rgba(209, 194, 135, 0.02);
  }

  .wd-nested-accordion-content.active {
    padding: 1rem 1.5rem;
  }

  .wd-nested-accordion-content ul {
    list-style: disc inside;
    margin: 0.5rem 0 0 1rem;
    padding: 0;
  }

  .wd-nested-accordion-content li {
    margin-bottom: 0.5rem;
  }

  /* CTA Button inside Accordion */
  .wd-accordion-cta-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    color: var(--wd-background-color);
    background-color: var(--wd-accent-color);
    border: none;
    border-radius: var(--wd-border-radius);
    text-decoration: none;
    font-weight: 700;
    transition: background-color var(--wd-transition-speed), color var(--wd-transition-speed);
    box-shadow: 0 2px 8px var(--wd-shadow-light);
    margin-top: 1rem;
  }

  .wd-accordion-cta-button:hover {
    background: linear-gradient(135deg, #4F3F02, #D1C287);
    color: var(--wd-primary-color);
    box-shadow: 0 4px 12px var(--wd-shadow-dark);
  }

  /* Responsive Design */
  @media (min-width: 768px) {
    .wd-section-title {
      font-size: 3.2rem;
    }

    .wd-accordion-title {
      font-size: 1.75rem;
    }

    .wd-accordion-content a {
      font-size: 1.1rem;
    }
  }

  @media (min-width: 1024px) {
    .wd-section-title {
      font-size: 3.8rem;
    }

    .wd-accordion-title {
      font-size: 2rem;
    }

    .wd-accordion-content a {
      font-size: 1.2rem;
    }
  }

  @media (max-width: 480px) {
    .wd-what-we-do-section {
      padding: 2rem 1rem;
    }

    .wd-section-title {
      font-size: 2.2rem;
      margin-bottom: 2rem;
    }

    .wd-accordion-header {
      padding: 1rem;
    }

    .wd-accordion-title {
      font-size: 1.25rem;
    }

    .wd-accordion-content a {
      font-size: 1rem;
    }
  }
</style>

<!-- What We Do Section -->
<div class="wd-what-we-do-section" id="what-we-do" aria-labelledby="what-we-do-title">

  <div class="wd-what-we-do-container">

    <!-- Section Title -->
    <h2 id="what-we-do-title" class="wd-section-title">What We Do</h2>
    <hr class="wd-section-divider">

    <!-- Accordion -->
    <div class="wd-accordion">

      <!-- Accordion Item 1: Unmatched Excellence -->
      <div class="wd-accordion-item">
        <div class="wd-accordion-header" tabindex="0" aria-expanded="false">
          <span class="wd-accordion-title">
            <i class="fas fa-star"></i> Unmatched Excellence
          </span>
          <i class="fas fa-chevron-down"></i>
        </div>
        <div class="wd-accordion-content" aria-hidden="true">
          <p>Our superior medical protocols set us apart.</p>
        </div>
      </div>

      <!-- Accordion Item 2: The Longeva Technologies -->
      <div class="wd-accordion-item">
        <div class="wd-accordion-header" tabindex="0" aria-expanded="false">
          <span class="wd-accordion-title">
            <i class="fas fa-cogs"></i> The Longeva Technologies
          </span>
          <i class="fas fa-chevron-down"></i>
        </div>
        <div class="wd-accordion-content" aria-hidden="true">
          <p>Precision testing to determine the most suitable treatments for you.</p>
          <a href="#technologies" class="wd-accordion-cta-button">Learn More</a>
        </div>
      </div>

      <!-- Accordion Item 3: The Longeva Programs -->
      <div class="wd-accordion-item">
        <div class="wd-accordion-header" tabindex="0" aria-expanded="false">
          <span class="wd-accordion-title">
            <i class="fas fa-heartbeat"></i> The Longeva Programs
          </span>
          <i class="fas fa-chevron-down"></i>
        </div>
        <div class="wd-accordion-content" aria-hidden="true">
          <p>Optimizing cellular health with essential micronutrients and removing harmful substances.</p>

          <!-- Nested Accordion for Programs -->
          <div class="wd-nested-accordion">

            <!-- Nested Accordion Item 1: Diagnostics -->
            <div class="wd-nested-accordion-item">
              <div class="wd-nested-accordion-header" tabindex="0" aria-expanded="false">
                <span class="wd-nested-accordion-title">
                  <i class="fas fa-vials"></i> Diagnostics
                </span>
                <i class="fas fa-chevron-down"></i>
              </div>
              <div class="wd-nested-accordion-content" aria-hidden="true">
                <ul>
                  <li>Comprehensive Diagnostics program with Cellular Deficiency Assessments</li>
                  <li>Hair and Skin Analysis</li>
                  <li>Genetic Testing</li>
                </ul>
              </div>
            </div>

            <!-- Nested Accordion Item 2: Protocols -->
            <div class="wd-nested-accordion-item">
              <div class="wd-nested-accordion-header" tabindex="0" aria-expanded="false">
                <span class="wd-nested-accordion-title">
                  <i class="fas fa-microscope"></i> Protocols
                </span>
                <i class="fas fa-chevron-down"></i>
              </div>
              <div class="wd-nested-accordion-content" aria-hidden="true">
                <ul>
                  <li>Tailored treatments addressing Cellular Micronutrients</li>
                  <li>Toxin Elimination</li>
                  <li>DNA Protection</li>
                  <li>...and more</li>
                </ul>
              </div>
            </div>

          </div>

          <!-- CTA Button inside Accordion -->
          <a href="#programs" class="wd-accordion-cta-button">Learn More</a>
        </div>
      </div>

      <!-- Accordion Item 4: The Longeva Packages -->
      <div class="wd-accordion-item">
        <div class="wd-accordion-header" tabindex="0" aria-expanded="false">
          <span class="wd-accordion-title">
            <i class="fas fa-box-open"></i> The Longeva Packages
          </span>
          <i class="fas fa-chevron-down"></i>
        </div>
        <div class="wd-accordion-content" aria-hidden="true">
          <p>Comprehensive anti-aging processes, ensuring true youthfulness and improving skin health from within.</p>

          <!-- Nested Accordion for Packages Overview -->
          <div class="wd-nested-accordion">

            <!-- Nested Accordion Item: Packages Overview -->
            <div class="wd-nested-accordion-item">
              <div class="wd-nested-accordion-header" tabindex="0" aria-expanded="false">
                <span class="wd-nested-accordion-title">
                  <i class="fas fa-clipboard-list"></i> Packages Overview
                </span>
                <i class="fas fa-chevron-down"></i>
              </div>
              <div class="wd-nested-accordion-content" aria-hidden="true">
                <ul>
                  <li><strong>Package 1: The Diagnostics</strong></li>
                  <li><strong>Package 2: Age Reversal & Skin Enhancement</strong></li>
                  <li><strong>Package 3: Non-Surgical Lifting & Feature Enhancement</strong></li>
                  <li><strong>Package 4: Neuropsychiatry</strong></li>
                  <li><strong>Package 5: Disease De-conditioning: Reversal of Autoimmune Diseases</strong></li>
                  <li><strong>Package 6: Disease De-conditioning: Reversal of Fibromyalgia</strong></li>
                  <li><strong>Package 7: Disease De-conditioning: Reversal of Diabetes</strong></li>
                  <li><strong>Package 8: Disease De-conditioning: Reversal of Obesity</strong></li>
                  <li><strong>Package 9: Disease De-conditioning: Reversal of Hypertension</strong></li>
                  <li><strong>Package 10: Disease De-conditioning: Reversal of Parkinson’s</strong></li>
                  <li><strong>Package 11: Disease De-conditioning: Reversal of Alzheimer’s</strong></li>
                  <li><strong>Package 12: Disease De-conditioning: Menopause Reversal</strong></li>
                </ul>
              </div>
            </div>

          </div>

          <!-- CTA Button inside Accordion -->
          <a href="#packages" class="wd-accordion-cta-button">Learn More</a>
        </div>
      </div>

    </div>

  </div>

</div>

<!-- JavaScript for Accordion Functionality -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Function to toggle accordion (both main and nested)
    const toggleAccordion = (header, content) => {
      const currentlyActiveHeader = header.parentElement.querySelector('.wd-accordion-header.active, .wd-nested-accordion-header.active');
      
      // Close other open accordions at the same level
      if (currentlyActiveHeader && currentlyActiveHeader !== header) {
        currentlyActiveHeader.classList.remove('active');
        currentlyActiveHeader.setAttribute('aria-expanded', 'false');
        currentlyActiveHeader.nextElementSibling.style.maxHeight = null;
        currentlyActiveHeader.nextElementSibling.classList.remove('active');
        currentlyActiveHeader.nextElementSibling.setAttribute('aria-hidden', 'true');
      }

      // Toggle the clicked accordion
      header.classList.toggle('active');
      if (header.classList.contains('active')) {
        content.style.maxHeight = content.scrollHeight + 'px';
        content.classList.add('active');
        header.setAttribute('aria-expanded', 'true');
        content.setAttribute('aria-hidden', 'false');
      } else {
        content.style.maxHeight = null;
        content.classList.remove('active');
        header.setAttribute('aria-expanded', 'false');
        content.setAttribute('aria-hidden', 'true');
      }
    };

    // Event Listener for Main Accordion Headers
    const mainAccordionHeaders = document.querySelectorAll('.wd-accordion-header');
    mainAccordionHeaders.forEach(header => {
      const content = header.nextElementSibling;

      header.addEventListener('click', () => {
        toggleAccordion(header, content);
      });

      // Enable keyboard accessibility
      header.addEventListener('keypress', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          toggleAccordion(header, content);
        }
      });
    });

    // Event Listener for Nested Accordion Headers
    const nestedAccordionHeaders = document.querySelectorAll('.wd-nested-accordion-header');
    nestedAccordionHeaders.forEach(header => {
      const content = header.nextElementSibling;

      header.addEventListener('click', () => {
        toggleAccordion(header, content);
      });

      // Enable keyboard accessibility
      header.addEventListener('keypress', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          toggleAccordion(header, content);
        }
      });
    });
  });
</script>) fix it and make icons working and add more codes to make it great and when press on it, it show all info and remove learn more button and add more codes and add link url icons to mkae it working