.container {
  height: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20vmin;
}
.container p .wecan{
  font-size: 5vmin;
  font-weight: bold;
  letter-spacing: 0.1rem;
  text-align: center;
  overflow: hidden;
  color: var(--eco5);
}
.container p span.typed-text {
  font-weight: normal;
  color: var(--green);
  font-size: 5vmin;

}
.container p span.cursor {
  display: inline-block;
  background-color: var(--eco4);
  margin-left: 1vmin;
  width: 0.5vmin;
  animation: blink 1s infinite;
  font-size: 5vmin;
}
.container p span.cursor.typing {
  animation: none;
}
@keyframes blink {
  0%  { background-color: var(--eco4); }
  49% { background-color: var(--eco4); }
  50% { background-color: transparent; }
  99% { background-color: transparent; }
  100%  { background-color: var(--eco4); }
}



/* Existing CSS remains the same until the end */

/* Add these media queries */

/* For medium screens (tablets and smaller laptops) */
@media (max-width: 1024px) {
  .container p .wecan,
  .container p span.typed-text,
  .container p span.cursor {
    font-size: 4vmin;
  }
  
  .container p span.cursor {
    width: 0.4vmin;
    margin-left: 0.8vmin;
  }
}

/* For small screens (mobile landscape and tablets) */
@media (max-width: 768px) {
  .container p .wecan,
  .container p span.typed-text,
  .container p span.cursor {
    font-size: 3.5vmin;
  }
  
  .container p span.cursor {
    width: 0.35vmin;
    margin-left: 0.7vmin;
  }
  
  .container {
    margin-bottom: 15vmin;
  }
}

/* For extra small screens (mobile portrait) */
@media (max-width: 480px) {
  .container p .wecan,
  .container p span.typed-text,
  .container p span.cursor {
    font-size: 2.8vmin;
  }
  
  .container p span.cursor {
    width: 0.28vmin;
    margin-left: 0.6vmin;
  }
  
  .container {
    height: 12vh;
    margin-bottom: 10vmin;
  }
  
  .container p .wecan {
    letter-spacing: 0.05rem;
  }
}

/* For very small screens (small mobile devices) */
@media (max-width: 360px) {
  .container p .wecan,
  .container p span.typed-text,
  .container p span.cursor {
    font-size: 2.5vmin;
  }
  
  .container p span.cursor {
    width: 0.25vmin;
    margin-left: 0.5vmin;
  }
}

/* Optional: For very large screens to prevent font from becoming too large */
@media (min-width: 1600px) {
  .container p .wecan,
  .container p span.typed-text,
  .container p span.cursor {
    font-size: 4vmin;
  }
  
  .container p span.cursor {
    width: 0.4vmin;
    margin-left: 0.8vmin;
  }
}