.hover-underline-animation-text {
  /*color: #222;
  position: absolute;*/
  /* top: 50%;
  left: 50%;*/
  transform: translate(0%, -20%);
  /*text-transform: uppercase;
  letter-spacing: .2em;*/
  -webkit-transition: all 0.4s cubic-bezier(0.245, 0.545, 0.955, 1);
  transition: all 0.4s cubic-bezier(0.245, 0.545, 0.955, 1);
  /* font-size: 0.875em;*/
  /* width: 140px;
  text-align: center;*/
  /*padding: 10px 15px;*/
}
.hover-underline-animation-text:hover {
  letter-spacing: 0;
  color: var(--secondary) !important;
}
.hover-underline-animation-text:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  /* padding-left:90px!important;*/
  /*top:1px;*/
  width: 100%;
  height: 0;
  background: var(--warning-hover);
  z-index: -1;
  -webkit-transition: all 0.4s cubic-bezier(0.245, 0.545, 0.955, 1);
  transition: all 0.4s cubic-bezier(0.245, 0.545, 0.955, 1);
}
.hover-underline-animation-text:hover:after {
  height: 60%;
}
@media (max-width: 767px) {
  .hover-underline-animation-text:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    /* padding-left:90px!important;*/
    /*top:100px;*/
    width: 100%;
    height: 0;
    background: var(--warning-hover);
    z-index: -1;
    -webkit-transition: all 0.4s cubic-bezier(0.245, 0.545, 0.955, 1);
    transition: all 0.4s cubic-bezier(0.245, 0.545, 0.955, 1);
  }
}
@media (max-width: 767px) {
  .hover-underline-animation-text:hover:after {
    content: "";
    height: 100%;
  }
}