/* Variáveis de CSS para personalização */
:root {
    --main-bg-color: #E60014;
    --text-color: #333;
    --highlight-color: #E60014;
    --font-size-default: 1rem;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    margin: 0;
    background-color: #f1f1f1;
    transition: background-color 0.3s, color 0.3s;
    font-size: var(--font-size-default);
}

header {
    background-color: #ffffff;
    color: var(--text-color);
    text-align: center;
    padding: 0.5rem 0;
    font-size: 0.8em;
    font-weight: bold;
    line-height: 1;
}

header h1 {
    margin: 0;
    padding: 0.5rem 0;
}

.highlight {
    color: var(--highlight-color);
    font-size: 1.2em;
}

/* Navbar */
nav {
    background-color: var(--main-bg-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    position: relative;
}

.logo {
    height: 5rem; /* Usando rem para manter proporção */
    width: auto;
    margin-right: 1rem;
}

nav a, #departmentsButton, #auth-buttons, #auth-button {
    color: rgb(255, 255, 255);
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 0.85em;
    padding: 0.4rem 0.6rem;
    transition: background-color 0.2s, transform 0.2s;
    border-radius: 0.3rem;
}

nav a:hover, nav a:focus, #accessibilityButton:hover, #departmentsButton:hover {
    background-color: #cc0012;
    outline: none;
}

nav a.logo-link {
    box-shadow: none !important; /* Remove qualquer sombra para o link da logo */
    outline: none !important; /* Remove qualquer contorno */
}

/* Tooltip personalizado para elementos com data-tooltip */
[data-tooltip] {
    position: relative; /* Necessário para o tooltip */
    text-decoration: none;
}

/* Estilos do tooltip */
[data-tooltip]::after {
    content: attr(data-tooltip); /* Exibe o conteúdo do tooltip */
    position: absolute;
    top: 110%; /* Coloca o tooltip logo abaixo do botão */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 0.3rem 0.6rem;
    border-radius: 0.3rem;
    font-size: 0.8em;
    white-space: nowrap;
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
}

/* Exibe o tooltip ao passar o mouse */
[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Barra de pesquisa */
.search-bar {
    margin-left: 1rem;
    display: flex;
    align-items: center;
    width: 50%; /* Expandir para melhorar o layout em dispositivos móveis */
}

.search-input {
    padding: 0.5rem 0.5rem 0.5rem 2.2rem;
    border: 1px solid #ccc;
    border-radius: 0.3rem;
    width: 100%; /* Ajustável com a tela */
    background-image: url('https://cdn-icons-png.flaticon.com/512/54/54481.png');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.search-button {
    padding: 0.5rem;
    background-color: var(--main-bg-color);
    color: white;
    border: none;
    border-radius: 0.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, transform 0.2s; /* Animações Suaves */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Adiciona sombra para um efeito de profundidade */
}
.search-button:hover {
    background-color: #cc0012; /* Cor ao passar o mouse */
    transform: translateY(-2px); /* Eleva o botão ao passar o mouse */
}

.search-button:focus {
    outline: none; /* Remove o contorno ao focar no botão */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); /* Adiciona um foco visível */
}

/* Botão de Acessibilidade */
.accessibility-button {
    padding: 0.6rem;
    background-color: #ffffff;
    color: #333;
    border: none;
    border-radius: 0.3rem;
    cursor: pointer;
    font-size: 1em;
    display: flex;
    align-items: center;
    transition: background-color 0.3s;
    margin: 1rem;
}
.accessibility-button:hover, .accessibility-button:focus {
    background-color: #E60014;
    color: #fff;
}

/* Modal de Acessibilidade */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fundo mais escurecido */
    backdrop-filter: blur(0.3rem); /* Efeito de desfoque no fundo */
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 2rem;
    border-radius: 12px;
    width: 90%;
    max-width: 28rem;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-size: 1.2em;
    color: #333;
}

.modal-content h2 {
    color: var(--main-bg-color);
    font-size: 1.8em;
    margin-bottom: 20px;
    font-weight: 600;
}

