.dot {
    width: 8px;
    height: 8px;
    margin-right: 4px;
    background-color: #222; /* Adjust color as needed */
    border-radius: 50%;
    animation: typing 1s steps(5, end) infinite;
  }
  
  @keyframes typing {
    0%, 40% {
      opacity: 0;
    }
    80% {
      opacity: 1;
    }
  }
  
  /* Add delays for a more natural typing effect */
  .dot:nth-child(2) {
    animation-delay: 0.2s;
  }
  .dot:nth-child(3) {
    animation-delay: 0.4s;
  }