body {
    margin: 0;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: "Roboto", sans-serif; /* Define a fonte Roboto */
    background-image: url("../images/fundo.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Garante que a imagem de fundo permaneça fixa ao rolar */
    color: #4b2e2e; /* Define a cor do texto como marrom escuro */
}

header {
    background-color: transparent; /* Torna o fundo do menu transparente */
    padding: 40px 0; /* Aumenta o trecho de fundo marrom dos menus */
    position: relative; /* Garante que o z-index funcione */
    z-index: 100; /* Coloca o menu acima de outros elementos */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permite que os itens do menu quebrem linha em telas menores */
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #4b2e2e;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.4em; /* Aumenta um pouco o tamanho da fonte das letras */
}

nav ul li a:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
    text-decoration-color: #4b2e2e; /* Define a cor do sublinhado */
}

.section {
    padding: 80px 20px;
    width: 100%;
    position: relative;
}

#inicio,
#sobre,
#habilidades,
#projetos,
#contatos {
    scroll-margin-top: 140px; /* altura do header */
}

footer {
    background-color: transparent; /* Remove a cor de fundo marrom */
    color: #4b2e2e; /* Define a cor do texto como marrom */
    text-align: center;
    padding: 10px 0;
    width: 100%;
    font-size: 1.2em; /* Aumenta o tamanho da fonte */
    font-weight: bold; /* Deixa o texto em negrito */
}

/* ------------------------------- INICIO ------------------------------- */
#inicio {
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inicio-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    flex-wrap: wrap; /* Permite que os itens se ajustem corretamente em telas menores */
    margin: 0 auto; /* Centraliza o conteúdo horizontalmente */
}

.text-content {
    max-width: 45%; /* Ajusta a largura máxima do texto */
    flex: 1; /* Permite que o texto ocupe o espaço necessário */
    text-align: center; /* Centraliza o texto */
    margin-right: 0; /* Remove a margem direita */
    z-index: 1; /* Garante que o texto fique acima de outros elementos */
    position: relative; /* Garante que o texto seja posicionado corretamente */
    color: #4b2e2e; /* Garante que a cor do texto seja marrom escuro */
    visibility: visible; /* Garante que o texto seja visível */
    opacity: 1; /* Garante que o texto seja opaco */
    display: block; /* Garante que o texto seja exibido */
}

.text-content h1 {
    font-size: 5.5em; /* Tamanho do título */
    color: #4b2e2e; /* Marrom escuro */
    white-space: nowrap; /* Garante que o texto não quebre linha */
    margin-bottom: 0; /* Remove a margem inferior */
}

.text-content h2 {
    font-size: 2.6em; /* Tamanho do subtítulo */
    color: #4b2e2e; /* Marrom escuro */
}

.text-content p {
    font-size: 1.6em; /* Tamanho da fonte do parágrafo */
    color: #4b2e2e; /* Marrom escuro */
    text-align: center; /* Centraliza o texto */
}

.image-content {
    max-width: 40%; /* Aumenta a largura máxima da imagem */
    flex: 1; /* Permite que a imagem ocupe o espaço necessário */
    display: flex;
    justify-content: center;
}

.image-content img {
    max-width: 100%; /* Ajusta o tamanho da imagem */
    height: auto;
    border-radius: 50%; /* Torna a imagem circular */
    max-height: 300px; /* Aumenta a altura máxima para a imagem */
}

/* ------------------------------- REVEAL / ANIMAÇÕES ------------------------------- */
.reveal,
.reveal::before,
.reveal::after {
    pointer-events: none;
}

/* ------------------------------- SOBRE ------------------------------- */
#sobre {
    padding: 20px 0;
    text-align: center;
    position: relative;
    z-index: 50;
    padding-bottom: 80px;
}

#sobre h1,
#sobre h2 {
    text-align: center;
    font-size: 1.8em; /* Aumenta o tamanho da fonte */
}

#sobre h1 {
    font-size: 3.5em; /* Aumenta o tamanho do título "SOBRE" */
    margin-bottom: 1px; /* Diminui o espaço entre o título e o conteúdo */
    text-align: center;
}

#sobre p {
    max-width: 70%; /* Limita a largura do parágrafo */
    margin: 0 auto; /* Centraliza o parágrafo */
    text-align: justify;
    font-size: 1.8em; /* Aumenta o tamanho da fonte */
}

