in this codes (<!-- Importing Lato font from Google Fonts -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

/* Main wrapper for centering the dropdown */
.dropdown-wrapper_k9m4p {
  display: flex;
  justify-content: center;
  padding: 20px;
  font-family: 'Lato', sans-serif;
}

/* Container for the entire dropdown component */
.dropdown-container_x7f2q {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 600px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  background: linear-gradient(45deg, #D1C287, #4F3F02);
  border-radius: 8px;
  transition: all 0.3s ease;
}

/* Hover effect for the container */
.dropdown-container_x7f2q:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* Styles for the dropdown header/trigger button */
.dropdown-header_m9p3r {
  border: none;
  padding: 18px 25px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-size: 18px;
  font-weight: 500;
  flex-grow: 1;
  background-color: transparent;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

/* Dropdown arrow indicator */
.dropdown-header_m9p3r::after {
  content: '\25BC';
  font-size: 0.8em;
  margin-left: 10px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  color: rgba(255, 255, 255, 0.9);
}

/* Rotating arrow when dropdown is active */
.dropdown-header_m9p3r.active::after {
  transform: rotate(180deg);
}

/* Wrapper for the Back button */
.back-button-wrapper_h8k2p {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

/* Styles for the Back button */
.back-button_f3k9p {
  width: auto;
  min-width: 70px;
  height: 36px;
  border-radius: 18px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 0 15px;
}

/* Hover effect for the Back button */
.back-button_f3k9p:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Dropdown list container */
.dropdown-list_k4t7s {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  background-color: #2E2E2E;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(-10px);
}

/* Active state for dropdown list */
.dropdown-list_k4t7s.show {
  max-height: 400px;
  opacity: 1;
  transform: translateY(0);
  overflow-y: auto;
}

/* Custom scrollbar styles */
.dropdown-list_k4t7s::-webkit-scrollbar {
  width: 8px;
}

.dropdown-list_k4t7s::-webkit-scrollbar-track {
  background: #3E3E3E;
}

.dropdown-list_k4t7s::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

/* Individual dropdown items */
.dropdown-item_y2h8n {
  padding: 16px 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
  text-decoration: none;
  display: block;
  font-size: 16px;
  border-left: 4px solid transparent;
}

/* Hover effect for dropdown items */
.dropdown-item_y2h8n:hover {
  background-color: #4F4F4F;
  border-left-color: #D1C287;
}

/* Active state for selected dropdown item */
.dropdown-item_y2h8n.active {
  background-color: #6E6E6E;
  font-weight: 600;
  border-left-color: #D1C287;
}
</style>

<div class="dropdown-wrapper_k9m4p">
  <div class="dropdown-container_x7f2q">
    <div class="dropdown-header_m9p3r" onclick="toggleDropdown(this)">
      Package 1: The Diagnostics
    </div>
    <div class="back-button-wrapper_h8k2p">
      <a href="https://longevacare.com/what-we-do/packages/" class="back-button_f3k9p">Back</a>
    </div>
    <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>
</div>

<script>
// Function to toggle the dropdown menu
function toggleDropdown(header) {
  const dropdownList = header.parentElement.querySelector('.dropdown-list_k4t7s');
  const isOpen = dropdownList.classList.contains('show');
  
  // Handle closing animation
  if (isOpen) {
    dropdownList.style.maxHeight = dropdownList.scrollHeight + 'px';
    // Force reflow for smooth animation
    dropdownList.offsetHeight;
    dropdownList.style.maxHeight = '0px';
    
    // Remove show class after animation completes
    setTimeout(() => {
      dropdownList.classList.remove('show');
      dropdownList.style.maxHeight = '';
    }, 400);
  } 
  // Handle opening animation
  else {
    dropdownList.classList.add('show');
    dropdownList.style.maxHeight = dropdownList.scrollHeight + 'px';
    
    // Reset maxHeight after animation completes
    setTimeout(() => {
      dropdownList.style.maxHeight = '';
    }, 400);
  }
  
  // Toggle active state on header
  header.classList.toggle('active');
}

// Add click handlers to all dropdown items
document.querySelectorAll('.dropdown-item_y2h8n').forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault(); // Prevent default link behavior
    
    // Update active state of items
    document.querySelectorAll('.dropdown-item_y2h8n').forEach(i => i.classList.remove('active'));
    this.classList.add('active');
    
    // Update header text with selected item
    const header = this.closest('.dropdown-container_x7f2q').querySelector('.dropdown-header_m9p3r');
    header.textContent = this.textContent;
    
    // Add fade animation to header text
    header.style.opacity = '0';
    setTimeout(() => {
      header.style.opacity = '1';
    }, 200);
    
    // Close dropdown
    toggleDropdown(header);
    
    // Navigate to new page after animations complete
    setTimeout(() => {
      window.location.href = this.href;
    }, 500);
  });
});
</script>) i need to fix and add modre codes to make it showing the info menu bar and don't add maring and width