body {
    font-family: 'Outfit', sans-serif;
}
@keyframes bounce-horizontal {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}

.animate-bounce-horizontal {
  animation: bounce-horizontal 1s ease-in-out infinite;
}

.typewriter {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    animation: 
      blink-caret 0.75s step-end infinite;
  }

  /* The typing effect */
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }

  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #4B5563; }
  }
  
   .typewriter-cursor {
    animation: blink 1s step-end infinite;
  }
  
  @keyframes blink {
    from, to { opacity: 1 }
    50% { opacity: 0 }
  }
  
  
   /* Glass effect base */
  .glass-effect {
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 
      0 4px 30px rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(255,255,255,0.1) inset,
      0 0 20px rgba(255,255,255,0.1) inset;
  }

  /* Shiny reflection animation */
  @keyframes shine {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
  }
  
  @keyframes shine-faster {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
  }
  
  .animate-shine {
    animation: shine 2s ease-in-out infinite;
  }
  
  .group-hover .animate-shine-faster {
    animation: shine-faster 1s ease-in-out infinite;
  }
  
  
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@keyframes fadeInDown {
from { 
  opacity: 0;
  transform: translateY(-20px);
}
to { 
  opacity: 1;
  transform: translateY(0);
}
}

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

@keyframes bounceIn {
0% { 
  opacity: 0;
  transform: scale(0.8);
}
50% { 
  opacity: 1;
  transform: scale(1.05);
}
100% { 
  transform: scale(1);
}
}