.logonew {
  width: 100%;
  max-width: 200px;
  height: auto;
}

.typewriter {
  color: #878e05;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 400%;
  width: 1200px;              /* 28ch long enough for longest phrase */
  overflow: hidden;
  white-space: nowrap;
  padding: 10px 0 0 40px;
  position: absolute;

}

.text {
  display: inline-block;
  overflow: hidden;
  /* 4s per phrase: 2s typing, 1s hold, 1s wipe-off */
  animation:
    typewipe 4s steps(40) infinite,
    phrases 12s linear infinite;
}

/* --- Typing-on then wiping-off mask --- */
@keyframes typewipe {
  0% { width: 0px; }
  50% { width: 1200px; }   /* fully typed at 2s */
  75% { width: 1200px; }   /* hold briefly */
  100% { width: 0px; }   /* wipe right → left */
}

/* --- Phrase rotation --- */
.text::before {
  content: "NZ Pine. Naturally Better.";
  animation: phrases 12s linear infinite;
}

@keyframes phrases {
  0%, 33% {
    content: "NZ Pine. Naturally Better.";
  }
  33.001%, 66% {
    content: "Durable & Classic.";
  }
  66.001%, 100% {
    content: "Engineered, Stable & Strong!";
  }
}

/* MOBILE */
@media all and (max-width : 1400px) {
.typewriter {
  width: 900px; 
  font-size: 350%;
}

@keyframes typewipe {
  0% { width: 0px; }
  50% { width: 900px; }   /* fully typed at 2s */
  75% { width: 900px; }   /* hold briefly */
  100% { width: 0px; }   /* wipe right → left */
}
}

@media all and (max-width : 1200px) {
.typewriter {
  width: 700px; 
  font-size: 250%;
}

@keyframes typewipe {
  0% { width: 0px; }
  50% { width: 700px; }   /* fully typed at 2s */
  75% { width: 700px; }   /* hold briefly */
  100% { width: 0px; }   /* wipe right → left */
}
}

@media all and (max-width : 990px) {
.typewriter {
  width: 500px; 
  font-size: 200%;
  padding: 25px 0 0 20px;
}

@keyframes typewipe {
  0% { width: 0px; }
  50% { width: 500px; }   /* fully typed at 2s */
  75% { width: 500px; }   /* hold briefly */
  100% { width: 0px; }   /* wipe right → left */
}
}