html, body, .login-pf body, #kc-page-background {
  background-image: url("../img/bg.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-color: transparent !important;
}

/* Optional: add a soft backdrop to the login card for readability */
.card-pf, .pf-c-card {
  backdrop-filter: blur(3px);
  background-color: rgba(255,255,255,0.75);
}

/* Optional: slight dark overlay to improve contrast */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  pointer-events: none;
}
/* --- Center the login card / form and limit width --- */

/* PatternFly 4 (Keycloak 26+) */
.pf-c-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-c-login__container {
  max-width: 440px;
  width: 100%;
}

/* Legacy PF3 layout (older templates still present in KC) */
.login-pf, .login-pf-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-pf .card-pf, .login-pf-page .card-pf, .pf-c-card {
  max-width: 440px;
  width: 100%;
  margin: 40px auto;
}

/* Ensure inner form doesn’t stretch past the card */
#kc-form, #kc-form-login, #kc-content, .pf-c-login__main, .pf-c-login__main-body {
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
}


/* Put the Keycloak title ABOVE the login card and center it */
#kc-header-wrapper,
.kc-logo-text {
  width: 100%;
  text-align: center;
}

/* Make the title bold and visually prominent */
.kc-logo-text {
  display: block;            /* don’t let it sit inline next to the form */
  font-weight: 700;          /* bold */
  font-size: 1.75rem;        /* adjust size to taste */
  line-height: 1.2;
  margin: 0 0 16px;          /* space below the title */
}

.kc-logo-text span {         /* keep inner span bold as well */
  font-weight: 700;
  color: #FFFFFF !important;   /* <-- your color */ 

}

/* If your layout forced the header beside the form, stack it on top */
.login-pf-page {             /* Keycloak’s login page container */
  display: block;            /* ensure a vertical flow */
}