.typewriter {
  color: #fff;
  font-weight: 700;
  font-size: 28px;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #fff; /* cursor effect */
  width: 0;
  animation:
    typing 3s steps(28, end) 0.3s forwards,
    blink 0.8s step-end infinite;
}

/* typing effect */
@keyframes typing {
  to { width: 28ch; } /* 28 characters = length of the text */
}

/* blinking cursor */
@keyframes blink {
  50% { border-color: transparent; }
}


/* === Keep hero background unchanged when overlay opens === */
#overlay,
#overlay.open {
  background: transparent !important;        /* remove rgba(0,0,0,.8) */
}

.overlay {
  background: transparent !important;        /* prevent panel backgrounds */
}

/* If your hero has dark overlay layers, disable them */
.hero .background-content .bg-overlay,
.hero .background-content .bg-pattern {
  display: none !important;                  /* or: opacity: 0 !important; */
}

/* Optional: stop parallax/transform changes when switching sections */
.background-content .layer {
  transform: none !important;
  will-change: auto !important;
}