/* Estilos Gerais */
body {
    font-family: 'Press Start 2P', cursive;
    margin: 0;
    padding: 0;
    background-image: url('images/bedrock-texture.webp');
    color: #fff;
    text-align: center;
    box-sizing: border-box;
}

/* Cabeçalho e Navegação */
header {
    background-color: #2a6f2b; /* cor do fundo do cabeçalho */
    background-image: url('images/grass-texture.jpg');
    background-repeat: repeat;
    padding: 10px 20px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000; /* Garante que o menu fique no topo */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Alinha "Vilinha" à esquerda e o menu à direita */
    height: 60px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
    margin-top: 0; /* Evita que o conteúdo fique atrás do menu */
}

    /* Título do cabeçalho */
    header h1 {
        font-size: 24px;
        margin: 0;
        color: #fff;
        text-transform: uppercase;
        text-align: left; /* Alinha o título à esquerda */
        margin-left: 20px; /* Ajusta a posição do título mais para a esquerda */
        flex-grow: 0; /* Impede o título de crescer */
    }

/* Menu Horizontal */
nav {
    display: flex;
    justify-content: flex-end; /* Alinha o menu à direita */
    margin-right: 55px; /* Move o menu um pouco para a esquerda */
}

    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 20px;
    }

        nav ul li {
            display: inline-block;
        }

            nav ul li a {
                text-decoration: none;
                color: white;
                font-size: 1.1rem;
                transition: all 0.3s ease;
            }

                /* Sombra no texto ao passar o mouse */
                nav ul li a:hover {
                    text-shadow: 0 0 15px rgba(0, 0, 0, 0.8); /* Sombra mais escura e intensa no texto */
                }

/* Estilos do ícone de menu */
.menu-icon {
    display: none; /* escondido por padrão */
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    width: 25px;
    height: 20px;
    margin-right: 55px; /* Move o menu um pouco para a esquerda */
}


    .menu-icon div {
        height: 4px;
        width: 100%;
        background-color: white;
    }

/* Menu Responsivo - em telas pequenas (max-width: 768px) */
@media (max-width: 1024px) {
    nav ul {
        display: none; /* esconde o menu horizontal em telas pequenas */
    }

    .menu-icon {
        display: flex; /* exibe o ícone de menu */
    }

    nav.active ul {
        display: flex;
        flex-direction: column; /* o menu se torna vertical */
        gap: 10px;
        background-color: #333;
        position: absolute;
        top: 60px; /* DISTÂNCIA DO TOPO */
        left: 0;
        width: 100%;
        padding: 10px;
        text-align: center;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); /* Sombra do menu expandido */
        border-radius: 5px;
    }

    nav.active ul li {
        margin: 10px 0;
    }
}











/* Estilo para o banner */
#banner {
    position: relative;
    width: 100%;
    height: 100vh; /* O banner ocupa toda a altura da tela */
    overflow: hidden;
    background-image: url('images/Dirtbackground.webp'); /* Imagem de fundo */
    background-size: cover;
    background-position: center;
}

    /* Pseudo-elemento para adicionar a camada de opacidade preta */
    #banner::before {
        content: "";
        position: absolute;

        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Cor preta com opacidade de 50% */
        z-index: 1; /* Coloca a camada acima da imagem de fundo e das imagens 360 */
    }

/* Conteúdo do banner */
.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2; /* Fica acima da camada de opacidade */
    color: #fff;
}

.download-button {
    padding: 10px 20px;
    background-color: #6ABE30;
    color: #fff;
    border: none;
    text-decoration: none;
    font-size: 18px;
    border-radius: 5px;
}

    .download-button:hover {
        background-color: #2F5127;
    }

/* Para as imagens de 360 */
.banner-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Isso garante que as imagens sejam redimensionadas corretamente */
    visibility: hidden; /* Inicialmente, as imagens ficam invisíveis */
    z-index: 0; /* As imagens do 360 ficam atrás da camada de opacidade */
}






/* Sobre a Vilinha - Cards */
#sobre {
    padding: 40px;
    background-image: url('images/CapaVilinha-old.jpg');
}

    #sobre h2 {
        font-size: 36px;
        margin-bottom: 20px;
    }

.cards-container {
    display: flex;
    justify-content: center;
    gap: 30px;
}