/* Botões estilizados */
.modal-content button {
    width: 100%;
    margin: 15px 0;
    padding: 12px;
    background-color: var(--main-bg-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.modal-content button:hover {
    background-color: #cc0012;
    transform: translateY(-2px); /* Efeito de elevação ao passar o mouse */
}

/* Efeitos de transição ao exibir o modal */
.modal.show {
    display: block;
    animation: fadeIn 0.4s ease-out; /* Efeito de transição suave */
}
.close {
    background-color: #888;
    color: #fff;
    margin-top: 25px;
    padding: 12px;
    font-size: 1em;
    border-radius: 8px;
    font-weight: bold;
}
.close:hover {
    background-color: #555;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Estilos para o modo de alto contraste */
.high-contrast {
    background-color: #000;
    color: #fff;
}

.high-contrast nav a {
    color: #fff;
}

/* Estilos para a fonte grande */
.large-font {
    font-size: 1.2em;
}

/* Conteúdo Principal */
.main-content {
    padding: 20px;
    background-color: #f8f8f8;
}

/* Estilos das seções */
.styled-section {
    background-color: #ffffff; /* Fundo branco */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra leve */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
}

/* Estilos para o título */
.styled-section h2 {
    color: #E60014; /* Cor destaque para o título */
    font-size: 1.5em;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}

/* Estilos para o texto */
.styled-section p {
    color: #333;
    font-size: 1em;
    line-height: 1.6;
    margin: 0;

}
/* Rodapé */
footer {
    background-color: var(--main-bg-color);
    color: white;
    text-align: center;
    padding: 10px 0;
}

a i {
    margin-right: 08px; /* Ajuste o valor conforme a quantidade de espaço que você deseja */
}

/* Estilos para o botão Todos os Departamentos */
#departmentsButton {
    color: white;
    background-color: var(--main-bg-color);
    border: none;
    margin: 0 8px;
    padding: 6px 10px;
    font-size: 0.85em;
    display: flex;
    align-items: center;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    font-family: 'Poppins', sans-serif; /* Adiciona a fonte Poppins */
}

#departmentsButton i {
    margin-right: 5px;
}

#departmentsButton:hover {
    background-color: #cc0012;
}

/* Dropdown Menu para o botão Todos os Departamentos */
#departmentsDropdown {
    display: none; /* Escondido por padrão */
    position: absolute; /* Muda para absolute */
    top: 100%; /* Alinha logo abaixo do botão */
    left: 0; /* Alinha à esquerda do botão */
    background-color: #fff;
    color: #333;
    padding: 10px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    z-index: 1;
}

/* Exibe o dropdown ao passar o mouse no botão ou no dropdown */
.dropdown:hover #departmentsDropdown {
    display: block;
}

#departmentsDropdown a {
    color: #333;
    padding: 8px;
    text-decoration: none;
    display: block;
}

#departmentsDropdown a:hover {
    background-color: #f1f1f1;
}

/* Estilos para as categorias e filtros */
.category {
    padding: 10px;
    color: #333;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    position: relative;
}

.category:hover {
    background-color: #f1f1f1;
}

/* Submenu de filtros */
.filters {
    display: none;
    position: absolute;
    left: 100%; /* Ajuste conforme necessário */
    top: 0;
    background-color: #fefefe;
    min-width: 150px;
    border: 1px solid #ddd;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 10px;
}

.filters a {
    display: block;
    color: #333;
    padding: 5px 10px;
    text-decoration: none;
    font-size: 0.9em;
}

.filters a:hover {
    background-color: #E60014;
    color: #fff;
}

/* Mostrar menus suspensos ao passar o mouse */
#departmentsDropdown:hover .filters {
    display: block;
}

/* Exibe os filtros ao passar o mouse na categoria */
.category:hover .filters {
    display: block;
}



.auth-button {
    background-color: transparent; /* Define fundo transparente como os links da navbar */
    color: white; /* Cor do texto branco */
    font-family: 'Poppins', sans-serif; /* Mesma fonte dos links */
    font-size: 1em; /* Ajuste do tamanho da fonte */
    padding: 0; /* Remove padding adicional */
    border: none; /* Remove borda */
    cursor: pointer;
    transition: color 0.2s; /* Transição suave para a cor */
    position: relative; /* Para posicionar o modal corretamente */
    display: inline-block; /* Para que o botão não ocupe a linha inteira */
}

.auth-button:hover {
    background-color: #cc0012; /* Cor ao passar o mouse */
}

.auth-modal {
    display: none; /* Esconder o modal por padrão */
    position: absolute; /* Para que o modal seja posicionado em relação ao contêiner */
    z-index: 1000; /* Para que fique acima de outros elementos */
    background-color: white; /* Cor de fundo do modal */
    border: 1px solid #ccc; /* Borda do modal */
    border-radius: 8px; /* Bordas arredondadas */
    padding: 20px; /* Espaçamento interno do modal */
    width: 300px; /* Largura fixa do modal */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para o modal */
    transition: opacity 0.3s ease; /* Animação para suavizar a entrada */
    top: 50%;
    left: 50%;
    transform: translate(-60%, 03%);
}


