.dropdown {
    position: relative;
    display: inline-block;
  }
  
  #languageButton {
    background-color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  
  #icon {
    margin-left: 10px;
    transition: transform 0.3s ease; /* Smooth icon rotation */
  }
  
  /* Rotate icon when dropdown is open */
  .rotate {
    transform: rotate(180deg);
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    z-index: 1;
    border-radius: 5px;
    opacity: 0; /* Start with 0 opacity for transition */
    visibility: hidden; /* Hide it when not active */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth fade-in/out */
  }
  
  /* Show the dropdown content when button is clicked with transitions */
  .show {
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth fade-in/out */
  }
  
  .dropdown-content .dropdown-item {
    padding: 8px 0;
    cursor: pointer;
    font-size: 14px;
  }
  
  .dropdown-content .dropdown-item:hover {
    background-color: #ddd;
  }