/* Ajustes para Cards */
.card {
    background-color: rgba(246, 246, 246, 0.8); /* Fundo mais opaco */
    border-radius: 10px; /* Borda mais suave */
    padding: 20px;
    color: black;
    width: 30%; /* Tamanho do card */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Transição mais suave */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Sombra mais profunda */
}


/* Efeito de hover mais dinâmico */
.card:hover {
    transform: scale(1.05);
    background-color: rgba(246, 246, 246, 1); /* Cor de fundo ao passar o mouse */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}


    .card h3 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .card p {
        font-size: 16px;
    }


#mapa-regioes {
    background-color: rgba(31, 31, 31, 0.92); /* Cor de fundo escura */
    background-size: cover;
    background-position: center;
    padding: 60px 20px;
    color: white;
}

.mapa-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}



.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.card-legenda {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.mapa-texto {
    width: 55%; /* Largura do texto */
    padding-left: 20px;
}

    .mapa-texto h2 {
        font-size: 36px;
        margin-bottom: 20px;
        font-weight: bold;
    }

    .mapa-texto p {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

/* Responsividade */
@media (max-width: 768px) {
    .mapa-container {
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 80%; /* Reduz o tamanho do card para telas pequenas */
        margin-bottom: 20px;
    }

    .mapa-texto {
        width: 80%;
        text-align: center;
    }
}

#sobre {
    background-color: rgba(31, 31, 31, 0.92); /* Cor de fundo escura */
    background-size: auto;
    background-position: center;
    padding: 60px 20px;
    color: white;
}

.sobre-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card {
    width: 40%; /* Largura do card */
    background-color: rgba(233, 233, 233, 0.6); /* Fundo escuro no card */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
}

.card-img {
    width: 55%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.card-legenda {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}









.sobre-texto {
    width: 55%; /* Largura do texto */
    padding-left: 20px;
}

    .sobre-texto h2 {
        font-size: 36px;
        margin-bottom: 20px;
        font-weight: bold;
    }

    .sobre-texto p {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

/* Responsividade */
@media (max-width: 768px) {
    .sobre-container {
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 80%; /* Reduz o tamanho do card para telas pequenas */
        margin-bottom: 20px;
    }

    .sobre-texto {
        width: 80%;
        text-align: center;
    }
}

.instalacao-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.imagem-card {
    width: 30%;
    border-radius: 20px;
    overflow: hidden;
}

    .imagem-card img {
        width: 100%;
        border-radius: 20px;
    }

.passos-container {
    width: 80%;
    color: #000;
}



.passo-card {
    background-color: rgba(233, 233, 233, 0.6); /* Cor de fundo inicial */
    padding: 15px;
    margin: 10px 0;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

    .passo-card:hover {
        transform: scale(1.05); /* Aumento do tamanho */
        box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.2); /* Efeito de sombra */
        background-color: white; /* Cor de fundo ao passar o mouse */
        color: #333; /* Cor do texto ao passar o mouse */
    }
        /* Card de evento */
        .card-evento .evento-imagem img

{
    width: 100%;
    height: auto; /* Mantém a proporção da imagem */
    transition: transform 0.3s ease-in-out; /* Transição suave */
}

/* Efeito de zoom no hover */
.card-evento .evento-imagem:hover img {
    transform: scale(1.1); /* Aumenta o tamanho da imagem em 10% */
}

/* Se você quiser aumentar o tamanho do card também, pode ajustar o tamanho do card */
.card-evento {
    width: 350px; /* Aumente a largura do card */
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease-in-out; /* Para o efeito de escala no card também */
}

    /* Efeito de escala no hover do card */
    .card-evento:hover {
        transform: scale(1.05); /* Dá um efeito de aumento no card */
    }


/* Botão de voltar ao topo */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg, #58C9A3, #006F3B); /* Verde Xbox */
    color: white;
    font-size: 24px;
    font-weight: bold;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s, transform 0.3s;
}

    /* Efeito hover */
    .back-to-top:hover {
        transform: scale(1.1);
        background: linear-gradient(45deg, #81C14E, #004D2B);
    }

/* Responsividade */
@media (max-width: 768px) {
    .back-to-top {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

/* Estilo do rodapé */
.footer-text {
    font-size: 12px; /* Tamanho menor */
    color: #ccc; /* Cinza claro para melhor contraste */
    text-align: center;
    padding: 10px 0;
}