:root {
     --main-color: #1fbcc3;
     --secondary-color: #ffbd59;
 }

 body {
     font-family: "Poppins", sans-serif;
     background-color: #f8f9fa;
     display: flex;
     min-height: 100vh;
     margin: 0;
 }

 .login-container {
     display: flex;
     width: 100%;
 }

 .login-left {
     flex: 1;
     background-color: var(--main-color);
     color: white;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 2rem;
     background-image: url("https://images.unsplash.com/photo-1554469384-e58fac16e23a?ixlib=rb-4.0.3");
     background-size: cover;
     background-position: center;
     position: relative;
 }

 .login-left::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(31, 188, 195, 0.85);
 }

 .login-left-content {
     position: relative;
     z-index: 1;
     max-width: 500px;
     margin: 0 auto;
 }

 .login-right {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 2rem;
 }

 .login-form {
     max-width: 400px;
     width: 100%;
     background: white;
     padding: 2.5rem;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .logo {
     text-align: center;
     margin-bottom: 2rem;
 }

 .logo img {
     max-height: 60px;
 }

 .form-control {
     height: 45px;
     border-radius: 8px;
     border: 1px solid #e0e0e0;
     padding-left: 15px;
 }

 .form-control:focus {
     border-color: var(--main-color);
     box-shadow: 0 0 0 0.25rem rgba(31, 188, 195, 0.25);
 }

 .btn-login {
     background-color: var(--main-color);
     color: white;
     border: none;
     height: 45px;
     border-radius: 8px;
     font-weight: 500;
     width: 100%;
     transition: all 0.3s;
 }

 .btn-login:hover {
     background-color: #17a2a8;
     transform: translateY(-2px);
 }

 .login-footer {
     text-align: center;
     margin-top: 1.5rem;
     color: #6c757d;
 }

 .login-footer a {
     color: var(--main-color);
     text-decoration: none;
 }

 .input-group-text {
     background-color: white;
     border-right: none;
 }

 .input-group .form-control {
     border-left: none;
 }

 .divider {
     display: flex;
     align-items: center;
     margin: 1.5rem 0;
     color: #6c757d;
 }

 .divider::before,
 .divider::after {
     content: "";
     flex: 1;
     border-bottom: 1px solid #e0e0e0;
 }

 .divider::before {
     margin-right: 1rem;
 }

 .divider::after {
     margin-left: 1rem;
 }

 .social-login {
     display: flex;
     justify-content: center;
     gap: 1rem;
     margin-bottom: 1.5rem;
 }

 .social-btn {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     border: none;
     transition: all 0.3s;
 }

 .social-btn:hover {
     transform: translateY(-3px);
 }

 .facebook {
     background-color: #3b5998;
 }

 .google {
     background-color: #db4437;
 }

 .apple {
     background-color: #000000;
 }

 @media (max-width: 992px) {
     .login-container {
         flex-direction: column;
     }

     .login-left {
         padding: 2rem 1rem;
         text-align: center;
     }

     .login-left-content {
         max-width: 100%;
     }

     .login-right {
         padding: 2rem 1rem;
     }
 }

 @media (max-width: 576px) {
     .login-form {
         padding: 1.5rem;
     }
 }

 @media (max-width: 768px) {
     .login-left {
         display: none;
     }
 }

 /* Reset Password Page */
 .reset-container {
     max-width: 500px;
     width: 100%;
     margin: auto;
     background: white;
     padding: 2.5rem;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .reset-logo {
     text-align: center;
     margin-bottom: 2rem;
 }

 .reset-logo img {
     max-height: 60px;
 }

 .reset-step {
     display: none;
 }

 .reset-step.active {
     display: block;
 }

 .reset-title {
     text-align: center;
     margin-bottom: 1.5rem;
     color: var(--main-color);
 }

 .reset-icon {
     text-align: center;
     font-size: 3rem;
     color: var(--main-color);
     margin-bottom: 1.5rem;
 }

 .form-control {
     height: 45px;
     border-radius: 8px;
     border: 1px solid #e0e0e0;
     padding-left: 15px;
 }

 .form-control:focus {
     border-color: var(--main-color);
     box-shadow: 0 0 0 0.25rem rgba(31, 188, 195, 0.25);
 }

 .btn-reset {
     background-color: var(--main-color);
     color: white;
     border: none;
     height: 45px;
     border-radius: 8px;
     font-weight: 500;
     width: 100%;
     transition: all 0.3s;
 }

 .btn-reset:hover {
     background-color: #17a2a8;
     transform: translateY(-2px);
 }

 .otp-container {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin: 1.5rem 0;
 }

 .otp-input {
     width: 50px;
     height: 60px;
     text-align: center;
     font-size: 1.5rem;
     border-radius: 8px;
     border: 1px solid #e0e0e0;
 }

 .otp-input:focus {
     border-color: var(--main-color);
     box-shadow: 0 0 0 0.25rem rgba(31, 188, 195, 0.25);
 }

 .password-strength {
     height: 5px;
     background: #e0e0e0;
     border-radius: 5px;
     margin-top: 5px;
     overflow: hidden;
 }

 .password-strength-bar {
     height: 100%;
     width: 0%;
     transition: width 0.3s;
 }

 .password-requirements {
     margin-top: 1rem;
     font-size: 0.85rem;
     color: #6c757d;
 }

 .requirement {
     margin-bottom: 5px;
 }

 .requirement.valid {
     color: var(--main-color);
 }

 .requirement.valid::before {
     content: "✓ ";
 }

 .reset-footer {
     text-align: center;
     margin-top: 1.5rem;
     color: #6c757d;
 }

 .reset-footer a {
     color: var(--main-color);
     text-decoration: none;
 }

 @media (max-width: 576px) {
     .reset-container {
         padding: 1.5rem;
         margin: 1rem;
     }

     .otp-input {
         width: 40px;
         height: 50px;
         font-size: 1.2rem;
     }
 }

 #preloader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(145deg, #1fbcc3, #ffffff);
     background-size: 200% 200%;
     animation: animateBg 8s ease-in-out infinite;
     z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     transition: opacity 0.6s ease, visibility 0.6s ease;
 }

 @keyframes animateBg {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 #preloader .preloader-content i {
     font-size: 3rem;
     color: white;
     animation: pulse 1.8s infinite ease-in-out;
 }

 #preloader p {
     color: #fff;
     font-size: 1.2rem;
     margin-top: 0.5rem;
     font-weight: 500;
     letter-spacing: 0.5px;
 }
 #preloader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}