.step-item{position:relative;display:flex;width:calc(100% / 4);flex-direction:column;align-items:center;justify-content:center;text-align:center}.step-item:not(:first-child):before{position:absolute;right:50%;top:33.333333%;height:3px;width:100%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity));--tw-content:"";content:var(--tw-content)}.step{position:relative;z-index:10;display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:9999px;border-width:2px;--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity));font-weight:600;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));background-color:#8655eb}.complete .step{--tw-bg-opacity:1;background-color:rgb(5 122 85/var(--tw-bg-opacity))}.complete p{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.active:not(:first-child):before,.complete:not(:first-child):before{--tw-bg-opacity:1;background-color:rgb(5 122 85/var(--tw-bg-opacity))}.zoom-button{padding:8px 16px;background-color:#f0f0f0;color:#333;border:1px solid #ccc;border-radius:4px;cursor:pointer;transition:background-color .3s ease,color .3s ease,border-color .3s ease}.zoom-button:hover{background-color:#e0e0e0;color:#222;border-color:#bbb}