:root {
      --wbsedcl-blue: #0057b8;
      --wbsedcl-dark: #1b3c6e;
      --input-bg: #C2EEFF;
    }. 

    * {
      box-sizing: border-box;
    }

    body {
     font-family: 'Inter';
      background: url("../images/background-img.jpg") no-repeat center/cover fixed;
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 20px 0;
    }
.left-panel{ padding-left: 150px;}
    /* ---------- Left Panel ---------- */
    .left-panel img {
      
    }
    .left-panel h3 {
      font-size: 1.55rem;
    }

    /* ---------- Login Card ---------- */
    .login-card {
      width: 100%;
      max-width: 558px;
      background: #ffffff;
      border-radius: 10px;
      box-shadow: 0 0 22px rgba(0, 0, 0, 0.25);
      padding: 48px 40px;
    }
    .login-card h4 {
      font-weight: 700;
      margin-bottom: 32px;
    }

    /* ---------- "Login By" Tabs ---------- */
    .login-by-label {
      color: #6c757d;
      font-weight: 600;
      font-size: 0.95rem;
    }
    .login-tabs {
      border-bottom: none !important;
      margin-left: 6px;
    }
    .login-tabs .nav-link {
      border: none;
      background: none;
      color: #353434;
      font-weight: 600;
      padding: 0 14px;
      position: relative;
      font-size: 0.95rem;
    }
    .login-tabs .nav-link.active {
      color: #000;
    }
    .login-tabs .nav-link.active::after {
      content: "";
      position: absolute;
      left: 50%;
      right: 0;
      width: 70%;
      bottom: -6px;
      height: 4px;
      transform: translateX(-50%);
      background: var(--wbsedcl-blue);
      border-radius: 2px;
    }

    /* ---------- Form Controls ---------- */
    .input-group {
      border-radius: 6px;
      overflow: hidden;
    }
    .input-group .input-group-text {
      background: var(--input-bg);
      border: none;
      width: 52px;
      justify-content: center;
      font-size: 1.05rem;
      color: #4f4f4f;
    }
    .form-control {
      background: var(--input-bg) !important;
      border: none !important;
      height: 52px;
      font-size: 0.95rem;
    }
    .form-control:focus {
      box-shadow: none;
    }
    .toggle-eye {
      position: absolute;
      right: 16px;
      top: 14px;
      cursor: pointer;
      color: #6b6b6b;
    }

    /* ---------- Captcha ---------- */
    .captcha-wrapper {
      gap: 10px;
    }
    .captcha-code {
      background: #D0E1F3;
      border-radius: 6px;0
      width: 160px;
      padding: 0 10px;
      line-height: 52px;
      text-align: center;
      font-weight: bold;
      font-size: 1.4rem;
    }
    .captcha-refresh {
      width: 52px;
      height: 52px;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid transparent;
      color: var(--wbsedcl-blue);
      cursor: pointer;
      transition: background 0.15s;
    }
    .captcha-refresh:hover {
      background: #e8f3ff;
    }

    /* ---------- Buttons ---------- */
    .btn-login {
      height: 52px;
      background: var(--wbsedcl-dark);
      color: #ffffff;
      font-size: 1.2rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      border-radius: 6px;
      border: none;
    }
    .btn-login:hover {
      background: #122a4d;
      color:#fff;
    }
    .forgot-link {
      font-size: 0.85rem;
      color:#00599F;
    }
.l-height {
    font-size: 1.25rem;
    line-height: 33px;
}
.fw-normal{font-weight: normal;}
.sign-in{font-weight: bold; font-size:22px; margin-bottom: 30px;}
.fw-semibold{font-size:20px;}
.fa-color{color:#72A2D7;}
.form-control::placeholder {
      color: #72A2D7;
      opacity: 1;
      font-size: 14px;
    }
    /* ---------- Responsive ---------- */
    @media (max-width: 991.98px) {
      .login-card {
        margin-top: 0px;
        padding:20px;
      }
      .left-panel {
        text-align: center;
        padding-left:0;
      }
     .left-panel img { height: 120px;}
     .h5, h5{
    font-size: 1.2rem !important;
}
    }