body { font-family: "Poppins", sans-serif;font-size: 14px;color: #202020;}
    .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 !important;background: #fff !important;gap: 8px !important; opacity: 1 !important; border-radius: 8px !important; display: flex !important; padding: 12px 16px !important; font-weight: 400 !important; font-size: 14px !important;line-height: 22px !important;letter-spacing: 1%!important; color: #334155 !important;width: 100% !important;height: 100% !important;}
    .My-input:focus {outline: none; border-color: #419c73 !important; 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 !important;
    padding: 12px 14px !important;
    font-weight: 600 !important;
    border-color: #1A4D3A !important;
    display: flex !important;
    gap: 8px !important;
    font-family: 'Poppins', sans-serif !important;
    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;}
     .form-group.has-error .help-block-error {
        color: #dd4b39;
    }

    p.help-block.help-block-error {

        color: #dd4b39;
    }

    .text-end {
        text-align: end;
    }

    /* Popup container*/
    .popup {
        position: relative;
        display: inline-block;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        color: black;
        height: 15px;
        width: 15px;
        background-color: #bbb;
        border-radius: 50%;
        text-align: center;
        font-weight: bold;
    }
    /* The actual popup */
    .popup .popuptext {
        visibility: hidden;
        width: 275px;
        background-color: #555;
        color: #fff;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 30%;
        margin-left: -80px;
        font-weight: normal;
    }

    /* Popup arrow */
    .popup .popuptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    /* Toggle this class - hide and show the popup */
    .popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
    }

    /* Add animation (fade in the popup) */
    @-webkit-keyframes fadeIn {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    @keyframes fadeIn {
        from {opacity: 0;}
        to {opacity:1 ;}
    }

    .kv-scorebar { position: relative !important; width: 100% !important;}
    .kv-meter{width: 100%;display:inline-block;}

.remember{position: relative; top: -5px; margin-left: 5px; color: #333333;font-weight: 400; font-size: 14px;}


/* checkbox */
.custom-checkbox { position: relative;cursor: pointer; display: inline-block; width: 100%;}
.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 .icon-password {max-width: 20px;height: 20px;margin-top: -30px;}
.signin-link{font-size:14px;margin-top:18px;}
.signin-link a{ text-decoration:none;font-weight:500;}
.phone-input { width: 100%;position: relative;}
.password-box{ position:relative; }
.password-box .My-input {padding-right: 40px !important;}
.password-box .togglerow_password { color: #475569; position: absolute;right: 12px; top: 39px;transform: translateY(-50%);cursor: pointer;display: flex; align-items: center;}
 .icon-password{ width: 20px; height: 20px;}
 .eye{ display: none;}
 .eye-slash{ display: inline;}
 .togglerow_password:hover{ opacity: 0.7;}
.iti {display: flex !important;}
.iti__flag-container { position: relative !important; top: 0;bottom: 0; right: 0;padding: 0 !important;}
.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {right: auto; left: 1px !important;}
.iti input, .iti input[type=text], .iti input[type=tel] {border-radius: 0px 8px 8px 0px !important;border-left: transparent !important;}
.iti__selected-flag {z-index: 1;position: relative;display: flex;align-items: center;height: 100%;padding: 0 6px 0 8px;border-radius: 8px 0px 0px 8px !important;border: 1.5px solid #E2E8F0 !important;}
.iti input, .iti input[type=text], .iti input[type=tel]:focus {border-color: #E2E8F0 !important;}
.responsive_logo {
    display: none;
}

/* 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;}
		.responsive_logo {
			  display: block;
			margin: 0 auto; /* center align */
		}
}

    @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; }
		 .responsive_logo {
			  display: block;
			margin: 0 auto; /* center align */
		}
}
    @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;
        }

}


.btn-continue {
    background: #FFFFFF;
    border: 1px solid #1A4D3A !important;
    width: 100%;
    color: #057A51;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: 1.5%;
    text-align: center !important;
    font-family: "Poppins", sans-serif !important;
    border-radius: 9999px !important;
    padding: 12px 14px !important;
    gap: 8px;
    display: flex !important;
    justify-content: center;
}
.btn-continue:hover, .btn-continue:focus {
    color: #fff !important;
    background: #1b3f30 !important;
    border-color: #1b3f30 !important;
    box-shadow: none;
}