@import url('https://fonts.googleleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins',sans-serif;
}

body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4070f4;
}

.container{
    position: relative;
    max-width: 900px;
    width: 100%;
    border-radius: 6px;
    padding: 30px;
    margin:0 15px;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.container header{
    position: relative;
    font-size:20px ;
    font-weight: 600;
    color:#333;
}
.container header::before{
    content:"";
    position: absolute;
    left: 0;
    bottom:-2px ;
    height:3px;
    width:27px;
    border-radius: 8px;
    background-color: #4070f4;
}
.container form{
    position:relative;
    margin-top: 16px;
    min-height:490px;
    background-color: #fff;
    overflow:hidden;
}
.container form .form{
     position: absolute;
     background-color:#fff;
     transition: 0.3s ease;
}
.container form .form.second{
    opacity:0;
    pointer-events:none;
    transform:translateX(200%);
}
form.secActive.form.second{
    opacity:1;
    pointer-events:auto;
    transform:translateX(0%);

}
form.secActive.form.first{
    opacity:0;
    pointer-events:none;
    transform:translateX(-100%);

}

.container form .title{
    display:block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 500;
    margin:6px 0;
    color:#333;
}
.container form .fields{
    display:flex;
    align-items:center;
    justify-content: space-between;
    flex-wrap: wrap;

}
form.fields .input-field{
    display: flex;
    width: calc(100% / 3 -15px);
    flex-direction:column;
    margin:4px 0;

}
#birth{
    margin-right: 50px;
}
.input-field label{
    font-size: 12px;
    font-weight: 500;
    color: #2e2e2e;

}
.input-field input{
    outline: none;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    border-radius: 5px;
    border: 1px solid #aaa;
    padding: 0 15px;
    height:42px;
    margin:8px 0 ;
}

 option select{
    outline: none;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    border-radius: 5px;
    border: 1px solid #aaa;
    padding: 0 5px;
    height:42px;
    margin:8px 0 ;
}

.type{
    font-size: 12px;
    font-weight: 500;
    color: #2e2e2e;

}
.input-field input:is(:focus,:valid){
    box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.input-field input[type="date"]{
    color:#707070;
}
.input-field input[type="date"]:valid{
    color:#333;
}

.container form button,.backBtn{
    display:flex;
    align-items:center;
    justify-content: center;
    height:45px;
    max-width:200px;
    width:100%;
    border:none;
    outline:none;
    color:#fff;
    border-radius:5px;
    margin:24px 0;
    background-color:#4070f4 ;

}
.container form button,
.container form button .backbtn{
    font-size: 16px;
    font-weight: 400;

}
form button:hover{
    background-color: #265df2;
}
form button i,
    form .backBtn i{
    margin:0 6px;
}
form .backBtn i{
      transform: rotate(180deg);
}

form .buttons{
    display:flex;
    align-items:center;
}
form .buttons button,.backBtn{
    margin-right:14px;
}