body{background: #ecf0f4;width: 100%;height: 100%;font-size: 15px;line-height: 1.5;font-family: 'Roboto', sans-serif;color: #222;}
.container{max-width: 1230px;width: 100%;}
h1{font-weight: 700;font-size: 45px;font-family: 'Roboto', sans-serif;}
.header{margin-bottom: 80px;}
#description{font-size: 24px;}
.form-wrap{background: rgba(255,255,255,1);width: 100%;max-width: 850px;padding: 50px;margin: 0 auto;position: relative;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);-moz-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);}
.form-wrap:before{content: "";width: 90%;height: calc(100% + 60px);left: 0;right: 0;margin: 0 auto;position: absolute;top: -30px;background: #000000;z-index: -1;opacity: 0.8;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);-moz-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);}
.form-group{margin-bottom: 15px;}
.form-group > label {display: block;font-size: 15px;color: #686868;font-weight:bold;}
.custom-control-label{color: #686868;font-size: 15px;}
.form-control{height: 50px;background: #ecf0f4;border-color: transparent;padding: 0 15px;font-size: 15px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.form-control:focus{border-color: #00bcd9;-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);}
textarea.form-control{height: 160px;padding-top: 15px;resize: none;}
.btn{padding: .657rem .75rem;font-size: 18px;letter-spacing: 0.050em;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.btn-primary {color: #fff;background-color: #000;border-color: #000;}
.btn-primary:hover {color: #00bcd9;background-color: #ffffff;border-color: #00bcd9;-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);}
.btn-primary:focus, .btn-primary.focus {color: #00bcd9;background-color: #ffffff;border-color: #00bcd9;-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,.show > .btn-primary.dropdown-toggle {color: #00bcd9;background-color: #ffffff;border-color: #00bcd9;}
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,.show > .btn-primary.dropdown-toggle:focus {-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);box-shadow: 0px 0px 20px rgba(0, 0, 0, .1);}

.headerBox {padding: 30px 0;width: 100%;float: left;}
.logobox {text-align: center;width: 100%;float: left;}
.logobox img {max-width: 200px;width: 100%;filter: invert(1);}
.formBox {float: left;width: 100%;padding: 30px 0 100px 0;}
.avatar-upload {position: relative;max-width: 205px;margin: 0 auto 10px;}
.avatar-upload .avatar-edit {position: absolute;right: 12px;z-index: 1;top: 10px;}
.avatar-upload .avatar-edit input {display: none;}
.avatar-upload .avatar-edit input + label {display: inline-block;width: 34px;height: 34px;margin-bottom: 0;border-radius: 100%;background: #FFFFFF;border: 1px solid transparent;box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);cursor: pointer;font-weight: normal;transition: all 0.2s ease-in-out;}
.avatar-upload .avatar-edit input + label:hover {background: #f1f1f1;border-color: #d6d6d6;}
.avatar-upload .avatar-edit input + label:after {content: "\f040";font-family: 'FontAwesome';color: #757575;position: absolute;top: 5px;left: 0;right: 0;text-align: center;margin: auto;}
.avatar-upload .avatar-preview {width: 192px;height: 192px;position: relative;border-radius: 100%;border: 6px solid #F8F8F8;box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);}
.avatar-upload .avatar-preview > div {width: 100%;height: 100%;border-radius: 100%;background-size: cover;background-repeat: no-repeat;background-position: center;}
.required_inp {width: 100%;display: flex;margin-bottom: 15px;gap: 5px;}
.add_input,.add_input1 {display: inline-block;background: #f1f1f1;padding: 8px 30px 8px;border-radius: 10px;color: #686868;font-weight: bold;margin-bottom: 20px;cursor: pointer;}
.add_input:hover,.add_input:hover {text-decoration: none;color: #fff;background: #686868;}
.inputRemove,.inputRemove1 {display: inline-block;background: #f1f1f1;padding: 8px 30px 8px;border-radius: 0;color: #686868;font-weight: bold;border: none;}
.required_inp .form-group {display: flex;margin-bottom: 0px;width:100%;}
.socialicon{position: relative;}
.socialicon i,.messengerAccount {position: absolute;top: 0px;left: 0px;height: 100%;width: 40px;display: flex;align-items: center;justify-content: center;font-size: 20px;}
.messengerAccount img {width: 20px;}
.socialicon .form-control {padding-left: 50px;}
.socialicon .fa-linkedin {background-color: #0a66c2;color: #fff;}
.socialicon .fa-facebook {background-color: #1877f2;color: #fff;}
.socialicon .fa-instagram {background-color: #c32aa3;color: #fff;}
.socialicon .fa-youtube-play {background-color: #ff0000;color: #fff;}
.socialicon .fa-whatsapp {background-color: #25d366;color: #fff;}
.messengerAccount {background-color:#00B2FF;}
.messengerAccount img {filter: invert(1);}
.footercopyright p {margin: 0px;text-align: center;color:#fff;}
.footerBox {width: 100%;float: left;padding: 30px 0;background: #000;}

.yesbutton,.nobutton  {width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;color: #fff;border-radius: 4px;font-size: 20px;cursor: pointer;}
.yesbutton{background: rgba(6, 119, 6);}
.nobutton{background: rgba(180, 4, 4);}
.yesno {display: flex;gap: 20px;justify-content: center;margin-top:20px;}
.rangeInput {width: 250px;margin: 20px auto 40px;display: block;}
.logindetails {display: flex;gap: 30px;}
.hrgap {margin: 30px 0;}

/* card */
.cardBox {float: left;width: 100%;padding: 125px 0 65px 0;}
.avatarImg {width: 192px;height: 192px;position: relative;border-radius: 100%;border: 6px solid #F8F8F8;box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);overflow: hidden;position: absolute;top: -98px;left: 50%;transform: translateX(-50%);}
.avatarImg img {width: 100%;height: 100%;object-fit: cover;}
.cardBox1 .form-wrap {max-width: 550px;padding: 110px 50px 50px;}
.cardName {text-align: center;font-size: 28px;font-weight: bold;}
.compnayName, .occupessionName {text-align: center;margin: 5px 0;font-weight:bold;font-size: 18px;}

.phoneNumber {color: #fff;font-size: 18px;display: flex;align-items: center;gap: 10px;margin-bottom: 10px;background: #0a66c2;padding: 17px 15px;border-radius: 10px;width:100%;flex-direction: column;}
.contactdetailsall {display: flex;width: 100%;gap: 20px;}
.phoneNumber i {font-size: 30px;}
.phoneNumber:hover {background: #000;color: #fff;text-decoration: none;}
.socialmediaBox a {width: 40px;height: 40px;background: #000;display: inline-flex;align-items: center;justify-content: center;color: #fff;font-size: 18px;border-radius: 40px;}
.socialmediaBox img {width: 23px;filter: invert(1);}
.socialmediaBox a[title=LinkedIn] {background-color: #0a66c2;}
.socialmediaBox a[title=Facebook] {background-color: #1877f2;}
.socialmediaBox a[title=Instagram] {background-color: #c32aa3;}
.socialmediaBox a[title=YouTube] {background-color: #ff0000;}
.socialmediaBox a[title=WhatsApp] {background-color: #25d366;}
.socialmediaBox a[title=Messenger] {background-color: #00B2FF;}
.socialmediaBox {display: flex;align-items: center;gap: 5px;justify-content: center;margin-top: 20px;}
.socialmediaBox a:hover {background: #2d2d2e;text-decoration: none;}

.addressBox address {margin-bottom: 0px;}
.addressBox,.additionalPhone {display: flex;gap: 20px;background: #f3f3f3;padding: 20px;border-radius: 10px;margin-bottom: 20px;align-items: center;}
.addressBox i, .additionalPhone i {font-size: 30px;color: #0a66c2;width: 30px;min-width: 30px;}
.additionalPhone a {color: #000;}

.qrcode {transition: .5s;width: 80px;height: 80px;display: flex;align-items: center;justify-content: center;flex-direction: column;background: #ffffff;box-shadow: 0px 0px 7px 0px #c9c9c9;cursor: pointer;}
.shareqrsave {display: flex;justify-content: center;gap: 10px;}
.qrcode:hover {background: transparent;box-shadow: none;transition: .5s;}
.qrcode i {font-size: 30px;}
.phoneadd span {font-weight: bold;}
button.close {position: absolute;right: -20px;width: 40px;height: 40px;background: #000;border-radius: 40px;top: -20px;opacity: 1;text-shadow: none;color: #fff;}
.popupall h5 {font-size: 30px;text-align: center;font-weight: bold;border-bottom: 1px solid #efefef;padding-bottom: 10px;}
.qrbarimg {margin: 30px auto 15px;display: block;max-width: 100%;}
.popupall .modal-dialog .modal-content {background-color: #ffffff;border: 4px solid #efefef;}
.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {opacity: 1;}
.close:hover {color: #fff;text-decoration: none;}

section.editbox {float: left;width: 100%;text-align: center;padding: 40px 0;border-top: 1px solid #cfcfcf;}
.editboxtext a {display: block;background: #000000;width: 175px;margin: 0px auto 0;padding: 10px;border-radius: 10px;color: #fff;text-transform: uppercase;font-weight: bold;transition: .5s;text-align:center;}
.editboxtext a:hover {background: #ffffff;text-decoration: none;color: #000;transition: .5s;}
.inputtypecopy {display: flex;gap: 10px;}
.inputtypecopy button {width: 100px;background: #1ab500;border: none;}
.buttoncopy {width: 100px;display: flex;align-items: center;gap: 6px;font-weight: bold;font-size: 16px;}
.inputtypecopy {display: flex;gap: 10px;padding-top: 20px;}
.resizeImage {display: none;}
.shareqs {margin-top: 30px;}
.editboxtext {margin-bottom: 40px;}
.powered img {width: 110px;filter: invert(1);margin-left: 10px;}
.powered p {margin: 0px;font-weight: bold;}
.addtocontact a {display: block;background: #0a66c2;width: 175px;margin: 10px auto 0;padding: 10px;border-radius: 10px;color: #fff;text-transform: uppercase;font-weight: bold;transition: .5s;text-align: center;transition:.5s;}
.addtocontact a:hover {transition:.5s;text-decoration:none;background-color:#000;}
.passwordShow {position: relative;width: 100%;}
.passwordShow i {position: absolute;top: 16px;right: 14px;z-index: 5;cursor: pointer;}
.passwordShow i:before {content: '\f06e';font-family: 'FontAwesome';}
.passwordShow i.closeEye:before{content: '\f070';}
.passwordShow #auth_password {padding-right: 40px;}

@media(max-width:767px){
    .form-wrap {padding: 50px 15px;}
    .logindetails{ flex-wrap: wrap;}
    .cardBox1 .form-wrap {padding: 110px 15px 50px;}
    .contactdetailsall {gap: 5px;}
    .phoneNumber {padding: 17px 5px;}
}