* {
    margin: 0px;
}

/* =============================== CABEÇALHO E RODAPE ===============================================
===================================================================================================== */
/* FORMATAÇÃO PARA DESKTOPS */
@media (min-width: 768px) {

    /* formatação do cabeçalho*/
    .aptc_superior {
        width: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 0px;
        /* Opcional, se você quiser bordas arredondadas */
        padding-left: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
        background-color: white;
    }

    .cbc_descricao {
        width: 100%;
        text-align: center;
        font-size: large;
        padding: 10px;
        margin-top: 5px;
        border-radius: 5px;
        /* Opcional, se você quiser bordas arredondadas */
    }

    .cbc_details {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 10px;
        background-color: white;
    }

    .cbc_logo {
        width: 115px;
        min-width: 115px;
        height: auto;
    }

    .cbc_logo img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .cbc_texto {
        flex-grow: 1;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        color: #333;
    }

    .cbc_busca {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .searchBox {
        width: 170px;
        height: 35px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding-left: 10px;
        padding-right: 30px;
        /* espaço para a lupa */
    }

    .search-button {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        color: #aaa;
        font-size: 18px;
    }

    /* Formatação da navegação */
    .cbc_nav {
        display: none;
        /* Esconde o ícone de hamburger no desktop */
    }

    .navbar {
        width: 100%;
        background-color: white;
        /* Aplica a cor como fundo */
        margin: 0px;
        border-bottom: 2px solid transparent;
        /* Tornamos a borda transparente inicialmente */
        border-image: linear-gradient(to right, white, black, white) 1;
        /* Aplica o gradiente na borda */

    }

    .menu {
        display: flex;
        justify-content: flex-start;
        /* Alinha os links à esquerda */
        align-items: center;
        list-style: none;
        padding: 0px;
    }

    .menu li {
        margin: 0px;
        /* Espaço entre os itens */
        border-bottom: 2px solid transparent;

    }

    .menu a {
        text-decoration: none;
        color: black;
        padding: 10px;
        font-size: 16px;
        transition: background-color 0.3s;
        font-weight: bold;
        /* Aplica negrito ao texto */
    }

    .menu a:hover {
        color: rgb(76, 148, 75);
        /* Cor do texto ao passar o mouse */
        font-weight: bold;
        /* Aplica negrito ao texto */
    }

    .menu_empresa {
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 0;
    }

    .menu_ctt {
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 0;
    }

    .menu_busca {
        position: relative;
        padding-left: 10px;
        display: none;
    }

    .searchBox {
        width: 170px;
        height: 35px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-right: 0px;
    }

    .search-button {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        background-color: transparent;
        border: none;
        cursor: pointer;
    }

    /* Formatação do rodapé*/
    /* Estilo básico do rodapé */
    .footer {
        background-color: #333;
        color: white;
        padding: 10px 0;
        position: relative;
        bottom: 0;
        width: 100%;
        margin: 5px 0;
        /* Dá um espaço para o conteúdo da pagina */
    }

    /* Container do conteúdo do rodapé */
    .footer-content {
        display: flex;
        justify-content: space-between;
        align-items: right;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* Colunas do rodapé */
    .footer-col {
        width: auto;
        /* Tamanho da coluna */
    }

    .footer-col p {
        margin: 10px 0;
        display: inline-flex;
        align-items: center;
        padding-right: 30px;
    }

    /* Informações de contato */
    .contact-info {
        display: flex;
        align-items: center;
    }

    .contact-info i {
        margin-right: 10px;
        font-size: 18px;
        /* Ícone um pouco maior */
    }

    .contact-info span {
        font-size: 16px;
        /* Tamanho da fonte do texto */
    }
}

/*=================================================================================================
=================================================================================================== */

@media (max-width: 768px) {

    /* 1. Ajuste para a cbc_descricao ocupar 100% da tela */
    .aptc_superior {
        width: 100%;
        display: flex;
        flex-direction: column;
        border-bottom: 2px solid transparent;
        /* Tornamos a borda transparente inicialmente */
        border-image: linear-gradient(to right, white, black, white) 1;
        /* Aplica o gradiente na borda */
        padding: 5px;
        box-sizing: border-box;
        /* Garante que o padding não cause overflow */
        background-color: white;
    }

    /* cbc_descricao ocupa 100% da largura e tem borda */
    .cbc_descricao {
        width: 100%;
        text-align: center;
        font-size: large;
        padding: 10px;
        margin-top: 5px;
        border: 1px solid #333;
        /* Borda externa */
        border-radius: 5px;
        box-sizing: border-box;
        /* Para garantir que o padding não cause overflow */
    }

    /* 2. Desativa a div cbc_busca (caixa de busca com a lupa) */
    .cbc_busca {
        display: none;
        /* Esconde a caixa de busca */
    }

    /* 3. Logo e texto lado a lado */
    .cbc_details {
        display: flex;
        justify-content: center;
        /* Alinha logo e texto à esquerda */
        align-items: center;
        width: 100%;
        /* Garantir que ocupe toda a largura disponível */
        padding: 5px 10px;
        box-sizing: border-box;
        overflow: hidden;
        /* Impede que o conteúdo saia da tela */
    }

    /* Logo com largura maior (100px agora) */
    .cbc_logo {
        width: 160px;
        /* Aumentando a largura da logo */
        height: auto;
        margin-right: 10px;
        /* Garantir um espaço entre a logo e o texto */
    }

    .cbc_logo img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Texto ao lado da logo */
    .cbc_texto {
        text-align: left;
        font-size: 12px;
        /* Reduzindo o tamanho da fonte do texto */
        font-weight: bold;
        color: #333;
        white-space: normal;
        /* Permite que o texto quebre em várias linhas */
        word-wrap: break-word;
        /* Garante que o texto não ultrapasse o limite */
        overflow: hidden;
        /* Impede que o texto saia da tela */
        flex-grow: 1;
        /* Garante que o texto ocupe o restante da linha */
    }

    .cbc_nav {
        display: block;
        /* Exibe o ícone de hambúrguer */
        position: flex;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 10;

    }

    .cbc_nav .bar {
        width: 25px;
        height: 3px;
        background-color: #333;
        margin: 5px 0;
        transition: 0.3s;
    }

    /* Animação para transformar o hambúrguer em "X" */
    .cbc_nav.open .bar1 {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .cbc_nav.open .bar2 {
        opacity: 0;
    }

    .cbc_nav.open .bar3 {
        transform: rotate(45deg) translate(-5px, -6px);
    }


    /*================================================================================================*/
    /* Formatação da navegação */
    /* A navbar vai empurrar os itens para a esquerda */
    .navbar {
        position: relative;
    }

    /* Menu de navegação escondido por padrão em telas pequenas */
    .menu {
        display: none;
        /* Esconde o menu inicialmente */
        flex-direction: column;
        width: 100%;
        background-color: white;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 10px 20px;
        z-index: 5;
        /* Garante que o menu fique acima do conteúdo */
        list-style: none;
        /* Remove os pontos da lista */
        margin: 0;
        /* Remove qualquer margem padrão da lista */
    }

    .navbar.show .menu {
        display: flex;
        /* Exibe o menu quando o hambúrguer for clicado */
    }

    /* Estilizando os links */
    .menu li a {
        text-decoration: none;
        /* Remove o sublinhado */
        color: #333;
        /* Cor do texto */
        font-size: 18px;
        /* Tamanho da fonte */
        font-weight: bold;
        /* Deixar o texto em negrito */
        padding: 10px;
        display: block;
        /* Garante que o link ocupe toda a largura do item */
        transition: background-color 0.3s ease;
        /* Adiciona efeito de transição */
    }

    /* Efeito ao clicar nos links */
    .menu li a:active {
        background-color: #f0f0f0;
        /* Cor de fundo ao clicar o mouse */
        color: #000;
        /* Muda a cor do texto ao clicar o mouse */
    }

    /* Retira o botão do menu */
    .search-button {
        display: none;

    }

    .searchBox {
        width: 100%;
        /* Faz a caixa de texto ocupar 100% do espaço disponível */
        max-width: 250px;
        /* Limita o tamanho máximo da caixa de texto */
        height: 35px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-right: 0px;
        box-sizing: border-box;
        /* Garante que o padding e borda sejam considerados no width */
    }


    /*======================================================================================*/
    /* Formatação do rodapé*/
    /* Ajustes para dispositivos móveis */
    .footer {
        background-color: #333;
        color: white;
        padding: 10px 0;
        position: relative;
        bottom: 0;
        width: 100%;
        margin: 5px 0;
    }

    /* Container do conteúdo do rodapé */
    .footer-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* Colunas do rodapé */
    .footer-col {
        width: 48%;
        /* Cada coluna vai ocupar 48% da largura */
    }

    /* Espaçamento das colunas */
    .footer-col p {
        margin: 10px 0;
    }

    /* Ajuste da primeira coluna */
    .footer-col:first-child {
        text-align: left;
        /* Alinha "Última atualização" à esquerda */
        margin-left: 10px;
        /* Adiciona uma margem à esquerda */
    }

    /* Informações de contato */
    .contact-info {
        display: flex;
        align-items: center;
    }

    /* Ícones de contato */
    .contact-info i {
        margin-right: 10px;
        font-size: 18px;
        /* Ícone um pouco maior */
    }

    /* Texto do contato */
    .contact-info span {
        font-size: 13px;
        /* Tamanho do texto */
    }

    /* Última atualização, sem alterações */
    .update {
        font-size: 16px;
        color: white;
    }
}

/* =========================================== INDEX ================================================
===================================================================================================== */
@media (min-width: 768px) {

    /* Cor de fundo para o corpo da pagina */
    body {
        background-color: lightgray;
    }

    /* Estilos gerais para tabelas em telas grandes */
    table {
        width: 100%;
        /*border-collapse: collapse;*/
        margin-bottom: 10px;
        margin-top: 10px;
        background-color: white;
    }

    td {
        padding: 20px;
        vertical-align: middle;
        text-align: center;
        box-sizing: border-box;
        /* Faz o padding ser incluído dentro da largura da célula */
        border: 1px solid black;
    }

    .title {
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        width: 100%;
    }

    .title h1 {
        font-size: 34px;
    }

    /* Segunda linha, 1ª e 3ª colunas com 20%, a do meio preenchendo o restante */
    .image-text,
    .link-text {
        width: 20%;
    }

    .middle-text {
        width: 60%;
        text-align: justify;
        /* Justificando o texto */
        vertical-align: top;
        /* Alinha o texto no topo da célula */
        font-size: 20px;
    }

    .link-text {
        font-size: 18px;
    }

    /* Estilo para a imagem e o texto */
    .image-text {
        text-align: center;
    }

    .image {
        max-width: 100%;
        height: auto;
    }

    .text {
        margin-top: 10px;
    }

    .link-text a {
        text-decoration: none;
        color: darkblue;
        font-weight: bold;

    }

    .link-text a:hover {
        text-decoration: underline;
    }

    /* Formatação das logo tipos dos parceiros */
    .logo-container {
        width: 90%;
        /* A div ocupa 90% da largura da tela */
        margin: 0 auto;
        /* Centraliza a div horizontalmente */
        display: flex;
        /* Usamos flexbox para colocar as imagens em linha */
        justify-content: space-between;
        /* Espaço entre as imagens */
        align-items: center;
        /* Centraliza as imagens verticalmente */
        border-top: 1px solid #ccc;
        /* Borda superior discreta */
        padding: 10px 0;
        /* Espaçamento interno para não colar nas bordas */
        box-sizing: border-box;
        /* Inclui o padding no cálculo da largura */
    }

    .logo {
        max-height: 50px;
        /* Tamanho fixo vertical das imagens (ajuste conforme necessário) */
        width: auto;
        /* Mantém a proporção das imagens */
        object-fit: contain;
        /* A imagem vai se ajustar sem distorcer */
    }


}

@media (max-width: 768px) {

    /* Cor de fundo para o corpo da página */
    body {
        background-color: lightgray;
        overflow-x: hidden;
        /* Impede rolagem horizontal */
    }

    /* Estilos gerais para tabelas em telas pequenas */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 10px;
        margin-top: 10px;
        background-color: white;
    }

    /* Tamanho da fonte para o título */
    .title h1 {
        font-size: 28px;
        word-wrap: break-word;
        /* Quebra de linha no título, caso necessário */
        overflow-wrap: break-word;
        /* Garante que as palavras longas sejam quebradas corretamente */
        white-space: normal;
        /* Evita que o texto se mantenha em uma linha */
    }

    td {
        padding: 10px;
        vertical-align: middle;
        text-align: center;
        box-sizing: border-box;
        /* Faz o padding ser incluído dentro da largura da célula */
    }

    .title {
        font-size: 18px;
        font-weight: bold;
        text-align: center;
    }

    /* Ajuste da largura das colunas para tela pequena */
    .image-text,
    .middle-text,
    .link-text {
        width: 100%;
        /* Garante que as colunas ocupem toda a largura disponível */
        display: block;
        /* Garante que os itens se empilhem verticalmente */
        clear: both;
        /* Garante que não haja sobreposição entre os elementos */
    }

    /* Ajuste para a imagem e o texto */
    .image-text {
        text-align: center;
    }

    .image-text img {
        width: 200px;
        height: auto;
    }

    .image-text h2 {
        font-size: 24px;
    }

    .image {
        max-width: 100%;
        height: auto;
    }

    .text {
        margin-top: 10px;
    }

    /* Alinhamento do texto no topo e justificado na coluna do meio */
    .middle-text {
        text-align: justify;
        vertical-align: top;
        /* Alinha o texto no topo da célula */
        word-wrap: break-word;
        /* Quebra de linha dentro do texto, se necessário */
        overflow-wrap: break-word;
        /* Quebra de palavras longas corretamente */
        white-space: normal;
        /* Garante que o texto tenha a largura correta */
    }

    /* Links estilizados */
    .link-text a {
        text-decoration: none;
        word-wrap: break-word;
        /* Quebra as palavras longas dentro dos links */
        overflow-wrap: break-word;
        /* Garante que o link não transborde */
        white-space: normal;
        /* Evita que o texto do link ultrapasse a largura */
        color: darkblue;
        font-weight: bold;
    }

    .link-text a:hover {
        text-decoration: underline;
    }

    /* Formatação das logo tipos dos parceiros */
    .logo-container {
        width: 90%;
        /* A div ocupa 90% da largura da tela */
        margin: 0 auto;
        /* Centraliza a div horizontalmente */
        display: flex;
        /* Usamos flexbox para organizar as imagens */
        flex-wrap: wrap;
        /* Permite que as imagens quebrem para a linha seguinte */
        justify-content: center;
        /* Centraliza as imagens na linha */
        align-items: center;
        /* Alinha as imagens verticalmente */
        border-top: 1px solid #ccc;
        /* Borda superior discreta */
        padding: 10px 0;
        /* Espaçamento interno para não colar nas bordas */
        box-sizing: border-box;
        /* Inclui o padding no cálculo da largura */
    }

    .logo {
        max-height: 35px;
        /* Tamanho fixo vertical das imagens */
        width: auto;
        /* Mantém a proporção das imagens */
        object-fit: contain;
        /* A imagem vai se ajustar sem distorcer */
        margin: 10px;
        /* Adiciona um pequeno espaçamento entre as imagens */
    }

    /* Se você quiser limitar o número de logos por linha, pode ajustar o tamanho do item */
    .logo-container img {
        flex: 1 1 40%;
        /* Permite até duas logos por linha (40% cada) */
        max-width: 45%;
        /* Garante que as imagens não fiquem muito grandes */
    }
}

/* ====================================== PRODUTOS ===================================================
====================================================================================================== */
/* DESKTOPS */
@media (min-width: 768px) {

    /* Formatação dos produtos */
    /* Estilo básico de reset */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Estilo do container principal */
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0px;
    }

    .produto {
        border: 0px solid black;
        background-color: lightgray;
    }

    /* Estilos para a seção de 3 colunas */
    .columns {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        margin-bottom: 10px;
        align-items: stretch;
        /* Para garantir que todas as colunas tenham a mesma altura */
    }

    /* Estilos das colunas */
    .column {
        padding: 20px;
        background-color: #f4f4f4;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .column h1 {
        font-size: 20px;
    }

    .column-1 {
        width: 20%;
        /* Primeira coluna ocupa 20% da tela */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .column-1 img {
        width: 100%;
        /* Imagem ocupa 100% da largura da coluna */
        border-radius: 8px;
    }

    .column-1 p {
        margin-top: 10px;
        text-align: center;
    }

    .column-2 {
        width: 70%;
        /* Segunda coluna ocupa 70% da tela */
    }

    .column-3 {
        width: 10%;
        /* Terceira coluna ocupa 10% da tela */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .column-3 a {
        text-decoration: none;
        color: #333;
        font-size: 16px;
        margin: 10px 0;
    }

    .column-3 a:hover {
        color: #007bff;
    }

    .pdf-icon {
        width: 24px;
        /* Ajuste o tamanho da imagem */
        height: auto;
        /* Para manter a proporção */
        margin-right: 10px;
        /* Espaçamento entre a imagem e o link */
        vertical-align: middle;
        /* Alinhar a imagem com o texto do link */
    }

    /* Tornar as imagens responsivas */
    img {
        max-width: 100%;
        /* Faz a imagem ocupar no máximo 100% da largura disponível */
        height: auto;
        /* Mantém a proporção da imagem */
        display: block;
        /* Evita o espaço extra abaixo da imagem (default inline) */
    }
}

/* Responsividade para telas menores */
@media screen and (max-width: 768px) {

    /* Estilos das colunas */
    .columns {
        flex-direction: column;
        /* As colunas ficam empilhadas em telas pequenas */
        padding: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        background-color: #f4f4f4;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* Ajustar as colunas para garantir que elas se ajustem corretamente */
    .column {
        width: 100%;
        /* Cada coluna ocupa 100% da largura da tela */
        margin-bottom: 20px;
        /* Espaçamento entre as colunas */
        box-sizing: border-box;
        /* Garante que a largura inclua padding e border */
        padding: 20px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* Ajuste para as tabelas se comportarem responsivamente */
    table.produto {
        width: 100%;
        table-layout: fixed;
        /* Tabelas devem ter layout fixo para se ajustarem */
    }

    table.produto td {
        display: block;
        /* Cada coluna se torna um bloco (em vez de ficar lado a lado) */
        width: 100%;
        /* As colunas ocupam 100% da largura da tabela */
        margin-bottom: 10px;
        /* Espaçamento entre as colunas */
    }

    .column h1 {
        font-size: 20px;
        text-align: center;
    }

    .column-2 {
        width: 100%;
        /* A segunda coluna ocupa toda a largura */
    }

    /* Ajuste da coluna 3 para exibir os links lado a lado em telas pequenas */
    .column-3 {
        display: flex;
        flex-direction: column;
        /* Organiza os links verticalmente por padrão */
        align-items: center;
        /* Centraliza os links */
        justify-content: center;
    }

    /* Ajustando os links */
    .column-3 a {
        display: block;
        margin-bottom: 10px;
    }

    .column-3 .links {
        display: flex;
        /* Exibe os links lado a lado */
        justify-content: center;
        /* Centraliza os links na coluna */
        gap: 15px;
        /* Espaço entre os links */
    }

    /* No caso de imagens dentro de colunas específicas, pode-se adicionar um ajuste extra */
    .column-1 img,
    .column-2 img,
    .column-3 img {
        max-width: 100%;
    }

    .pdf-icon {
        display: none;
        /* Esconde o ícone do PDF */
    }
}

/* =============================== A EMPRESA ===============================================
===================================================================================================== */
/* FORMATAÇÃO PARA DESKTOPS */
@media (min-width: 768px) {

    /* Estilos para a seção "Sobre Nós" */
    .sobre-nos {
        padding: 40px 20px;
        max-width: 1200px;
        margin: 0 auto;
        background-color: #fff;
        margin-top: 10px;
        /* Espaçamento para os links acima */
        margin-bottom: 10px;
        /* Espaçamento para o rodape */
        border-radius: 10px;
    }

    /* Tabela de Dados Cadastrais */
    .tabela-dados {
        width: 100%;
        margin-bottom: 30px;
        /* Espaço abaixo da tabela */
        border-collapse: collapse;
        /* Para remover o espaço entre as bordas das células */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Sombra leve para destacar a tabela */
    }

    .tabela-dados td {
        padding: 10px;
        border: 1px solid #ddd;
        /* Bordas finas */
        text-align: left;
    }

    .tabela-dados th {
        text-align: left;
        padding: 10px;
        background-color: #f1f1f1;
        border: 1px solid #ddd;
    }

    .tabela-dados tr:nth-child(even) {
        background-color: #f9f9f9;
        /* Cor de fundo alternada nas linhas */
    }

    .tabela-dados td strong {
        color: #333;
        /* Cor do texto em negrito */
    }

}

/* FORMATAÇÃO PARA MOBILE */
@media (max-width: 768px) {

    /* Seção "Sobre Nós" */
    .sobre-nos {
        padding: 20px 10px;
        /* Menos espaçamento nas laterais */
        background-color: #fff;
        margin-top: 10px;
        /* Espaçamento para os links acima */
        margin-bottom: 10px;
        /* Espaçamento para o rodape */
    }

    /* Tabela de dados cadastrais */
    .tabela-dados {
        width: 100%;
        margin: 0;
        /* Remove a margem na tela pequena */
    }

    .tabela-dados td {
        display: block;
        /* Faz cada célula ser exibida como bloco */
        width: 100%;
        /* Cada célula ocupa 100% da largura */
        padding: 12px 0;
        /* Aumenta o espaçamento para facilitar a leitura */
        text-align: left;
        border: none;
        /* Remove as bordas nas células para melhor visualização */
        border-bottom: 1px solid #ddd;
        /* Adiciona bordas finas abaixo das células */
    }

    .tabela-dados th {
        display: none;
        /* Esconde os cabeçalhos da tabela em telas pequenas */
    }

    .tabela-dados td:before {
        content: attr(data-label);
        /* Exibe o título de cada célula antes do conteúdo */
        font-weight: bold;
        margin-bottom: 5px;
        display: block;
        /* Exibe o título como um bloco */
    }

    .tabela-dados td[data-label]:before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        margin-bottom: 8px;
    }
}

/* =============================== CONTATO ===============================================
===================================================================================================== */
/* FORMATAÇÃO PARA DESKTOPS */
@media (min-width: 768px) {

    /* Estilos principais para a página de contato */
    .contato {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        margin-top: 10px;
        margin-bottom: 10px;
    }

    /* Formatação da apresentação dos contatos da empresa */
    .informacoes-contato {
        margin-top: 20px;
        font-size: 16px;
    }

    .info-item {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }

    .info-item i {
        margin-right: 10px;
        font-size: 20px;
        /* Tamanho do ícone */
        color: #333;
        /* Cor do ícone */
    }

    .info-item a {
        color: #007BFF;
        /* Cor do link */
        text-decoration: none;
        /* Retira o sublinhado */
        font-size: 16px;
    }

    .info-item a:hover {
        text-decoration: underline;
        /* Sublinha ao passar o mouse */
    }


    /* Formatação do formulário */
    .form-group {
        margin-bottom: 15px;
    }

    label {
        display: block;
        font-weight: bold;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    button.btn-contato-enviar {
        padding: 10px 15px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    button.btn-contato-enviar:hover {
        background-color: #45a049;
    }

}

/* Formatação para telas pequenas */
@media (max-width: 768px) {

    /* Contato */
    .contato {
        max-width: 90%;
        /* Aumenta o espaço para ocupar 90% da largura da tela */
        margin: 0 auto;
        /* Centraliza o formulário na tela */
        padding: 15px;
        background-color: white;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    /* Formatação da apresentação dos contatos da empresa */
    .informacoes-contato {
        margin-top: 15px;
        font-size: 14px;
        /* Ajuste do tamanho da fonte para telas menores */
    }

    .info-item {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        /* Garante que os ícones e textos quebrem em linhas se necessário */
        justify-content: center;
        /* Alinha os itens no centro */
    }

    .info-item i {
        margin-right: 8px;
        font-size: 18px;
        /* Tamanho do ícone menor */
        color: #333;
    }

    .info-item a {
        color: #007BFF;
        text-decoration: none;
        font-size: 14px;
        /* Tamanho da fonte ajustado para tela pequena */
    }

    .info-item a:hover {
        text-decoration: underline;
    }

    /* Estilo do formulário */
    form {
        display: flex;
        flex-direction: column;
        /* Empilha os campos verticalmente */
        gap: 15px;
        /* Espaçamento entre os campos */
    }

    /* Alinhamento das labels e inputs */
    .form-group {
        display: flex;
        flex-direction: column;
        /* Coloca a label e o input em coluna */
        align-items: flex-start;
        /* Alinha a label à esquerda */
        margin-bottom: 15px;
    }

    /* Labels */
    label {
        font-weight: bold;
        margin-bottom: 5px;
        /* Espaçamento entre a label e o input */
        width: 100%;
        /* As labels vão ocupar toda a largura disponível */
    }

    /* Inputs e textarea */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        width: 100%;
        /* Faz os campos ocuparem 100% da largura da tela */
        padding: 10px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
        /* Garante que o padding seja incluído no cálculo da largura */
    }

    /* Botão de envio */
    button.btn-contato-enviar {
        font-size: 14px;
        padding: 12px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 15px;
        /* Dá um espaçamento entre o botão e o campo de mensagem */
    }

    button.btn-contato-enviar:hover {
        background-color: #45a049;
    }
}