@keyframes blink-caret {

  to {

    opacity: 0;

  }

}



.rkit-animated-heading p {

  position: relative;

  /* Menentukan posisi relatif untuk memposisikan pseudo-elemen */

}



.rkit-animated-heading {

  position: relative;

}



.text-writing {

  display: inline-block;

}



.text-writing::after {

  content: "|";

  display: inline-block;

  vertical-align: top;

  animation: blink-caret 600ms infinite alternate;

}



.rkit-animated-heading p {

  margin-bottom: 0;

}



@keyframes typing-cursor {

  from,

  to {

    border-color: transparent;

  }



  50% {

    border-color: #000000;

  }

}



.text-flipping {

  transition: 0.5s;

  animation-duration: 0.5s;

  animation-fill-mode: both;

  display: inline-block;

}



.flip-out {

  transform: perspective(400px) rotateX(90deg);

  animation-name: flipOut;

  transform-origin: bottom;

  opacity: 0;

}



.flip-in {

  transform: perspective(400px) rotateX(0deg);

  animation-name: flipIn;

  transform-origin: bottom;

  opacity: 1;

}



@keyframes flipOut {

  0% {

    transform: perspective(400px) rotateX(0deg);

    transform-origin: bottom;

    opacity: 1;

  }



  40% {

    transform: perspective(400px) rotateX(-20deg);

    transform-origin: bottom;

  }



  100% {

    transform: perspective(400px) rotateX(90deg);

    transform-origin: bottom;

    opacity: 0;

  }

}



@keyframes flipIn {

  0% {

    transform: perspective(400px) rotateX(-90deg);

    transform-origin: bottom;

    opacity: 0;

  }



  60% {

    transform: perspective(400px) rotateX(-20deg);

    transform-origin: bottom;

  }



  100% {

    transform: perspective(400px) rotateX(0deg);

    transform-origin: bottom;

    opacity: 1;

  }

}



.text-sliding_up,

.text-sliding_down {

  overflow: hidden;

  transition: opacity 0.5s;

  display: inline-flex;

}



.text-sliding_down.slide-down_in {

  height: auto;

  animation: slideDown_In 0.5s;

}



.text-sliding_down.slide-down_out {

  height: auto;

  animation: slideDown_Out 0.5s;

}



.text-sliding_up.slide-up_in {

  height: auto;

  animation: slideUp_In 0.5s;

}



.text-sliding_up.slide-up_out {

  height: auto;

  animation: slideUp_Out 0.5s;

}



@keyframes slideUp_In {

  0% {

    transform: translateY(15px);

    opacity: 0;

  }



  60% {

    transform: translateY(-5px);

    opacity: 0.8;

  }



  100% {

    transform: translateY(0px);

    opacity: 1;

  }

}



@keyframes slideUp_Out {

  0% {

    transform: translateY(0px);

    opacity: 1;

  }



  100% {

    transform: translateY(-15px);

    opacity: 0;

  }

}



@keyframes slideDown_In {

  0% {

    transform: translateY(-15px);

    opacity: 0;

  }



  60% {

    transform: translateY(5px);

    opacity: 0.8;

  }



  100% {

    transform: translateY(0px);

    opacity: 1;

  }

}



@keyframes slideDown_Out {

  0% {

    transform: translateY(0px);

    opacity: 1;

  }



  100% {

    transform: translateY(15px);

    opacity: 0;

  }

}



@keyframes handdrawn {

  0% {

    stroke-dashoffset: 1500;

    opacity: 0;

  }



  100% {

    stroke-dashoffset: 0;

    opacity: 1;

  }

}



@keyframes opacity {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

  }

}



.rkit-animated-heading__text svg {

  fill: none;

  stroke: black;

  stroke-width: 12px;

  stroke-miterlimit: 10;

  stroke-dasharray: 1500;

  stroke-dashoffset: 1500;

  stroke-linecap: round;

  position: absolute;

  top: 50%;

  left: 50%;

  width: calc(100% + 20px);

  opacity: 0;

  transform: translate(-50%, -50%);

  z-index: -1;

  height: calc(100% + 15px);

  overflow: visible;

}



.rkit-animated-heading__text {

  color: #00cea6;

}



.rkit-highlighted.in_front svg {

  z-index: 2 !important;

}

 





.highlighted_in svg {

  animation: handdrawn 1s forwards;

}



.highlighted_out svg {

  stroke-dashoffset: 0;

  animation: opacity 1s;

}



.rkit-highlighted {

  display: inline-flex;

}



.text-drop-in,

.text-drop-out {

  overflow: hidden;

  display: inline-flex;

}



.text-drop-in.drop-in_out {

  animation: dropIn_Out 0.5s;

  opacity: 0;

}



.text-drop-in.drop-in_in {

  animation: dropIn_In 0.5s;

  opacity: 1;

}



@keyframes dropIn_Out {

  0% {

    transform: scale(1);

    opacity: 1;

  }



  100% {

    transform: scale(0.4);

    opacity: 0;

  }

}



@keyframes dropIn_In {

  0% {

    transform: scale(1.3);

    opacity: 0;

  }



  100% {

    transform: scale(1);

    opacity: 1;

  }

}



.text-drop-out.drop-out_out {

  animation: dropOut_Out 0.5s;

  opacity: 0;

}



.text-drop-out.drop-out_in {

  animation: dropOut_In 0.5s;

  opacity: 1;

}



@keyframes dropOut_Out {

  0% {

    transform: scale(1);

    opacity: 1;

  }



  100% {

    transform: scale(1.3);

    opacity: 0;

  }

}



@keyframes dropOut_In {

  0% {

    transform: scale(0.4);

    opacity: 0;

  }



  100% {

    transform: scale(1);

    opacity: 1;

  }

}