footer {
    position: fixed;
    bottom: 0;
    left: 0; /* Certifique-se de que o rodapé comece da borda esquerda */
    width: 100%;
    margin: 0; /* Margem zero para evitar espaçamento indesejado */
    padding: 0; /* Preenchimento zero para evitar espaçamento indesejado */
    height: 30px; /* Defina a altura do rodapé conforme necessário */
    background-color: #333; /* Cor de fundo do rodapé */
    color: #fff; /* Cor do texto do rodapé */
    text-align: center;
    line-height: 35px; /* Centralizar verticalmente o conteúdo do rodapé */
    font-size: small;
    font-family: Arial;
    opacity: 70%;
}

header {
    position: fixed;
    top: 0;
    left: 0; /* Certifique-se de que o rodapé comece da borda esquerda */
    width: 100%;
    margin: 0; /* Margem zero para evitar espaçamento indesejado */
    padding: 0; /* Preenchimento zero para evitar espaçamento indesejado */
    height: 50px; /* Defina a altura do rodapé conforme necessário */
    background-color: #333; /* Cor de fundo do rodapé */
    color: #fff; /* Cor do texto do rodapé */
    text-align: center;
    line-height: 50px; /* Centralizar verticalmente o conteúdo do rodapé */
    font-size: x-large;
    font-family: Arial;
    opacity: 70%;
}

body {
    display: flex; /* Define o display como flex */
    background-color: lightslategray;
    background-image: url('../Images/luaRecolorida2.png');
    background-size: 70%;
    background-position: right top;
    background-repeat: no-repeat;
}

.custom-font {
    font-family: "Arial", arial; /* Especifica a fonte personalizada */
}

.alinhamento-text-center {
    text-align: center; /* Centraliza horizontalmente */
}

.cantos-arredondados-hand {
    border-radius: 10px; /* Valor do raio dos cantos arredondados */
    cursor: pointer; /* Altera o cursor para a forma de uma mão */
}

.cantos-arredondados-alinhamento {
    border-radius: 10px; /* Valor do raio dos cantos arredondados */
    border: 2px solid #4682b4;
    text-align: center; /* Centraliza horizontalmente */
    line-height: normal; /* Redefine a altura da linha para evitar alinhamento vertical inadequado */
}

.painel-Botoes {
    background-color: #191f26;
    border: 1px solid #191f26;
    border-radius: 10px;
    opacity: 85%;
}

.btn-Entrar {
    cursor: pointer; /* Altera o cursor para a forma de uma mão */
    border-radius: 10px; /* Valor do raio dos cantos arredondados */
    text-align: right; /* Centraliza horizontalmente */
    line-height: normal; /* Redefine a altura da linha para evitar alinhamento vertical inadequado */
    background: #3CB371;
    background-image: url('../Images/iconeEntrar.png');
    background-size: 8%;
    background-position: left center;
    background-repeat: no-repeat;
    border: 2px solid #191f26;
    color: white;
    padding: 10px 20px;
    transition: transform 0.3s; /* Adicione uma transição suave para o efeito de zoom */
}
    .btn-Entrar:hover {
        transform: scale(1.2); /* Aumenta o tamanho em 10% quando o mouse passa por cima */
    }

.btn-Como-Usar {
    cursor: pointer; /* Altera o cursor para a forma de uma mão */
    border-radius: 10px; /* Valor do raio dos cantos arredondados */
    text-align: left; /* Centraliza horizontalmente */
    line-height: normal; /* Redefine a altura da linha para evitar alinhamento vertical inadequado */
    background: #87bdd8;
    background-image: url('../Images/iconeComoUsar.png');
    background-size: 13%;
    background-position: right center;
    background-repeat: no-repeat;
    border: 2px solid #191f26;
    color: white;
    padding: 10px 20px;
    transition: transform 0.3s; /* Adicione uma transição suave para o efeito de zoom */
}
    .btn-Como-Usar:hover {
        transform: scale(1.2); /* Aumenta o tamanho em 10% quando o mouse passa por cima */
    }

.btn-Limpar {
    cursor: pointer; /* Altera o cursor para a forma de uma mão */
    border-radius: 10px; /* Valor do raio dos cantos arredondados */
    text-align: left; /* Centraliza horizontalmente */
    line-height: normal; /* Redefine a altura da linha para evitar alinhamento vertical inadequado */
    background: #FFE4E1;
    background-image: url('../Images/reset.png');
    background-size: 28%;
    background-position: right center;
    background-repeat: no-repeat;
    border: 2px solid #191f26;
    color: white;
    padding: 10px 20px;
    transition: transform 0.3s; /* Adicione uma transição suave para o efeito de zoom */
}

    .btn-Limpar:hover {
        transform: scale(1.2); /* Aumenta o tamanho em 10% quando o mouse passa por cima */
    }

.btn-Parceiros {
    position: relative; /* Certifique-se de que o botão está posicionado em relação ao z-index */
    z-index: 3; /* Garante que o botão esteja acima de tudo */
    cursor: pointer; /* Altera o cursor para a forma de uma mão */
    border-radius: 10px; /* Valor do raio dos cantos arredondados */
    text-align: center; /* Centraliza horizontalmente */
    line-height: normal; /* Redefine a altura da linha para evitar alinhamento vertical inadequado */
    background: white;
    background-image: url('../Images/parceiros.gif');
    background-size: 85%;
    background-position: center center;
    background-repeat: no-repeat;
    border: 2px solid #191f26;
    color: white;
    padding: 10px 20px;
    opacity: 75%;
    transition: transform 0.3s; /* Adicione uma transição suave para o efeito de zoom */
}

    .btn-Parceiros:hover {
        transform: scale(1.2); /* Aumenta o tamanho em 10% quando o mouse passa por cima */
    }

.geral {
    position: relative; /* Necessário para o z-index funcionar */
    z-index: 1; /* Coloca a primeira div em uma camada inferior */
}

.parceiros {
    position: relative; /* Necessário para o z-index funcionar */
    z-index: 2; /* Coloca a segunda div em uma camada superior */
}