@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Page base */
html, body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: #081428; /* fallback if image missing */
  color: #e9f4ff;
}

/* background image (already provided by user) */
.bg {
  background: url(../images/main-bg.png) center/cover no-repeat;
  background-size: 100%;
  /* min-height: 100%; */
}

/* Centering container */
.Absolute-Center {
  /* position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
  width: 60%;
  margin: 0 auto;
}
.box{
  background: #16224C;
  border-radius: 13px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.6);
  padding: 8px 36px;
  border: 1px solid #232A47;
}
.Absolute-Center.is-Responsive {
  max-width: 520px;
  width: 90%;
  box-sizing: border-box;
  padding: 40px 20px 20px;
  background: transparent;
  box-shadow: none;
  border: none;
}

/* Logo / Title */
.logo{
  text-align: center;
  margin: 0 0 6px;
}
.logo span{
  display: block;
  font-size: 72px;
  font-weight: 700;
  letter-spacing: 6px;
  color: #f3fbff;
  text-shadow: 0 12px 36px rgba(6,26,48,0.7);
  margin-bottom: 10px;
}

/* Welcome heading and subtitle */
.welcome-title{
  text-align: center;
  color: rgba(234,245,255,0.92);
  font-size: 28px;
  font-weight: 400;
  margin: 18px 0 8px;
}
.welcome-subtitle{
  text-align: center;
  color: rgba(234,245,255,0.48);
  font-size: 14px;
  margin: 0 0 32px;
  font-weight: 300;
}

/* Decorative tape */
.ctape{
  width: 100%;
  height: 25px;
  margin: 16px auto 28px;
  border-radius: 4px;
  background: repeating-linear-gradient(
    -45deg,
    #d4a000,
    #d4a000 8px,
    #192838 8px,
    #192838 17px,
    #d4a000,
    #d4a000 8px,
    #192838 8px,
    #192838 17px
  );
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) inset;
  opacity: 0.75;
  border-top: 5px solid #232A47;
  border-bottom: 5px solid #232A47;
  /* show stripes in center only, fade to transparent at sides */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Input fields */
input[type="text"].txt,
input[type="password"].txt {
  width: 100%;
  display: block;
  box-sizing: border-box;
  background: rgba(78,94,115,0.55);
  border: 1px solid rgba(255,255,255,0.02);
  border-radius: 8px;
  padding: 14px 18px 14px 58px;
  height: 56px;
  color: #e8f0f8;
  font-size: 15px;
  margin: 14px 0;
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .08s ease;
}

/* left circular icon (circle + glyph) placed inside input */
input[type="text"].txt { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'><path fill='%23b8c5d1' d='M12 12c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5z'/></svg>"); background-repeat:no-repeat; background-position:20px center; background-size:26px 26px; }
input[type="password"].txt { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'><path fill='%23f2b400' d='M18 8h-1V6c0-2.8-2.2-5-5-5S7 3.2 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.7 1.3-3 3.1-3s3.1 1.3 3.1 3v2z'/></svg>"); background-repeat:no-repeat; background-position:20px center; background-size:26px 26px; }

input[type="text"].txt:focus,
input[type="password"].txt:focus{
  box-shadow: 0 6px 22px rgba(0,0,0,0.5) inset, 0 6px 18px rgba(0,0,0,0.45);
  border-color: rgba(255,255,255,0.08);
}

/* Autofill styling */
input:-webkit-autofill,
input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0px 1000px rgba(6,22,41,0.6) inset !important;
  -webkit-text-fill-color: #eaf5ff !important;
}

/* Login button */
.loginBtn{
  display: block;
  margin: 32px auto 16px;
  width: 250px;
  height: 50px;
  border-radius: 32px;
  background: linear-gradient(180deg,#ffce3d 0%,#f39f00 60%);
  color: #0d1f2d;
  font-size: 18px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 12px 30px rgba(243,159,0,0.12), inset 0 -6px 18px rgba(0,0,0,0.12);
}
.loginBtn:active{ transform: translateY(1px); }

/* Forgot password link */
.forgot-link{
  text-align: center;
  margin: 14px 0 24px;
}
.forgot-link a{
  color: rgba(234,245,255,0.52);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
}
.forgot-link a:hover{
  color: rgba(234,245,255,0.75);
  text-decoration: underline;
}

/* Centered divider with fade-to-background edges */
.divider{
  width: 72%;
  height: 2px;
  margin: 20px auto;
  border-radius: 2px;
  /* center solid-looking band that fades to transparent on both sides */
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.02) 28%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.08) 60%,
    rgba(255,255,255,0.02) 72%,
    rgba(255,255,255,0) 100%
  );
  box-shadow: 0 6px 12px rgba(0,0,0,0.45) inset;
}

/* Footer notice */
.footer-notice{
  text-align: center;
  font-size: 13px;
  color: rgba(234,245,255,0.45);
  margin: 0 auto;
  line-height: 1.5;
  font-weight: 300;
  width: 60%;
}

/* small footer and helper text */
p { color: rgba(234,245,255,0.85); font-size: 14px; margin: 4px 0; }

/* small responsive tweak */
@media (max-width:420px){
  .Absolute-Center.is-Responsive{ padding:28px 18px; }
  .logo span{ font-size:44px; }
  .Absolute-Center.is-Responsive::before{ font-size:20px; }
}

/* Footer copyright pinned center-bottom */
.footer-copyright{
  width: 100%;
  /* transform: translateX(-50%); */
  text-align: center;
  color: rgba(234,245,255,0.45);
  font-size: 12px;
  z-index: 9999;
  margin-top: 30px;
  padding: 4px 0px;
  pointer-events: auto;
}

@media (max-width:420px){
  .footer-copyright{ font-size:11px; }
}

/* Very small devices (phones ~320px) */
@media (max-width:320px){
  html, body { font-size: 14px; }
  .Absolute-Center { width: 100%; padding: 0 8px; }
  .Absolute-Center.is-Responsive { max-width: 320px; padding: 20px 12px; }
  .box { padding: 8px 14px; border-radius: 10px; }
  .logo span { font-size: 40px; letter-spacing: 2px; }
  .welcome-title { font-size: 18px; margin: 12px 0 6px; }
  .welcome-subtitle { font-size: 12px; margin-bottom: 18px; }
  .ctape { width: 86%; height: 12px; margin: 10px auto 18px; border-radius: 8px; }
  .divider { width: 86%; }
  input[type="text"].txt, input[type="password"].txt { height: 48px; padding-left: 46px; font-size: 14px; }
  .loginBtn { width: 200px; height: 44px; font-size: 16px; margin: 22px auto 12px; }
  .footer-notice { width: 90%; font-size: 12px; }
  .footer-copyright{ font-size:11px; bottom:6px; margin-top: 18px; }
}