fix this codes icons (<!-- 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"
/>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    integrity="sha512-pVn6ywQk1P0cdTiJC5cFJDx85sae3cFyGZ4iQ6ZUJkOngBjtn0GYbd4n6vwA3m1mV1f33gZP2XzLr9gfsXQ2+g=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  />

<!-- Styles -->
<style>
  /* ====================================================
     Global Styles
  ===================================================== */
  :root {
    --wd-primary-color: #ffffff; /* White */
    --wd-secondary-color: #D1C287; /* Gold Accent */
    --wd-secondary-dark: #4F3F02; /* Dark Gold/Brown Accent */
    --wd-font-primary: 'Lato', sans-serif; /* Updated to Lato */
    --wd-font-secondary: 'Lato', sans-serif; /* Updated to Lato */
    --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: 2rem 0.5rem;
    --wd-content-padding: 0.5rem;
    --wd-shadow-light: rgba(0, 0, 0, 0.1);
    --wd-shadow-dark: rgba(0, 0, 0, 0.2);
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* ====================================================
     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;
    font-family: var(--wd-font-primary);
    color: var(--wd-primary-color);
  }

  .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: 2rem; /* 32px */
    font-weight: 700;
    margin-bottom: 2rem;
    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-secondary-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 auto;
    border: none;
    height: 2px;
    background: var(--wd-secondary-color);
    width: 60px;
    border-radius: var(--wd-border-radius);
    transition: background var(--wd-transition-speed);
    display: inline-block;
  }

  /* 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-secondary-dark);
    transition: background-color var(--wd-transition-speed);
  }

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

  /* Accordion Header */
  .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);
    background-color: rgba(0, 0, 0, 0.1);
  }

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

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

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

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

  /* Accordion Content */
  .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;
    max-height: 1000px; /* Sufficiently large to accommodate content */
  }

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

  .wd-accordion-content a {
    text-decoration: none;
    color: var(--wd-secondary-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-secondary-color);
    left: 0;
    bottom: -2px;
    transition: width var(--wd-transition-speed);
  }

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

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

  /* Nested Accordion Content Styles */
  .wd-nested-accordion {
    margin-top: 1rem;
    margin-left: 1.5rem;
    border-left: 2px solid var(--wd-secondary-dark);
    padding-left: 1rem;
  }

  .wd-nested-accordion-item {
    border-bottom: 1px solid var(--wd-secondary-dark);
    margin-bottom: 1rem;
  }

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

  .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; /* 20px */
    display: flex;
    align-items: center;
  }

  .wd-nested-accordion-title i {
    margin-right: 0.5rem;
    color: var(--wd-secondary-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;
    max-height: 1000px; /* Sufficiently large to accommodate content */
  }

  .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;
    color: var(--wd-primary-color);
    font-size: 1rem; /* 16px */
    line-height: 1.6;
  }

  /* Clickable Icon Links */
  .wd-icon-link {
    color: var(--wd-secondary-color);
    transition: color var(--wd-transition-speed);
    text-decoration: none;
    display: flex;
    align-items: center;
  }

  .wd-icon-link:hover {
    color: var(--wd-secondary-dark);
  }

  .wd-icon-link i {
    margin-right: 0.5rem;
    transition: transform var(--wd-transition-speed);
  }

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

    .wd-accordion-title {
      font-size: 1.75rem; /* 28px */
    }

    .wd-accordion-content a {
      font-size: 1.1rem; /* 18px */
    }

    .wd-nested-accordion-title {
      font-size: 1.4rem; /* 22.4px */
    }
  }

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

    .wd-accordion-title {
      font-size: 2rem; /* 32px */
    }

    .wd-accordion-content a {
      font-size: 1.2rem; /* 20px */
    }

    .wd-nested-accordion-title {
      font-size: 1.6rem; /* 24px */
    }
  }

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

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

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

    .wd-accordion-title {
      font-size: 1.25rem; /* 20px */
    }

    .wd-accordion-content a {
      font-size: 1rem; /* 16px */
    }

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

    .wd-nested-accordion-title {
      font-size: 1.1rem; /* 17.6px */
    }
  }
</style>

<!-- What We Do Section -->
<section 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" role="button">
          <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>
          <!-- Example of a clickable icon link inside accordion content -->
          <a href="https://longevacare.com/what-we-do/programs/protocols/" class="wd-icon-link" aria-label="Learn more about Unmatched Excellence">
            <i class="fas fa-info-circle"></i> Learn More About Excellence
          </a>
        </div>
      </div>

      <!-- Accordion Item 2: The Longeva Technologies -->
      <div class="wd-accordion-item">
        <div class="wd-accordion-header" tabindex="0" aria-expanded="false" role="button">
          <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>
          <!-- Example of a clickable icon link inside accordion content -->
          <a href="https://longevacare.com/what-we-do/our-technologies/" class="wd-icon-link" aria-label="Learn more about The Longeva Technologies">
            <i class="fas fa-info-circle"></i> Learn More About Technologies
          </a>
        </div>
      </div>

      <!-- Accordion Item 3: The Longeva Programs -->
      <div class="wd-accordion-item">
        <div class="wd-accordion-header" tabindex="0" aria-expanded="false" role="button">
          <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" role="button">
                <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>
                <!-- Example of a clickable icon link inside nested accordion content -->
                <a href="https://longevacare.com/what-we-do/programs/the-longeva-diagnostics/" class="wd-icon-link" aria-label="Learn more about Diagnostics">
                  <i class="fas fa-info-circle"></i> Learn More About Diagnostics
                </a>
              </div>
            </div>

            <!-- Nested Accordion Item 2: Protocols -->
            <div class="wd-nested-accordion-item">
              <div class="wd-nested-accordion-header" tabindex="0" aria-expanded="false" role="button">
                <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>
                <!-- Example of a clickable icon link inside nested accordion content -->
                <a href="https://longevacare.com/what-we-do/programs/protocols/" class="wd-icon-link" aria-label="Learn more about Protocols">
                  <i class="fas fa-info-circle"></i> Learn More About Protocols
                </a>
              </div>
            </div>

          </div>

        </div>
      </div>

      <!-- Accordion Item 4: The Longeva Packages -->
      <div class="wd-accordion-item">
        <div class="wd-accordion-header" tabindex="0" aria-expanded="false" role="button">
          <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" role="button">
                <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>
                <!-- Example of a clickable icon link inside nested accordion content -->
                <a href="https://longevacare.com/what-we-do/packages/" class="wd-icon-link" aria-label="Learn more about Packages">
                  <i class="fas fa-info-circle"></i> Learn More About Packages
                </a>
              </div>
            </div>

          </div>

        </div>
      </div>

    </div>
  </div>
</section>

<!-- JavaScript for Accordion Functionality -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Function to toggle accordion (both main and nested)
    const toggleAccordion = (header, content) => {
      // Toggle the clicked accordion
      header.classList.toggle('active');
      const isActive = header.classList.contains('active');
      content.classList.toggle('active', isActive);
      header.setAttribute('aria-expanded', isActive);
      content.setAttribute('aria-hidden', !isActive);
    };

    // Select all accordion headers
    const accordionHeaders = document.querySelectorAll('.wd-accordion-header, .wd-nested-accordion-header');

    accordionHeaders.forEach(header => {
      const content = header.nextElementSibling;

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

      // Keyboard Accessibility
      header.addEventListener('keypress', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          toggleAccordion(header, content);
        }
      });
    });
  });
</script>) and mkae it working ddropmenu and everhing type full codes