.texto {
    transition: var(--transition-duration);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center; 
    white-space: nowrap;
    text-align: center;
    
    h1 {
        margin: 0;
        align-items: center;
        justify-content: center;
        /* letter-spacing: -.15rem; */
        font-size: 6.5rem;
        font-weight: bold;
        font-family: 'Syne';
        margin-left: -28rem;
        color: #63FCB7;
        .container-ani{
            margin: 1rem;
            display: inline;
            position: relative;
            .word{
                display: inline;
                text-rendering: optimizeLegibility!important;
                white-space: pre;
                left: 50%;
                transform: translate(-50%, -10%);
                opacity: 0;
                display: block;
                top: 18px;
                position: absolute;
                font-family: 'Syne';
                color: #63FCB7;
            }
        }
    }
    p {
        margin: 1rem 0;
    }
}
.responsive-br {
    display: none;
}

.develop-word, .Progress-word{
    margin-left: 240px;
}

  .letter {
      
    text-rendering: optimizeLegibility!important;
    display: inline-block;
    position: relative;
    transform: translateZ(25px);
    transform-origin: 50% 50% 25px;
  }
  
  .letter.out {
    transform: rotateX(90deg);
    transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  
  .letter.behind {
    transform: rotateX(-90deg);
  }
  
  .letter.in {
    transform: rotateX(0deg);
    transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

@-webkit-keyframes opacity {
    0%, 100% {opacity:0;}
    50% {opacity:1;}
  }
  
  @-webkit-keyframes change {
    0%, 12.66%, 100% {transform:translate3d(0,0,0);}
    16.66%, 29.32% {transform:translate3d(0,-25%,0);}
    33.32%,45.98% {transform:translate3d(0,-50%,0);}
    49.98%,62.64% {transform:translate3d(0,-75%,0);}
    66.64%,79.3% {transform:translate3d(0,-50%,0);}
    83.3%,95.96% {transform:translate3d(0,-25%,0);}
  }
  
  @-o-keyframes opacity {
    0%, 100% {opacity:0;}
    50% {opacity:1;}
  }
  
  @-o-keyframes change {
    0%, 12.66%, 100% {transform:translate3d(0,0,0);}
    16.66%, 29.32% {transform:translate3d(0,-25%,0);}
    33.32%,45.98% {transform:translate3d(0,-50%,0);}
    49.98%,62.64% {transform:translate3d(0,-75%,0);}
    66.64%,79.3% {transform:translate3d(0,-50%,0);}
    83.3%,95.96% {transform:translate3d(0,-25%,0);}
  }
  
  @-moz-keyframes opacity {
    0%, 100% {opacity:0;}
    50% {opacity:1;}
  }
  
  @-moz-keyframes change {
    0%, 12.66%, 100% {transform:translate3d(0,0,0);}
    16.66%, 29.32% {transform:translate3d(0,-25%,0);}
    33.32%,45.98% {transform:translate3d(0,-50%,0);}
    49.98%,62.64% {transform:translate3d(0,-75%,0);}
    66.64%,79.3% {transform:translate3d(0,-50%,0);}
    83.3%,95.96% {transform:translate3d(0,-25%,0);}
  }
  
  @keyframes opacity {
    0%, 100% {opacity:0;}
    50% {opacity:1;}
  }
  
  @keyframes change {
    0%, 12.66%, 100% {transform:translate3d(0,0,0);}
    16.66%, 29.32% {transform:translate3d(0,-25%,0);}
    33.32%,45.98% {transform:translate3d(0,-50%,0);}
    49.98%,62.64% {transform:translate3d(0,-75%,0);}
    66.64%,79.3% {transform:translate3d(0,-50%,0);}
    83.3%,95.96% {transform:translate3d(0,-25%,0);}
  }

  @keyframes gradient {
    0% {
      background-position-y: 100vh;
    }
    100% {
      background-position-y: -100vh;
    }
  }

  @keyframes grain {
    0% { -webkit-transform: translate(-10%, 10%); -moz-transform: translate(-10%, 10%); transform: translate(-10%, 10%) }
    10% { -webkit-transform: translate(-25%, 0%); -moz-transform: translate(-25%, 0%); transform: translate(-25%, 0%) }
    20% { -webkit-transform: translate(-30%, 10%); -moz-transform: translate(-30%, 10%); transform: translate(-30%, 10%) }
    30% { -webkit-transform: translate(-30%, 30%); -moz-transform: translate(-30%, 30%); transform: translate(-30%, 30%) }
    40% { -webkit-transform: translate(); -moz-transform: translate(); transform: translate() }
    50% { -webkit-transform: translate(-15%, 10%); -moz-transform: translate(-15%, 10%); transform: translate(-15%, 10%) }
    60% { -webkit-transform: translate(-20%, 20%); -moz-transform: translate(-20%, 20%); transform: translate(-20%, 20%) }
    70% { -webkit-transform: translate(-5%, 20%); -moz-transform: translate(-5%, 20%); transform: translate(-5%, 20%) }
    80% { -webkit-transform: translate(-25%, 5%); -moz-transform: translate(-25%, 5%); transform: translate(-25%, 5%) }
    90% { -webkit-transform: translate(-30%, 25%); -moz-transform: translate(-30%, 25%); transform: translate(-30%, 25%) }
    100% { -webkit-transform: translate(-10%, 10%); -moz-transform: translate(-10%, 10%); transform: translate(-10%, 10%) }
  }
  @media (max-width: 599px){
    .texto {
      
        h1 {
            font-size: 40px;
            margin-left: 6px;
            display: block;
            .container-ani{
                .word{
                    top: 10px;
                }
            }
        }
    }
    .develop-word, .Progress-word{
        margin-left: 0px;
    }
    .responsive-br {
        display: block;
    }

  }

  @media (min-width: 600px) and (max-width: 1024px) {
    .texto {
      
        h1 {
            font-size: 3.5rem;
            margin-left: -15rem;
            .container-ani{
                .word{
                    top: 10px;
                }
            }
        }
    }
    .develop-word, .Progress-word{
        margin-left: 124px;
    }

  }

  @media (min-width: 1025px) and (max-width: 1280px) {
    .texto {
      
        h1 {
            font-size: 5rem;
            margin-left: -23rem;
            .container-ani{
                .word{
                    top: 10px;
                }
            }
        }
    }
    .develop-word, .Progress-word{
        margin-left: 180px;
    }

  }