.timeline {
          position: relative;
        }

        .timeline-item {
          position: relative;
          margin-bottom: 24px;
          display: flex;
          align-items: center;
        }

        .timeline-item:last-child {
          margin-bottom: 0;
        }

        /* Timeline marker */
        .timeline-marker {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 2;
          flex-shrink: 0;
          position: relative;
        }

        /* Status-specific styles */
        .status-done .timeline-marker {
          background: #10b981;
          color: white;
        }

        .status-current .timeline-marker {
          background: #3b82f6;
          color: white;
          animation: pulse 2s infinite;
        }

        .status-not-yet .timeline-marker {
          background: #f3f4f6;
          color: #9ca3af;
          border: 1.5px solid #e5e7eb;
        }

        .timeline-marker i {
          font-size: 12px;
        }

        .timeline-content {
          margin-left: 16px;
          flex-grow: 1;
        }

        .step-name {
          font-size: 15px;
          font-weight: 500;
          color: #1f2937;
          letter-spacing: -0.2px;
          margin-bottom: 0px;
        }

        .status-done .step-name {
          color: #6b7280;
        }

        .status-current .step-name {
          font-weight: 600;
        }

        .status-not-yet .step-name {
          color: #9ca3af;
        }

        @keyframes pulse {
          0% {
            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
          }

          70% {
            box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
          }

          100% {
            box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
          }
        }

        /* Responsive design */
        @media (max-width: 480px) {

          .timeline::before {
            left: 14px;
          }

          .timeline-marker {
            width: 28px;
            height: 28px;
          }

          .timeline-marker i {
            font-size: 11px;
          }

          .timeline-content {
            margin-left: 14px;
          }

          .step-name {
            font-size: 14px;
          }
        }