.progress-container{display:flex;justify-content:space-between;align-items:flex-start;width:90%;margin:40px auto;position:relative}.progress-container:after,.progress-container:before{content:"";position:absolute;top:12px;left:0;height:2px;width:100%;z-index:1}.progress-container:before{background-color:#e0e0e0}.progress-container:after{background-color:teal;width:var(--progress-width,0);transition:width .3s ease-in-out}.step-container{flex-direction:column;position:relative;z-index:2}.step-circle,.step-container{display:flex;align-items:center}.step-circle{width:24px;height:24px;border-radius:50%;background-color:#e0e0e0;border:2px solid #e0e0e0;justify-content:center;color:#fff;font-weight:700;transition:background-color .3s,border-color .3s;margin-bottom:8px}.step-circle.completed{background-color:teal;border-color:teal}.step-circle.active{background-color:#fff;border:2px solid teal}.step-label{font-size:12px;color:#666;text-align:center;white-space:nowrap}