/* Container principal (preenche a tela inteira) */
section {
    display: flex;
    height: 100vh;
}

/* Container da Esquerda (metade da tela) */
.left-container {
    width: 50%;
    background-color: #212121;  /* Cor de fundo */
}

/* Imagem ocupa a totalidade do container */
.left-container img {
    width: 100%;
    height: 100vh;
    object-fit: cover;  /* A imagem se ajusta e cobre o fundo */
}

/* Container de Login */
.login-container {
    width: 50%;
    background-color: #212121;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Card de Login */
.card {
    background-color: white;
    border-radius: 5px;
    padding: 30px;
    width: 100%;
    max-width: 400px;  /* Largura máxima do card */
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.7);
    
}

/* Título do Card */
.card-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
}

/* Campo de formulário */
.form-label {
    font-weight: 600;
    color: #333;
}

.mb-3 {
    margin-bottom: 1.5rem !important;
}

/* Botão de Login */
.btn-login {
    background-color: #fccc04;
    border-color: #fccc04;
    color: black;
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
}

.btn-login:hover {
    background-color: #e6b800;
    border-color: #e6b800;
}

/* Links (se houver) */
a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Logo */
.logo {
    width: 200px; /* Ajuste o tamanho do logo conforme necessário */
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Media Query para Mobile */
@media (max-width: 767px) {
    .login-container {
        width: 100%;  /* No mobile, ocupa 100% da largura */
    }
}