/* Fundo gradiente escuro com toque tecnológico */
body.gradient-bg {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* Animação de hover nos cards */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 122, 255, 0.2);
}

/* Estilo para efeito de digitação no título */
.typewriter {
    overflow: hidden;
    border-right: .15em solid #60a5fa;
    white-space: nowrap;
    animation:
        typing 3s steps(40, end),
        blink-caret .75s step-end infinite;
    width: max-content;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #60a5fa }
}

/* Links sociais com efeito neon */
.social-icon {
    color: #60a5fa;
    box-shadow: 0 0 5px #60a5fa;
    transition: all 0.3s ease;
}
.social-icon:hover {
    background-color: #60a5fa !important;
    color: #0f172a !important;
    box-shadow: 0 0 10px #60a5fa, 0 0 20px #60a5fa;
}

/* Botões personalizados */
button, .btn {
    transition: all 0.3s ease-in-out;
}
button:hover, .btn:hover {
    transform: translateY(-2px);
}

/* Formulário mais escuro e elegante */
form input, form textarea {
    background-color: #1e293b;
    color: #f1f5f9;
}
form input::placeholder, form textarea::placeholder {
    color: #94a3b8;
}

html {
    scroll-behavior: smooth;
  }

  .nav-underline {
    position: relative;
    padding-bottom: 4px;
  }
  .nav-item {
    position: relative;
    color: #f1f5f9;
    padding-bottom: 4px;
    transition: color 0.3s ease;
  }
  .nav-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #3b82f6;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  .nav-item:hover::after {
    transform: scaleX(1);
  }
  .nav-item:hover {
    color: #3b82f6;
  }