.auth-modal-content {
    text-align: center;
}

.auth-modal input {
    width: 100%; /* Largura total */
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.auth-modal button {
    background-color: var(--main-bg-color);
    color: rgb(255, 255, 255);
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.auth-modal button:hover {
    background-color: #ff0000;
}

.auth-links {
    margin-top: 10px;
}

.auth-links a {
    display: block; /* Para links empilhados */
    color: #ff0000;
    text-decoration: none;
    margin: 5px 0; /* Espaçamento entre links */
    background-color: transparent;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.auth-links a:hover {
    text-decoration: none; /* Sublinha ao passar o mouse */
    color: #cc0000;
    background-color: #ffcccc;
}
.auth-buttons:hover .auth-modal,
.auth-modal:hover {
    display: block; /* Mostrar o modal quando passar o mouse sobre o botão ou o modal */
}

.auth-modal input[type="text"], 
.auth-modal input[type="password"] {
    width: calc(100% - 20px); /* Para garantir que o campo ocupe 100% da largura menos o padding */
    padding: 10px; /* Adiciona espaçamento interno */
    margin: 10px 0; /* Adiciona margem vertical entre os campos */
    border: 1px solid #ccc; /* Borda dos campos */
    border-radius: 4px; /* Bordas levemente arredondadas */
}

.auth-modal button:focus,
.auth-links a:focus {
    outline: none; /* Remove borda padrão */
    box-shadow: 0 0 4px rgba(255, 0, 0, 0.5); /* Opcional: adiciona sombra ao foco */
}



    /* Estilo para o contêiner principal que alinha os cards horizontalmente */
    .product-container {
        max-width: calc((200px + 16px) * 5); /* Define a largura máxima para cinco cards */
        display: flex;
        gap: 1rem; /* Espaço entre os cards */
        overflow-x: auto; /* Permite rolagem horizontal se necessário */
        padding: 1rem; /* Adiciona um pouco de espaço ao redor dos cards */
        background-color: #f5f5f5;
        margin: 0 auto; /* Centraliza o contêiner horizontalmente */   
        overflow: hidden;
        justify-content: space-between;
    }

    /* Estilo para cada card de produto */
    .product-card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 200px;
        padding: 15px;
        text-align: left;
        font-family: Arial, sans-serif;
        flex-shrink: 0;
        transition: transform 0.2s;
        border: 1px solid #ddd;
        min-width: 200px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        grid-template-rows: auto 1fr 1fr;
        justify-items: start;
        height: 350px;
    }

    /* Imagem do produto */
    .product-card img {
        width: 100%; /* Define a largura para 100% do container */
        height: 145px; /* Define uma altura fixa para uniformizar as imagens */
        object-fit: cover; /* Ajusta a imagem para cobrir toda a área, cortando se necessário */
        border-radius: 8px;
        display: block;
        margin: 0 auto;
    }

    /* Nome do produto */
    .product-name {
        font-size: 16px;
        margin: 8px 0;
        color: #333;
        font-weight: bold;
        border-radius: 5px;
        height: 50px; 
    }
    
    /* Outros elementos continuam com tamanhos fixos */
.product-price,
.original-price,
.product-juros {
    font-size: 14px;
}

    /* Avaliação do produto */
    .product-rating {
        color: #999;
        font-size: 14px;
        padding: 3px;
        margin-top: 13px; /* Espaçamento da parte superior */
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0.5rem;
        height: 20px;
    }

    /* Preço */
    .product-price {
        font-size: 18px;
        color: #30b124;
        font-weight: bold;
        margin: 10px 0;
    }

    /* Preço original (riscado) */
    .original-price {
        text-decoration: line-through;
        color: #999;
        font-size: 14px;
        font-weight: bold;
        margin-right: 5px;
    }

    /* Desconto */
    .discount {
        color: #4caf50;
        font-size: 14px;
        font-weight: bold;
    }
    .product-card:hover {
        transform: scale(1.02); /* Efeito de zoom ao passar o mouse */
    }
    .product-card-link {
        text-decoration: none; /* Remove sublinhado do link */
        color: inherit; /* Mantém a cor do texto definida no card */
    }
    .product-juros{
        color: #4d4d4d;
        font-size: 14px;
        font-weight: bold;
        }
 /* porcentagem */
    .porcentagem {
    color: #1d1d1d;
    font-size: 14px;    
    }

    /* Novo estilo das setas */
    .arrow {
        position: absolute; /* Posicionamento relativo ao contêiner */
        top: 50%; /* Centraliza verticalmente */
        background-color: rgba(255, 255, 255, 0); /* Fundo transparente */
        color: black;
        width: 2rem;
        height: 2rem;
        cursor: pointer;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        font-size: 1rem;
        box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s, box-shadow 0.3s;
    }

    /* Efeito de hover com animação */
    .arrow:hover {
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.3);
    }

    /* Posição das setas */
    .left-arrow {
        margin-left: 20rem;
        transform: translateY(2200%); /* Ajusta o posicionamento vertical para centralizar */
    }

    .right-arrow {
        margin-left: 95rem;
        transform: translateY(2200%); /* Ajusta o posicionamento vertical para centralizar */
    }

    .product-card:hover {
        transform: scale(1.02);
    }

/* Novo estilo das setas */
.arrow2 {
    position: absolute; /* Posicionamento relativo ao contêiner */
    top: 110%; /* Centraliza verticalmente */
    background-color: rgba(255, 255, 255, 0); /* Fundo transparente */
    color: black;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    font-size: 1rem;
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* Efeito de hover com animação */
.arrow2:hover {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.3);
}



    /*novo conteiner---------------------------------------------*/

    /* Contêiner principal do carrossel */
.carousel-container2 {
    position: relative; /* Permite o posicionamento absoluto dos elementos dentro do contêiner */
    width: 100%; /* Largura total do contêiner */
    max-width: 1500px; /* Largura máxima para limitar o tamanho do carrossel */
    margin: 0 auto; /* Centraliza o contêiner na página */
    overflow: hidden; /* Oculta as partes dos slides que ficam fora da área visível */
    border-radius: 10px; /* Arredonda os cantos do contêiner */
}

/* Estilo para o contêiner dos slides do carrossel */
.carousel-slide2 {
    display: flex; /* Alinha os slides em uma linha horizontal */
    transition: transform 0.5s ease-in-out; /* Adiciona uma transição suave ao deslizar os slides */
    width: 100%; /* Define a largura total */
}

/* Estilos para cada slide do carrossel */
.carousel-item2 {
    min-width: 100%; /* Cada item ocupa 100% da largura do contêiner do carrossel */
    box-sizing: border-box; /* Inclui o padding e a borda no cálculo da largura total */
}

/* Estilos para a imagem dentro de cada slide */
.carousel-item2 img {
    width: 100%; /* A imagem ocupa 100% da largura do item do carrossel */
    display: block; /* Remove o espaço embaixo da imagem */
}

/* Estilos para os botões de navegação (setas) */
.carousel-arrow2 {
    position: absolute; /* Posiciona as setas de forma absoluta dentro do contêiner */
    top: 50%; /* Centraliza verticalmente as setas no contêiner */
    transform: translateY(-50%); /* Ajusta o posicionamento vertical para centralizar */
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente para as setas */
    border: none; /* Remove bordas padrão */
    color: white; /* Cor do ícone da seta */
    padding: 10px; /* Espaçamento interno para o ícone */
    cursor: pointer; /* Cursor de mão para indicar que é clicável */
    border-radius: 50%; /* Formato arredondado das setas */
    z-index: 10; /* Garante que as setas fiquem sobre os slides */
}

/* Posiciona a seta esquerda */
.carousel-arrow2.left2 {
    left: 10px; /* Define a posição da seta esquerda */
}

/* Posiciona a seta direita */
.carousel-arrow2.right2 {
    right: 10px; /* Define a posição da seta direita */
}

/* Estilo para o contêiner dos indicadores (bolinhas) */
.carousel-indicators2 {
    position: absolute; /* Posiciona o contêiner das bolinhas de forma absoluta */
    bottom: 1rem; /* Espaçamento da base do contêiner */
    left: 50%; /* Centraliza horizontalmente no contêiner do carrossel */
    transform: translateX(-50%); /* Ajusta a posição para realmente centralizar */
    display: flex; /* Alinha os indicadores horizontalmente */
    gap: 8px; /* Espaçamento entre cada bolinha */
}

/* Estilo para cada bolinha de indicador */
.carousel-indicators2 button {
    width: 10px; /* Largura da bolinha */
    height: 10px; /* Altura da bolinha */
    background-color: rgba(255, 255, 255, 0.5); /* Cor de fundo semi-transparente */
    border: none; /* Remove borda padrão */
    border-radius: 50%; /* Formato arredondado */
    cursor: pointer; /* Cursor de mão para indicar que é clicável */
}

/* Estilo para o indicador ativo */
.carousel-indicators2 button.active {
    background-color: white; /* Bolinha de indicador ativo com cor branca */
}

/*cards*/

.card {
    background-color: #fff; /* Define a cor de fundo do elemento como branco (#fff) */
    border-radius: 0.5rem; /* Aplica bordas arredondadas ao elemento, com um raio de 8 pixels */
    box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.1); /* Adiciona uma sombra ao elemento, com deslocamento horizontal de 0, vertical de 4 pixels, e desfoque de 8 pixels, com uma cor preta semi-transparente (10% de opacidade) */
    width: 200px; /* Define a largura do elemento como 200 pixels */
    padding: 10px; /* Adiciona um espaço interno de 15 pixels ao redor do conteúdo do elemento */
    text-align: left; /* Alinha o texto dentro do elemento à esquerda */
    font-family: Arial, sans-serif; /* Define a fonte do texto como Arial, com uma fonte alternativa (sans-serif) caso Arial não esteja disponível */
    flex-shrink: 0; /* Impede que o elemento diminua de tamanho em um contêiner flexível (flexbox) */
    transition: transform 0.2s; /* Define uma transição suave para as mudanças na propriedade 'transform', com duração de 0.2 segundos */
    border: 1px solid #ddd; /* Aplica uma borda de 1 pixel ao redor do elemento, com uma cor cinza claro (#ddd) */
    min-width: 200px; /* Define a largura mínima do elemento como 200 pixels, garantindo que não fique menor que isso */
    display: flex; /* Define o elemento como um contêiner flexível, permitindo o uso das propriedades de layout flexbox */
    flex-direction: column; /* Organiza os itens filhos do contêiner flex em uma coluna (verticalmente) */
    align-items: stretch; /* Faz com que os itens filhos do contêiner flex se estiquem para preencher a largura do contêiner */  
    border: 1px solid #ccc; /* Adicione uma borda se desejar */ 
}

