body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #011349, #032eaf); /* Degradê do azul escuro ao azul claro */
    color: white;
}

.logo-container {
    position: absolute;
    top: 30px;
    left: 30px;
}

.logo-container img {
    max-width: 300px;
    height: auto;
}

.logoUnity-container {
    position: absolute;
    top: 20px;
    right: 20px;
}

.logoUnity-container img {
    max-width: 200px;
    height: auto;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

h1 {
    margin-bottom: 20px;
}

form {
    margin-bottom: 20px;
}

input[type="text"] {
    padding: 10px;
    margin: 10px;
    width: 200px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #011f7a;
    color: white;
}

.button-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espaçamento entre os botões */
    margin-top: 10px;
}

button {
    padding: 10px 20px;
    background-color: #032eaf; /* Azul */
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #1c6691;
}

#result p {
    color: white; /* Cor padrão do texto do resultado */
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#result p.success {
    color: green;
}

#result p.error {
    color: red;
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 500px; /* Maximum width */
    text-align: center;
    border-radius: 15px; /* Added border-radius to make the corners rounded */
    position: relative; /* Added to position the watermark absolutely */
    z-index: 2; /* Ensuring modal content is above watermark */
}

.watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3; /* Adjust opacity as needed */
    max-width: 80%;
    max-height: 80%;
    pointer-events: none; /* So the watermark doesn't interfere with other content */
    z-index: 1; /* Watermark behind the text and button */
}

.contrate-button {
    padding: 10px 20px;
    background-color: #008a2e; /* Verde */
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none; /* Remove underline from link */
    display: inline-block;
    text-align: center;
    margin-top: 10px;
    z-index: 3; /* Certifique-se de que este valor seja maior que o da watermark */
    position: relative; /* Mantém o botão posicionado acima da watermark */
}

.contrate-button:hover {
    background-color: #00a36d; /* Verde mais claro */
}

.modal-content p,
#showListButton {
    position: relative;
    z-index: 2; /* Text and button in front of the watermark */
}

.close-button {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    line-height: 1; /* Garante que o X esteja centralizado verticalmente */
    cursor: pointer;
    padding: 0; /* Remove padding para evitar deslocamento */
    position: absolute; /* Posiciona o botão dentro do contêiner da modal */
    top: 10px; /* Alinha o botão ao topo da modal */
    right: 10px; /* Alinha o botão à direita da modal */
    width: 28px; /* Define a largura do botão */
    height: 28px; /* Define a altura do botão */
    text-align: center; /* Centraliza o "X" horizontalmente */
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Estilos para o Modal de Coleta de Informações */
#infoModal .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    text-align: center;
    border-radius: 15px;
    position: relative;
}

/* Botão de Fechar para o Novo Modal */
#infoModal .close-button {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    text-align: center;
}

#infoModal .close-button:hover,
#infoModal .close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Inputs de Texto Centralizados e com Texto Branco */
#infoModal input[type="text"],
#infoModal input[type="tel"] {
    padding: 10px;
    margin: 10px auto;
    width: 80%; /* Centraliza e ajusta a largura dos inputs */
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #ffffff;
    color: rgb(37, 37, 37); /* Cor do texto preta */
    display: block; /* Centraliza os inputs no modal */
}

/* Cor do Placeholder dos Inputs para Preto */
#infoModal input[type="text"]::placeholder,
#infoModal input[type="tel"]::placeholder {
    color: rgb(185, 185, 185); /* Cor do placeholder preta */
}

/* Cor do Título para Preto */
#infoModal h2 {
    color: rgb(0, 6, 26); /* Cor do título preta */
}

#infoModal label {
    color: black;
    display: block;
    margin-bottom: 10px;
    text-align: left;
}

#infoModal button {
    padding: 10px 20px;
    background-color: #268bd2;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

#infoModal button:hover {
    background-color: #1c6691;
}

/* Estilo para diminuir o tamanho do texto do consentimento */
#infoForm label {
    font-size: 0.9em; /* Diminui o tamanho do texto */
    color:rgb(104, 104, 104)
}


/* Estilo do botão de login */
.login-button {
    position: absolute;
    top: 100px;
    right: 80px;
    padding: 10px 20px;
    background-color: #032eaf;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.login-button:hover {
    background-color: #1c6691;
}

/* Estilos para o Modal de Login */
#loginModal .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    text-align: center;
    border-radius: 15px;
    position: relative;
}

/* Cor do Título para Preto */
#loginModal h2 {
    color: rgb(0, 6, 26); /* Cor do título preta */
}

/* Botão de Fechar para o Modal de Login */
#loginModal .close-button {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    text-align: center;
}

#loginModal .close-button:hover,
#loginModal .close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Inputs de Login */
#loginModal input[type="text"],
#loginModal input[type="password"] {
    padding: 10px;
    margin: 10px auto;
    width: 80%;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    color: black;
    display: block;
}

#loginModal button {
    padding: 10px 20px;
    background-color: #268bd2;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

#loginModal button:hover {
    background-color: #1c6691;
}

/* Estilos para telas pequenas */
@media (max-width: 600px) {
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    form {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    input[type="text"] {
        width: 80%; /* Aumentar a largura dos inputs em telas menores */
        max-width: 300px; /* Definir um limite máximo de largura */
    }

    .button-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .button-container button {
        width: 80%;
        max-width: 200px;
        margin: 5px 0; /* Adicionar margem entre os botões */
    }
}