html {
    padding: 0;
    margin: 0;
    background: #efcc33;
  }
  .perspective-text {
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%);
    font-family: Arial;
    font-size: 60px;
    font-weight: 900;
    letter-spacing: -2px;
    text-transform: uppercase;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 2px #eeeeee;
  }
  

 .texto1{
    position: absolute;
    text-align: center;
    top:90%;
    align-items: center;
    display: flex;
    width: 98%;
    justify-content: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
   
    
}


.texto2{
    position: absolute;
    text-align: center;
    top:93%;
    align-items: center;
    display: flex;
    width: 98%;
    justify-content: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
   
    
}

  .perspective-line {
    height: 50px;
    overflow: hidden;
    position: relative;
  }
  p {
    margin: 0;
    height: 50px;
    line-height: 50px;
    transition: all 0.5s ease-in-out;
  }
  .perspective-line:nth-child(odd) {
    transform: skew(60deg, -30deg) scaleY(0.667);
  }
  .perspective-line:nth-child(even) {
    transform: skew(0deg, -30deg) scaleY(1.333);
  }
  .perspective-line {
    position: relative;
  }
  .perspective-line:nth-child(1) {
    left: 29px;
  }
  .perspective-line:nth-child(2) {
    left: 58px;
  }
  .perspective-line:nth-child(3) {
    left: 87px;
  }
  .perspective-line:nth-child(4) {
    left: 116px;
  }
  .perspective-line:nth-child(5) {
    left: 145px;
  }
  
  /* Sliding text on all lines */
  .perspective-text p{
    transform: translate(0, -50px);
    animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
    animation: text-anim 4s infinite;
  }
  
  /* Solid text on hover */
  .perspective-line:hover p{
    color: #eeeeee;
  }
    
  @keyframes text-anim {
    0% {
      transform: translate(0, 0);
    }
      50% {
      transform: translate(0, -50px);
    }
    100% {
      transform: translate(0, 0);
    }
  }
  


/******  otro  */
h4 {
    font-size: 50px;
    margin: 0;
  }
 

  .bg-text-container {
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
  z-index: -999;
}

  @keyframes text-scrolling {
    0% { transform: translate3d(-100%, 0, 0); }
    100% { transform: translate3d(0%, 0, 0); }
  }
  
  .animate-text {
    animation: text-scrolling 20s linear infinite;
    will-change: transform;
    display: block;
    position: relative;
    white-space: nowrap;
    
    &.left {
      animation-direction: reverse;
    }
    
  }