.card-name{
    font-size: 16px; /* Define o tamanho da fonte para 16 pixels. Um tamanho padrão que é fácil de ler para a maioria dos usuários. */
    margin: 8px 0; /* Define a margem superior e inferior como 8 pixels, e a margem esquerda e direita como 0 pixels. Isso cria espaço acima e abaixo do elemento. */
    color: #333; /* Define a cor do texto como um cinza escuro (#333). Essa cor é menos agressiva para os olhos do que o preto puro. */
    font-weight: bold; /* Define o peso da fonte como 'bold', tornando o texto mais espesso e enfatizado. */
    border-radius: 5px; /* Arredonda os cantos do elemento em 5 pixels, proporcionando um visual mais suave e moderno. */
    height: 50px; /* Define a altura do elemento como 50 pixels. Isso pode ser usado para garantir que o elemento tenha uma altura uniforme, independente do conteúdo. */
    text-align: center;
    line-height: 20px;
    width: 200px;
    overflow-wrap: break-word; /* Quebra as palavras que excederem a largura */
    word-wrap: break-word;     /* Para compatibilidade adicional, quebra as palavras */
}

.card:hover {
    transform: scale(1.02); /* Efeito de zoom ao passar o mouse */
}
.card img {
    width: 100px; /* Define a largura fixa de 150 pixels */
    height: 100px; /* Define a altura fixa de 150 pixels */
    object-fit: cover; /* Ajusta a imagem para cobrir toda a área, cortando se necessário */
    border-radius: 8px;
    display: block;
    margin: 0 auto; /* Centraliza a imagem horizontalmente */
}

