@import "../font/stylesheet.css";
 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --cyan: #16b9d8;
      --cyan-dark: #0c9caf;
      --bg: #292d2e;
      --card: #222728;
      --input: #24292a;
      --border: #454b4d;
      --text: #f1f3f3;
      --muted: #92999b;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    body {
  font-family: 'Roboto';
      background:
        radial-gradient(
          ellipse at 70% 35%,
          #3a3e3f 0%,
          #303536 38%,
          #292d2e 75%,
          #25292a 100%
        );
      color: var(--text);
    }

    /* Main page */
    .page {
      position: relative;
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: clamp(40px, 5.8vw, 105px);
  color: var(--text);
  background-position: bottom !important;
    }

    /* Login card */
    .login-card {
      position: relative;
      width: 340px;
      min-height: 360px;
      /* height: 422px; */
      background:
        linear-gradient(
          145deg,
          rgba(35, 40, 41, 0.98),
          rgba(31, 35, 36, 0.98)
        );
      border-radius: 14px;
      padding: 31px 23px 24px;
      box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.17),
        inset 0 1px 0 rgba(255,255,255,0.015);
        background: #00000054 0% 0% no-repeat padding-box;
border: 1px solid #1C9CB5;
opacity: 1;
backdrop-filter: blur(36px);
-webkit-backdrop-filter: blur(36px);
    }

    /* Top-right cyan outline */
    .login-card::before {
      content: "";
      position: absolute;
      right: -3px;
      top: -3px;
      width: 77px;
      height: 66px;
      border-top: 3px solid #08a8c2;
      border-right: 3px solid #08a8c2;
      border-radius: 0 14px 0 0;
      pointer-events: none;
      display: none;
    }

    /* Bottom-right dotted decoration */
    .dots {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 92px;
      height: 65px;
      overflow: hidden;
      opacity: 0.75;
      border-radius: 0 0 14px 0;
      background-image: radial-gradient(
        circle,
        rgba(8, 176, 207, 0.65) 1.4px,
        transparent 1.5px
      );
      background-size: 9px 9px;
      mask-image: linear-gradient(
        to left,
        #000 10%,
        transparent 100%
      );
      -webkit-mask-image: linear-gradient(
        to left,
        #000 10%,
        transparent 100%
      );
      z-index: -1;
    }

    /* Left cyan decorative corner */
    .corner {
      position: absolute;
      left: 0;
      top: 31px;
      width: 8px;
      height: 51px;
      background: #13abc8;
      clip-path: polygon(0 0, 100% 13%, 100% 87%, 0 100%);
      border-radius: 0 3px 3px 0;
      display: none;
    }

    /* Logo */
.logo {
    position: absolute;
    z-index: 2;
    text-align: center;
    margin-bottom: 12px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -2px;
    line-height: 0.8;
    color: #f4f5f5;
    font-size: 31px;
    top: -14px;
}

    .logo span {
      display: block;
      font-size: 7px;
      letter-spacing: 2px;
      margin-top: 5px;
      margin-left: 5px;
      font-style: normal;
      font-weight: 700;
      color: #c9cdce;
    }

    .subtitle {
      text-align: center;
      font-size: 12px;
      color: #979d9e;
      margin-bottom: 21px;
    }

    /* Form */
    .form {
      position: relative;
      z-index: 3;
    }
/* Autofill styling */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #e9eeee !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(34, 39, 40, 0.9) inset !important;
    box-shadow: 0 0 0 1000px rgba(34, 39, 40, 0.9) inset !important;
    background-color: rgba(34, 39, 40, 0.9) !important;
    color: #e9eeee !important;
    border-color: var(--border);
    transition: background-color 9999s ease-in-out 0s;
}

