:root {
--primary-color:#4f1bc5;
--secondary-color:#fbbf24;
--accent-color: #fbbf24;
--text-color: #1f2937;
--border-color: #e5e7eb;
--bg-light: #f3f4f6;
--bg-dark: #111827;
--gradient: linear-gradient(75deg, #4f1bc5, #7b17c5);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
--btn-bg:#5a1ac524;
--text-white:#fff;
--bg-danger-light:#dc354526;
--bg-danger:#dc3545;
--text-green:#0f5132;
--black-transprant:#00000030;
--text-white-light:#ffffff38;
}
.theme-blue {
--primary-color: #1961ac;
--secondary-color:#d8e024;
--accent-color:#d8e024;
--text-color: #1f2937;
--border-color: #e5e7eb;
--bg-light: #f3f4f6;
--bg-dark: #111827;
--btn-bg:#1961ac36;
--gradient: linear-gradient(75deg, #1961ac, #4c8eef);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;min-height: 100vh;background-image: url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1920&q=80');background-size: cover;background-position: center;background-repeat: no-repeat;color: var(--text-color);line-height: 1.6;flex-wrap:wrap;}
img{max-width:100%;}
.login-container {min-height: 100vh;display: flex;align-items: center;justify-content: center;padding: 2rem;background:var(--gradient);backdrop-filter: blur(10px);flex-wrap:wrap;}
.login-form {width: 100%;max-width: 400px;background: rgba(255, 255, 255, 0.95);padding: 2.5rem;border-radius: 20px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);animation: formSlideUp 0.5s ease forwards;}
.reg-form {width: 100%;max-width:800px;background: rgba(255, 255, 255, 0.95);padding: 2.5rem;border-radius: 20px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);animation: formSlideUp 0.5s ease forwards;}
@keyframes formSlideUp {from {opacity: 0;transform: translateY(20px);}
to {opacity: 1;transform: translateY(0);}
    
}
h1 {font-size:30px;font-weight:normal;color:var(--primary-color);margin-bottom: 2rem;text-align: center;line-height: 1.3;}
.form-group {margin-bottom:15px;position: relative;}
.password-group {position: relative;}
.form-control {width: 100%;padding:0.60rem 1rem;font-size: 1rem;border: 2px solid #e1e1e1;border-radius: 10px;transition: all 0.3s ease;font-family: inherit;}
input:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);}
textarea {width: 100%;padding: 0.75rem 1rem;font-size: 1rem;border: 2px solid #e1e1e1;border-radius: 10px;transition: all 0.3s ease;font-family: inherit;}
textarea:focus {outline: none;border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);}
.toggle-password {position: absolute;right: 1rem;top: 50%;transform: translateY(-50%);background: none;border: none;cursor: pointer;padding: 0.25rem;color: #666;display: flex;align-items: center;justify-content: center;transition: color 0.3s ease;}
.toggle-password:hover {color: var(--primary-color);}
.form-footer {display: flex;justify-content: flex-end;margin-bottom: 1.5rem;}
.forgot-password {color: var(--primary-color);text-decoration: none;font-size: 0.9rem;font-weight: 500;transition: all 0.3s ease;}
.forgot-password:hover {text-decoration: underline;opacity: 0.8;}
.login-btn {width: 100%;padding: 0.75rem;background: var(--gradient);color: white;border: none;border-radius: 10px;font-size: 1rem;font-weight: 600;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 4px 15px rgba(44, 62, 80, 0.2);}
.login-btn:hover {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(44, 62, 80, 0.3);}
.passwodbox {position: relative;}
.passwodbox .input-group-icons {position: absolute;top:12px;right: 15px;}button.login-with-otp {border: 0;padding: 0;color: #0d6efd;font-size: 14px;}
.upload-container {background: white;padding: 20px;border-radius: 10px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);display: flex;align-items: center;gap: 20px;}
div#image-preview img {max-width: 130px;margin-top: 10px;border-radius: 10px;overflow: hidden;border: 3px solid #fff;box-shadow: 0 0 10px #00000080;}
.sublabel {position: absolute;font-size: 12px;right: 8px;top: 39px;text-decoration: none;}
.input-group-icons.sublabel2 {position: absolute;right: 10px;top:10px;display: flex;align-items: center;gap: 10px;}
small#copyMessage {position: absolute;right: 0;font-size: 12px;}

.auth-footer {width: 100%;color: #fff;text-align: center;margin-top: 50px;}
.number-91{position: relative;}
.number-91 .form-control {padding-left:50px;}
.number-91 span {position: absolute;top: 11px;left: 11px;}
.number-91 span b {font-weight: normal;}
input.otp-input {padding: 0;height: 45px; width:40px;}



@media (max-width:359px) {
.login-form {padding:1rem;}
h1 {font-size: 1.5rem;}
a.forgote {font-size: 13px;}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
input[type="number"] {-moz-appearance: textfield;}
img.logo {max-width: 250px;}
}

@media screen and (min-width:360px) and (max-width:767px){
 .login-form {padding:2rem;}   
}