.typewriter-effect {
  display: flex; 
  justify-content: center;
  font-family: "courier" monospace; color:#ffffff;
}

.typewriter-effect > .text {
  max-width: 0;
  animation: typing 6s steps(var(--characters)) infinite;
  white-space: nowrap;
  overflow: hidden;
}

.typewriter-effect:after {
  content: "\00A0\00A0\00A0 />"; /* Adds three non-breaking spaces before '>' */
  animation: blink 1s infinite;
  animation-timing-function: step-end;
}

@keyframes typing {
  75%,
  100% {
    max-width: calc(var(--characters) * 4ch);
  }
}

.zoom-in {
  animation: zoomIn 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smoother easing */
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8); /* Less drastic start */
    opacity: 0;
  }
  60% {
    transform: scale(1.05); /* Slight overshoot for a natural feel */
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.fade-in {
  animation: fadeIn 3s cubic-bezier(0.4, 0, 0.2, 1); /* Custom cubic-bezier for smoother transitions */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.blink {
  animation: blink 8s infinite;
}
@keyframes blink {
  0%,
  75%,
  100% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
}