.aten h2 {
     direction: rtl;
     font-size: 28px !important;
     line-height: inherit !important;
 }

 .aten h3 {
     direction: rtl;
     font-size: 22px !important;
     line-height: inherit !important;
 }

 .aten p {
     direction: rtl;
     text-align: justify;
 }

 .aten p img {
     height: auto !important;
     width: 100% !important;
     border-radius: 12px !important;
 }

 .aten span {
     direction: rtl;
     text-align: justify !important;
 }

 .aten li {
     direction: rtl;
     text-align: justify !important;
 }

 .aten ul {
     direction: rtl;
     text-align: justify !important;
 }

 .aten img {

     border-radius: 12px !important;
 }

 .container13 {
     max-height: 100vh;
     position: relative;
 }



 .headline1 {
     align-items: center;
     background-color: var(--color);
     display: flex;
     /*font-family: "Lexend Deca", sans-serif;*/
     font-weight: 700;
     font-size: calc(1rem + 15vmin);
     height: 30vh;
     justify-content: center;
     overflow: hidden;
     perspective: 1000px;
     /*scroll-snap-align: start;*/
     width: 100vw;
 }

 .headline1:nth-child(1) {
     --color: #7c1f60;
 }

 .headline1:nth-child(2) {
     --color: #3498db;
 }

 .headline1:nth-child(3) {
     --color: #ff7979;
 }

 .headline1:nth-child(4) {
     --color: #1abc9c;
 }

 .headline1:nth-child(5) {
     --color: #e74c3c;
 }

 .headline1:nth-child(6) {
     --color: #f8c291;
 }

 .word,
 .char {
     -webkit-animation-delay: var(--del);
     animation-delay: var(--del);
     -webkit-animation-direction: var(--dir, normal);
     animation-direction: var(--dir, normal);
     -webkit-animation-duration: var(--dur);
     animation-duration: var(--dur);
     -webkit-animation-iteration-count: var(--it, infinite);
     animation-iteration-count: var(--it, infinite);
     -webkit-animation-name: var(--name);
     animation-name: var(--name);
     -webkit-animation-timing-function: var(--tf);
     animation-timing-function: var(--tf);
     -webkit-animation-fill-mode: var(--fill, forwards);
     animation-fill-mode: var(--fill, forwards);
     display: inline-block;
     position: relative;
     transform-origin: 50% 100%;
     z-index: 1;
 }

 .headline1--fall .char {
     --name: fall;
     --dur: 600ms;
     --del: calc(var(--char-index) * -0.05s);
     --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
 }

 @-webkit-keyframes fall {
     0% {
         transform: rotateY(-25deg);
     }

     25% {
         transform: translateY(2%) rotateY(25deg);
     }

     50% {
         transform: rotateY(-25deg);
     }

     75% {
         transform: translateY(4%) rotateY(25deg);
     }

     100% {
         transform: rotateY(-25deg);
     }
 }

 @keyframes fall {
     0% {
         transform: rotateY(-25deg);
     }

     25% {
         transform: translateY(2%) rotateY(25deg);
     }

     50% {
         transform: rotateY(-25deg);
     }

     75% {
         transform: translateY(4%) rotateY(25deg);
     }

     100% {
         transform: rotateY(-25deg);
     }
 }

 .headline1--flip .char {
     --name: flip;
     --dur: 4000ms;
     --del: calc(var(--char-index) * 0.075s);
     --tf: linear;
 }

 @-webkit-keyframes flip {
     5% {
         transform: rotateX(1turn);
     }

     10% {
         transform: rotateX(2turn);
     }

     20% {
         transform: rotateX(3turn);
     }

     40% {
         transform: rotateX(4turn);
     }

     70%,
     100% {
         transform: rotateX(5turn);
     }
 }

 @keyframes flip {
     5% {
         transform: rotateX(1turn);
     }

     10% {
         transform: rotateX(2turn);
     }

     20% {
         transform: rotateX(3turn);
     }

     40% {
         transform: rotateX(4turn);
     }

     70%,
     100% {
         transform: rotateX(5turn);
     }
 }

 .headline1--float .char {
     --name: float;
     --dur: 2200ms;
     --del: calc(var(--char-index) * -0.5s);
     --tf: ease-in-out;
     --dir: alternate;
 }

 .headline1--float .char:nth-child(2n) {
     --name: float-alt;
 }

 @-webkit-keyframes float {
     from {
         transform: translate(2%, -10%) rotate(-1deg);
     }

     to {
         transform: translate(-2%, 5%) rotate(3deg);
     }
 }

 @keyframes float {
     from {
         transform: translate(2%, -10%) rotate(-1deg);
     }

     to {
         transform: translate(-2%, 5%) rotate(3deg);
     }
 }

 @-webkit-keyframes float-alt {
     from {
         transform: translate(0%, -5%) rotate(-1deg);
     }

     to {
         transform: translate(2%, 10%) rotate(3deg);
     }
 }

 @keyframes float-alt {
     from {
         transform: translate(0%, -5%) rotate(-1deg);
     }

     to {
         transform: translate(2%, 10%) rotate(3deg);
     }
 }

 .headline1--jog .char {
     --name: jog;
     --dur: 500ms;
     --del: calc(var(--char-index) * -0.025s);
     --tf: linear;
 }

 @-webkit-keyframes jog {
     0% {
         transform: translate(0, 0) rotate(5deg);
     }

     25% {
         transform: translate(5%, -5%) rotate(10deg);
     }

     50% {
         transform: translate(5%, 0) rotate(15deg);
     }

     75% {
         transform: translate(10%, -5%) rotate(10deg);
     }

     100% {
         transform: translate(0, 0) rotate(5deg);
     }
 }

 @keyframes jog {
     0% {
         transform: translate(0, 0) rotate(5deg);
     }

     25% {
         transform: translate(5%, -5%) rotate(10deg);
     }

     50% {
         transform: translate(5%, 0) rotate(15deg);
     }

     75% {
         transform: translate(10%, -5%) rotate(10deg);
     }

     100% {
         transform: translate(0, 0) rotate(5deg);
     }
 }

 .headline1--jump .char {
     --name: jump;
     --dur: 800ms;
     --del: calc(var(--char-index) * 0.075s);
     --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
 }

 @-webkit-keyframes jump {
     20% {
         transform: translateY(2%) scaleY(0.9);
     }

     40% {
         transform: translateY(-100%) scaleY(1.2);
     }

     50% {
         transform: translateY(10%) scaleY(0.8);
     }

     70% {
         transform: translateY(-5%) scaleY(1);
     }

     80%,
     100% {
         transform: translateY(0) scaleY(1);
     }
 }

 @keyframes jump {
     20% {
         transform: translateY(2%) scaleY(0.9);
     }

     40% {
         transform: translateY(-100%) scaleY(1.2);
     }

     50% {
         transform: translateY(10%) scaleY(0.8);
     }

     70% {
         transform: translateY(-5%) scaleY(1);
     }

     80%,
     100% {
         transform: translateY(0) scaleY(1);
     }
 }

 .headline1--twirl .char {
     --name: twirl;
     --dur: 6000ms;
     --del: calc(var(--char-index) * 0.025s);
     --tf: linear;
 }

 @-webkit-keyframes twirl {
     2.5% {
         transform: rotateY(1turn);
     }

     5% {
         transform: rotateY(2turn);
     }

     10% {
         transform: rotateY(3turn);
     }

     20% {
         transform: rotateY(4turn);
     }

     40% {
         transform: rotateY(5turn);
     }

     70%,
     100% {
         transform: rotateY(6turn);
     }
 }

 @keyframes twirl {
     2.5% {
         transform: rotateY(1turn);
     }

     5% {
         transform: rotateY(2turn);
     }

     10% {
         transform: rotateY(3turn);
     }

     20% {
         transform: rotateY(4turn);
     }

     40% {
         transform: rotateY(5turn);
     }

     70%,
     100% {
         transform: rotateY(6turn);
     }
 }