.progressbar{
    position: relative;
    display: flex;
    justify-content: space-between;
    margin:2px 2px 48px 0px;
    counter-reset:step;

}
.progressbar::before,.progress{
    content:"";
    position: absolute;
    top:50%;
    transform:translateY(-50%);
    height:4px;
    width:100%; 
    background-color:#2E4053;
}
.progress{
    background-color:#2ECC71 ;
    width:0%;
    transition:0.3s ease-in-out;
}


.progress-step{
    height:60px;
    width:60px;
    background-color:#2E4053;
    border-radius: 50%;
    display:flex;
    justify-content: center;
    align-items: center;
    z-index:1;
    color:white
}
@media screen and (max-width: 520px) {
    .progress-step{
        height:40px;
        width:40px;
        background-color:#2E4053;
        border-radius: 50%;
        display:flex;
        justify-content: center;
        align-items: center;
        z-index:1;
        color:white
    }
}
.progress-step::before{
    counter-increment: step;
    content:counter(step)
}
.progress-step::after{
    content:attr(data-title);
    position: absolute;
    top:calc(100% + 0.5rem);
    font-size:.80rem;
    color:black;
}
.progress-step.active{
    background-color:#2ECC71 ;
    color:white;
}
/* label{
    display: block;
    margin-bottom: 0.5rem;
}
input{
    display:block;
    width:100%;
    padding: 0.75rem;
    border:1px solid #ccc;
    border-radius:0.25px;
} */

/* .form{
    width:clamp(20px,50%,430px);
    margin:0 auto;
    border:1px solid #ccc;
    border-radius:.35rem;
    padding:1.5rem;
    background-color: white;
    box-shadow: 2px 4px 11px -1px #000000;

} */
.form-step{
    display: none;
    transform-origin:top;
    animation:animate 0.5s
}
@keyframes animate{
    from{
        transform:scale(1,0);
        opacity:0
    }
    to{
        transform: scale(1,1);
        opacity: 1;
    }
}
.form-step.active{
    display:block;
}
/* .text-center{
    text-align: center;
}
.input-group{
    margin:2rem 0;
    
}
.btn{
    padding:0.75rem;
    display: block;
    text-align: center;
    text-decoration: none;
    background-color: slateblue;
    color:white;
    border-radius: .25rem;
    cursor: pointer;
    transition:all 250ms ease-in-out;


}
.btn-group{
    display: grid;
    grid-template-columns: 1fr 1fr ;
    gap:1.5rem;
}
.w-50{
    width:50%
}
.ml-auto{
    margin-left: auto;
}
.btn:hover{
  box-shadow: 0 0 0 2px #fff,0 0 0 3px slateblue;
}
.btn:active{
    transform:scale(.90)
} */