:root{ --color1:#ff5a08; }

.text-effect{
    color: var(--color1);
    font-family: "ADLaM Display", system-ui;
    font-size: 100px;
    font-weight: 500;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.text-effect span{
    display: inline-block;
    animation: animate 2s infinite;
}

@keyframes animate{
      0%, 10% { transform: perspective(200px) rotateX(0deg) rotateY(0deg) scale(1); }
     30%, 36% { transform: perspective(200px) rotateX(180deg) rotateY(0deg) scale(1); }
     63%, 69% { transform: perspective(200px) rotateX(180deg) rotateY(180deg) scale(1); }
    90%, 100% { transform: perspective(200px) rotateX(180deg) rotateY(180deg) scale(-1); }
}

@media only screen and (max-width: 990px){
    .text-effect{ font-size: 70px; }
}

@media only screen and (max-width: 767px){
    .text-effect{ font-size: 60px; }
}

@media only screen and (max-width: 576px){
    .text-effect{ font-size: 40px; }
}