#statusSteps { position: relative; } #statusSteps::before { content:''; position:absolute; top:20px; left:10%; right:10%; height:3px; background:#e5e7eb; z-index:0; } #statusSteps .text-center { position:relative; z-index:1; } yle> .tracking-timeline{position:relative;padding-left:40px} .tracking-timeline::before{content:'';position:absolute;left:14px;top:0;bottom:0;width:2px;background:#e5e7eb} .timeline-item{position:relative;margin-bottom:24px} .timeline-dot{position:absolute;left:-33px;top:4px;width:18px;height:18px;border-radius:50%;background:#e5e7eb;border:2px solid #fff;box-shadow:0 0 0 2px #e5e7eb} .timeline-dot.active{background:#1a56db;box-shadow:0 0 0 2px #1a56db} .status-steps{display:flex;justify-content:space-between;position:relative;margin-bottom:32px} .status-steps::before{content:'';position:absolute;top:20px;left:10%;right:10%;height:3px;background:#e5e7eb;z-index:0} .status-step{text-align:center;flex:1;position:relative;z-index:1} .step-icon{width:42px;height:42px;border-radius:50%;background:#e5e7eb;color:#9ca3af;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-size:16px;border:3px solid #fff;box-shadow:0 0 0 2px #e5e7eb} .step-icon.done{background:#1a56db;color:#fff;box-shadow:0 0 0 2px #1a56db} .step-icon.current{background:#1a56db;color:#fff;box-shadow:0 0 0 2px #1a56db;animation:pulse 1.5s infinite} .step-icon.delivered-done{background:#059669;color:#fff;box-shadow:0 0 0 2px #059669} .step-label{font-size:11px;font-weight:600;color:#6b7280} .step-label.active-label{color:#1a56db} @keyframes pulse{0%,100%{box-shadow:0 0 0 2px #1a56db}50%{box-shadow:0 0 0 6px rgba(26,86,219,.3)}}
Track Your Order
el.classList.remove('bg-secondary'); if(i