i want you to make this codes (<style>
.dropdown-container_x7f2q {
  position: relative;
  font-family: Arial, sans-serif;
  display: flex;
  align-items: stretch;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background: linear-gradient(45deg, #D1C287, #4F3F02);
  border-radius: 4px;
}
.dropdown-header_m9p3r {
  border: none;
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-size: 18px;
  flex-grow: 1;
  background-color: transparent;
}
.dropdown-header_m9p3r::after {
  content: '\25BC';
  font-size: 0.8em;
  transition: transform 0.3s ease;
  color: white;
}
.dropdown-header_m9p3r.active::after {
  transform: rotate(180deg);
}
.dropdown-list_k4t7s {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #2E2E2E;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  border-radius: 0 0 4px 4px;
}
.dropdown-list_k4t7s.show {
  max-height: 300px; /* Adjust this value as needed */
  overflow-y: auto; /* Enables vertical scrolling */
  transition: max-height 0.3s ease-in;
}
.dropdown-item_y2h8n {
  padding: 15px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  color: white;
  text-decoration: none;
  display: block;
}
.dropdown-item_y2h8n:hover {
  background-color: #4F4F4F;
}
.dropdown-item_y2h8n.active {
  background-color: #6E6E6E;
  font-weight: bold;
}
.close-button_f3k9p {
  text-decoration: none;
  color: white;
  font-size: 18px;
  font-weight: bold;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}
</style>

<div class="dropdown-container_x7f2q">
  <div class="dropdown-header_m9p3r" onclick="toggleDropdown(this)">
    Package 1: The Diagnostics
  </div>
  <a href="https://longevacare.com/what-we-do/packages/" class="close-button_f3k9p">X</a>
  <div class="dropdown-list_k4t7s">
    <a href="https://longevacare.com/what-we-do/packages/diagnostic-packages/" class="dropdown-item_y2h8n active">Package 1: The Diagnostics</a>
    <a href="https://longevacare.com/what-we-do/packages/age-reversal-skin-enhancement/" class="dropdown-item_y2h8n">Package 2: Age Reversal & Skin Enhancement</a>
    <a href="https://longevacare.com/what-we-do/packages/non-surgical-aesthetic-lifting-feature-enhancement/" class="dropdown-item_y2h8n">Package 3: Non-Surgical Lifting & Feature Enhancement</a>
    <a href="https://longevacare.com/what-we-do/packages/neuropsychiatry/" class="dropdown-item_y2h8n">Package 4: Neuropsychiatry</a>
    <a href="https://longevacare.com/what-we-do/packages/reversal-of-autoimmune-diseases/" class="dropdown-item_y2h8n">Package 5: Reversal of Autoimmune Diseases</a>
    <a href="https://longevacare.com/what-we-do/packages/reversal-of-fibromyalgia/" class="dropdown-item_y2h8n">Package 6: Reversal of Fibromyalgia</a>
    <a href="https://longevacare.com/what-we-do/packages/reversal-of-diabetes/" class="dropdown-item_y2h8n">Package 7: Reversal of Diabetes</a>
    <a href="https://longevacare.com/what-we-do/packages/reversal-of-obesity/" class="dropdown-item_y2h8n">Package 8: Reversal of Obesity</a>
    <a href="https://longevacare.com/what-we-do/packages/reversal-of-hypertension/" class="dropdown-item_y2h8n">Package 9: Reversal of Hypertension</a>
    <a href="https://longevacare.com/what-we-do/packages/reversal-of-parkinsons/" class="dropdown-item_y2h8n">Package 10: Reversal of Parkinson’s</a>
    <a href="https://longevacare.com/what-we-do/packages/reversal-of-alzheimers/" class="dropdown-item_y2h8n">Package 11: Reversal of Alzheimer’s</a>
     <a href="https://longevacare.com/what-we-do/packages/menopause-reversal/" class="dropdown-item_y2h8n ">Package 12: Menopause Reversal</a>

  </div>
</div>

<script>
function toggleDropdown(header) {
  const dropdownList = header.nextElementSibling.nextElementSibling;
  dropdownList.classList.toggle('show');
  header.classList.toggle('active');
}

document.querySelectorAll('.dropdown-item_y2h8n').forEach(item => {
  item.addEventListener('click', function() {
    document.querySelectorAll('.dropdown-item_y2h8n').forEach(i => i.classList.remove('active'));
    this.classList.add('active');
    this.closest('.dropdown-container_x7f2q').querySelector('.dropdown-header_m9p3r').textContent = this.textContent;
    toggleDropdown(this.closest('.dropdown-container_x7f2q').querySelector('.dropdown-header_m9p3r'));
  });
});
</script>
) better and make the X close sign is circle is sperate from menu, and add more codes to be better design and looks great and keep the style s colors and make the font is Lato, and when press on it, it has smoothly animation and type full codes with css inlines codes and don't add html and head tags, and add comments to make everythings clear