.animate-left-cards {
  animation: appear-left linear;
  animation-timeline: view();
  animation-range: entry 0 cover 40%;
}
@keyframes appear-left {
  from {
    transform: translateX(-30px);
    transition: 3s;
    opacity: 0;
  }
  to {
    transform: translateX(0px);
    transition: 3s;
    opacity: 1;
  }
}

.animate-top-cards {
    animation: appear-top linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
  }
  @keyframes appear-top {
    from {
      transform: translateY(30px);
      transition: 3s;
      opacity: 0;
    }
    to {
      transform: translateY(0px);
      transition: 3s;
      opacity: 1;
    }
  }

  .animate-right-cards {
    animation: appear-right linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
  }
  @keyframes appear-right {
    from {
      transform: translateX(30px);
      transition: 3s;
      opacity: 0;
    }
    to {
      transform: translateX(0px);
      transition: 3s;
      opacity: 1;
    }
  }
  
  .animate-top-section {
    animation: appear-top-section linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
  }
  @keyframes appear-top-section {
    from {
      transform: translateY(60px);
      transition: 3s;
      opacity: 0;
    }
    to {
      transform: translateY(0px);
      transition: 3s;
      opacity: 1;
    }
  }

  .animate-rotate-section {
    animation: appear-rotate-section 10s linear alternate-reverse;

    animation-timeline: view();
    animation-range: entry 0 cover 40%;
  }
  @keyframes appear-rotate-section {
    from {
      transform: rotate(0deg)  ;
     
    
    }
    to {
        transform: rotate(90deg) ;
     

    }
  }

  .text-effect span {
    display: inline-block;
    opacity: 0;
    -webkit-transform: rotateX(-90deg);
            transform: rotateX(-90deg);
    position: relative;
    top: -100px;
    -webkit-animation: text-effect 2s ease-in-out infinite;
            animation: text-effect 2s ease-in-out infinite;
  }
  .text-effect span:nth-child(1) {
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;
  }
  .text-effect span:nth-child(2) {
    -webkit-animation-delay: 1.3s;
            animation-delay: 1.3s;
  }
  .text-effect span:nth-child(3) {
    -webkit-animation-delay: 1.4s;
            animation-delay: 1.4s;
  }
  .text-effect span:nth-child(4) {
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
  }
  .text-effect span:nth-child(5) {
    -webkit-animation-delay: 1.6s;
            animation-delay: 1.6s;
  }
  .text-effect span:nth-child(6) {
    -webkit-animation-delay: 1.7s;
            animation-delay: 1.7s;
  }
  .text-effect span:nth-child(7) {
    -webkit-animation-delay: 1.8s;
            animation-delay: 1.8s;
  }
  .text-effect span:nth-child(8) {
    -webkit-animation-delay: 1.9s;
            animation-delay: 1.9s;
  }
  .text-effect span:nth-child(9) {
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
  }
  .text-effect span:nth-child(10) {
    -webkit-animation-delay: 2.1s;
            animation-delay: 2.1s;
  }
  
  @-webkit-keyframes text-effect {
    10% {
      opacity: 0.5;
    }
    20% {
      opacity: 1;
      -webkit-transform: rotateX(-360deg);
              transform: rotateX(-360deg);
      top: 0;
    }
    80% {
      opacity: 1;
      -webkit-transform: rotateX(-360deg);
              transform: rotateX(-360deg);
      top: 0;
    }
    90% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
      top: 100px;
    }
  }
  
  @keyframes text-effect {
    10% {
      opacity: 0.5;
    }
    20% {
      opacity: 1;
      -webkit-transform: rotateX(-360deg);
              transform: rotateX(-360deg);
      top: 0;
    }
    80% {
      opacity: 1;
      -webkit-transform: rotateX(-360deg);
              transform: rotateX(-360deg);
      top: 0;
    }
    90% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
      top: 100px;
    }
  }
  .fruit-img {
    animation: fruit-moving 3s linear infinite alternate-reverse;
  }
  
  @keyframes fruit-moving {
    from {
      transform: translateY(-20px);
    }
  
    to {
      transform: translateY(20px);
    }
  }