@media (max-width: 768px) {

    .caption-bg {

        align-items: center; /* Centraliza o texto em telas pequenas */

        text-align: center; /* Alinha o texto ao centro */

    }



    .caption-bg h2 {

        font-size: 2rem; /* Reduz o tamanho do título */

        margin-left: 0; /* Remove margem à esquerda */

    }



    .caption-bg p {

        font-size: 2.4rem; /* Reduz o tamanho do parágrafo */

        margin-left: 0; /* Remove margem à esquerda */

    }



    /* Ajustar colunas para alinhamento à esquerda */

    .slogan .col-12 {

        margin-bottom: 20px; /* Espaçamento entre itens empilhados */

        margin-left: 20px;

        text-align: left !important; /* Garante alinhamento à esquerda */

    }



    /* Ajustar flex container */

    .slogan .d-flex {

        justify-content: flex-start; /* Alinha conteúdo à esquerda */

        text-align: left !important; /* Texto à esquerda */

    }



    /* Reduzir tamanho do ícone para telas pequenas */

    .slogan img {

        width: 70px !important; /* Ícone menor para telas pequenas */

    }



    /* Tamanho menor do texto */

    .slogan p {

        font-size: 1rem; /* Texto menor para telas pequenas */

    }



    .titulo-icone {

    font-size: 1.3rem !important; /* Tamanho do texto destacado */

    color: #FFF !important; /* Cor branca */

    }



    .about-text p {

    width: 100%;

    }



    .about-espaco {

    padding-top: 30px;

    }



}



@media (max-width: 576px) {

    .caption-bg h2 {

        font-size: 2rem; /* Ainda menor para telas muito pequenas */

    }



    .caption-bg p {

        font-size: 2.4rem; /* Ajusta o parágrafo para telas menores */

    }



    /* Ajustar colunas para alinhamento à esquerda */

    .slogan .col-12 {

        margin-bottom: 20px; /* Espaçamento entre itens empilhados */

        margin-left: 20px;

        text-align: left !important; /* Garante alinhamento à esquerda */

    }



    /* Ajustar flex container */

    .slogan .d-flex {

        justify-content: flex-start; /* Alinha conteúdo à esquerda */

        text-align: left !important; /* Texto à esquerda */

    }



    /* Reduzir tamanho do ícone para telas pequenas */

    .slogan img {

        width: 70px !important; /* Ícone menor para telas pequenas */

    }



    /* Tamanho menor do texto */

    .slogan p {

        font-size: 1rem; /* Texto menor para telas pequenas */

    }



    .titulo-icone {

    font-size: 1.3rem !important; /* Tamanho do texto destacado */

    color: #FFF !important; /* Cor branca */

    }



    .about-text p {

    width: 100%;

    }



    .about-espaco {

    padding-top: 30px;

    }

}





/* Responsividade */

@media (max-width: 768px) {

    .navbar-nav {

        padding: 0;  /* Remover padding extra */

        margin: 0;   /* Remover margin extra */

        width: 100%; /* Garantir que o menu ocupe toda a largura disponível */

    }

}



/* Ajuste para a barra de navegação no rodapé no celular */

@media (max-width: 767px) {

    .footer-bar {

        padding: 20px; /* Ajuste do espaçamento */

        height: auto;

    }



    /* Barra de navegação no rodapé */

    .footer-menu {

        display: flex;

        flex-direction: column; /* Faz os itens se alinharem em coluna no celular */

        align-items: center; /* Centraliza os itens */

        gap: 10px; /* Espaço entre os itens */

    }



    .footer-menu li {

        width: 100%; /* Faz com que cada item ocupe 100% da largura */

        text-align: center; /* Centraliza o texto dos itens */

    }



    /* Adiciona uma linha horizontal entre as linhas de itens */

    .footer-menu li:not(:last-child)::after {

        content: "";

        display: block;

        width: 90%; /* Ajuste da largura da linha */

        height: 1px;

        background-color: #ddd; /* Cor da linha */

        margin: 10px auto; /* Espaço acima e abaixo da linha */

    }

}