.wrapper {
     max-width: 500px;
     margin: 50px auto;
     margin-bottom: 5px;

 }

 .wrapper .card {
     max-width: 400px;
     min-height: 450px;
     margin: 30px;
     background: rgba(255, 255, 255, 0.1);
     overflow: hidden;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.5);
     border-radius: 15px;
     cursor: pointer;
     padding: 0.8rem
 }

 .wrapper .card a {
     text-decoration: none;
     color: #eee
 }

 .wrapper .card a:hover {
     color: #fff
 }

 .wrapper .card .input-field {
     border: 1px solid #ddd;
     border-radius: 5px;
     color: #eee;
     padding: 0.3rem
 }

 .wrapper .card .input-field input {
     background-color: inherit
 }

 .wrapper .card .input-field input.form-control,
 .wrapper .card .input-field input.form-control:focus {
     border: none;
     outline: none;
     box-shadow: none;
     color: #eee
 }

 .wrapper .card .input-field button.btn {
     color: #eee;
     padding: 0rem;
     padding-right: 0.5rem
 }

 .wrapper .card .input-field button.btn:hover {
     color: #fff
 }

 .wrapper .card .input-field button.btn:focus {
     border: none;
     outline: none;
     box-shadow: none
 }

 .wrapper .card .input-field input::placeholder {
     color: #eee
 }

 .wrapper .card .option {
     display: block;
     position: relative;
     padding-left: 25px;
     cursor: pointer;
     user-select: none
 }

 .wrapper .card .option span.text-light-white:hover {
     color: #fff
 }

 .wrapper .card .option input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0
 }

 .checkmark {
     position: absolute;
     top: 3px;
     left: 0;
     height: 18px;
     width: 18px;
     background-color: #fff;
     border-radius: 2px
 }

 .wrapper .card .option:hover input~.checkmark {
     background-color: #f1f1f1
 }

 .wrapper .card .option input:checked~.checkmark {
     border: none;
     background-color: #333;
     transition: 300ms ease-in-out all
 }

 .checkmark:after {
     content: "\2713";
     position: absolute;
     display: none;
     color: #fff;
     font-size: 1rem
 }

 .wrapper .card .option input:checked~.checkmark:after {
     display: block
 }

 .wrapper .card .option .checkmark:after {
     left: 3px;
     top: -3px;
     width: 5px;
     height: 10px
 }

 .wrapper .card .btn.btn-primary {
     border-radius: 20px;
     width: 100px;
     background-color: #83c11f;
     color: #fff;
     border: none
 }

 .wrapper .card .btn.btn-primary:hover {
     color: #fff;
     background: #912931
 }

 .wrapper .card .btn.btn-primary:focus {
     border: none;
     box-shadow: none
 }


 .wrapper .card .btn.btn-primarys {
     border-radius: 15px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 1px;
     font-size: 10px; 
     height: 20px;     
     background-color: #83c11f;
     color: #fff;
     border: none
 }

 .wrapper .card .btn.btn-primarys:hover {
     color: #fff;
     background: #912931
 }

 .wrapper .card .btn.btn-primarys:focus {
     border: none;
     box-shadow: none
 }


 .wrapper .card .text-light-white {
     color: #ddd
 }

 .wrapper .card .line span.connect {
     position: absolute;
     top: -12px;
     left: 23%;
     color: #000;
     padding: 0 0.3rem;
     z-index: 100;
     border-radius: 2px;
     background-color: #fff
 }

 .wrapper .card .connections a img {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     object-fit: cover
 }

 @media(max-width: 370px) {
     .wrapper .card .line:after {
         left: 27%
     }
 }

 @media(max-width: 350px) {
     .wrapper {
         margin: 10px auto
     }

     .wrapper .card {
         margin: 10px
     }
 }

 @media screen and (min-width: 600px) {
.nkldsleft{
margin-left: -500px;
}
.descontainer{
margin-left: 100px !important;
}
} 
@media screen and (min-device-width: 0px) and (max-device-width : 480px) {
.pvbottom {
margin-bottom: -20px;
margin-right: -10px;
}
.hmgpvtitle {
color: #006699;
font-weight: 500;
margin-bottom: -30px; 
}
}