/* Autofill when focused */
.input:-webkit-autofill:focus,
.form-control:-webkit-autofill:focus {
    border-color: var(--cyan) !important;
    -webkit-box-shadow:
        0 0 0 1000px rgba(34, 39, 40, 0.9) inset,
        0 0 0 1px rgba(22, 185, 216, 0.08) !important;
    box-shadow:
        0 0 0 1000px rgba(34, 39, 40, 0.9) inset,
        0 0 0 1px rgba(22, 185, 216, 0.08) !important;
}
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #e9eeee !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(34, 39, 40, 0.9) inset !important;
    background: rgba(34, 39, 40, 0.9) !important;
}
    .input-group {
      position: relative;
      margin-bottom: 12px;
    }

    .input, .form-control {
      width: 100%;
      height: 40px;
      border-radius: 9px;
      border: 1px solid var(--border);
      outline: none;
      background: rgba(34, 39, 40, 0.9);
      color: #e9eeee;
      padding: 0 10px 0 36px;
      
      font-size: 14px;
      transition: 0.2s ease;
    }

    .input::placeholder,.form-control::placeholder {
      color: #8c9395;
    }

    .input:focus,.form-control:focus {
      border-color: var(--cyan);
      box-shadow: 0 0 0 1px rgba(22, 185, 216, 0.08);
         background: rgba(34, 39, 40, 0.9) !important;
               color: #e9eeee;
    }

    .username-input {
      border-color: #087d91;
      box-shadow: 0 0 0 1px rgba(22, 185, 216, 0.05);
    }

    .icon {
      position: absolute;
      left: 14px;
      top: 40%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      color: #c4c4c4;
      pointer-events: none;
    }

    .user-icon::before {

      position: absolute;
      width: 6px;
      height: 6px;
      border: 1.7px solid currentColor;
      border-radius: 50%;
      top: 0;
      left: 4px;
    }

    .user-icon::after {

      position: absolute;
      width: 12px;
      height: 7px;
      border: 1.7px solid currentColor;
      border-bottom: 0;
      border-radius: 8px 8px 0 0;
      bottom: 0;
      left: 1px;
    }

    .lock-icon::before {

      position: absolute;
      width: 11px;
      height: 9px;
      border: 1.6px solid currentColor;
      border-radius: 3px;
      left: 2px;
      bottom: 0;
    }

    .lock-icon::after {

      position: absolute;
      width: 7px;
      height: 7px;
      border: 1.6px solid currentColor;
      border-bottom: 0;
      border-radius: 6px 6px 0 0;
      left: 4px;
      top: 0;
    }

    /* Eye */
    .eye {
      position: absolute;
      right: 13px;
      top: 50%;
      transform: translateY(-50%);
      width: 17px;
      height: 10px;
      border: 1.5px solid #687376;
      border-radius: 80% 20%;
      transform-origin: center;
      rotate: -2deg;
      cursor: pointer;
    }

    .eye::after {
      content: "";
      position: absolute;
      width: 4px;
      height: 4px;
      background: #687376;
      border-radius: 50%;
      left: 5px;
      top: 1.5px;
    }

    .forgot {
      display: block;
      text-align: right;
      color: #079ebc;
      text-decoration: none;
      font-size: 13px;
      margin: 30px 0 20px;
    }

    .forgot:hover {
      color: #1bc6e3;
    }

    /* Login button */
    .login-btn {
      position: relative;
      width: 100%;
      height: 42px;
      border: 0;
      border-radius: 9px;
      cursor: pointer;
      color: white;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 0.2px;
      background: linear-gradient(
        100deg,
        #20a8d5 0%,
        #16b9d0 55%,
        #12a9a4 100%
      );
      box-shadow:
        0 7px 15px rgba(0, 0, 0, 0.12),
        inset 0 1px rgba(255,255,255,0.08);
      transition: 0.2s ease;
    }

    .login-btn:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
    }

    .login-btn:active {
      transform: translateY(0);
    }

    .arrow {
      position: absolute;
      right: 27px;
      top: 50%;
      width: 12px;
      height: 12px;
      transform: translateY(-50%);
    }

    .arrow::before {
      content: "";
      position: absolute;
      width: 10px;
      height: 1.5px;
      background: white;
      left: 0;
      top: 5px;
    }

    .arrow::after {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      border-right: 1.5px solid white;
      border-top: 1.5px solid white;
      transform: rotate(45deg);
      right: 0;
      top: 2px;
    }

    /* Divider */
    .divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 18px 0 14px;
      color: #767d7e;
      font-size: 12px;
    }

    .divider::before,
    .divider::after {
      content: "";
      height: 1px;
      flex: 1;
      background: #4b5152;
    }

    .divider span {
      min-width: 12px;
      text-align: center;
    }

    /* SSO button */
    .sso-btn {
      position: relative;
      z-index: 5;
      width: 100%;
      height: 40px;
      border-radius: 9px;
      border: 1px solid #464c4d;
      background: rgba(38, 42, 43, 0.9);
      color: #05a4bf;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      letter-spacing: 0.1px;
      transition: 0.2s ease;
    }

    .sso-btn:hover {
      border-color: #087e91;
      background: #293031;
    }

    .shield {
      position: relative;
      display: inline-block;
      width: 13px;
      height: 15px;
      margin-right: 7px;
      vertical-align: middle;
      top: -1px;
    }

    .shield::before {
      content: "";
      position: absolute;
      inset: 1px 1px 0;
      border: 2px solid #079ebc;
      clip-path: polygon(
        50% 0,
        100% 18%,
        91% 67%,
        50% 100%,
        9% 67%,
        0 18%
      );
    }

    /* Responsive */
    @media (max-width: 700px) {
      .page {
        justify-content: center;
        padding: 20px;
        background: #000 !important;
      }

      .login-card {
        width: min(340px, 100%);
      }
    }

    @media (max-height: 500px) {
      .login-card {
        transform: scale(0.85);
      }
    }
    .login-input{
      position: relative;
    }
    /* slider */
    .page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

/* Background slider */
.background-slider {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.bg-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;

    opacity: 0;
    transform: scale(1.05);

    transition:
        opacity 1.5s ease-in-out,
        transform 7s ease-in-out;
}

.bg-slide.active {
    opacity: 1;
    transform: scale(1);
}

/* Dark overlay so login form remains readable */
.background-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.40);
    z-index: 1;
    pointer-events: none;
}

/* Keep login card above background */
.login-card {
    /* position: relative;
    z-index: 2; */
        position: relative;
    z-index: 2;
    background: #00000070 0% 0% no-repeat padding-box;
    border: 1px solid #4E4E4E;
    opacity: 1;
    backdrop-filter: blur(36px);
    -webkit-backdrop-filter: blur(36px);
}
.otp-container {
    display: flex;
    gap: 10px;
}

.otp-box {
    width: 35px;
    height: 35px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
}

.otp-box:focus {
    border-color: #079ebc;
}
.otp-input {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  margin-bottom:10px;
  gap: 11px;
  width: 100%;
}

.otp-input input[type="text"] {
    width: 39px;
    height: 40px;
    text-align: center;
    font-size: 18px;
    background-color: #333;
    border: 1px solid #666;
    border-radius: 5px;
    color: #ddd;
    border: 1px solid var(--border);
    background: rgba(34, 39, 40, 0.9);
    font-size: 14px;
    transition: 0.2s ease;
}
.otp-text{
  display: block;
    text-align: right;
    color: #079ebc;
    text-decoration: none;
    font-size: 16px;
}