*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}

body{

background:#f4f4f4;

display:flex;

justify-content:center;

padding:40px;

}

.container{

width:500px;

background:#fff;

padding:30px;

border-radius:10px;

box-shadow:0 0 15px rgba(0,0,0,.15);

}

.progress{

width:100%;

height:8px;

background:#ddd;

border-radius:20px;

margin-bottom:25px;

}

#progressBar{

width:25%;

height:100%;

background:#0a84ff;

border-radius:20px;

transition:width .4s ease;

}

.step{

display:none;

}

.step.active{

display:block;

}

h2{

margin-bottom:20px;

color:#333;

}

input{

width:100%;

padding:12px;

margin-bottom:15px;

font-size:16px;

border:1px solid #ccc;

border-radius:6px;

}

.buttons{

display:flex;

justify-content:space-between;

}

button{

padding:12px 25px;

border:none;

background:#0a84ff;

color:white;

cursor:pointer;

border-radius:6px;

font-size:15px;

}

button:hover{

background:#0068d6;

}
.loader{

width:40px;
height:40px;
margin:20px auto;

border:4px solid #ddd;
border-top:4px solid #0a84ff;

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}

}

#otpMessage{

margin-bottom:15px;
font-size:15px;
color:#444;

}

#otpError{

margin-top:15px;
font-weight:bold;

}

#resendOtp{

margin-top:15px;

}
#otpInfo{
    margin-bottom:15px;
    font-size:15px;
    color:#555;
    text-align:center;
}

#maskedMobile{
    color:#0a84ff;
    font-weight:bold;
}