body
{
	    background: #9053c7;
    background: -webkit-linear-gradient(-135deg, #c850c0, #4158d0);
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
*{
    margin:0;
    padding:0;
}
.container{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}
.card{
   
} 
.main{
    display:none;
     height:auto;
    width:320px;
    background-color:#fff;
    border-radius:10px;
    padding:20px;
    box-sizing:border-box; 
    cursor:pointer;
    font-family: 'Poppins', sans-serif;
}
.active{
    display:block !important;
}
.image{
    display:flex;
    justify-content:center;
    align-items:center;
    
}
.image span{
   
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}
.image span img{
    width:90%;
    object-fit:cover;
 
}
.heading{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    margin-top:20px;
}
.heading h3{
    font-size:18px;
}
.heading p{
    font-size:13px;
    font-weight:700;
}
.heading p a{
    text-decoration:none;
    color:blue;
}
.input-text{
   position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:20px;
    padding:0 20px;
}
input[type="text"]{
    height:35px;
    width:100%;
    border-radius:20px;
    padding:0 20px;
    border:none;
    outline:0;
    background-color:#f3f3f3;
}
.button{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:20px;
    padding:0 20px;
    gap:10px;
}
.button button{
     height:35px;
    width:100%;
    border-radius:20px;
    /*margin:0 20px;*/
     border:none;
    outline:0;
    background-color:#57b846;
    color:#fff;
    font-size:12px;
    cursor:pointer;
        position: relative;
}
input[type="password"]{
    height:35px;
    width:100%;
    border-radius:20px;
    padding:0 20px;
    padding-right:22px;
    border:none;
    outline:0;
    background-color:#f3f3f3;
     border:1px solid #f3f3f3;
  
}

.fa-eye-slash{
    position:absolute;
    right:27px;
    top:13px;
    font-size:13px;
}
.fa-eye{
    position:absolute;
    right:27px;
    top:13px;
    font-size:13px;
}
.warning{
    border:1px solid red !important;
}
.final-step{

    text-align:center;
}
.final-step p{
    margin-top:20px;
    font-size:13px;
    font-weight:700;
    padding:0 20px;
} 
.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
} 

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}


@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}

button.next-btn.disabled
{
  pointer-events: none;
    opacity: 0.7;

}
button.next-btn.loading
{
  font-size: 0px;
}
button.next-btn.loading:before
{
   content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;

}



  .col img{
              height: 140px;
    width: 100%;
    cursor: pointer;
    transition: transform 1s;
    object-fit: cover;
}
            cursor: pointer;
            transition: transform 1s;
            object-fit: cover;
        }
        .col label{
            overflow: hidden;
            position: relative;
        }
        .imgbgchk:checked + label>.tick_container{
            opacity: 1;
        }
/*         aNIMATION */
        .imgbgchk:checked + label>img{
           transform: scale(1.1);
    opacity: 0.3;
        }
        .tick_container {
            transition: .5s ease;
            opacity: 0;
            position: absolute;
            bottom: 4%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            cursor: pointer;
            text-align: center;
        }
        .tick {
               background-color: #4CAF50;
    color: white;
    font-size: 16px;
    padding: 7px 16px;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    font-family: arial;
    -ms-transform: scaleX(-1) rotate(-35deg);
    -webkit-transform: scaleX(-1) rotate(-35deg);
    transform: scaleX(-1) rotate(-35deg);
        }

        .button
        {
              height: 35px;
    border-radius: 20px;
    border: none;
    outline: 0;
    background-color: #57b846;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    position: relative;
        }

        button.next-btn.skip
        {
          height: 35px;
    border-radius: 20px;
    border: none;
    outline: 0;
    background-color: grey;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    position: relative;
    width: 100%;
        }