/* CSS for creating a "faux transparent" logo background */
.transparent-logo-container {
  position: relative;
  height: 50px;
  width: 250px; /* Adjust based on your logo's aspect ratio */
  overflow: hidden;
}

.transparent-logo-container img {
  position: absolute;
  height: 100%;
  width: auto;
  top: 0;
  left: 0;
  mix-blend-mode: multiply; /* This helps eliminate the white background */
  filter: brightness(0) invert(1); /* Convert to white silhouette */
}

.header.scrolled .transparent-logo-container {
  height: 40px;
  transition: height 0.3s ease;
}

/* Hide the transparent version when not on transparent header */
.header:not(.transparent) .transparent-logo-container {
  display: none;
}

/* Only show this on homepage transparent header */
.transparent-logo-container {
  display: none;
}

.header.transparent .transparent-logo-container {
  display: none; /* Not using the transparent container approach with text logo */
}