@keyframes animationFramesOne {
    0% {
      transform:  translate(0px,0px)  rotate(0deg) ;
    }
    20% {
      transform:  translate(73px,-1px)  rotate(36deg) ;
    }
    40% {
      transform:  translate(141px,72px)  rotate(72deg) ;
    }
    60% {
      transform:  translate(83px,122px)  rotate(108deg) ;
    }
    80% {
      transform:  translate(-40px,72px)  rotate(144deg) ;
    }
    100% {
      transform:  translate(0px,0px)  rotate(0deg) ;
    }
  }
  
  @-webkit-keyframes animationFramesOne {
    0% {
      -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
    }
    20% {
      -webkit-transform:  translate(73px,-1px)  rotate(36deg) ;
    }
    40% {
      -webkit-transform:  translate(141px,72px)  rotate(72deg) ;
    }
    60% {
      -webkit-transform:  translate(83px,122px)  rotate(108deg) ;
    }
    80% {
      -webkit-transform:  translate(-40px,72px)  rotate(144deg) ;
    }
    100% {
      -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
    }
  }
  
  .animationFramesOne {
      -webkit-animation: animationFramesOne 12s linear infinite;
      animation: animationFramesOne 12s linear infinite;
  }
  .animationFramesOne.two {
      -webkit-animation: animationFramesOne 20s linear infinite;
      animation: animationFramesOne 20s linear infinite;
  }
  
  
  @keyframes contactSwimmer {
  
    0%,
    100% {
      -webkit-transform: translateX(0) translateY(0) rotate(0);
      transform: translateX(0) translateY(0) rotate(0);
    }
  
    25%,
    75% {
      -webkit-transform: translateX(15px) translateY(20px) rotate(10deg);
      transform: translateX(15px) translateY(20px) rotate(10deg);
    }
  
    50% {
      -webkit-transform: translateX(60px) translateY(35px) rotate(15deg);
      transform: translateX(60px) translateY(35px) rotate(15deg);
    }
  }
  
  .contactSwimmer {
      -webkit-animation-name: contactSwimmer;
      animation-name: contactSwimmer;
      -webkit-animation-duration: 5s;
      animation-duration: 5s;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
  }
  
  @keyframes rotateme {
    from {
      -webkit-transform: rotate(0deg);
       transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes rotateme {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  
  .rotateme {
      -webkit-animation-name: rotateme;
      animation-name: rotateme;
      -webkit-animation-duration: 8s;
      animation-duration: 8s;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
  }


  @keyframes underlineAnimation {
    0% {
        transform: scaleX(0);
    }
    50% {
        transform: scaleX(1);
    }
    100% {
        transform: scaleX(0);
    }
}

@keyframes down {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translateY(15px);
    }

    40% {
        transform: translate(0);
    }
}

@-webkit-keyframes down {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translateY(15px);
    }

    40% {
        transform: translate(0);
    }
}


/* CSS for underline and cursor */
.job-title {
    position: relative; /* Ensure cursor position is relative to this element */
    display: inline-block;
}

.job-title::after {
    content: "|"; 
    display: inline-block;
    animation: blink 1s infinite; 
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}



@keyframes fadeIn {
  from {
      opacity: 0;
      transform: translateY(10px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
      opacity: 1;
      transform: translateY(0);
  }
  to {
      opacity: 0;
      transform: translateY(10px);
  }
}