/* Definições de cores e fontes para dar um toque único */
:root {
    --primary-color: #007bff; /* Cor primária do Bootstrap (pode mudar) */
    --secondary-color: #6c757d; /* Cor secundária */
    --text-dark: #343a40;
    --text-light: #f8f9fa;
    --bg-light: #f8f9fa;
}

body {
    font-family: 'Arial', sans-serif; /* Use uma fonte mais moderna se desejar */
    color: var(--text-dark);
}

/* Estilo para a Seção Hero */
#hero {
    /* Cor de fundo primária para destaque */
    background-color: var(--primary-color); 
    background-image: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%); /* Gradiente sutil */
}

/* Estilo para os cards de Habilidades */
#habilidades .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 10px;
}

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

/* Estilo para os itens do Portfólio */
.project-item img {
    max-height: 300px; /* Limita a altura das imagens */
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-item img:hover {
    transform: scale(1.03); /* Leve zoom ao passar o mouse */
}

/* Adicionando um efeito de destaque nos links de navegação */
.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--text-light) !important;
    border-bottom: 2px solid var(--text-light);
}

/* Adicione no style.css para o efeito de Scroll Reveal */
.scroll-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

.navbar-scrolled {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    background-color: rgba(0, 0, 0, 0.9) !important; /* Fundo mais escuro */
    transition: background-color 0.3s ease;
}

#foto{
    width: 200px;
    height: 200px;
    margin: 0 auto 20px auto;
    overflow: hidden;
    border-radius: 50%;
    border: 4px solid var(--text-light);
}

/* Estilos de responsividade (já são bem tratados pelo Bootstrap, mas bom ter) */
@media (max-width: 768px) {
    #hero h1 {
        font-size: 2.5rem;
    }
}