:root{

    --primary-color: rgb(75, 37, 136);
}
*{
    box-sizing: border-box;
}


/* Global Stylings */
.width-50{
    width: 50%;
}
.ml-auto{
    margin-left: auto;
}
.text-center{
    text-align: center;
}

/* Progress bar */

.progressbar{
    position: relative;
    display: flex;
    justify-content: space-between;
    counter-reset: step;
    margin: 3rem 0;
}

.progressbar::before,.progress{
    content: "";
    position: absolute;
    top :50%;
    transform: translateY(-50%);
    height: 4px;
    background-color: #dcdcdc;
    width: 100%;
    z-index: -1;
}

.progress{
    background-color: var(--primary-color);
    width: 0%;
}

.progress-step{
    width : 2.1875rem;
    height: 2.1875rem;
    background-color: #dcdcdc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.progress-step-active{

    background-color: var(--primary-color);
    color: wheat;
}

@keyframes animate{

    from {
        transform:  scale(1,0);
        opacity:  0;
    }

    to {
        transform:  scale(1,1);
        opacity:  1;
    }

}

.progress-step::before{
    counter-increment: step;
    content : counter(step)
}

.progress-step::after{
    content : attr(data-title);
    position:absolute;
    top: 35px;
    font-size: 0.85rem;
    color : #666;
}



/* Form */





.form{
    margin : 0 auto;
    border  : 1px solid #ccc;
    border-radius : .35rem;
    padding: 1.5rem;



}
.form-step{
    display: none;
    animation: animate .5s;
    transform-origin: top;

}

.form-step-active{
    display: block;
}

.input-group{

    margin : 1rem 0;

}

.btns-group{

    display: grid;
    grid-template-columns: auto auto;
    gap: 1.5rem;

}

.btn{
    padding: 0.75rem;
    display: block;
    text-decoration: none;
    background-color:  var(--primary-color);
    color: white;
    text-align: center;
    border-radius :.25rem;
    cursor: pointer;
    transition: .3s;
}

.btn:hover{
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--primary-color);
}