.animated-read-more-container {
  font-size: clamp(16px, 20px, 25px);
  color: #000;
  line-height: 1.6;
  font-weight: 300;
}

.read-more-hidden {
  display: none;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

.read-more-hidden.show {
  display: block;
  opacity: 1;
  max-height: 1000px;
}

.read-more-toggle {
  all: unset;
  display: flex;
  align-items: center;
  margin-top: 10px;
  color: #414141;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.1s linear;
}

.read-more-toggle:hover,
.read-more-toggle:focus {
  background: transparent !important;
  color: #414141 !important;
}

.read-more-arrow {
  margin-left: 5px;
  transition: transform 0.3s ease, translateX 0.3s ease;
}

/* This selector was incorrect, so I fixed it */
.read-more-toggle:hover .read-more-arrow {
  transform: translateX(10px); /* 10px is smoother than 60px */
}

.read-more-toggle:hover,
.read-more-toggle:focus {
  background: transparent !important;
  color: #414141 !important;
}

.read-more-arrow {
  margin-left: 5px;
  transition: transform 0.3s ease, translateX 0.3s ease;
}

.read-more-toggle:hover .read-more-arrow {
  transform: translateX(10px);
}

.read-more-toggle.active .read-more-arrow {
  transform: rotate(90deg);
}