html, body {
    margin-top: 100px;
    background: url('../images/fundologin4.jpg') no-repeat center center fixed;
    background-size: cover;
    color: #333; /* Cor do texto, ajustar conforme necessidade */
}


/* Animação de Fade-in para o Container */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.container {
    background-color: rgba(255, 255, 255, 0.85); /* Fundo semi-transparente */
    border-radius: 20px;
    padding: 60px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    animation: fadeIn 1s ease-out; /* Animação fade-in */
}

/* Estilos de Input e Botões */
.input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    padding: 6px 12px;
}

.input-group .form-control:focus {
    animation: highlightField 0.7s forwards; /* Animação ao focar */
}

@keyframes highlightField {
    from {
        box-shadow: none;
    }

    to {
        box-shadow: 0 0 8px seagreen; /* Cor de destaque ao focar */
    }
}

.fa {
    font-size: 16px; /* Tamanho dos ícones */
}

.btn-primary {
    background-color: seagreen; /* Cor primária da empresa */
    border-color: #003366;
    width: 100%; /* Botão ocupa toda a largura */
}

    .btn-primary:hover {
        animation: buttonHover 0.5s forwards; /* Animação ao passar o mouse */
    }

@keyframes buttonHover {
    0% {
        background-color: seagreen;
    }

    100% {
        background-color: #006633;
        transform: scale(1.05);
    }
}

.btn-link {
    color: #004488; /* Cor de link que combina com a identidade visual */
}

/* Responsividade */
@media (max-width: 768px) {
    .container {
        width: 95%; /* Mais largura em dispositivos menores */
        padding: 20px; /* Menos padding em dispositivos menores */
    }
}