/* Make the header use a background image that spans its whole area */
#kt_app_header.app-header {
  position: relative; /* needed for the overlay */
  background-image: url('/static/media/logos/energy-cloud-header.jpg'); /* adjust path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent; /* override theme var if set */
}

/* Optional: subtle dark overlay for contrast (adjust rgba as needed) */
#kt_app_header.app-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 160, 0.25);
  pointer-events: none;
}

/* Ensure header content is above the overlay */
#kt_app_header .app-container {
  position: relative;
  z-index: 1;
}

/* Optional: spacing tweaks for the "brand row" */
.ec-brand-row {
  min-height: 70px;             /* gives the brand some height */
}

/* Make the brand title readable on image */
.ec-brand-title {
  color: #fff;                   /* or use text-white on the span */
}

/* If you want a fixed size logo on larger screens */
.ec-logo {
  height: 40px;
}
@media (min-width: 992px) {
  .ec-logo {
    height: 50px;
  }
}