.card-content {
    padding: 1rem;
}

.card-title {
    font-size: 1.5em;
    margin: 0;
}

.card-description {
    font-size: 1em;
    color: #555;
    margin: 12px 0;
}

.card-button {
    display: inline-block;
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.card-button:hover {
    background-color: #0056b3;
}

.card-link {
    text-decoration: none; /* Remove sublinhado do link */
    color: inherit; /* Mantém a cor do texto definida no card */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-container {
    display: flex; /* Usando flexbox para alinhar os cards lado a lado */
    gap: 10px; /* Espaçamento entre os cards */
}

/* Botão flutuante do chatbot */
#chatbot-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #E60014;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
}

    #chatbot-button:hover {
        transform: scale(1.1);
    }

/* Janela do chatbot */
#chatbot-box {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 320px;
    max-height: 500px; /* Ajuste para mais conteúdo */
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    display: none; /* Oculto por padrão */
    flex-direction: column;
    overflow: hidden;
    animation: fadeInUp 0.4s ease;
    font-family: Arial, sans-serif;
}

    /* Animação suave para a abertura do chat */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

/* Header do chatbot */
#chatbot-header {
    background-color: #E60014;
    color: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 1.2em;
}
#chatbot-header button {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.2em;
    cursor: pointer;
}

/* Conteúdo do chatbot com balões */
#chatbot-content {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #fafafa;
}

