* {
    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;
        text-indent: 30px; /* Adiciona o espaço do parágrafo */
    }
    .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: #007bff;
    }

    .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;
        color: #007bff;
        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 */
    }

    .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) {
    /* Reset mínimo (pode manter o seu reset se preferir) */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: rgb(184, 206, 241);
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0;
    }

    /* Produto como tabela fixa */
    .produto {
        width: 100%;
        table-layout: fixed;       /* força colunas com largura fixa proporcional */
        border-collapse: collapse; /* evitar espaços estranhos entre células */
        background-color: lightgray;
    }

    /* Estilo geral das células */
    .column {
        padding: 16px;
        background-color: #f4f4f4;
        vertical-align: top; /* garante alinhamento consistente das linhas */
        /* box-shadow não fica muito natural em células, mas se quiser: */
        box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }

    /* Larguras fixas para cada coluna (aplicadas a todas as linhas) */
    .column-1 { width: 20%; text-align: center; }
    .column-2 { width: 70%; }
    .column-3 { width: 10%; text-align: center; }

    /* Divide o conteúdo da coluna-2 em duas colunas internas */
    .column-2 .duas-colunas {
        display: flex;
        justify-content: space-between;
        gap: 20px;
    }

    /* As duas colunas internas ocupam metade do espaço da coluna-2 (70% total) */
    .column-2 .duas-colunas > div {
        flex: 1;          /* metade da largura cada */
        background: #f4f4f4;
    }

    /* Texto e listas */
    .column-2 .duas-colunas p,
    .column-2 .duas-colunas ul {
        margin-top: 10px;
        text-align: justify;
        line-height: 1.4;
    }

    .column-2 .duas-colunas ul {
        padding-left: 20px;
        border-left: solid black 1px;
    }

    /* Imagens responsivas dentro das células */
    .column img {
        max-width: 100%;
        height: auto;
        display: flex;
        margin: 0 auto;
        margin-bottom: 0px;
        border-radius: 0px;
    }

    .logo {
        width: 50%;
    }

    /* Ajustes de tipografia */
    .column h1 {
        font-size: 28px;
        text-align: center;
        margin-top: 10px;
    }

    .column h2 {
        font-size: 18px;
        text-align: center;
        margin-top: 10px;
    }

    .column-2 p {
        margin-top: 10px;
        text-align: justify;
        line-height: 1.4;
    }

    /* PDF icons e links */
    .pdf-icon {
        width: 24px;
        height: auto;
        vertical-align: middle;
        display: inline-block;
        margin-bottom: 6px;
    }

    .links a {
        display: block;
        text-decoration: none;
        color: #333;
        font-size: 14px;
        margin-top: 6px;
        margin-bottom: 10px;
    }

    .links a:hover {
        color: #007bff;
    }
}

/* 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 */
    }

    .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 */
    }
}

@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;
    }
}