.product-name {
  background: linear-gradient(
    to right,
        #ffbc3f 20%,
        #ff8737 30%,
        #fd761c 70%,
        #ffa600 80%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
background-size: 500% auto;
animation: textShine 3s ease-in-out infinite alternate;
}

.gr-name {
    background: linear-gradient(
        to right,
        #ffa600 20%,
        #ff6b08 30%,
        #ff6600 70%,
        #ffa600 80%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 5s ease-in-out infinite alternate;
}

.gr-blue {
  background: linear-gradient(
      to right,
      #a6d4ff 20%,
      #74b5ff 30%,
      #4c93ff 70%,
      #a6d4ff 80%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 5s ease-in-out infinite alternate;
}

.gr-red {
  background: linear-gradient(
      to right,
      #ffa6a6 20%,
      #ff7474 30%,
      #ff4c4c 70%,
      #ffa6a6 80%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 5s ease-in-out infinite alternate;
}

@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.gradient_anim_btn {
    color: white;
    font-weight: 600;
    font-size: 16px;
    border-radius: 0.7em;
    background: -webkit-linear-gradient(225deg, rgb(49, 0, 0), rgb(128, 1, 1),             
    rgb(255, 0, 0)) 0% 0% / 300% 300%;
    background-size: 200% auto;
    -webkit-animation: gradient_move 3s ease infinite;
    animation: gradient_move 3s ease infinite;
  }

  .gradient_anim_btn_cancel {
    color: white;
    font-weight: 600;
    font-size: 16px;
    border-radius: 0.7em;
    background: -webkit-linear-gradient(225deg, rgb(48, 48, 48), rgb(32, 32, 32),             
    rgb(0, 0, 0)) 0% 0% / 300% 300%;
    background-size: 200% auto;
    -webkit-animation: gradient_move 3s ease infinite;
    animation: gradient_move 3s ease infinite;
  }

  .gradient_anim_btn_register {
    color: white;
    font-weight: 600;
    font-size: 16px;
    border-radius: 0.7em;
    background: -webkit-linear-gradient(225deg, rgb(49, 0, 0), rgb(128, 31, 1),             
    rgb(255, 123, 0)) 0% 0% / 300% 300%;
    background-size: 200% auto;
    -webkit-animation: gradient_move 3s ease infinite;
    animation: gradient_move 3s ease infinite;
  }

  .gradient_anim_btn_contact {
    color: white;
    font-weight: 600;
    font-size: 16px;
    border-radius: 0.7em;
    background: -webkit-linear-gradient(225deg, rgb(48, 48, 48), rgb(32, 32, 32),             
    rgb(27, 27, 27)) 0% 0% / 300% 300%;
    background-size: 200% auto;
    -webkit-animation: gradient_move 3s ease infinite;
    animation: gradient_move 3s ease infinite;
  }

  @-webkit-keyframes gradient_move {
    0%{background-position: 0% 92%}
    50%{background-position: 100% 9%}
    100%{background-position: 0% 92%}
  }
  
  @keyframes gradient_move {
    0%{background-position: 0% 92%}
    50%{background-position: 100% 9%}
    100%{background-position: 0% 92%}
  }

           
  .btn-grad-red {
    background-image: linear-gradient(to right, #8E0E00 0%, #1F1C18  51%, #8E0E00  100%);
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
  }

  .btn-grad-red:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }