/* Custom Styles for Portfolio */

/* Importar uma fonte moderna do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@300;400;700&display=swap');

:root{
      --bg:#272726;
      --panel:#0f1113;
      --muted:#717477;
      --accent:#fd6b3a;
      --glass: rgba(255,255,255,0.03);
      --brand-primary: #E65322;
    }

body {
    font-family: 'Roboto', sans-serif;
}

/* Estilo para todas as seções */
.page-section {
    padding: 8rem 0; /* Espaçamento vertical generoso */
}

/* Títulos com a fonte de destaque */
h1, h2, h3, h4, .navbar-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

/* Estilo para a Linha Divisória */
.divider {
    max-width: 3.25rem;
    border-width: 0.2rem;
    border-color: #E75422; /* Cor do warning do Bootstrap, que usamos como destaque */
    opacity: 1;
}
.icon-hab {
    color: #E75422;
}

.icon-git {
    font-size: 18px;
}

/* Estilo do botão "Saiba Mais" (Hero Section) */
.btn-brand-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff; /* Cor do texto branca para contraste */
}

/* Efeito Hover para o botão */
.btn-brand-primary:hover {
    background-color: #c9441a; /* Cor levemente mais escura para o hover */
    border-color: #c9441a;
    color: #fff;
}

/* Estilo da Seção de Introdução (Masthead/Hero) */
.masthead {
    min-height: 100vh;
    padding-top: 6rem;
    padding-bottom: 6rem;
    /* Fundo com imagem e sobreposição de cor escura */
    background: linear-gradient(to bottom, rgba(33, 37, 41, 0.8) 0%, rgba(33, 37, 41, 1.0) 85%), url('../img/portfolio/background-dev.jpg'); 
    /* Coloque uma imagem de fundo bonita (e.g., código, servidor, terminal) e chame de 'background-dev.jpg' */
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

/* Estilo para botões de destaque (amarelo do warning) */
.btn-xl {
    padding: 1rem 2rem;
    font-size: 1.2rem;
}

/* Cor do fundo da seção de habilidades para contraste */
.bg-secondary {
    background-color: #1f2225 !important; /* Exemplo de um cinza mais suave */
}

/* Cartões de Projeto com efeito hover */
.card {
    transition: transform 0.3s ease-in-out;
}
.card:hover {
    transform: translateY(-5px); /* Efeito de elevação */
}

/* Estilo dos ícones de habilidade */
.fa-4x {
    font-size: 3.5em; 
}


/* Media Query para telas menores */
@media (min-width: 992px) {
    .masthead {
        height: 100vh;
        min-height: 40rem;
        padding-top: 7rem;
    }
    .page-section {
        padding: 6rem 0;
    }
}

/* Estilo para o Botão Fixo do WhatsApp */
.whatsapp-float {
    position: fixed; /* Fixa o elemento na tela */
    width: 50px;
    height: 50px;
    bottom: 40px; /* Distância do fundo */
    right: 40px; /* Distância da direita */
    background-color: #1db354; /* Cor verde do WhatsApp */
    color: #fff; /* Cor do ícone */
    border-radius: 5px; /* Transforma em círculo */
    text-align: center;
    font-size: 23px;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.4); /* Sombra para destaque */
    z-index: 1000; /* Garante que fique acima de outros elementos */
    display: flex; /* Para alinhar o ícone vertical e horizontalmente */
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease; /* Transição suave para o hover */
    text-decoration: none;
}

.whatsapp-float:hover {
    background-color: #1DA851; /* Cor um pouco mais escura no hover */
    color: #fff; /* Mantém a cor do ícone branca */
}

/* Ajuste para telas menores (opcional, para não ficar muito grande) */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 25px;
    }
}