.registercontainer{padding: 40px 0px 40px 0px; background: var(--theme-white); position: relative;}
.step-indicators{display:flex; gap: .5rem; justify-content: center;margin-bottom: 1rem;}
.step-indicators .step{width: 40px; height: 40px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: var(--primary-light); color: rgba(var(--primary), 1); cursor:pointer; user-select:none;}
.step-indicators .step.active{background: rgba(var(--primary), 1); color: var(--theme-white);}
.step-indicators .step.completed{background: rgba(var(--primary), 1); color: var(--theme-white);}
.step-panel{display: none;}
.step-panel.active{display: block;}

.registercontainer .stepwizard{position: relative;}
.registercontainer .stepwizard .progress{position: absolute; left: 0px; right: 0px; top: 50%; transform: translateY(-50%); height: 2px; background: repeating-linear-gradient(to right, #DADADA 0, #DADADA 5px, transparent 5px, transparent 10px); background-size: 10px 10px;}
.registercontainer .stepwizard .progress .progress-bar{background: repeating-linear-gradient(to right, rgba(var(--primary), 1) 0, rgba(var(--primary), 1) 5px, transparent 5px, transparent 10px); background-size: 10px 10px;}
.registercontainer .step-indicators{position: relative; z-index: 1; justify-content: space-between;}
.registercontainer h3{font-family: "Gilda Display", serif; text-align: center; color: rgba(var(--theme-heading), 1); font-size: 50px; line-height: 50px; font-weight: 400; padding: 0px 0px 10px 0px; margin: 35px 0px 30px 0px;}
.registercontainer .theme-btn:disabled{opacity: 0.7;}
.registercontainer .alreadyaccount{display: block; padding: 15px 0px; text-align: center;}
.registercontainer p{color: var(--theme-light-gray); font-size: 18px; font-weight: 400;}
.registercontainer p a{color: rgba(var(--primary), 1); text-decoration: none; transition: 0.3s ease-in-out;}
.registercontainer p a:hover{text-decoration: underline;}
.registercontainer .default-btn{color: rgba(var(--primary), 1); border-color: rgba(var(--primary), 1);}
.registercontainer .default-btn:disabled{opacity: 0.7;}
.registercontainer .default-btn:hover{background: rgba(var(--primary), 1); color: var(--theme-white);}
.registercontainer .default-btn:focus{background: rgba(var(--primary), 1); color: var(--theme-white);}
.registercontainer .default-btn:active:focus{background: rgba(var(--primary), 1); color: var(--theme-white);}
.logincontainer{padding: 50px 0px;}
.logincontainer .logininner{padding: 0px; background: var(--theme-white); border-radius: 30px; box-shadow: 0px 0px 25px rgba(var(--primary), 0.05);}
.logincontainer .logintextbox{float: left; width: 100%; justify-content: center; position: relative; display: flex; align-items: center; height: 100%; padding: 0px; background: rgba(var(--primary), 1); overflow: hidden; border-radius: 30px 0px 0px 30px; clip-path: polygon(0 0, 82% 0, 100% 24%, 85% 100%, 0 100%, 0% 50%); -webkit-clip-path: polygon(0 0, 82% 0, 100% 24%, 85% 100%, 0 100%, 0% 50%);}
.logincontainer .logintextbox > img{width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;}
.logincontainer .logintextbox .logintextboxinner{width: 100%; height: 100%; position: relative; padding: 40px 50px; z-index: 3; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.73);}
.logincontainer .logintextbox .loginheading{display: block; line-height: 100%; color: rgba(var(--primary), 1); font-size: 40px; text-transform: capitalize; font-weight: 600; margin: 0px 0px 20px 0px;}
.logincontainer .logintextbox .loginheading span{display: block;}
.logincontainer .logintextbox p{color: var(--theme-white); font-size: 16px; line-height: 20px; margin: 0px 0px 25px 0px;}
.logincontainer .logintextbox .loginsubheading{color: var(--theme-white); font-size: 16px; line-height: 20px; margin: 0px 0px 10px 0px;}
.logincontainer .logintextbox .loginlogo{display: block; margin: 0px 0px 30px 0px;}
.logincontainer .logintextbox .loginlogo img{max-width: 100%; max-height: 100%;}
.logincontainer .loginbox{float: left; width: 100%; padding: 70px 50px;}
.logincontainer .loginbox .loginlogo{display: block; text-align: center; margin: 0px 0px 30px 0px;}
.logincontainer .loginbox .loginlogo img{max-width: 100%; max-height: 100%;}
.logincontainer .loginbox .loginheading{display: block; line-height: 100%; text-align: center; color: rgba(var(--primary), 1); font-size: 40px; text-transform: capitalize; font-weight: 700; margin: 0px 0px 15px 0px;}
.logincontainer .loginbox p{color: #333; font-size: 15px; line-height: 20px; text-align: center; margin: 0px 0px 20px 0px;}
.logincontainer .loginbox p a{color: var(--primary); text-decoration: underline; font-weight: 600;}

.logincontainer .loginbox .form-group{position: relative; margin-bottom: 20px;}
.logincontainer .loginbox .form-group label{text-align: left; margin: 0px; color: #333; font-size: 18px; display: block; letter-spacing: 2px;}
.logincontainer .loginbox .form-group .formgroupinner{display: block; position: relative;}
.logincontainer .loginbox .form-group .formgroupinner i{position: absolute; right: 15px; top: 50%; pointer-events: none; font-size: 14px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.logincontainer .loginbox .form-group .formgroupinner .btn{position: absolute; right: 15px; top: 50%; line-height: 100%; padding: 0px; background: none; outline: none; border: none; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.logincontainer .loginbox .form-group .formgroupinner .btn:hover{color: var(--primary);}
.logincontainer .loginbox .form-group .formgroupinner i.fa-mobile{font-size: 14px;}
.logincontainer .loginbox .form-group .formgroupinner .btn i{position: static; pointer-events: all; transform: none; -webkit-transform: none; }
.logincontainer .loginbox .form-group .form-control.error{border-color: red;}
.logincontainer .loginbox .form-group .form-control::-moz-placeholder{color:var(--theme-light-gray);opacity:1}
.logincontainer .loginbox .form-group .form-control:-ms-input-placeholder{color:var(--theme-light-gray)}
.logincontainer .loginbox .form-group .form-control::-webkit-input-placeholder{color:var(--theme-light-gray)}
.logincontainer .loginbox .form-group .form-control::-ms-expand{background-color:transparent;border:0}
.logincontainer .loginbox .form-group .form-control:-webkit-autofill,
.logincontainer .loginbox .form-group .form-control:-webkit-autofill:hover,
.logincontainer .loginbox .form-group .form-control:-webkit-autofill:focus
.logincontainer .loginbox .form-group .form-control:-webkit-autofill,
.logincontainer .loginbox .form-group textarea.form-control:-webkit-autofill,
.logincontainer .loginbox .form-group textarea.form-control:-webkit-autofill:hover
.logincontainer .loginbox .form-group textarea.form-control:-webkit-autofill:focus,
.logincontainer .loginbox .form-group .form-control:-webkit-autofill,
.logincontainer .loginbox .form-group .form-control:-webkit-autofill:hover,
.logincontainer .loginbox .form-group .form-control:-webkit-autofill:focus{-webkit-text-fill-color:var(--theme-light-gray); -webkit-box-shadow: 0 0 0px 1000px var(--primary-light) inset; transition: background-color 5000s ease-in-out 0s;}


.logincontainer .loginbox .form-group [type="file"].form-control{padding: 10px 15px;}
.logincontainer .loginbox .checkbox{padding: 0px; padding-left: 0px; margin-top: 0px; margin-bottom: 0px; display: block; position: relative; margin-right: 0px;}
.logincontainer .loginbox .checkbox + .checkbox{margin-top: 0px;}
.logincontainer .loginbox .checkbox label{display: block; padding-left: 30px; text-align: left; position: relative; margin: 0px; color: #333; font-size: 14px; min-height: 0px; font-weight: 500; line-height: 26px;}
.logincontainer .loginbox .checkbox label a{color: var(--secondary); text-decoration: none;}
.logincontainer .loginbox .checkbox label a:hover{text-decoration: underline;}
.logincontainer .loginbox .checkbox label::before{content: ""; display: inline-block; position: absolute; width: 20px; height: 22px; left: 0; top: 2px; margin-left: 0; border: 1px solid rgba(var(--primary), 1); -webkit-border-radius: 6px; border-radius: 6px; background: transparent; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;transition: border 0.15s ease-in-out, color 0.15s ease-in-out;}
.logincontainer .loginbox .checkbox label::after{display: inline-block; position: absolute; width: 20px; height: 22px; left: 0; top: 2px; margin-left: 0; padding-left: 5px; padding-top: 4px; font-size: 11px; color: var(--primary); background: transparent; border-radius: 0px; line-height: 15px;}
.logincontainer .loginbox .checkbox input[type="checkbox"]{opacity: 0; position: absolute;left: 0px; top: 0px;}
.logincontainer .loginbox .checkbox input[type="checkbox"]:focus + label::before{outline: thin dotted;outline: 0px auto -webkit-focus-ring-color; outline-offset: 0px;}
.logincontainer .loginbox .checkbox input[type="checkbox"]:checked + label::after{font-family: 'FontAwesome'; content: "\f00c"; color: rgba(var(--primary), 1);}
.logincontainer .loginbox .checkbox input[type="checkbox"]:disabled + label{opacity: 0.65;}
.logincontainer .loginbox .checkbox input[type="checkbox"]:disabled + label::before{background-color: #eeeeee; cursor: not-allowed; }
.logincontainer .loginbox .checkbox input[type="checkbox"]:checked + label::before{background: transparent; border-color: rgba(var(--primary), 1);}
.logincontainer .loginbox .text-danger{font-weight: 400; font-size: 14px;}
.logincontainer .loginbox .text-danger strong{font-weight: 400;}
.logincontainer .loginbox .forgotbox{display: block; text-align: right; margin: 0px 0px 0px 0px;}
.logincontainer .loginbox .forgotbox a{text-decoration: none; color: #333; font-size: 14px; font-weight: 500; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
.logincontainer .loginbox .forgotbox a:hover{text-decoration: underline; color: rgba(var(--primary), 1);}

/* 13112025 */
.modal .btn-close{position: absolute; right: -2px; top: -2px; background-color: var(--theme-white); opacity: 1; width: 22px; height: 22px; padding: 3px; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.30);}
.modal.otpmodal .btn-close{right: -7px; top: -7px;}
.modal.otpmodal .modal-dialog{max-width: 450px;}
.modal.otpmodal .modal-body{padding: 60px 50px;}
.modal.otpmodal .error-text{font-size: 14px;}
.modal.otpmodal .otp-input{background-color: var(--primary-light); border-color: rgba(var(--primary), 0.15); height: 50px; width: 50px; padding: 5px; font-size: 18px; border-radius: 15px; color: var(--theme-light-gray);}
.modal.otpmodal .otp-input:focus{border-color: rgba(var(--primary), 1); box-shadow: 0 0 0 .25rem rgba(var(--primary), 0.25);}
.modal.otpmodal h4{color: rgba(var(--theme-heading), 1); font-size: 30px; font-weight: 600; margin: 0px 0px 10px 0px;}
.modal.otpmodal p{color: var(--theme-paragraph); font-size: 14px; font-weight: 400; margin: 0px 0px 15px 0px;}
.upload-box {position: relative; width: 100%; aspect-ratio: 1/1; border: 2px dashed rgba(var(--primary), 0.30); border-radius: 15px; background: rgba(var(--primary), 0.07); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; cursor: pointer; overflow: hidden; text-align: center; } 
.upload-box:hover{background: rgba(var(--primary), 0.10); border-color: rgba(var(--primary), 0.40); } 
.upload-input{position: absolute; inset: 0; opacity: 0; cursor: pointer; } 
.upload-preview {color: rgba(var(--primary), 0.60); font-size: 16px; font-weight: 500; } 
.upload-preview span {display: block; font-size: 32px; font-weight: bold;} 
.upload-preview svg{width: 40px; height: 40px; margin: 0px 0px 10px 0px;} 
.upload-preview p{margin: 0; font-size: 16px; text-transform: uppercase; color: rgba(var(--primary), 0.60); } 
.preview-img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; border-radius: 15px; }
.step-panel .error-text{font-size: 16px;}
.upload-preview .remove-img{position: absolute; top: 6px; right: 6px; background: rgba(var(--primary), 1); border: none; color: var(--theme-white); border-radius: 50%; font-size: 16px; width: 24px; height: 24px; text-align: center; cursor: pointer; z-index: 2; display: inline-flex; justify-content: center; align-items: center; transition: 0.3s ease-in-out;}
.upload-preview .remove-img:hover{background: var(--theme-white); color: rgba(var(--primary), 1); }
.skipbtn{color: rgba(var(--primary), 1); font-size: 15px; font-weight: 600;}
.custom-multiselect .multiselect-menu {position: absolute; width: 100%; display: none; z-index: 99; }
.custom-multiselect.open .multiselect-menu {display: block; }
@media (min-width: 1700px) {
.step-indicators .step{width: 46px; height: 46px; font-size: 18px;}
.registercontainer h3{font-size: 65px; line-height: 74px;}
.registercontainer .default-btn, .registercontainer .theme-btn{min-width: 170px;}
.registercontainer p{font-size: 21px;}
.logincontainer .logintextbox .loginsubheading{font-size: 18px;}
.logincontainer .logintextbox .loginheading{font-size: 50px;}
.logincontainer .logintextbox p{font-size: 17px;}
.logincontainer .logintextbox .logintextboxinner{padding: 50px 70px 50px 50px;}
.logincontainer .loginbox .loginheading{font-size: 50px;}
.logincontainer .loginbox p{font-size: 17px;}
.logincontainer .loginbox .checkbox label{font-size: 17px;}
.logincontainer .loginbox .forgotbox a{font-size: 17px;}
.logincontainer .loginbox{padding: 90px 70px;}
.logincontainer .loginbox .form-group .formgroupinner i{font-size: 17px;}

.modal.otpmodal .modal-dialog{max-width: 500px;}
.modal.otpmodal .modal-body{padding: 60px 50px;}
.modal.otpmodal .error-text{font-size: 16px;}
.modal.otpmodal .otp-input{height: 55px; width: 55px; font-size: 20px;}
.modal.otpmodal h4{font-size: 34px; margin: 0px 0px 10px 0px;}
.modal.otpmodal p{font-size: 16px;}


}

@media (min-width: 1920px) {
.step-indicators .step{width: 50px; height: 50px; font-size: 20px;}
.registercontainer h3{font-size: 70px; line-height: 74px;}
.registercontainer .default-btn, .registercontainer .theme-btn{min-width: 200px;}
.registercontainer .alreadyaccount{padding: 20px 0px 0px 0px;}
.registercontainer p{font-size: 24px;}
.modal.otpmodal .modal-dialog{max-width: 600px;}
.modal.otpmodal .modal-body{padding: 80px 60px;}
.modal.otpmodal .error-text{font-size: 18px;}
.modal.otpmodal .otp-input{height: 60px; width: 60px; font-size: 22px;}
.modal.otpmodal h4{font-size: 38px;}
.modal.otpmodal p{font-size: 18px;}
}
@media (max-width: 1199px) {
.registercontainer h3{font-size: 30px; line-height: 38px; margin: 10px 0px 10px 0px;}
.logincontainer .logintextbox .logintextboxinner{padding: 30px 50px 30px 30px;}
.logincontainer .loginbox{padding: 40px 30px 40px 30px;}
.logincontainer .logintextbox .loginheading{font-size: 35px;}
}
@media (max-width: 1024px) {}

@media (min-width: 992px) {

}
@media (max-width: 991px) {


}
@media (min-width: 768px){

}
@media (max-width: 767px){
.step-indicators .step{width: 30px; height: 30px; font-size: 13px;}
.form-group .form-control, .form-group .form-select{height: 38px; font-size: 13px;}
.registercontainer p{font-size: 14px;}
.registercontainer{padding: 10px 0px 20px 0px;}
.logincontainer .logintextbox{border-radius: 30px 30px 0px 0px; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 86% 92%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 86% 92%, 0 100%);}
.logincontainer{padding: 30px 0px;}
.modal .btn-close{right: 0px; top: 0px; width: 20px; height: 20px; padding: 2px; background-size: 10px;}

}
@media (max-width: 575px){
.registercontainer .stepwizard .progress{top: -9px; transform: none; background: var(--primary-light); height: 5px; border-radius: 10px;}
.registercontainer .stepwizard .progress .progress-bar{background: rgba(var(--primary), 1);}

.step-indicators .step{width: auto; border-radius: 0px; background: none; color: rgba(var(--primary), 0.30);}
.step-indicators .step.completed{display: inline-flex; background: none; color: rgba(var(--primary), 1);}
.step-indicators .step.active{display: inline-flex; background: none; color: rgba(var(--primary), 1);}
.registercontainer .step-indicators{margin: 0px; justify-content: center; background: var(--primary-light); border-radius: 20px;}
.registercontainer h3{font-size: 22px; line-height: 28px; margin: 10px 0px 10px 0px; padding: 0px;}
.form-group .form-control, .form-group .form-select{border-radius: 10px; padding: 5px 30px 5px 15px;}
.registercontainer .alreadyaccount{padding-bottom: 0px;}
.registercontainer .alreadyaccount p{margin: 0px;}
.logincontainer .logintextbox .logintextboxinner{padding: 25px;}
.logincontainer .logintextbox .loginheading{font-size: 25px; margin: 0px 0px 10px 0px;}
.logincontainer .logintextbox p{font-size: 14px; margin: 0px 0px 15px 0px;}
.logincontainer .loginbox{padding: 25px;}
.logincontainer .loginbox .loginheading{font-size: 25px;}
.logincontainer .loginbox .forgotbox a{font-size: 13px;}

.modal.otpmodal .modal-body{padding: 40px 30px;}
.modal.otpmodal .error-text{font-size: 14px;}
.modal.otpmodal .otp-input{height: 40px; width: 40px; font-size: 16px; border-radius: 10px;}
.modal.otpmodal h4{font-size: 24px; margin: 0px 0px 10px 0px;}
.modal.otpmodal p{font-size: 14px;}


}
@media (max-width: 500px){}
@media (max-width: 440px){
.registercontainer h3{font-size: 18px; line-height: 24px;}


}
@media (max-width: 360px){}

