@keyframes bounce-top {
    from {
        transform: translateY(-200%);
    }
    to {
        transform: translateY(200%) rotateZ(314deg);
    }
  }

@keyframes bounce-bottom {
    from{
        transform: translate(-44%, -0%);
    }
    to{
        transform: scale(1.5) translate(200%, -120%);
    }
  }

  @keyframes ai-right {
    0%{
    }
    50%{
        transform: translate(400%, -600%) rotateZ(12deg) scale(1.5);
    }
    100%{
        transform: translate(400%, 0) rotateZ(12deg) scale(1);
    }
  }

  @keyframes bounce-wp {
    from {
        transform: translate(-4%, 0%);
    }
    to {
        transform: translate(-125%, 450%) rotateZ(314deg);
    }
  }

  @keyframes bounce-php {
    from {
        
    }
    to {
        transform: translate(-100%, 116%) rotateZ(300deg);
    }
  }



  /* position */

  .course-grid-wrapper .figma {
    max-width: 5.6rem;
    height: 6rem;
    position: absolute;
    top: 20%;
    left: 9.7rem;
    transform: translateY(-20%);
}

/*  animation */
.course-grid-wrapper .figma {
    /* animation: bounce-top 15s ease-in alternate infinite; */

}





/* animation for bg image or bg box */

@keyframes bounce {
    8% {
      /* Use the first 8% of duration time to 
      reach bottom which, will be a quick fall */
      top: 70%;
      width: 160px;
      height: 100px;
    }
    18% {
      top: 20%;
      width: 120px;
      height: 120px;
    }
  
    28% {
      top: 70%;
      width: 145px;
      height: 105px;
    }
    39% {
      top: 35%;
      width: 120px;
      height: 120px;
    }
    48% {
      top: 70%;
      width: 130px;
      height: 110px;
    }
  
    55% {
      top: 55%;
      width: 120px;
      height: 120px;
    }
    62% {
      top: 70%;
      width: 125px;
      height: 115px;
    }
    69% {
      top: 64%;
      width: 120px;
      height: 120px;
    }
    75% {
      top: 70%;
    }
    80% {
      top: 68%;
    }
    84% {
      top: 70%;
    }
    100% {
      top: 70%;
    }
  }
  
  .ball {
    animation: bounce 1s infinite alternate;
    -webkit-animation: bounce 1s infinite alternate;
  }
  
  @keyframes bounce {
    from {
      margin-top: 0;
    }
    to {
      margin-top: -15px;
    }
  }
      
  
  @keyframes bounce-top {
      from {
          transform: translateY(-50%);
      }
      to {
          transform: translateY(200%) rotateZ(314deg);
      }
    }
  
  @keyframes bounce-bottom {
      from{
          transform: translate(-44%, -0%);
      }
      to{
          transform: scale(1.5) translate(100%, -120%);
      }
    }
  
    @keyframes ai-right {
      0%{
      }
      50%{
          transform: translate(400%, -600%) rotateZ(12deg) scale(1.5);
      }
      100%{
          transform: translate(400%, 0) rotateZ(12deg) scale(1);
      }
    }
  
    @keyframes bounce-wp {
      from {
          transform: translate(-4%, 0%);
      }
      to {
          transform: translate(-125%, 450%) rotateZ(314deg);
      }
    }
  
    @keyframes bounce-php {
      from {
          
      }
      to {
          transform: translate(-100%, 116%) rotateZ(300deg);
      }
    }