.typing-container {
    text-align: center;
  }
  
  .typing-placeholder {
    display: flex;
  }
  
  .dot {
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
    border-radius: 50%;
    margin-right: 2px;
    animation: dot-animation 1s infinite;
  }
  
  @keyframes dot-animation {
    0%, 20% {
      opacity: 0.2;
      transform: translateY(0);
    }
    50% {
      opacity: 1;
      transform: translateY(-8px);
    }
    100% {
      opacity: 0.2;
      transform: translateY(0);
    }
  }