body, html {
    height: 100%;
    margin: 0;
    font-family: sans-serif;
    background-color: #2e3193;
    color: white;
    overflow: hidden; /* Prevent scrolling on the main page */
    position: relative; /* Cria um contexto de empilhamento para o z-index do ::before funcionar */
    z-index: 0;
}

body::before {
    content: '';
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: url('../images/site-01.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(5px) grayscale(50%);
    opacity: 0.7;
    z-index: -1;
}

.container-fluid {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza verticalmente o conteúdo principal */
    align-items: flex-start; /* Alinha o conteúdo à esquerda */
    padding: 20px 20px 180px 20px; /* Aumenta o padding inferior para dar mais espaço para o footer e asides */
    box-sizing: border-box;
    overflow: hidden; /* Garante que nenhum conteúdo transborde */
}

.main-content {
    display: flex;
    flex-wrap: wrap; /* Permite que o título fique acima das colunas */
    justify-content: center; /* Centraliza as colunas */
    align-items: flex-start; /* Alinha os itens no topo para controlar o espaçamento */
    width: 100%;
    width: 100%;
    max-width: 1200px;
}

.left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha a logo principal à esquerda dentro da coluna */
    justify-content: flex-start; /* Alinha o conteúdo no topo da coluna */
    padding-top: 20px; /* Adiciona um respiro abaixo do título */
}

.right-column {
    flex: 1;
    display: flex;
    justify-content: flex-start; /* Alinha as logos à esquerda da sua coluna */
    align-items: flex-start; /* Alinha o grid de logos no topo da coluna */
}

.header {
    position: absolute;
    top: 0px;
    left: 20px;
    background-color: rgba(46, 49, 147, 0.8);
    padding: 20px;
    border-radius: 0px 0px 10px 10px;
    color: #fff;
    font-size: 36px;
}

.header h1 {
    font-size: 2em;
    margin: 0;
}

.title-container {
    width: 100%; /* Faz o container do título ocupar a largura toda */
    text-align: left; /* Alinha o texto do título à esquerda */
    margin-bottom: 20px; /* Cria o "respiro" entre o título e as logos */
}

.title-container h2 {
    font-size: 4em;
    font-weight: bold;
    margin: 0;
    white-space: nowrap;
    /* Removido: position: relative, left, top para permitir alinhamento flexbox */
}

.main-logo {
    width: 220px;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-logo img {
    width: 90%;
    object-fit: contain;
}
.other-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colunas */
    column-gap: 5px; /* Further decreased horizontal gap */
    row-gap: 20px;   /* Kept vertical gap the same */
    max-width: 450px; /* Define uma largura máxima para o grid de logos */
    margin-left: 30px; /* Adiciona um respiro em relação à logo principal */
    /* Removido: left, position: relative para permitir alinhamento flexbox */
}