.download-button {
    pointer-events: auto;
    display: inline-block;
    margin: 30px auto;
    cursor: pointer;
    padding: 4px 4px; /* Aumenta o botão */
    font-size: 1.7em; /* Aumenta as letras */
    color: #4b2e2e; /* Cor das letras marrom */
    background-color: white; /* Fundo branco */
    border: 2px solid #4b2e2e; /* Borda marrom */
    border-radius: 10px; /* Cantos arredondados */
    text-decoration: none;
    transition: transform 0.3s; /* Transição suave para o efeito de zoom */
    position: relative; /* Garante que o z-index funcione */
    z-index: 1; /* Coloca o botão acima de outros elementos */
}

.btn-wrapper {
    text-align: center;
}

.btn-wrapper .download-button {
    display: inline-block;
    margin: 40px auto 0 auto;
}

.download-button:hover {
    transform: scale(1.1); /* Efeito de zoom ao passar o mouse */
    color: white; /* Cor das letras branca */
    background-color: #4b2e2e; /* Fundo marrom */
    border: 2px solid white; /* Borda branca */
}

/* ------------------------------- HABILIDADES ------------------------------- */
#habilidades {
    padding: 20px 0; /* Ajusta o padding para a seção HABILIDADES */
    text-align: center; /* Centraliza o texto */
    position: relative;
    z-index: 1;
    overflow: visible;
}

#habilidades h1 {
    font-size: 3.5em; /* Aumenta o tamanho do título "HABILIDADES" */
}

#habilidades h2 {
    font-size: 1.8em; /* Aumenta o tamanho da fonte dos subtítulos */
}

#habilidades p {
    font-size: 1.8em; /* Aumenta o tamanho da fonte dos parágrafos */
    max-width: 70%; /* Limita a largura do parágrafo */
    margin: 0 auto; /* Centraliza o parágrafo */
}

.habilidades-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.habilidade {
    flex: 1;
    min-width: 300px;
    text-align: center;
}

.habilidade h2 {
    font-size: 2em;
    margin-bottom: 10px;
}

.imagens {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.imagens img {
    max-width: 80px;
    height: auto;
}

/* Adicione esta seção para definir a animação de tremer horizontalmente */
@keyframes shake {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(0);
    }
    75% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Adicione esta regra para aplicar a animação ao passar o mouse */
.imagens img:hover {
    animation: shake 0.5s infinite; /* Define a duração da animação e faz a animação repetir indefinidamente enquanto o mouse estiver sobre a imagem */
}

/* ------------------------------- PROJETOS ------------------------------- */
#projetos {
    padding: 20px 0; /* Ajusta o padding para a seção PROJETOS */
    text-align: center; /* Centraliza o texto */
}

#projetos h1,
#projetos h2,
#projetos p {
    font-size: 1.8em; /* Aumenta o tamanho da fonte */
}

#projetos h1 {
    font-size: 3.5em; /* Aumenta o tamanho do título "PROJETOS" */
}

#projetos p {
    max-width: 70%; /* Limita a largura do parágrafo */
    margin: 0 auto; /* Centraliza o parágrafo */
}

.projetos-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.projetos-wrapper {
    width: fit-content;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    overflow: hidden; /* Remove a barra de rolagem */
    scroll-behavior: smooth;
    gap: 100px; /* Diminui o espaço entre as imagens */
}

.projeto {
    flex: 0 0 auto;
    min-width: 0; /* Diminui a largura mínima */
    width: 300px;
    text-align: center;
}

/* Responsividade para telas maiores, desabilitando rolagem com apenas dois projetos */
@media (min-width: 1024px) {
    .projetos-wrapper {
        overflow: visible; /* Garante que não apareça a rolagem */
    }
}

/* Adicionando visibilidade para as setas */
.arrow {
    background-color: transparent;
    border: none;
    font-size: 2em;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #4b2e2e;
    z-index: 1;
    display: none; /* Esconde as setas inicialmente */
}

.left-arrow {
    left: -300px;
}

.right-arrow {
    right: -300px;
}

.projeto img {
    width: 300px; /* Define a largura fixa das imagens para 150px */
    height: auto; /* Ajusta a altura automaticamente para manter a proporção */
    border-radius: 10px;
    transition: transform 0.3s;
    display: block;
    margin: 0 auto;
}

.projeto img:hover {
    transform: scale(1.06); /* Aumenta um pouco a imagem ao passar o mouse */
    transition: transform 0.3s; /* Mantém a transição suave */
}

.github-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.4em; /* Aumenta um pouco o tamanho da fonte */
    color: #4b2e2e; /* Cor da escrita marrom */
    background-color: transparent; /* Remove o fundo */
    border: none; /* Remove a borda */
    text-decoration: none;
    font-weight: bold; /* Deixa as letras em negrito */
    transition:
        color 0.3s,
        text-decoration 0.3s;
}

.github-button:hover {
    color: #4b2e2e; /* Cor da escrita ao passar o mouse */
    text-decoration: underline 2px; /* Adiciona sublinhado ao passar o mouse e deixa mais grosso */
}

/* ------------------------------- CONTATOS ------------------------------- */
#contatos {
    padding: 20px 0; /* Ajusta o padding para a seção CONTATOS */
    text-align: center; /* Centraliza o texto */
}

#contatos h1,
#contatos h2,
#contatos p {
    font-size: 2em; /* Aumenta o tamanho da fonte */
}

#contatos h1 {
    font-size: 3.5em; /* Aumenta o tamanho do título "CONTATOS" */
}

#contatos p {
    max-width: 70%; /* Limita a largura do parágrafo */
    margin: 0 auto; /* Centraliza o parágrafo */
    font-weight: bold; /* Deixa o subtítulo em negrito */
}

.contact-list {
    list-style: none;
    padding: 0;
}

.contact-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px 0;
    font-size: 1.8em; /* Aumenta o tamanho da fonte */
}

.contact-list i {
    margin-right: 10px;
    font-size: 1.5em;
}

.contact-list .fa-whatsapp {
    margin-left: 20px; /* Adiciona espaço entre o telefone e o ícone do WhatsApp */
}

.contact-list a {
    color: inherit;
    text-decoration: none;
}

.contact-list a:hover {
    text-decoration: underline;
}

/* -------------------- EFEITO DE REVELAÇÃO AO ROLAR -------------------- */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition:
        opacity 1.5s ease-out,
        transform 1.5s ease-out;
    pointer-events: none;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ------------------------- EFEITO DE DIGITAÇÃO ------------------------- */
.typing-container {
    display: inline-block;
    width: 100%;
}

.typing-effect {
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    visibility: hidden; /* Inicialmente oculto */
}

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

/* ------------------- Media query para telas MAIORES ------------------- */
@media (min-width: 1920px) {
    #inicio,
    #sobre,
    #habilidades,
    #projetos,
    #contatos {
        text-align: center;
    }

    .download-button {
        position: relative; /* Garante que o botão esteja posicionado corretamente */
        z-index: 10; /* Coloca o botão acima de outros elementos */
        pointer-events: auto; /* Garante que o botão receba cliques */
    }

    .section {
        overflow: visible; /* Garante que o botão não seja cortado */
    }

    .projetos-wrapper {
        gap: 150px; /* Aumenta o espaçamento lateral entre as imagens */
    }
}

