* {
   margin: 0;
   padding: 0;
 }

 :root {
   --dynamic-color: #24b96b;
   --dynamic-text: #24b96b;
 }

 .newupdateloginmainpage {
   background: url(../images/loginbg.jpg) no-repeat center center;
   background-size: cover;
   width: 100%;
   height: 100dvh;display: grid;place-items: center;
 }

 /* .mainloginform {
   margin: auto;
   margin-top: 100px;
 } */

 .mainlogo {
   text-align: center;
 }

 .otp-container {
   background: #fff;
   padding: 30px;
   border-radius: 10px;
   box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15);
   width: 350px;
   margin: auto;

 }

 .otp-container h2 {
   margin-bottom: 10px;
   font-size: 20px;
   font-weight: 600;
   text-align: center;
 }

 .otp-container p {
   font-size: 13px;
   color: #969696;
   margin-bottom: 20px;
   text-align: center;
   font-weight: 500;
 }

 .otp-inputs {
   display: flex;
   justify-content: center;gap: 8px;
   margin-bottom: 15px;
 }

 .otp-inputs input {
   width: 45px;
   height: 50px;
   font-size: 24px;
   text-align: center;
   border: none;
   border-radius: 6px;
   outline: none;
   transition: border-color 0.2s;
   background: #f2f2f2;
 }

 .otp-inputs input:focus {
   border-color: var(--dynamic-color);
   box-shadow: 0 0 4px var(--dynamic-color);
 }

 .progress-bar_otp {
   width: 100%;
   height: 10px;
   border-radius: 5px;
   background: #ddd;
   margin: 15px 0;
   position: relative;
 }

 .progress-fill {
   width: 0%;
   height: 100%;
   background: var(--dynamic-color);
   border-radius: 5px;
   transition: width 0.3s ease;
   position: relative;
 }

 .progress-fill::after {
   content: "";
   width: 20px;
   height: 20px;
   position: absolute;
   background: #24b96b;
   right: -10px;
   /* keeps the dot at the end */
   top: -5px;
   border-radius: 50%;
   border: 3px solid #dcffed;
   display: none;
   /* hidden by default */
 }

 .progress-fill.active::after {
   display: block;
   /* show only when progress starts */
 }


 .resend {
   font-size: 13px;
   color: #333;
   margin-top: 10px;
 }

 .resend button {
   margin: 8px 5px 0;
   border: 1px solid #ccc;
   padding: 8px 12px;
   border-radius: 6px;
   background: #fff;
   cursor: pointer;
   font-size: 13px;
 }

 .resend button:hover {
   background: #f3f3f3;
 }

 .whatsapp {
   color: #25d366;
   border-color: #25d366;
 }

 .sms {
   color: var(--dynamic-color);
   border-color: var(--dynamic-color);
 }

 .otpmianbtn {
   border: none;
   background: #24b96b;
   color: #fff;
   padding: 5px 10px;
   border-radius: 5px;
 }

 .bottompara {
   font-size: 22px;
   text-align: center;
 }

 .login-loading-section {
   width: 100%;
   height: 100dvh;
   display: grid;
   place-items: center;
 }

 .login-loading-inner {
   text-align: center;
   color: #fff;
 }

 .login-loading-inner p {
   margin-top: 18px;
   font-size: 16px;
   font-weight: 500;
 }

 .login-spinner {
   width: 48px;
   height: 48px;
   margin: 0 auto;
   border: 4px solid rgba(255, 255, 255, 0.35);
   border-top-color: #fff;
   border-radius: 50%;
   animation: login-spin 0.8s linear infinite;
 }

 @keyframes login-spin {
   to {
     transform: rotate(360deg);
   }
 }

 .otp-section {
   width: 100%;
 }

 .login-field .form-label {
   font-size: 13px;
   font-weight: 600;
   color: #333;
   margin-bottom: 6px;
 }

 .login-input {
   height: 44px;
   border: 1px solid #e5e5e5;
   border-radius: 6px;
   background: #f2f2f2;
   font-size: 14px;
   box-shadow: none !important;
 }

 .login-input:focus {
   border-color: var(--dynamic-color);
   background: #fff;
 }

 .otp-container .otpmianbtn {
   width: 100%;
   padding: 10px 14px;
   font-size: 15px;
   font-weight: 600;
 }