.card{
    background-color:#fff;
    border:none;
    height:500px;
    overflow:hidden;
}

.input-field{
    position:relative;
    margin-top:5px;
}

.input-field input{
    height:50px;
    outline:none !important;
    border:2px solid #eee;
   
}

.input-field input:focus{
    box-shadow:none;
    outline:none !important;
}

.input-field label{
    position:absolute;
    top:10px;
    left:6px;
    transition:all 0.5s;
    background-color:#fff;
    padding:0px 10px;
    border-radius:20px;
    
     
}

.input-field input:focus+label,
.input-field input:valid+label
{
    position:absolute;
    top:-10px;
    left:6px;
    font-size:13px;
  
}


.signup-button{
    height:50px;
    font-size:19px;
    text-transform:uppercase;
}

.right-side{
    
    position:relative;
    
}


.right-side-content{
    background-color:#0056fb;
    height:500px;
    width:100%;
    padding:10px;
    position:relative;
}


.right-side-content .content{
    position:absolute;
    top:50%;
    left:0%;
    padding:0px 40px;
}

.right-side span:nth-child(1){
    height:120px;
    width:75px;
    background-color:#ffb91d;
    border-radius:2px;
    display:flex;
    transform: skew(20deg);
    position:absolute;
    left:-20px;
}

.right-side span:nth-child(2){
    height:50px;
    width:40px;
    background-color:#ffb91d;
    border-radius:2px;
    display:flex;
    transform: skew(20deg);
    position:absolute;
    left:60px;
    top:20px;
}

.right-side span:nth-child(3){
    height:50px;
    width:40px;
    background-color:#3949AB;
    border-radius:2px;
    display:flex;
    transform: skew(20deg);
    position:absolute;
    right:20px;
    top:-20px;
}

.right-side span:nth-child(4){
    height:140px;
    width:100px;
    background-color:#3949AB;
    border-radius:2px;
    display:flex;
    transform: skew(20deg);
    position:absolute;
    right:40px;
    top:70px;
}

.right-side span:nth-child(5){
    height:140px;
    width:100px;
    background-color:#3949AB;
    border-radius:2px;
    display:flex;
    transform: skew(20deg);
    position:absolute;
    right:30px;
    top:60px;
    object-fit:cover;
    overflow:hidden;
}

.right-side span:nth-child(6){
    height:140px;
    width:100px;
    background-color:#3949AB;
    border-radius:2px;
    display:flex;
    transform: skew(20deg);
    position:absolute;
    top:400px;
    overflow:hidden;
}

.right-side span:nth-child(7){
    height:60px;
    width:40px;
    background-color:#3949AB;
    border-radius:2px;
    display:flex;
    transform: skew(20deg);
    position:absolute;
    top:400px;
    right:10px;
    overflow:hidden;
}

.right-side span:nth-child(8){
    height:100px;
    width:70px;
    background-color:#3949AB;
    border-radius:2px;
    display:flex;
    transform: skew(20deg);
    position:absolute;
    top:440px;
    right:40px;
    overflow:hidden;
}


.right-side span:nth-child(9){
    height:70px;
    width:40px;
    background-color:#3949AB;
    border-radius:2px;
    display:flex;
    transform: skew(20deg);
    position:absolute;
    top:350px;
    right:90px;
    overflow:hidden;
    transition:all 0.5s;
    transition-delay:1s;
}


.right-side span:nth-child(10){
    height:50px;
    width:100px;
    background-color:#3949AB;
    border-radius:2px;
    display:flex;
    transform: skew(20deg);
    position:absolute;
    left:20px;
    top:340px;
    object-fit:cover;
    overflow:hidden;
    transition:all 0.5s;
    
}

.card:hover .right-side span:nth-child(10){
    left:20px;
    top:330px;
}

.card:hover .right-side span:nth-child(9){
    top:340px;
    right:90px;
}


.content{
    display:flex;
    justify-content:center;
    align-items:center;
}

.content h6{
    text-align:left;
}

.content span{
    font-size:12px;
}