html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    background-image: url('../imagens/fundo__.jpg');
    background-size: cover; /* Faz a imagem cobrir toda a área */
    background-repeat: no-repeat; /* Evita que a imagem se repita */
    background-position: center; /* Centraliza a imagem */
    background-attachment: fixed; /* Mantém a imagem fixa durante a rolagem */
    color: #f0f0f0; /* Cor de texto padrão para boa leitura em fundos escuros */
}
.menu-toggle-label {
    display: none; /* Fica oculto em telas grandes */
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1001; /* Garante que fique acima da barra lateral quando ela aparecer */
    font-size: 1.8rem;
    color: white;
    background-color: rgba(40, 40, 40, 0.8);
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}
 
.title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Espaço entre o ícone e o texto */
    margin-bottom: 2rem; /* Espaço antes do formulário */
}

.title-icon {
    width: 48px;
    height: 48px;
}

.title-container h1 {
    font-size: 3rem;
    margin: 0;
    color: #212529; /* Cor escura para fundo claro */
}

main {
    margin-left: 250px; /* Espaço para a barra lateral */
    flex-grow: 1;
}

.site-footer {
    background-color: #31345f;
    color: white;
    text-align: center;
    padding: 20px 0;
}
/* Estilos para o formulário com Floating Labels (inspirado no Bootstrap) */
.form-floating {
    position: relative;
    margin-bottom: 1rem;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(3.5rem + 2px);
    padding: 1rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057; /* Cor do texto do input */
    background-color: #fff; /* Fundo branco do input */
    background-clip: padding-box;
    border: 1px solid #ced4da; /* Borda cinza claro */
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-floating > .form-control {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem .75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
    color: #6c757d; /* Cor do label */
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

/* O placeholder é necessário, mas não queremos que ele apareça */
.form-control::placeholder {
    color: transparent;
}

.btn-bd-primary {
    color: #fff;
    background-color: #31345f; /* Cor do rodapé para consistência */
    border: 1px solid #5a5e9a;
    border-radius: .25rem;
    font-size: 1rem;
    cursor: pointer;
    transition: all .15s ease-in-out;
}

.btn-bd-primary:hover {
    background-color: #4a4e8c;
    border-color: #7e83c2;
}

.button-group {
    display: flex;
    justify-content: center;
    gap: 1rem; /* Espaço entre os botões */
    margin-top: 1.5rem;
}

/* Estilo para o botão secundário (Nova Busca) */
.btn-bd-secondary {
    color: #31345f; /* Cor primária do tema */
    background-color: transparent;
    border: 1px solid #31345f; /* Borda com a cor primária */
    border-radius: .25rem;
    font-size: 1rem;
    cursor: pointer;
    transition: all .15s ease-in-out;
}

.btn-bd-secondary:hover {
    color: #fff;
    background-color: #31345f; /* Inverte as cores no hover */
}

/* Ajuste de padding para ambos os botões */
.form-group .btn-bd-primary,
.form-group .btn-bd-secondary {
    padding: 0.75rem 1.5rem;
}

.site-footer p {
    margin: 0;
}
.about-container {
    background-color: #fff; /* Fundo branco sólido */
    
    padding: 30px;
    border-radius: 10px;
    margin: 30px auto; /* Espaçamento entre seções e centralização */
    max-width: 960px;  /* Largura máxima para melhor leitura em telas grandes */
    width: 90%;        /* Largura responsiva */

    /* Layout para alinhar imagem e texto */
    display: flex;
    align-items: center;
    gap: 30px; /* Espaço entre a imagem e o texto */
}

.about-text {
    flex: 1; /* Faz o container de texto ocupar o espaço restante */
}
/* Deixa o layout responsivo para celulares */
@media (max-width: 768px) {
    .about-container {
        flex-direction: column; /* Empilha a imagem e o texto */
        text-align: center;
    }

    main,
    .site-footer {
        margin-left: 0; /* Remove a margem lateral para o conteúdo ocupar a tela toda */
    }
}