.signup-container{display:flex;height:100vh}.signup-container .signup-left{flex:.35;display:flex;justify-content:center;align-items:center;background:#efefef;padding:40px;position:relative}.signup-container .signup-left:after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;background-color:#3c3c3c}.signup-container .signup-left .signup-form{text-align:center;color:#000;width:100%;max-width:350px;margin:0 auto}.signup-container .signup-left .signup-form .or_text{display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;color:#7b7b7b;column-gap:18px;margin-top:18px;margin-bottom:5px}.signup-container .signup-left .signup-form .or_text span:first-child,.signup-container .signup-left .signup-form .or_text span:nth-child(3){display:block;width:100%;height:1px;background-color:#bbb}.signup-container .signup-left .signup-form h2{font-size:26px;margin-bottom:20px;font-weight:700}.signup-container .signup-left .signup-form form{display:flex;flex-direction:column;align-items:center}.signup-container .signup-left .signup-form form .input-container{position:relative;margin-bottom:20px;margin-top:10px;width:100%}.signup-container .signup-left .signup-form form .input-container input{font-size:20px;width:100%;border:none;border-bottom:2px solid #000;padding:5px 0;background-color:transparent!important;outline:none}.signup-container .signup-left .signup-form form .input-container .label{position:absolute;top:0;left:0;color:#000;transition:all .3s ease;pointer-events:none}.signup-container .signup-left .signup-form form .input-container .underline{position:absolute;bottom:0;left:0;height:2px;width:100%;background-color:#333;transform:scaleX(0);transition:all .3s ease}.signup-container .signup-left .signup-form form .input-container input:focus~.label,.signup-container .signup-left .signup-form form .input-container input:valid~.label{top:-20px;font-size:16px;color:#000}.signup-container .signup-left .signup-form form .input-container input:focus~.underline,.signup-container .signup-left .signup-form form .input-container input:valid~.underline{transform:scaleX(1)}.signup-container .signup-left .signup-form form .input-container input[type=email]:focus~.label,.signup-container .signup-left .signup-form form .input-container input[type=email]:valid~.label{top:-20px;font-size:16px;color:#000}.signup-container .signup-left .signup-form form .input-container input[type=email]:focus~.underline,.signup-container .signup-left .signup-form form .input-container input[type=email]:valid~.underline{transform:scaleX(1)}.signup-container .signup-left .signup-form form input:-webkit-autofill,.signup-container .signup-left .signup-form form input:-webkit-autofill:active,.signup-container .signup-left .signup-form form input:-webkit-autofill:focus,.signup-container .signup-left .signup-form form input:-webkit-autofill:hover{-webkit-background-clip:text;-webkit-text-fill-color:#000;font-size:20px}.signup-container .signup-left .signup-form form input:-webkit-autofill~.label{top:-20px;font-size:16px;color:#000}.signup-container .signup-left .signup-form form input:-webkit-autofill~.underline{transform:scaleX(1)}.signup-container .signup-left .signup-form form .input-field{position:relative;width:100%;margin-bottom:20px}.signup-container .signup-left .signup-form form .input-field input{width:100%;padding:20px;background:rgba(0,0,0,.6);border:1px solid #ffedab;border-radius:8px;font-size:16px;color:#000;outline:none;box-shadow:0 0 5px 2px rgba(255,237,171,.5);transition:box-shadow .3s ease,background-color .3s ease}.signup-container .signup-left .signup-form form .input-field input:focus{box-shadow:0 0 5px 2px rgba(255,237,171,.8);background-color:rgba(0,0,0,.8)}.signup-container .signup-left .signup-form form .input-field .country-flag{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.signup-container .signup-left .signup-form form .password-field{position:relative}.signup-container .signup-left .signup-form form .password-field .password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer}.signup-container .signup-left .signup-form form .password-field .password-toggle svg{width:20px;height:20px;color:#000;transition:color .3s ease}.signup-container .signup-left .signup-form form .password-field .password-toggle svg:hover{color:#1b72ac}.signup-container .signup-left .signup-form form .signup-btn{width:100%;padding:15px;background-color:#000;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;transition:background-color .3s ease,box-shadow .3s ease;box-shadow:0 4px 8px rgba(0,0,0,.2)}.signup-container .signup-left .signup-form form .signup-btn:hover{background-color:#1b72ac;box-shadow:0 6px 12px rgba(0,0,0,.3)}.signup-container .signup-left .signup-form .remember-me-container{display:flex;align-items:center;justify-content:flex-start;position:relative;width:100%;margin-bottom:20px}.signup-container .signup-left .signup-form .remember-me-container .ui-checkbox{--primary-color:#1677ff;--secondary-color:#fff;--primary-hover-color:#4096ff;--checkbox-diameter:20px;--checkbox-border-radius:5px;--checkbox-border-color:#d9d9d9;--checkbox-border-width:1px;--checkbox-border-style:solid;--checkmark-size:1.2;margin-right:3%}.signup-container .signup-left .signup-form .remember-me-container .ui-checkbox,.signup-container .signup-left .signup-form .remember-me-container .ui-checkbox *,.signup-container .signup-left .signup-form .remember-me-container .ui-checkbox :after,.signup-container .signup-left .signup-form .remember-me-container .ui-checkbox :before{-webkit-box-sizing:border-box;box-sizing:border-box}.signup-container .signup-left .signup-form .remember-me-container .ui-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:var(--checkbox-diameter);height:var(--checkbox-diameter);border-radius:var(--checkbox-border-radius);background:var(--secondary-color);border:var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s;cursor:pointer;position:relative}.signup-container .signup-left .signup-form .remember-me-container .ui-checkbox:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 0 calc(var(--checkbox-diameter)/2.5) var(--primary-color);box-shadow:0 0 0 calc(var(--checkbox-diameter)/2.5) var(--primary-color);border-radius:inherit;opacity:0;-webkit-transition:all .5s cubic-bezier(.12,.4,.29,1.46);-o-transition:all .5s cubic-bezier(.12,.4,.29,1.46);transition:all .5s cubic-bezier(.12,.4,.29,1.46)}.signup-container .signup-left .signup-form .remember-me-container .ui-checkbox:before{top:40%;left:50%;content:"";position:absolute;width:4px;height:7px;border-right:2px solid var(--secondary-color);border-bottom:2px solid var(--secondary-color);-webkit-transform:translate(-50%,-50%) rotate(45deg) scale(0);-ms-transform:translate(-50%,-50%) rotate(45deg) scale(0);transform:translate(-50%,-50%) rotate(45deg) scale(0);opacity:0;-webkit-transition:all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s;-o-transition:all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s;transition:all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s}.signup-container .signup-left .signup-form .remember-me-container .ui-checkbox:hover{border-color:var(--primary-color)}.signup-container .signup-left .signup-form .remember-me-container .ui-checkbox:checked{background:var(--primary-color);border-color:transparent}.signup-container .signup-left .signup-form .remember-me-container .ui-checkbox:checked:before{opacity:1;-webkit-transform:translate(-50%,-50%) rotate(45deg) scale(var(--checkmark-size));-ms-transform:translate(-50%,-50%) rotate(45deg) scale(var(--checkmark-size));transform:translate(-50%,-50%) rotate(45deg) scale(var(--checkmark-size));-webkit-transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;-o-transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s;transition:all .2s cubic-bezier(.12,.4,.29,1.46) .1s}.signup-container .signup-left .signup-form .remember-me-container .ui-checkbox:active:not(:checked):after{-webkit-transition:none;-o-transition:none;-webkit-box-shadow:none;box-shadow:none;transition:none;opacity:1}.signup-container .signup-left .signup-form .remember-me-container span{font-weight:400;font-size:12px;line-height:14.52px}.signup-container .signup-left .signup-form .google-signup{display:flex;align-items:center;justify-content:center;width:100%;padding:15px;background-color:#fff;color:#7b7b7b;border:none;border-radius:8px;font-size:15px;font-weight:400;cursor:pointer;transition:background-color .3s ease,box-shadow .3s ease;box-shadow:0 4px 8px rgba(0,0,0,.2)}.signup-container .signup-left .signup-form .google-signup:hover{background-color:#d2d2d2;color:#fff;box-shadow:0 6px 12px rgba(0,0,0,.3)}.signup-container .signup-left .signup-form .google-signup img{margin-right:3%}.signup-container .signup-left .signup-form .login-link{margin-top:15px;font-size:14px}.signup-container .signup-left .signup-form .login-link a{color:#000;text-decoration:underline;cursor:pointer}.signup-container .signup-right{flex:.65;display:flex;justify-content:center;align-items:center;color:#000;background-image:url(https://i.postimg.cc/ht84BpZr/signup.png);background-size:cover;background-position:50%;background-attachment:fixed}.signup-container .signup-right .signup-info{text-align:center;max-width:800px;margin:0 auto}.signup-container .signup-right .signup-info h2{font-size:36px;margin-bottom:10px;font-weight:700;letter-spacing:1px}.signup-container .signup-right .signup-info h3{font-size:36px;margin-bottom:15px;line-height:1.5;font-weight:700}.signup-container .signup-right .signup-info h3 span{color:#1b72ac;font-weight:700}.signup-container .signup-right .signup-info .signup-info-p{font-size:28px;font-weight:600}.signup-container .signup-right .signup-info p{font-size:24px;margin-bottom:10px;line-height:1.6;font-weight:600}.signup-container .otp-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-image:url(https://i.postimg.cc/g0Yzk8fP/otp-background.png);background-repeat:no-repeat;background-size:cover;display:flex;justify-content:center;align-items:center;z-index:1000}.signup-container .otp-modal .otp-container{background-color:#efefef;border-radius:10px;padding:40px;width:400px;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.4)}.signup-container .otp-modal .otp-container h2{font-size:24px;color:#000;font-weight:700;margin-bottom:10px}.signup-container .otp-modal .otp-container p{font-size:14px;color:#000;margin-bottom:20px}.signup-container .otp-modal .otp-container .otp-inputs{display:flex;justify-content:space-between;margin-bottom:20px}.signup-container .otp-modal .otp-container .otp-inputs input{width:45px;height:45px;font-size:20px;text-align:center;border:1px solid #1b72ac;border-radius:8px;background-color:transparent;color:#000;box-shadow:0 4px 10px hsla(0,0%,100%,.2)}.signup-container .otp-modal .otp-container .otp-inputs input:focus{outline:none;box-shadow:0 4px 10px hsla(0,0%,100%,.4)}.signup-container .otp-modal .otp-container .verify-btn{background-color:#000;color:#fff;padding:10px 20px;border:none;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;transition:background-color .3s ease,box-shadow .3s ease;box-shadow:0 4px 5px hsla(0,0%,100%,.1)}.signup-container .otp-modal .otp-container .verify-btn:hover{background-color:#1b72ac;box-shadow:0 6px 15px hsla(0,0%,100%,.2)}.signup-container .otp-modal .otp-container .resend-otp{margin-top:10px;font-size:14px;color:#ffedab;text-decoration:underline;cursor:pointer}.signup-container .otp-modal .otp-container .resend-otp:hover{color:#e6b800}@media(max-width:768px){.signup-container{flex-direction:column}.signup-container .signup-left{border-top-left-radius:50px;border-top-right-radius:50px;height:80%;background-color:#fff;padding:30px 20px;z-index:2;position:absolute;top:46%;width:100%}.signup-container .signup-right{display:flex;justify-content:center;align-items:flex-start;height:50%;flex:none;padding:40px 20px 70px}.signup-container .signup-form .input-field{width:80%;max-width:300px;margin-bottom:15px;height:20%}.signup-container .signup-form .input-field input{width:80%;padding:10px;font-size:14px}.signup-container .signup-form .signup-btn{width:80%;padding:12px}.signup-container .signup-info h2{font-size:16px}.signup-container .signup-info h3{font-size:12px}.signup-container .signup-info p{font-size:10px}}