.logo {
    width: 100px;
    height: 100px;
    border: 1px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    color: rgba(46, 49, 147, 0.8);
    font-size: 0.9em;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

aside {
    position: absolute;
    background-color: rgba(46, 49, 147, 0.8);
    padding: 25px;
    width: 400px;
    bottom: 100px; /* Above footer */
    color: white;
}

aside.social-media {
    left: 0;
    text-align: left;
    border-radius: 0 10px 10px 0;
}

aside.contact-info {
    right: 0;
    text-align: right;
    border-radius: 10px 0 0 10px;
}

aside p {
    margin: 10px 0;
    font-size: 1.2em;
}

aside i {
    margin-right: 15px;
    font-size: 1.5em;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0; /* Garante o alinhamento à esquerda do seu container pai */
    background-color: rgba(46, 49, 147, 0.8);
    color: white;
    width: 100%; /* Ocupa a largura toda */
    padding: 15px 20px; /* Adiciona um padding base */
    box-sizing: border-box; /* Garante que o padding não aumente a largura total */
    display: flex;
    justify-content: space-between; /* Alinha itens nas extremidades */
    align-items: center; /* Centraliza verticalmente */
    z-index: 10; /* Garante que o footer fique na frente de outros elementos */
}


.footer p {
    margin: 0;
    font-size: 0.9em;
}

.footer .footer-create-logo img {
    height: 12px; /* Altura mais adequada para o rodapé */
    display: block; /* Evita espaços extras */
}

@media (max-width: 767.98px) {
    body, html {
        height: auto; /* Remove a altura fixa para permitir o crescimento do conteúdo */
        overflow-y: auto;
        overflow-x: hidden; 
    }
    body {
        padding-bottom: 50px; /* Adiciona espaço no final do body para o rodapé fixo */
    }
    .container-fluid {
        padding: 15px;
        height: auto;      /* Permite que a altura se ajuste ao conteúdo */
        display: block;    /* Muda para o fluxo normal de documento */
        overflow: hidden; /* Mantém o overflow-x: hidden do body */
        min-height: 100vh; /* Garante que o container ocupe pelo menos a altura da tela */
    }
    .header {
        position: static;
        text-align: center;
        padding: 10px;
        border-radius: 0;
        font-size: 1.5em;
        margin-top: 15px;
    }
    .main-content {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* Garante o alinhamento correto no mobile */
        margin-top: 20px;
        display: flex; /* Re-add flex for column layout */
    }
    .title-container {
        margin-bottom: 0; /* Remove a margem no mobile onde o layout é empilhado */
    }
    .left-column,
    .right-column {
        width: 100%;
        margin-right: 0; /* RESETA a margem do desktop que causava o vazamento */
        padding-top: 0; /* Reseta o padding do desktop */
        align-items: center; /* Centraliza o conteúdo interno (logo principal) */
        flex: none; /* Remove flex properties that might interfere */
    }
    .title-container h2 {
        font-size: 8px; /* Reduz ainda mais a fonte para caber na tela */
        white-space: nowrap; /* Impede a quebra de linha */
        margin: 20px 0; /* Ajuste a margem para espaçamento vertical */
        /* Removido: position: static, left, top */
    }
    .main-logo {
        width: 200px;
        height: 200px;
        margin-right: 20px; /* Centraliza e adiciona margem */
        /* Removido: position: static, left, top */
    }
    .other-logos {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 20px auto;
        max-width: 400px; /* Constrain width to help with 4 logos per line */
        /* Removido: position: static, left */
        /* margin: 20px auto; e max-width: 400px já centralizam */
    }
    .logo {
        width: 80px;
        height: 80px;
        font-size: 0.8em;
        margin: 5px; /* Add margin for spacing between logos */
    }
    aside {
        position: static;
        width: auto;
        padding: 15px;
        text-align: left; /* Alinha o texto à esquerda para mobile */
        border-radius: 0;
        margin: 15px;
    }
    aside.social-media,
    aside.contact-info {
        left: auto;
        right: auto; /* A margem geral do 'aside' já cria o espaçamento necessário */
    }
    /* Força o alinhamento à esquerda para a caixa de contato no mobile */
    aside.contact-info {
        text-align: left;
    }
    .footer {
        position: fixed; /* Fixa o rodapé na parte inferior */
        bottom: 0; /* Ancora na base */
        left: 0;
        flex-direction: row; /* Alinha os itens horizontalmente */
        justify-content: space-between; /* Espaça os itens */
        padding: 10px 15px; /* Reduz o padding para um rodapé menor */
    }
    .footer .footer-copyright {
        margin-bottom: 0; /* Remove a margem desnecessária */
    }

    .footer p {
        font-size: 0.7em; /* Diminui a fonte do rodapé no mobile para não quebrar linha */
    }


}

@media (max-width: 575.98px) {
    .other-logos {
        max-width: 340px; /* Adjust max-width for smaller screens to fit 4 logos */
    }
    .logo {
        width: 70px;
        height: 70px;
    }
    .header h1 {
        font-size: 1.2em;
    }
    .title-container h2 {
        font-size: 10px;
    }
    .main-logo {
        width: 150px;
        height: 150px;
    }
        .main-content,
    .left-column,
    .right-column {
        border: none !important;
        background: none !important;
    }

}
@media (max-width: 990px) {
    body, html {
        overflow-y: auto;
        overflow-x: hidden;
    }
    body { /* Aplicado a body para garantir que o scroll funcione corretamente */
        padding-bottom: 50px; /* Adiciona espaço no final do body para o rodapé fixo */
    }
    .container-fluid {
        padding: 15px;
        height: auto;
        display: block;
        overflow: hidden;
        min-height: 100vh;
    }
    .header {
        position: static;
        text-align: center;
        padding: 10px;
        border-radius: 0;
        font-size: 1.5em;
        margin-top: 15px;
    }
    .main-content {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* Garante o alinhamento correto no mobile */
        margin-top: 20px;
        display: flex; /* Re-add flex for column layout */
    }
    .left-column,
    .right-column {
        width: 100%;
        margin-right: 0; /* RESETA a margem do desktop que causava o vazamento */
        padding-top: 0; /* Reseta o padding do desktop */
        align-items: center; /* Centraliza o conteúdo interno (logo principal) */
        flex: none; /* Remove flex properties that might interfere */
    }
    .title-container h2 {
        font-size: 1.6em; /* Reduz ainda mais a fonte para caber na tela */
        white-space: nowrap; /* Impede a quebra de linha */
        margin: 20px 0; /* Ajuste a margem para espaçamento vertical */
        /* Removido: position: static, left, top */
    }
    .main-logo {
        width: 200px;
        height: 200px;
        margin: 20px auto; /* Centraliza e adiciona margem */
        /* Removido: position: static, left, top */
    }
    .other-logos {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 20px auto;
        max-width: 400px; /* Constrain width to help with 4 logos per line */
        /* Removido: position: static, left */
        /* margin: 20px auto; e max-width: 400px já centralizam */
    }
    .logo {
        width: 80px;
        height: 80px;
        font-size: 0.8em;
        margin: 5px; /* Add margin for spacing between logos */
    }
    aside {
        position: static;
        width: auto;
        padding: 15px;
        text-align: left; /* Alinha o texto à esquerda para mobile */
        border-radius: 0;
        margin: 15px;
    }
    aside p {
        font-size: 0.9em; /* Smaller font size for aside text */
    }
    aside i {
        font-size: 1.1em; /* Smaller font size for aside icons */
    }
    aside.social-media,
    aside.contact-info {
        left: auto;
        right: auto;
    }
    /* Força o alinhamento à esquerda para a caixa de contato no mobile */
    aside.contact-info {
        text-align: left;
    }
    .footer {
        position: fixed; /* Fixa o rodapé na parte inferior */
        bottom: 0; /* Ancora na base */
        left: 0;
        flex-direction: row; /* Alinha os itens horizontalmente */
        justify-content: space-between; /* Espaça os itens */
        padding: 10px 15px; /* Reduz o padding para um rodapé menor */
    }
    .footer .footer-copyright {
        margin-bottom: 0; /* Remove a margem desnecessária */
    }
    .footer p {
        font-size: 0.7em; /* Diminui a fonte do rodapé no mobile para não quebrar linha */
    }

    .main-content,
    .left-column,
    .right-column {
        border: none !important;
        background: none !important;
    }
}

@media (max-width: 575.98px) {
    .other-logos {
        max-width: 340px; /* Adjust max-width for smaller screens to fit 4 logos */
    }
    .logo {
        width: 70px;
        height: 70px;
    }
    .header h1 {
        font-size: 1.2em;
    }
    .title-container h2 {
        font-size: 1.5em;
    }
    .main-logo {
        width: 150px;
        height: 150px;
    }
    /* A regra do footer já foi definida no media query de 767px e 990px, não precisa repetir */
}

@media (min-width: 1500px) and (max-width: 1919px) {
    .other-logos {
        grid-template-columns: repeat(4, 1fr); /* Ensure 4 logos per row */
        max-width: 450px; /* Define uma largura máxima para o grid de logos */
        margin: 0 auto; /* Centraliza o grid de logos dentro da right-column */
        /* Removido: position: relative, left */
    }
    .logo {
        width: 100px;
        height: 100px;
        font-size: 0.9em;
        margin: 5px;
    }
    .main-logo {
        /* Removido: position: relative, left */
        margin: 0 auto; /* Centraliza a logo */
    }
    .title-container h2 {
        /* Removido: position: relative, left, top */
        font-size: 3em;
    }
}

/* Ajustes para Xiaomi Redmi Note 11 e telas similares */
@media (min-width: 375px) and (max-width: 424px) {
    .title-container h2 {
        font-size: 22px;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
    }
}

@media (max-width: 374px) {
    .title-container h2 {
        font-size: 18px;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
    }

    .contact-info p, .social-media p {
        font-size: 0.8em; /* Ajusta o tamanho da fonte para caber melhor */
    }
}

@media (min-width: 425px) and (max-width: 576px) {
    .title-container h2 {
        align-items: center;
        justify-content: center;
        margin-left: 20px;
        font-size: 24px;
    }
    
}

@media (min-width: 768px) and (max-width: 990px) {
    .title-container h2 {
        align-items: center;
        justify-content: center;
        margin-left: 125px;
        font-size: 32px;
    }

    /* Adiciona padding ao body para compensar a altura do footer fixo */
    body { padding-bottom: 80px; }
}

/* Ajustes para telas de 1024px de largura */
@media (min-width: 991px) and (max-width: 1200px) {
    .other-logos {
        margin-left: -250px; /* Remove a margem para aproximar da logo principal */
    }
}

@media (min-width: 1201px) and (max-width: 1499px) {
    .other-logos {
        margin-left: -350px; /* Remove a margem para aproximar da logo principal */
    }
    
}

@media (min-width: 1500px) {
    .other-logos {
        margin-left: -350px; /* Remove a margem para aproximar da logo principal */
    }
    
    .main-logo {
        margin-left: 5px; 
    }

}