.dropdown {
    position: relative;
    display: inline-block;
  }











.dropbtn {
  display: inline-block;
  padding: 14px 30px;
  background-color: #28a745;    
  color: #ffffff;               
  text-decoration: none;        
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  border-radius: 50px;          
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease, transform 0.1s ease;
  border: none;  
  cursor: pointer; 
}


.dropbtn:hover {
  background-color: #218838;    
  transform: scale(1.03);       
}


.dropbtn:active {
  transform: scale(0.98);    
}










  /* 1. ANIMATION SETUP: Hidden state with transition */
  .dropdown-content {
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 4px;
    margin-top: 5px;
    
    /* Hide from view and screen readers */
    opacity: 0;
    visibility: hidden;
    
    /* Start slightly higher up for a slide-down effect */
    transform: translateY(-10px);
    
    /* Animate opacity, visibility, and transform over 0.25 seconds */
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  /* Links inside the dropdown */
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    font-family: Arial;
    display: block;
  }

  .dropdown-content a:hover {
    background-color: #ddd;
  }

  /* 2. ANIMATION TRIGGER: Visible state */
  .dropdown-content.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Slides down to its natural position */
  }