.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.logo {
  max-width: 300px;
  width: 100%;
  height: auto;
  transition: var(--transition);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));

  svg {
    pointer-events: none;
  }
}

.logo:hover {
  transform: scale(1.2);
}

/* Target the "iface" text specifically */
.logo #tspan281 {
  fill: #000000; /* Default dark text for light mode */
  transition: var(--transition);
}

/* Dark mode logo styling - make "iface" text lighter */
@media (prefers-color-scheme: dark) {
  .logo #tspan281 {
    fill: #888888; /* Lighter gray for "iface" text in dark mode */
  }
}

@media (max-width: 768px) {
  .logo {
      max-width: 250px;
  }
  
  .logo-container {
      min-height: 30vh;
  }
}