/* Highlight-link style */
a.highlight-link {
  position: relative;
  text-decoration: none;
  color: #333;          /* normal text color */
  transition: color 0.3s ease;
}

/* animated underline highlight */
a.highlight-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #ff0000;  /* underline highlight color */
  transition: width 0.3s ease;
}

a.highlight-link:hover {
  color: #ffffff;          /* darker text color on hover (optional) */
}

a.highlight-link:hover::after {
  width: 100%;          /* underline animates in on hover */
}

/* Normal state */
a.rollover-link {
  color: #ffffff;              /* text color */
  text-decoration: none;    /* remove default underline (optional) */
  transition: color 0.3s ease;
}

/* Hover (rollover) state */
a.rollover-link:hover {
  color: #0000ff;           /* new text color on hover */
}