@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  70% {
    transform: scale(2.5);
    opacity: 0;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.timeline-dot {
  position: relative;
  width: 1.5rem;  /* 24px */
  height: 1.5rem;
  background-color: #4f46e5; /* Indigo */
  border: 4px solid white;
  border-radius: 9999px; /* Full circle */
  z-index: 10;
}

.timeline-dot::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  border: 2px solid #4f46e5;
  animation: ripple 2s infinite;
}