/* ===== Page Background ===== */
body {
  font-family: "Poppins", sans-serif;
  background: linear-gradient(135deg, #e6f2ff 0%, #f8fbff 100%);
  margin: 0;

  /* CENTER EVERYTHING */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-height: 100vh;
}

/* ===== Large Logo Above Box ===== */
.top-logo {
  width: 100%;
  display: flex !important;      /* FORCE flex */
  justify-content: center !important; /* FORCE center horizontally */
  align-items: center !important;
  margin-bottom: 0;     /* perfect spacing + centered container */
  padding: 0;
}

.top-logo img {
  width: 650px;
  max-width: 90%;
  height: 90px;
  display: block;
  margin: 0 auto;

  /* Remove white background look */
  background: transparent;
  display: block;
  mix-blend-mode: multiply;
}

/* ===== LOGIN BOX FULL CENTER ===== */
.login-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.login-box {
  display: flex;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.20);
  overflow: hidden;
  max-width: 1100px;
  width: 100%;
  min-height: 500px;  /* Ensures nice vertical center */
}

/* ===== Left Image Section ===== */
.login-image {
  flex: 1;
  background: #d9ebff;
}

.login-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Right Form Section ===== */
.login-form {
  flex: 1;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* CENTER vertically */
  align-items: center;
  text-align: center;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  color: #004a8e;
  margin-bottom: 10px;
}

.subtitle {
  color: #777;
  margin-bottom: 30px;
  font-size: 15px;
}

/* ===== Form ===== */
.form-group {
  width: 100%;
  margin-bottom: 20px;
  text-align: left;
}

label {
  display: block;
  color: #004a8e;
  font-weight: 600;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid #ccddee;
  font-size: 15px;
  outline: none;
}

input:focus {
  border-color: #004a8e;
  box-shadow: 0 0 8px rgba(0, 74, 142, 0.2);
}

/* ===== Login Button ===== */
.btn-login {
  background: #004a8e;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 12px;
  width: 100%;
  font-size: 16px;
  font-weight: 600;
}

.btn-login:hover {
  background: #0362b2;
}

/* ===== Links ===== */
.links {
  margin-top: 15px;
}

.links a {
  color: #004a8e;
  font-size: 14px;
  text-decoration: none;
}

.links a:hover {
  text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .login-box {
    flex-direction: column;
    max-width: 600px;
  }

  .login-image {
    height: 200px;
  }

  .login-form {
    padding: 30px 25px;
  }

  .top-logo img {
    width: 350px;
  }
  /* ============================
   📌 Medium Devices (Tablets < 992px)
   ============================ */
@media (max-width: 992px) {

  .login-box {
    max-width: 850px;
  }

  .login-form {
    padding: 40px 40px;
  }

  .top-logo img {
    width: 500px;
  }
}


/* ============================
   📌 Small Tablets / Large Phones < 768px
   ============================ */
@media (max-width: 768px) {
  body {
    display: block !important; /* STOP flex from hiding overflowing content */
    padding: 20px;
    overflow-y: auto;  /* allow full scrolling */
  }

  .login-container {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .login-box {
    flex-direction: column;
    max-width: 100%;
  }

  .login-image {
    height: 200px;
  }

  .login-form {
    padding: 30px 25px;
  }

  .top-logo img {
    width: 320px;
  }
}



/* ============================
   📌 Mobile Phones < 480px
   ============================ */
@media (max-width: 480px) {

  .top-logo img {
    width: 260px;
    margin-bottom: 15px;
  }

  .login-form {
    padding: 25px 20px;
  }

  h2 {
    font-size: 22px;
  }

  .subtitle {
    font-size: 13px;
  }

  input {
    padding: 10px 12px;
    font-size: 14px;
  }

  .btn-login {
    padding: 10px;
    font-size: 15px;
  }

  .links a {
    font-size: 12px;
  }
}

}