/* Typing Animation */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

@keyframes erase {
  from { width: 100%; }
  to { width: 0; }
}

#typing {
  overflow: hidden;
  white-space: pre-wrap; /* Allow text to wrap */
  border-right: 2px solid;
  display: inline-block;
  max-width: 90%; /* Ensure text doesn't overflow the screen */
  margin: 0 auto; /* Center the text */
}

/* Hover Effects */
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}

.btn:hover {
  background: #ff4a3d;
  transform: scale(1.05);
}