.sobre {
  background: #f8f9fa;
}

/* Imagem ao lado do card */
.sobre-image-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* Necessário para posicionar o texto dentro */
}

.monitor-svg {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: 16px;
}

.monitor-screen {
  position: absolute;
  top: 45%; /* Ajuste fino da posição vertical */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65%; /* Largura da "tela" do monitor */
  height: 40%; /* Altura da "tela" do monitor */
  color: #39ff14; /* Cor de terminal verde-limão */
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  overflow: hidden; /* Esconde o texto que sai da tela */
}

.monitor-line-1 {
  /* Inicialmente, escondemos o cursor */
  border-right: none;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

/* Classe que será adicionada pelo JS para ativar a animação de digitação */
.monitor-line-1.typing {
  border-right: 2px solid #39ff14; /* Mostra o cursor */
  animation:
    typewriter 3s steps(65) forwards, /* Digita a frase */
    blink-caret .75s step-end infinite; /* Cursor piscando */
}

.monitor-line-2 .line {
  /* A animação agora é acionada imediatamente */
  opacity: 0;
  animation: print-line 0.5s forwards;
}

/* Animações */
@keyframes typewriter {
  from { width: 0; }
  to { width: 65ch; } /* Ajuste este valor se a frase mudar */
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #39ff14; }
}

@keyframes print-line {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Media Query para telas menores (mobile) */
@media (max-width: 800px) {
  .sobre .wrapper {
    flex-direction: column; /* Imagem primeiro, depois o texto */
  }
}