/* -------Downarrow Animation ---------*/
.fade {
  transition: visibility 0s .2s, opacity .8s linear;
}
  @-webkit-keyframes arrow-movement {
    0% {
      opacity: 0;
      bottom: 35%;
    }
    70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  @keyframes arrow-movement {
    0% {
      opacity: 0;
      bottom: -7%;
    }
    70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

/*---- Banner Text Animation -----*/

  @keyframes ani{
    from{
        letter-spacing: 25px;
        filter: blur(5px);
        -webkit-filter: blur(5px);
        opacity: 0;
    }to{
        letter-spacing: 0;
        filter: blur(0);
        -webkit-filter: blur(0);
        opacity: 1;
    }
}

  /* ----------Banner Course Card Animation------------ */

  @keyframes moveX {
    0% {
      transform: translateX(0) rotate(0);
    }
    25% {
      transform: translateX(15px) rotate(-2deg);
    }
    50% {
      transform: translateX(15px) rotate(0deg);
    }
    75% {
      transform: translateX(0) rotate(2deg);
    }
    100% {
      transform: translateX(0) rotate(0);
    }
  }

  @keyframes moveY {
    0% {
      transform: translateY(25%) rotate(0);
    }
    25% {
      transform: translateY(calc(25% + 15px)) rotate(2deg);
    }
    50% {
      transform: translateY(25%) rotate(0);
    }
    75% {
      transform: translateY(calc(25% + 15px)) rotate(-2deg);
    }
    100% {
      transform: translateY(25%) rotate(0);
    }
  }

  @keyframes slide_2 {
    0% {
      transform: translate(0) rotate(0deg);
    }
    25% {
      transform: translate(15px, -5px) rotate(0deg);
    }
    50% {
      transform: translate(-10px, 10px) rotate(0deg);
    }
    75% {
      transform: translate(5px, -5px) rotate(0deg);
    }
    100% {
      transform: translate(0) rotate(0deg);
    }
  }


  /* Site Scroll Animation */

  :root {
    --animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-duration: 1s;
  }
  @-webkit-keyframes slideInUp {
    0% {
      opacity: 0;
      transform: translateY(25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  
  @keyframes slideInUp {
    0% {
      opacity: 0;
      transform: translateY(50px);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes slideInDown {
    0% {
      opacity: 0;
      transform: translateY(-25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes slideInDown {
    0% {
      opacity: 0;
      transform: translateY(-25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes slideInleft {
    0% {
      opacity: 0;
      transform: translateX(25%);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes slideInleft {
    0% {
      opacity: 0;
      transform: translateX(20px);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(-20px);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translateX(-20px);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes zoomIn {
    0% {
      opacity: 0;
      transform: scale(0.75);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes zoomIn {
    0% {
      opacity: 0;
      transform: scale(0.75);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes zoomReverseIn {
    0% {
      opacity: 0;
      transform: scale(1.25);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes zoomReverseIn {
    0% {
      opacity: 0;
      transform: scale(1.25);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @-webkit-keyframes flipInY {
    0% {
      opacity: 0;
      transform: perspective(400px) rotateX(67.5deg);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes flipInY {
    0% {
      opacity: 0;
      transform: perspective(400px) rotateX(67.5deg);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  [data-animation] {
    opacity: 0;
    -webkit-animation-timing-function: var(--animation-timing-function);
            animation-timing-function: var(--animation-timing-function);
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-duration: var(--animation-duration);
            animation-duration: var(--animation-duration);
    will-change: transform, opacity;
  }
  
  .animations-disabled,
  .animations-disabled [data-animation] {
    -webkit-animation: none !important;
            animation: none !important;
    opacity: 1 !important;
  }
  
  .slideInUp {
    -webkit-animation-name: slideInUp;
            animation-name: slideInUp;
  }
  
  .slideInDown {
    -webkit-animation-name: slideInDown;
            animation-name: slideInDown;
  }
  
  .slideInLeft {
    -webkit-animation-name: slideInleft;
            animation-name: slideInleft;
  }
  
  .slideInRight {
    -webkit-animation-name: slideInRight;
            animation-name: slideInRight;
  }
  
  .fadeIn {
    -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
  }
  
  .zoomIn {
    -webkit-animation-name: zoomIn;
            animation-name: zoomIn;
  }
  
  .zoomReverseIn {
    -webkit-animation-name: zoomReverseIn;
            animation-name: zoomReverseIn;
  }
  
  .flipInY {
    -webkit-animation-name: flipInY;
            animation-name: flipInY;
  }
  
  .flipOutY {
    -webkit-animation-name: flipInY;
            animation-name: flipInY;
    animation-direction: reverse;
  }