:root {
      --brand: #1c3f77;
      --brand-dark: #162c4d;
      --brand-soft: #eef3fa;
      --text-dark: #124074;
      --text-muted: #434444;
      --surface: #ffffff;
      --body-bg: #f4f6f9;
      --border-soft: #d7e0ea;
    }

 
    .demo-card {
      width: 100%;
      max-width: 720px;
      border: 0;
      border: 1px solid #e5ebf2;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 12px 28px rgba(21, 40, 69, 0.08);
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border: 1px solid #d6e2f0;
      border-radius: 8px;
      background: var(--brand-soft);
      color: var(--brand);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.2px;
      text-transform: uppercase;
    }

    .hero-title {
      color: var(--brand);
      font-weight: 700;
      letter-spacing: 0;
    }

    .hero-subtitle {
      color: var(--text-muted);
      max-width: 560px;
      margin: 0 auto;
    }

    .btn-brand {
      background-color: var(--brand);
      border-color: var(--brand);
      color: #fff;
      font-weight: 600;
      border-radius: 8px;
      padding: 10px 20px;
    }

    .btn-brand:hover {
      background-color: var(--brand-dark);
      border-color: var(--brand-dark);
      color: #fff;
    }

    .btn-outline-brand {
      color: var(--brand);
      border-color: #9fb0c7;
      border-radius: 8px;
      padding: 10px 20px;
      font-weight: 600;
      background: #fff;
    }

    .btn-outline-brand:hover {
      color: var(--brand-dark);
      border-color: #889db8;
      background: #f7f9fc;
    }

    .modal-content {
      border: 0;
      border: 1px solid #e6edf5;
      border-radius: 12px;
      box-shadow: 0 14px 34px rgba(20, 39, 67, 0.12);
    }

    .modal-header {
      border-bottom: 1px solid #edf1f5;
    }

    .form-label {
      font-weight: 600;
      color: var(--text-dark);
      margin-bottom: 8px;
    }

    .form-control,
    .form-select {
      min-height: 46px;
      border-radius: 8px;
      border-color: var(--border-soft);
    }

    .form-control:focus,
    .form-select:focus {
      border-color: #8fa6c4;
      box-shadow: 0 0 0 0.2rem rgba(31, 60, 104, 0.12);
    }

    .section-title {
      color: var(--brand);
      font-weight: 700;
      margin-bottom: 4px;
    }

    .signup-modal .modal-body {
      padding: 0;
    }

    .signup-modal .modal-content {
      position: relative;
      overflow: hidden;
    }

    .signup-subtitle {
      color: var(--text-muted);
      font-size: 0.93rem;
      margin-bottom: 1.25rem;
    }

    .form-block {
      margin-bottom: 1.25rem;
    }

    .signup-split {
        border-radius: 0 0 10px 10px;
        overflow: hidden;
        min-height: 680px;
        width: 100%;
        margin: 0;
    }

    .signup-image-col {
      min-height: 100%;
      background: linear-gradient(180deg, rgba(21, 48, 83, 0.58), rgba(21, 48, 83, 0.78)),
        url("../images/bb_signup1.png");
      background-size: cover;
      background-position: center top;
      position: relative;
      display: flex;
      align-items: flex-end;
      padding: 48px;
    }

    .signup-image-caption {
      color: #fff;
      font-weight: 600;
      font-size: 1rem;
      line-height: 1.45;
      max-width: 280px;
    }

    .signup-form-col {
      min-height: 680px;
      padding: 48px;
      background: #fff;
    }

    .signup-close-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 5;
    }

    .signup-main-title {
      text-align: center;
      font-weight: 700;
      color: #124074;
      margin-bottom: 2px;
    }

    .signup-main-subtitle {
      text-align: center;
      color: #434444;
      font-size: 0.95rem;
      margin-bottom: 22px;
    }

    .signup-field-wrap {
      position: relative;
      margin-bottom: 14px;
    }

    .signup-field-wrap .bi {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: #9aa7b7;
      font-size: 1rem;
      z-index: 2;
      pointer-events: none;
    }

    .signup-field {
      padding-left: 42px;
      height: 44px;
      border: 1px solid #e2e7ee;
      border-radius: 8px;
      font-size: 0.95rem;
    }
