* * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

html, body {
    height: 100%;
    overflow: auto; /* Permite rolagem na página */
    -webkit-overflow-scrolling: touch; /* Suaviza a rolagem em dispositivos iOS */
}

.page {
    overflow-y: auto; /* Adiciona rolagem vertical apenas na seção principal */
    -webkit-overflow-scrolling: touch; /* Suaviza a rolagem em dispositivos móveis */
    height: 100%; /* Garante que a rolagem funcione corretamente */
}


.navbar {
    
    background-color: #eeeff6; /* Cor de fundo da barra */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 15px 30px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Sombra para dar destaque */
    position: fixed; /* Fixa a barra na parte inferior */
    bottom: 0; /* Coloca a barra no rodapé */
    width: 100%; /* Garante que ocupe toda a largura */
    z-index: 10; /* Coloca a barra acima de outros elementos */
}



.navbar a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-left: 20px;
    transition: all 0.3s;
}

.navbar a:hover {
    color: #fefefe; /* Laranja claro para hover */
}

.page {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100vh - 70px); /* Subtraindo a altura da barra de navegação */
    gap: 30px;
}

#minhaImagem {
    width: 600px; /* Aumentei o tamanho da imagem */
    height: auto; /* Mantém a proporção da imagem */
}

.formLogin {
    display: flex;
    flex-direction: column;
    background-color: #fdfdfd; /* Cor de fundo mais clara para destacar */
    border-radius: 20px; /* Bordas mais arredondadas */
    padding: 50px; /* Aumentei o padding interno */
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3); /* Sombra mais suave */
    gap: 20px; /* Espaço maior entre os elementos */
    max-width: 500px; /* Largura maior */
    width: 100%; /* Para se ajustar a telas menores */
    overflow: hidden;
}

.formLogin h1 {
    margin: 0;
    font-weight: 700;
    font-size: 2.5em; /* Título maior */
    color: #e76f51; /* Laranja principal */
    text-align: center; /* Centraliza o texto */
    margin-bottom: 20px;
}

.formLogin p {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
}

.formLogin label {
    font-size: 16px; /* Fonte maior */
    font-weight: 600; /* Negrito para destacar os textos */
    color: #333; /* Cor do texto escurecida */
}

.formLogin input {
    padding: 15px; /* Aumentei o espaço interno */
    font-size: 16px; /* Fonte maior para mais legibilidade */
    border: 1px solid #ccc; /* Borda sutil */
    border-radius: 8px; /* Bordas arredondadas */
    margin-bottom: 20px;
    transition: all 0.2s ease-in-out; /* Suaviza animações de foco */
}

.formLogin input:focus {
    border: 1px solid #2e5169; /* Destaque laranja ao focar */
    box-shadow: 0 0 8px rgba(231, 111, 81, 0.5); /* Adiciona leve brilho */
    outline: none;
}

.formLogin a {
    font-size: 15px; /* Texto levemente maior */
    color: #555; /* Cinza suave */
    text-decoration: none;
    text-align: right; /* Alinha o texto à direita */
    transition: all 0.3s;
}

.formLogin a:hover {
    color: #2e5169; /* Cor laranja ao passar o mouse */
}

.btn {
    background-color: #2e5169; /* Laranja principal */
    color: #fff; /* Texto branco */
    font-size: 18px; /* Fonte maior no botão */
    font-weight: 600; /* Texto em negrito */
    border: none;
    padding: 15px 20px; /* Aumentei o padding */
    border-radius: 8px; /* Bordas arredondadas */
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: #f4a261; /* Laranja mais claro no hover */
    transform: scale(1.05); /* Efeito de "crescer" ao passar o mouse */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra no hover */
}

.logoSap {
    width: 150px; /* Tamanho maior */
    height: auto;
    margin: 0 auto 20px auto; /* Centraliza a imagem e adiciona espaço abaixo */
}

/* Media Queries para dispositivos menores */
@media (max-width: 768px) {
    .page {
        flex-direction: column; /* Coloca a imagem e o formulário em uma coluna */
        height: auto; /* Permite que o conteúdo se ajuste */
        gap: 20px; /* Diminui o espaçamento entre os elementos */
    }

    #minhaImagem {
        width: 100%; /* Faz a imagem ocupar toda a largura disponível */
        max-width: 500px; /* Limita a largura máxima da imagem */
    }

    .formLogin {
        padding: 20px; /* Diminui o padding para telas pequenas */
        max-width: 90%; /* Ajusta a largura para 90% da tela */
    }

    .formLogin h1 {
        font-size: 2em; /* Reduz o tamanho da fonte do título */
        margin-bottom: 15px;
    }

    .formLogin input, .formLogin button {
        font-size: 14px; /* Reduz o tamanho da fonte nos inputs e no botão */
        padding: 12px; /* Diminui o padding */
    }

    .navbar {
        padding: 10px 20px; /* Diminui o padding da navbar */
    }

    .navbar a {
        font-size: 14px; /* Diminui o tamanho da fonte dos links */
    }
}

@media (max-width: 768px) {
    .navbar {
        position: fixed; /* Fixa a barra no topo */
        top: 0; /* Move para o topo */
        bottom: unset; /* Remove a posição no rodapé */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ajusta a sombra para o topo */
    }

    .page {
        margin-top: 70px; /* Garante que o conteúdo não fique escondido atrás da barra */
    }
}

{
    {
        
    }
}