.button {
  
    border: none;
    background: transparent;
    --stroke-color: black;
    --ani-color: rgba(95, 3, 244, 0);
    --color-gar: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    font-size:120px;
    font-family: var(--fonte03);
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px var(--stroke-color);
    mix-blend-mode: luminosity;

}

 
 .front-text {
   
    background: var(--color-gar);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 200%;
    overflow: hidden;
    transition: all 1s;
    animation: 8s ani infinite;
    -webkit-text-stroke: 1px var(--ani-color);
    gap: 15px;
  
    
  }

  mark {

    font-family: var(--fonte02);
    font-weight: bold;
    color: black;
    --stroke-color: black;
    --ani-color: rgba(95, 3, 244, 0);
    --color-gar: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    color: transparent;
    background: none;
    
}

.textos{

    display: flex;
    flex-direction: column;
    gap: 15px;
    text-transform: uppercase;

} 

.Subtitulo {

    font-size: 45px;
    height: 60px;

}

.Subtitulo01 {

    font-size: 65px;
    font-family: var(--fonte02);
    font-weight: 500;
    text-transform: uppercase;

}

.Subtitulo02 {

    font-size: 50px;
    font-family: var(--fonte02);
    font-weight: 500;
    text-transform: uppercase;

}

.textoAnimado {

    margin:15px 0px 0px 0px;
    display: flex;
    font-size: 45px;
    height: 67px;
    font-family: var(--fonte02);
    font-weight: 500;
    font-size: 55px;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.card {
  
    animation: mover-gradient 5s infinite linear;
    border-radius: 1.25rem;
    width: 100%;
    position: relative;
  
  
  }
  
    .loader {
  
      color: black;
      font-family: var(--fonte02);
      font-weight: 500;
      font-size: 45px;
      -webkit-box-sizing: content-box;
      box-sizing: content-box;
      height: 70px;
     
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      border-radius: 8px;
      
    }
    
    .words {
      overflow: hidden;
      position: relative;
      font-weight: bold;
      line-height: 1.3;
      
    }
    .words::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
      var(--bg-color) 10%,
      transparent 30%,
      transparent 70%,
      var(--bg-color) 90%
    );
  
      z-index: 20;
    }
    
    .word {
  
    display: block;
    height: 100%;
    background: white;
    animation: spin_4991 15s infinite;
    background-position: 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: spin_4991 15s infinite;
    animation-fill-mode: forwards;
    -webkit-text-size-adjust: none;
    overflow: hidden;
         
    }

    .word.dark-mode {

      color: black;
  
       
    }

    .word.light-mode {
  
      color: white;
      
    }

    .w1 { color: transparent; } /* React (azul escuro) */
    .w2 { color: #D84B16; } /* Front-End (laranja escuro) */
    .w3 { color: #E91E63; } /* UX Designer (rosa escuro) */
    .w4 { color: #388E3C; } /* Comunicação (azul escuro) */
    .w5 { color: #5c309a; } /* Acessibilidade (verde escuro) */
    .w9 { color: #007ACC; } /* Design (amarelo dourado) */
    .w7 { color: transparent; } /* Repetição de React */
    
    @keyframes spin_4991 {
      0% {
        transform: translateY(0);
      }
      10% {
        transform: translateY(-102%);
      }
      25% {
        transform: translateY(-100%);
      }
      35% {
        transform: translateY(-202%);
      }
      50% {
        transform: translateY(-200%);
      }
      60% {
        transform: translateY(-302%);
      }
      75% {
        transform: translateY(-300%);
      }
      85% {
        transform: translateY(-402%);
      }
      100% {
        transform: translateY(-400%);
      }
    }

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