select.form-control.signup-field{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding-right:50px !important;
    cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 18px center;
    background-size:16px;
}
    .signup-phone-group {
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: 8px;
      margin-bottom: 14px;
    }

    .country-code {
      height: 44px;
      border: 1px solid #e2e7ee;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #5e6f83;
      background: #fff;
      font-size: 0.92rem;
    }

    .signup-password-toggle {
      position: absolute;
      right: 12px;
      left: auto;
      cursor: pointer;
      pointer-events: auto;
    }

    .signup-submit-btn {
      width: 100%;
      margin-top: 6px;
      height: 46px;
      border-radius: 10px;
      font-size: 1.05rem;
    }

    .signup-terms {
      color: #707d8f;
      font-size: 0.82rem;
      text-align: center;
      margin: 14px 0 10px;
      line-height: 1.4;
    }

    .signup-terms a {
      color: #364c69;
      font-weight: 600;
      text-decoration: underline;
    }

    .signup-divider {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #8a96a7;
      font-size: 0.92rem;
      margin: 10px 0 14px;
    }

    .signup-divider::before,
    .signup-divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: #dfe5ec;
    }

    .google-btn {
      width: 100%;
      border: 1px solid #d9e2ec;
      border-radius: 10px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: #2b3a50;
      background: #fff;
      font-weight: 600;
    }

    .google-btn .bi-google {
      color: #4285f4;
    }

    .signup-login-text {
      text-align: center;
      margin-top: 14px;
      color: #556579;
    }

    .signup-login-text button {
      border: 0;
      background: transparent;
      color: #0b6e9b;
      font-weight: 700;
      padding: 0;
    }

    .otp-box-group {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin: 14px 0 8px;
    }

    .otp-box {
      width: 100%;
      max-width: 62px;
      height: 62px;
      margin: 0 auto;
      border: 1px solid #cfd9e6;
      border-radius: 10px;
      text-align: center;
      font-size: 1.2rem;
      font-weight: 700;
      color: #203854;
      outline: none;
      transition: all 0.2s ease;
    }

    .otp-box:focus {
      border-color: #8fa6c4;
      box-shadow: 0 0 0 0.2rem rgba(31, 60, 104, 0.14);
    }

    .otp-helper {
      display: block;
      text-align: center;
      margin-top: 6px;
    }

    .login-modal .modal-body {
      padding: 0;
    }

    .login-modal .modal-content {
      position: relative;
      overflow: hidden;
    }

    .login-split {
      overflow: hidden;
      min-height: 560px;
      border-radius: 0 0 10px 10px;
      width: 100%;
    }

    .login-image-col {
      min-height: 560px;
      background: linear-gradient(180deg, rgba(21, 48, 83, 0.55), rgba(21, 48, 83, 0.82)),
        url("../images/bb_signup1.png");
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: flex-end;
      padding: 48px;
      border-radius: 20px 0 0 20px;
    }

    .login-form-col {
      min-height: 560px;
      padding: 48px;
      background: #fff;
      
    }

    .login-main-title {
      text-align: center;
      font-weight: 700;
      color: #124074;
      margin-bottom: 2px;
    }

    .login-main-subtitle {
      text-align: center;
      color: #6d7888;
      font-size: 0.95rem;
      margin-bottom: 22px;
    }

    .login-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 6px 0 18px;
      gap: 12px;
    }

    .login-actions a {
      color: #0b6e9b;
      font-weight: 700;
      text-decoration: none;
    }
.rem_pass{
      font-size: 16px;
      color: #0b6e9b;
      font-weight: 700;   
}
    .login-actions a:hover {
      text-decoration: underline;
    }

    @media (max-width: 575.98px) {
      .login-form-col {
        padding: 1.25rem 1rem 1rem;
        min-height: auto;
      }
    }

    @media (max-width: 991.98px) {
      .login-split {
        min-height: auto;
      }

      .login-image-col {
        min-height: 220px;
      }

      .login-form-col {
        min-height: auto;
      }
    }

    @media (max-width: 575.98px) {
      .signup-form-col {
        padding: 1.25rem 1rem 1rem;
      }
    }

    @media (max-width: 991.98px) {
      .signup-split {
        min-height: auto;
      }

      .signup-image-col {
        min-height: 230px;
      }

      .signup-form-col {
        min-height: auto;
      }
    }

      .form-control-custom {
    border-radius: 8px;
    padding: 12px 20px;
    border: 1px solid #ddd;
}

.phone-input {
    display: flex;
    gap: 10px;
}

.country-box {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
}

.country-box img {
    width: 20px;
    margin-right: 5px;
}

/* Button */
.btn-continue {
    width: 100%;
    border-radius: 8px;
    padding: 14px;
    background: #e0e3eb;
    border: none;
    font-weight: 600;
    color: #888;
    position: relative;
}

.btn-continue.active {
    background: #1c3f77;
    color: #fff;
}

.btn-continue::after {
    content: "➜";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: #c7c9d3;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Divider */
.divider {
    margin: 25px 0;
    color: #999;
}

/* OTP */
.otp-input {
    width: 45px;
    height: 55px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #ddd;
    font-size: 18px;
}

/* Hide */
.d-none {
    display: none;
}