body { font-family: "Poppins", sans-serif;font-size: 14px;color: #202020;}
 h1, .h1, h2, .h2, h3, .h3 {
     margin-top: 20px;
     margin-bottom: 10px;
 }

 .login-section {background: #F4F7F7; min-height: 100vh;display: flex; align-items: center;}
.feature-icon {width: 36px;height: 36px;color: #FFAB2A; font-size: 18px; margin-bottom: 10px;  margin-top: 0;}
.login-card {border-radius: 32px;box-shadow: 0px 8px 32px 0px #0000000F; padding: 40px;max-width: 457px;}
.form-control::-webkit-input-placeholder { color: #94A3B8;}
.form-control::-moz-placeholder { color: #94A3B8;}
.form-control:-ms-input-placeholder { color: #94A3B8;}
.form-control::-ms-input-placeholder {  color: #94A3B8;}
.title-sign-in {font-weight: 500;font-size: 36px;line-height: 48px; letter-spacing: 0px;font-family: "Poppins", sans-serif; color: #202020;}
.My-input { border: 1.5px solid #E2E8F0;background: #fff;gap: 8px; opacity: 1; border-radius: 8px; display: flex; padding: 12px 16px; font-weight: 400; font-size: 14px;line-height: 22px;letter-spacing: 1%; color: #334155;}
.form-control:focus {outline: none; border-color: #419c73; box-shadow: none;}
.My-label {font-weight: 400; font-size: 14px;line-height: 22px; letter-spacing: 1%;  color: #1E293B;}
.brand-box {display: inline-flex; align-items: center;gap: 10px; font-size: 26px;font-weight: 700;}
.btn-login {background: #1A4D3A;border-radius: 9999px;padding: 12px 14px;font-weight: 600;border-color: #1A4D3A;display: flex; gap: 8px; font-family: 'Poppins', sans-serif; justify-content: center;align-items: center;}
.btn-login:hover { background: #1b3f30 !important; color: #fff;}
.text-forgot { font-family: 'Poppins', sans-serif; font-weight: 500;font-style: normal; font-size: 14px;  line-height: 22px; letter-spacing: 1.25%; text-align: right;  color: #3C9AFB;}
.login-left-card {  max-width: 420px;}
.title-h2 { font-weight: 500;font-size: 36px;line-height: 48px; letter-spacing: 0px; color: #202020;font-family: "Poppins", sans-serif;}
.feature-content h6 { font-weight: 500; font-size: 14px; line-height: 100%; letter-spacing: 0px;font-family: "Poppins", sans-serif;color: #202020;}
.feature-content p {font-weight: 400; font-size: 12px;line-height: 17px;letter-spacing: 0px;color: #84818A;}
.do-text {font-weight: 400; font-size: 14px;line-height: 24px;letter-spacing: 0px; color: #47464A;}
 /* checkbox */
.custom-checkbox {position: relative;cursor: pointer;display: flex;gap: 10px;justify-content: space-between;align-items: center;}
.check-box-row {display: flex;gap: 10px;}
.custom-checkbox input {position: absolute; opacity: 0;cursor: pointer;}
.checkmark { width: 20px; height: 20px; border: 1px solid #7F56D9; border-radius: 6px; background-color: #F9F5FF; display: inline-block; position: relative;}
.checkmark:after {content: "";position: absolute; display: none;left: 6px; top: 3px;width: 6px;height: 10px;border: solid #7F56D9; border-width: 0 2px 2px 0; transform: rotate(45deg);}
.custom-checkbox input:checked + .checkmark:after {display: block;}
.password-box{ position:relative; }
.password-box .togglerow_password{ position:absolute; right:12px;top:50%;transform:translateY(-50%);cursor:pointer; color:#475569;}
.password-box .togglerow_password .icon-password {max-width: 20px;height: 20px;}
.signin-link{font-size:14px;margin-top:18px;}
.signin-link a{ text-decoration:none;font-weight:500;}
.phone-input { width: 100%;position: relative;}

 @media (min-width: 1400px) {
   .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
     max-width: 1170px !important;
   }
 }

/* Responsive Styles */
@media (max-width: 992px) {
  .login-section .row { flex-direction: column-reverse;gap: 0px;}
  .feature-content p {font-size: 13px;}
  .title-h2 {font-size: 24px;}
  .login-left-card {display: none;}
  .login-card {padding: 24px 32px;}
  .login-brand { display: block !important; }
  .login-brand .brand-box img {max-width: 208px;}
}

@media (max-width: 767px) {
  .login-left-card {padding: 20px 15px;max-width: 100%;}
  .feature-icon img { width: 30px;}
  .My-input { font-size: 14px;}
  .btn-login { font-size: 14px;padding: 10px;}
  .login-card {  padding: 25px 18px; border-radius: 15px; }
}
 @media (max-width: 480px) {

   .login-card { padding: 30px 20px; }
   .title-sign-in {font-size: 24px;}
   .title-h2 {font-size: 24px;}
 }
 @media (max-width:350px){

   .login-card{
     padding:20px 15px;
   }

   .title-sign-in h2{
     font-size:20px;
   }
   .title-h2 h2{
     font-size:20px;
   }

 }