/* Estilo do balão de mensagem */
.message {
    background-color: #f0f0f0;
    color: #333;
    padding: 10px 15px;
    border-radius: 10px;
    margin: 10px 0;
    max-width: 80%;
    line-height: 1.4;
}

/* Estilo específico para mensagem do chatbot */
.message.bot {
    background-color: #E60014;
    color: #fff;
    align-self: flex-start;
    border-radius: 10px 10px 10px 0;
}

/* Estilo específico para mensagens do usuário */
.message.user {
    background-color: #f0f0f0;
    color: #333;
    align-self: flex-end;
    border-radius: 10px 10px 0 10px;
}

/* Input do chatbot */
#chatbot-input-container {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ddd;
    background-color: #f9f9f9;
}

#chatbot-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 1em;
    margin-right: 5px;
    transition: all 0.2s ease;
}

#chatbot-input:focus {
    border-color: #E60014;
    outline: none;
}

#chatbot-input-container button {
    padding: 10px 15px;
    background-color: #E60014;
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

#chatbot-input-container button:hover {
    background-color: #cc0012;
}
    .hidden {
        display: none;
    }

    .container-servicos {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 20px;
      }
/* DEPARTAMENTOS */
    
    .footer {
        display: flex; /* Define o layout do footer como flexível para alinhar os itens */
        justify-content: space-between; /* Distribui o espaço entre os itens do footer de forma uniforme */
        padding: 20px; /* Adiciona um preenchimento ao redor do conteúdo do footer */
        background-color: rgb(255, 255, 255); /* Define a cor de fundo do footer como branco */
    }
    
    .footer-section {
        width: 12%; /* Define a largura de cada seção do footer para caber cinco seções lado a lado */
        color: #000000; /* Define a cor do texto como preto */
    }

    .footer-section-atendimento {
        width: 120%; /* Define a largura de cada seção do footer para caber cinco seções lado a lado */
        color: #000000; /* Define a cor do texto como preto */
        font-size: 12px;
    }
    
    .footer-section h3 {
        font-size: 18px; /* Define o tamanho da fonte para o título da seção do footer */
        font-weight: bold; /* Define o título em negrito */
        margin-bottom: 10px; /* Adiciona um espaço inferior ao título */
        color: RED;
    }
    
    .footer-section ul {
        list-style: none; /* Remove os marcadores padrão da lista */
        padding: 0; /* Remove o preenchimento interno da lista */
        margin: 0; /* Remove a margem da lista */
    }
    
    .footer-section ul li {
        margin-bottom: 5px; /* Adiciona um espaço inferior entre os itens da lista */
    }
    
    .footer-section ul.social-media {
        display: flex; /* Define a lista de redes sociais como flexível para alinhar os itens em linha */
        gap: 10px; /* Define o espaço entre os itens de redes sociais */
        flex-wrap: wrap; /* Permite que os itens de redes sociais quebrem para uma nova linha, se necessário */
    }
    
    .footer-section ul.social-media li a {
        color: black; /* Define a cor dos links de redes sociais como preto */
        text-decoration: none; /* Remove a sublinhado dos links */
        font-size: 13px; /* Define o tamanho da fonte dos ícones ou textos de redes sociais */
    }
    
    .footer-section ul.social-media li a:hover {
        color: #ccc; /* Muda a cor dos links para cinza claro ao passar o mouse */
    }

    .texto-final {        
        color: var(--text-color);
        text-align: center;
        padding: 0.5rem 0;
        font-size: 1.0em;
        font-weight: bold;
        line-height: 1;
        
    }


    .imagem-pagamento {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 8px;
        display: flex;
        margin: 0 auto;
        margin-bottom: 50px;        
    }

    .encerramento {
        color: var(--text-color);
        text-align: center;
        padding: 3px;
        font-size: 14px;
        font-weight: bold;
        line-height: 20px;
        margin-top: 10px; /* Espaçamento da parte superior */
    }