.color-animation {
  position: relative;
  color: royalblue;
  overflow: hidden;
}

.color-animation {
  background: linear-gradient(to right, #2486f2, #2486f2 50%, #1a2e35 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.9s ease;
}

.ma .color-animation.animate {
  background-position: 0 100%;
}

.sf .color-animation {
  background: linear-gradient(to right, #ff5722, #fd5c2c 50%, #1a2e35 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.9s ease;
}
.sf .color-animation.animate {
  background-position: 0 100%;
}

.ma .color-animation.animate {
  background-position: 0 100%;
}

.ma .color-animation {
  background: linear-gradient(to right, #0fb768, #039d55 50%, #1a2e35 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.9s ease;
}
.ma .color-animation.animate {
  background-position: 0 100%;
}

.ma.white_text .color-animation {
  background: linear-gradient(to right, #02b461, #039d55 50%, #ffffff 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.9s ease;
}
.ma.white_text .color-animation.animate {
  background-position: 0 100%;
}

.dm .color-animation {
  background: linear-gradient(to right, #0461a5, #0461a5 50%, #00253c 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.9s ease;
}
.dm .color-animation.animate {
  background-position: 0 100%;
}
/* 
.dm .white_text .color-animation{
  background: linear-gradient(to right, #02B461, #039D55 50%, #ffffff 50%);
	background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position .9s ease;
}
.dm.white_te .color-animation.animate{
	  background-position: 0 100%;
} */

.ef .color-animation.animate {
  background-position: 0 100%;
}

.ef .color-animation {
  background: linear-gradient(to right, #735e3b, #735e3b 50%, #967a4b 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.9s ease;
}