change this codes design (<style>
  /* Accordion container */
  .accordion-container {
    margin: 0px auto;
  }

  /* Accordion item */
  .accordion-item {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
  }

  .accordion-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
  }

  /* Accordion header */
  .accordion-header {
    background: linear-gradient(45deg, #D1C287, #4F3F02);
    color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 25px;
    font-size: 24px;
    font-weight: 600;
    transition: background 0.3s ease, padding 0.3s ease;
    border-radius: 8px;
  }

  .accordion-header:hover {
    background: linear-gradient(45deg, #c7b571, #403102);
    padding: 20px 28px;
  }

  .accordion-header:after {
    content: '\002B';
    font-size: 24px;
    font-weight: bold;
    transition: transform 0.3s ease, color 0.3s ease;
    color: #fff;
  }

  .accordion-header.active:after {
    content: '\2212';
    transform: rotate(180deg);
    color: #D1C287;
  }

  /* Accordion content */
  .accordion-content {
    padding: 0 25px;
    font-size: 20px;
    line-height: 1.6;
    color: #333;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.3s ease;
  }

  .accordion-content.active {
    max-height: 1000px;
    opacity: 1;
    padding: 20px 25px;
  }

  .accordion-content ul {
    list-style-type: disc;
    margin-left: 20px;
  }

  .accordion-content ul li {
    margin-bottom: 10px;
    animation: fadeIn 0.5s ease-in-out;
  }

  /* Fade-in animation */
  @keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* Responsive styles */
  @media (max-width: 767px) {
    .accordion-header {
      font-size: 18px;
      padding: 15px 20px;
    }

    .accordion-content {
      padding: 15px 20px;
    }
  }
</style>

<body>
  <div class="accordion-container">
    <div class="accordion-item">
      <div class="accordion-header">Clinical assessment</div>
      <div class="accordion-content">
        <p>Clinical assessment is a systematic process, which involves gathering comprehensive information through:</p>
        <ul style="padding-bottom:20px;">
          <li>Medical History</li>
          <li>Physical Examination</li>
          <li>BMI &amp; Body posture</li>
          <li>Emotional and psychological evaluation</li>
          <li>Functional Assessment</li>
          <li>Skin &amp; Hair analysis</li>
        </ul>
      </div>
    </div>

    <div class="accordion-item">
      <div class="accordion-header">Functional testing</div>
      <div class="accordion-content">
        <p style="padding-bottom:20px;">Functional testing plays a crucial role in healthcare by providing insights into the body's internal dynamics beyond standard diagnostics.</p>
      </div>
    </div>

    <div class="accordion-item">
      <div class="accordion-header">Genetic testing</div>
      <div class="accordion-content">
        <p style="padding-bottom:20px;">Genetic testing is instrumental in understanding one's unique blueprint for health. By deciphering genetic information, we gain insights into predispositions for certain conditions, potential treatment responses, and opportunities for preventive measures.</p>
      </div>
    </div>
  </div>

  <script>
    // Toggle accordion content
    var accordionHeaders = document.querySelectorAll('.accordion-header');
    accordionHeaders.forEach(function(header) {
      header.addEventListener('click', function() {
        this.classList.toggle('active');
        var content = this.nextElementSibling;
        if (content.style.maxHeight) {
          content.style.maxHeight = null;
          content.classList.remove('active');
        } else {
          content.style.maxHeight = content.scrollHeight + 'px';
          content.classList.add('active');
        }
      });
    });
  </script>
</body>
) and amke it cool desing and add more features and use this stlye (    :root {
        --c-bg-primary: rgba(43, 43, 43, 0.5); /* #2b2b2b with 0.5 opacity */
        --c-text-primary: white;
        --c-gold: #D1C287;
        --c-accent: #4F3F02;
        --f-primary: 'Lato', sans-serif;
        --s-border-radius: 8px;
        --transition-speed: 0.3s;
        --container-max-width: 1100px;
        --fade-in-duration: 0.6s;
        --gradient-start: #D1C287;
        --gradient-end: #4F3F02;
        --section-padding: 20px 0px; /* Added default padding */
    }
) and don't add htlm and head tags and don't add body styles and amke it repsinse design