.dropdown {
  position: relative;
  display: inline-block;
  font-family: 'Lexend Deca';
  cursor: pointer;
}

.dropdown-toggle {
  cursor: pointer;
  background-color: #ff4d4d;
  padding: 10px 20px;
  color: white;
  border-radius: 5px;
}

.dropdown-content {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  text-indent: 10px;
  top: 100%;
  left: 0;
  background-color: #ff7c7c;
  min-width: 160px;
  margin-top: 4.5px;
  border-radius: 10px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 10;
}

.dropdown-itemA:hover {
  background-color: #e16d6d;
  display: block; 
  width: 100%;             
  padding: 0px 8px;      
  box-sizing: border-box; 
  transition: background-color 0.6s ease, padding 0.6s ease;
  cursor: pointer;       
}

.dropdown-itemB:hover {
  background-color: #e16d6d;
  display: block; 
  width: 100%;             
  padding: 0px 8px;      
  box-sizing: border-box; 
  transition: background-color 0.6s ease, padding 0.6s ease;
  cursor: pointer;      
}

.dropdown:hover .dropdown-content {
  max-height: 999px; /* edit depending on the content */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  padding: 8px 0;
}