/* ------------------- Media query para telas MENORES ------------------- */
@media (max-width: 800px) {
    /* INICIO */
    .inicio-content {
        flex-direction: column; /* Alinha o conteúdo verticalmente em telas menores */
        align-items: center; /* Centraliza os itens */
        text-align: center;
        padding: 0 5vw;
    }

    .text-content,
    .image-content {
        max-width: 90%;
        margin-right: 0; /* Remove a margem direita em telas menores */
    }

    .image-content img {
        max-width: 90%; /* Ajusta o tamanho da imagem em telas menores */
        max-height: 200px; /* Ajusta a altura máxima da imagem em telas menores */
    }

    .text-content h1 {
        font-size: 2.9em; /* Ajusta o tamanho do título em telas menores */
        white-space: normal; /* Permite que o texto quebre linha em telas menores */
    }

    .text-content h2 {
        font-size: 1.5em; /* Aumenta o tamanho do subtítulo em telas menores */
    }

    .text-content p {
        font-size: 1.3em; /* Aumenta o tamanho do subtítulo em telas menores */
        white-space: normal; /* Permite que o texto quebre linha em telas menores */
    }

    /* SOBRE */
    #sobre {
        padding: 20px 0; /* Ajusta o padding para a seção SOBRE */
        text-align: center; /* Centraliza o texto */
    }

    #sobre h1,
    #sobre h2,
    #sobre p {
        font-size: 1.3em; /* Aumenta o tamanho da fonte */
    }

    #sobre h1 {
        font-size: 2.8em; /* Aumenta o tamanho do título "SOBRE" */
    }

    #sobre p {
        max-width: 70%; /* Limita a largura do parágrafo */
        margin: 0 auto; /* Centraliza o parágrafo */
    }

    /* HABILIDADES */
    #habilidades {
        padding: 20px 0; /* Ajusta o padding para a seção HABILIDADES */
        text-align: center; /* Centraliza o texto */
    }

    #habilidades h1 {
        font-size: 2.8em; /* Aumenta o tamanho do título "HABILIDADES" */
    }

    #habilidades h2 {
        font-size: 1.8em; /* Aumenta o tamanho da fonte */
    }

    #habilidades p {
        font-size: 1.3em; /* Aumenta o tamanho da fonte */
        max-width: 70%; /* Limita a largura do parágrafo */
        margin: 0 auto; /* Centraliza o parágrafo */
    }

    .habilidade {
        margin-bottom: 30px; /* Adiciona espaço entre as partes */
    }

    .habilidade h2 {
        font-size: 2em; /* Aumenta o tamanho dos subtítulos */
    }

    /* PROJETOS */
    #projetos {
        padding: 20px 0; /* Ajusta o padding para a seção PROJETOS */
        text-align: center; /* Centraliza o texto */
    }

    #projetos h1,
    #projetos h2,
    #projetos p {
        font-size: 1.3em; /* Aumenta o tamanho da fonte */
    }

    #projetos h1 {
        font-size: 2.8em; /* Aumenta o tamanho do título "PROJETOS" */
    }

    #projetos p {
        max-width: 70%; /* Limita a largura do parágrafo */
        margin: 0 auto; /* Centraliza o parágrafo */
    }

    .projetos-container {
        display: flex;
        justify-content: center; /* Centraliza os projetos */
        align-items: center;
        width: 100%;
        padding: 20px 0;
        box-sizing: border-box;
        overflow: hidden; /* Garante que nada saia da área visível */
        position: relative;
    }

    .projetos-wrapper {
        display: flex;
        justify-content: center; /* Centraliza as imagens horizontalmente */
        align-items: center; /* Centraliza as imagens verticalmente */
        gap: 20px; /* Mantém o espaçamento fixo entre as imagens */
        width: 80%; /* Ajuste o tamanho do contêiner para garantir que as imagens fiquem no centro da tela */
        padding: 0;
        box-sizing: border-box;
        margin: 0 auto; /* Garante que o contêiner fique centralizado horizontalmente */
    }

    .projeto {
        display: none; /* Inicialmente, as imagens estão ocultas */
        text-align: center;
    }

    .projeto img {
        width: 80%; /* Define a largura das imagens para 80% do espaço disponível */
        height: auto;
        display: block;
        margin: 0 auto; /* Garante que a imagem seja centralizada dentro do contêiner */
        object-fit: contain;
        max-width: 100%; /* Impede que a imagem ultrapasse a largura do contêiner */
    }

    .projeto img:hover {
        transform: scale(1.07); /* Aumenta imagem ao passar o mouse */
        transition: transform 0.3s; /* Mantém a transição suave */
    }

    /* Exibe a imagem visível */
    .projeto.show {
        display: block;
    }

    .github-button {
        display: block;
        margin: 10px auto;
        font-size: 1.3em;
    }

    .arrow {
        background-color: transparent;
        border: none;
        font-size: 2em;
        cursor: pointer;
        position: absolute;
        color: #4b2e2e;
        z-index: 1;
        display: none; /* Garante que as setas sejam exibidas em telas menores */
    }

    .projeto.show + .arrow {
        display: block !important; /* Exibe a seta quando houver um projeto visível */
    }

    .left-arrow {
        left: 10px;
        top: 39%;
    }

    .right-arrow {
        right: 10px;
        top: 39%;
    }

    /* CONTATOS */
    #contatos {
        padding: 20px;
        text-align: center; /* Centraliza o texto */
        width: 100%; /* Garante que a largura da seção ocupe 100% da tela */
        box-sizing: border-box; /* Garante que o padding não afete a largura total da seção */
    }

    #contatos h1 {
        font-size: 2.8em; /* Aumenta o tamanho do título "CONTATOS" */
    }

    #contatos h2 {
        font-size: 1.3em; /* Aumenta o tamanho da fonte */
    }

    #contatos p {
        max-width: 100%;
        font-size: 1.3em;
        margin: 0 auto;
    }

    /* Diminuir apenas o tamanho do texto nos contatos */
    .contact-list span {
        font-size: 0.5em; /* Ajusta o tamanho da fonte dos textos dos contatos */
        word-break: break-word; /* Quebra o texto longo para evitar corte */
    }

    .contact-list i {
        font-size: 1.2em; /* Ajusta o tamanho dos ícones */
    }

    .contact-list li {
        margin: 40px 0; /* Diminui o espaço entre os itens de contato */
    }
}