/* Estiliza o efeito de transição e sombra ao passar o mouse sobre o card do projeto. */
.project-card {
    transition: all 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    /* Eleva o card levemente */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    /* Adiciona uma sombra mais pronunciada */
}

/* Define a transição de fade-in/fade-out para o modal. */
.modal {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    /* Começa transparente */
    visibility: hidden;
    /* Começa escondido e sem ocupar espaço de clique */
}

/* Quando o modal tem a classe 'active', ele se torna visível. */
.modal.active {
    opacity: 1;
    /* Fica totalmente opaco */
    visibility: visible;
    /* Fica visível */
}

/* Estilos gerais da página. */
.hero-gradient {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(30, 58, 138, 0.7) 100%);
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Habilita a rolagem suave ao clicar em links de âncora (ex: href="#contato"). */
html {
    scroll-behavior: smooth;
}