body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Remove o overflow horizontal */
    box-sizing: border-box; /* Inclui padding e bordas no cálculo de largura */
    width: 100%; /* Garante que o body não ultrapasse a largura da tela */
}
/* Estilos da home */

h2{
    font-size: 2rem;
    margin-bottom: 20px;
    text-align: center;
    color: white;
}

#titulo {

    font-size: 1.5rem;
    margin-top: -2rem;
    margin-bottom: 20px;
    margin-left: -65rem;
    color: white;
}

#sobre-nos{
    text-align: center;
    margin-top: -4.5rem;
    margin-right: -70rem;;
}

#menu {
    display: flex;
    width: 30%;
    background: #13005A;
    margin-bottom: 20px;
    padding: 5rem;
    gap: 1rem;
    justify-content: center;
    font-weight: bold;
    align-items: center;
    margin-top: -2rem;
    border-radius: 50px;
}

.flex-box {
    display: flex;
    flex-direction: row;
    background: #00337C;
    width: 80%;
    padding: 2rem;
    border: 2px solid white;
    border-radius: 10px;
    justify-content: space-between;
    align-items: center;
}

.flex-item {
    flex: 1;
    text-align: center;
    color: white;
}

/* redirecionar links */
a {
    font-size: 0.8rem;
    font-weight: bold; /* Deixa o texto em negrito */
    text-decoration: none;
}

/* Adicione isso ao seu arquivo CSS */

#descricao {
    margin-top: 3rem;
    margin-bottom: -0,75rem;
    margin-left: 20%;
    width: 50%;
    background-color: #211c844d;
    border-radius: 10px;
    border: 1px solid white;
    
    justify-content: center;
    align-items: center;
    padding: 1.5rem;

    font-size: 1.2rem; /* Tamanho da fonte */
    word-wrap: break-word; /* Compatível com navegadores mais antigos */
    overflow-wrap: break-word;
    hyphens: auto; /* Hifeniza palavras longas */
    
}

#email{
    color: #03C988;
}


a:hover {
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}

#simuladordisplay a {
    color: #03C988;
}

/* Remove o overflow horizontal */

/* Estilos responsivos para dispositivos móveis */
@media (max-width: 768px) {

    body {
        margin: 0; /* Remove margens padrão */
        padding: 0; /* Remove padding padrão */
        overflow-x: hidden; /* Esconde o overflow horizontal */
    }

    #titulo {
        margin-left: -8rem;
        font-size: 1.2rem; /* Ajusta o tamanho do título */
        margin-bottom: 10px; /* Reduz a margem inferior */
        text-align: center; /* Centraliza o título */
    }

    #descricao {
        width: 90%; /* Ajusta a largura para telas menores */
        max-width: 90%; /* Garante que a largura não ultrapasse 90% */
        margin: 0 auto; /* Centraliza horizontalmente */
        padding: 1rem; /* Ajusta o padding */
        font-size: 1rem; /* Ajusta o tamanho da fonte */
        text-align: center; /* Centraliza o texto */
        box-sizing: border-box; /* Inclui padding e bordas no cálculo da largura */
    }

    #menu {
        flex-direction: column; /* Alinha os itens verticalmente */
        width: 80%; /* Ajusta a largura para caber melhor */
        padding: 1rem; /* Ajusta o padding */
        gap: 1rem; /* Espaçamento entre os itens */
        margin: 0 auto; /* Centraliza o menu */
    }

    .flex-box {
        flex-direction: column; /* Alinha os itens verticalmente */
        width: 100%; /* Ajusta a largura */
        padding: 1rem; /* Ajusta o padding */
        gap: 10px; /* Espaçamento entre os itens */
    }

    .flex-item {
        font-size: 1rem; /* Ajusta o tamanho da fonte */
        text-align: center; /* Centraliza o texto */
    }

    a {
        font-size: 1rem; /* Ajusta o tamanho da fonte dos links */
        word-wrap: break-word; /* Permite quebra de linha em links longos */
    }

   

    #sobre-nos {
        text-align: center; /* Centraliza o link "Sobre Nós" */
        margin-top: -5rem; /* Adiciona espaçamento superior */
        
    }

    #redirecionar {
        font-size: 1rem; /* Ajusta o tamanho do texto */

    }

    #cabecalho {
        display: flex;
        flex-direction: column; /* Alinha os itens verticalmente */
        align-items: center; /* Centraliza os itens horizontalmente */
        padding: 10px; /* Adiciona padding ao cabeçalho */
        gap: 10px; /* Espaçamento entre o título e o link */
    }

    #sobre-nos {
        text-align: center; /* Centraliza o link "Sobre Nós" */
        margin: 10px auto; /* Adiciona espaçamento superior e centraliza horizontalmente */
        font-size: 1rem; /* Ajusta o tamanho da fonte */
    }
}

/* Estilos para dispositivos muito pequenos */
@media (max-width: 480px) {
    #titulo {
        font-size: 1.5rem; /* Reduz ainda mais o tamanho do título */
        margin-bottom: 10px; /* Ajusta a margem inferior */
    }

    #descricao {
        width: 95%; /* Ajusta a largura para telas muito pequenas */
        padding: 0.8rem; /* Reduz o padding */
        font-size: 0.9rem; /* Ajusta o tamanho da fonte */
    }

    #menu {
        padding: 0.8rem; /* Reduz o padding */
        gap: 0.5rem; /* Reduz o espaçamento entre os itens */
    }

    .flex-box {
        padding: 0.5rem; /* Ajusta o padding */
        width: 100%; /* Ajusta a largura para evitar overflow */
    }

    #simuladordisplay a {
        font-size: 0.9rem;
    }

    .flex-item {
        font-size: 0.9rem; /* Ajusta o tamanho do texto */
    }

    a {
        font-size: 0.8rem; /* Ajusta o tamanho da fonte dos links */
    }

    #rodape {
        font-size: 0.8rem; /* Reduz o tamanho do texto no rodapé */
        text-align: center; /* Centraliza o texto */
    }

    #sobre-nos {
        font-size: 0.9rem; /* Ajusta o tamanho da fonte para telas menores */
    }

    #cabecalho {
        padding: 5px; /* Reduz o padding para telas muito pequenas */
        gap: 5px; /* Reduz o espaçamento entre os itens */
    }

    #sobre-nos {
        text-align: center; /* Centraliza o link "Sobre Nós" */
        margin: 10px auto; /* Adiciona espaçamento superior e centraliza horizontalmente */
        font-size: 0.9rem; /* Ajusta o tamanho da fonte para telas menores */
    }
}