.containter{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}
.containter .box-1{
    text-align: center;
    border-radius: 40px;
box-shadow: 0px 0px 11px 10px rgba(0,0,0,0.1);
background-color: #ffffff;
    width: 500px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.containter h2{
    font-family: Tahoma;
    text-transform: uppercase;
    font-size: 2rem;
    color:      #cacaca;;
}
.danger{
    color: red;
}
.containter .input-group{
 width: 300px;
 margin: 30px auto;
 position: relative;
 flex-wrap: wrap;
 display: flex;
 flex-direction: column; 
}
.input-group label{
    position: absolute;
    top: 25px;
    left: 0px;
   color:  rgb(165, 165, 165);
   font-size: 1rem;
   transition: 0.2s ease-in-out;
}
.input-group input{
    border: none;
    padding: 7px;
    margin-top: 15px;
    outline: none;
    border-bottom: 2px solid #4b4b4b8a;
    width: 100%;
    height: 25px;
  
}
.input-group input:focus ~label,
.input-group input:valid ~label{
    top: 5px;
    left: 0px;
    font-size: 0.9rem;
    color: rgba(6, 72, 105, 0.849);
    
}
.input-group input:focus,
.input-group input:valid{
    border-color: rgba(6, 72, 105, 0.849);
}
button{
    margin-top: 5%;
border: none;
background-color: #8e7fc3;
text-transform: uppercase;
color: white;
padding: 9px 21px;
border-radius: 30px;
}