.wrapper-progress-container {
display: flex;
justify-content: center;
width: auto;
height: auto; ;
background: transparent;
}
.progress-container {
display: grid;
grid-template-columns: repeat(3, 1fr); 
grid-template-rows: unset;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 100%;
position: relative;
gap: 150px;
background: transparent;
}
.progress-container.vertical {
grid-template-columns: unset;
grid-auto-flow: column;
grid-template-rows: repeat(3, 1fr);
gap: 150px; 
justify-content: center;
} .description-wrapper{
display : flex;
flex-direction : column;
justify-content: center;
width : 50%; gap : 6px;
align-content: center;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
background: transparent;
height: 100%;
width: 100%;
text-wrap: wrap;
gap : 6px;
padding: 10px;
} .step-circle {
width: 100px;
height: auto;
border: 2px dashed #666;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: background 0.3s ease-in-out;
aspect-ratio:  1/1; } .step-icon {
font-size: 30px;
color: #333;
} .step-number {
width: 30px;
height: 30px;
background: #222;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
position: absolute;
top: -10px;
right: -10px;
} .step-title {
font-size: 16px;
font-weight: bold;
line-height: 1.2;
color: #222;
transition: transform 0.3s ease-in-out;
width: 100%;
} .step-desc {
font-size: 12px;
color: #666;
transition: transform 0.3s ease-in-out;
width: 100%;
} .step {
position: relative;
} .step::after {
content: "";
position: absolute;
top: 40%;
left: 100%;  
width: 150px;  
height: 4px;
background: #ddd;  
z-index: 4;
overflow: hidden;
}
.step::before {
content: "";
position: absolute;
top: 40%;
left: 100%;
width: 0%;   
height: 4px;
background: #00cea6; 
z-index: 5;
transition: width 0.5s ease-in-out;
}
.step.active::before {
width: 150px;
}
.step:last-child::after,
.step:last-child::before {
content: none;
} .step.vertical::after {
content: "";
position: absolute;
top: 100%; left: 50%;
width: 4px; height: 150px; background: #ddd;
transition: background 0.5s ease-in-out;
z-index: 1;
} .step.vertical::before {
content: "";
position: absolute;
top: 100%; left: 50%;
width: 4px; height: 0px; background: #00cea6;
z-index : 2;
transition: height 0.5s ease-in-out;
} .step.vertical.active::before {
height: 150px; 
} .step.vertical:last-child::after,
.step.vertical:last-child::before {
content: none;
}
.hidden-step::before,
.hidden-step::after {
content: none !important;
} .progress-container:hover.step .step-circle,
.step.active .step-circle {
background: #00cea6; 
border: 0px; 
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; 
transition: background 0.5s ease-in-out;
}
.progress-container:hover.step .step-icon,
.step.active .step-icon {
color: #000000;  
transition: color 0.5s ease-in-out;
}
.progress-container:hover.step .step-number,
.step.active .step-number {
color: #dfdfdf;  
transition: color 0.5s ease-in-out;
}
.progress-container:hover.step .step-title,
.step.active .step-title,
.progress-container:hover.step .step-desc,
.step.active .step-desc {
transform: scale(1);
transition: transform 0.5s ease-in-out;
} .progress-container.verti {
grid-template-columns: unset;
grid-auto-flow: column;
grid-template-rows: repeat(3, 1fr);
gap: 150px  ; 
justify-content: center;
}
.step.verti::after {
content: "";
position: absolute;
top: 100% !important; 
left: 50% ;
width: 4px !important; height: 150px ; background: #ddd;
transition: background 0.5s ease-in-out;
z-index: 1;
} .step.verti::before {
content: "";
position: absolute;
top: 100% !important; left: 50% ;
width: 4px !important; height: 0px ; background: #00cea6;
z-index : 2;
transition: height 0.5s ease-in-out;
} .step.verti.active::before {
height: 150px ; 
} .step.verti:last-child::after,
.step.verti:last-child::before {
content: none;
}
.hidden-step::before,
.hidden-step::after {
content: none !important;
}