/* Importação da fonte Poppins do Google Fonts com todos os pesos e estilos */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ========== RESET E ESTILOS GLOBAIS ========== */
/* Reset básico para remover margens, paddings e estilos padrão */
* {
    font-family: "Poppins", sans-serif; /* Define Poppins como fonte padrão */
    margin: 0; /* Remove margens padrão */
    padding: 0; /* Remove paddings padrão */
    box-sizing: border-box; /* Faz com que padding não afete largura total */
    outline: none; /* Remove contorno padrão de elementos focados */
    text-decoration: none; /* Remove sublinhado de links */
    border: none; /* Remove bordas padrão */
    text-transform: capitalize; /* Transforma primeira letra em maiúscula */
    transition: 0.2s linear; /* Transição suave para todas as propriedades */
}

/* Configurações base do HTML */
html {
    font-size: 62.5%; /* 1rem = 10px (para facilitar cálculos) */
    overflow-x: hidden; /* Esconde overflow horizontal */
    scroll-behavior: smooth; /* Rolagem suave para âncoras */
}

/* ========== ESTILOS DE BOTÕES ========== */
.btn {
    display: inline-block;
    font-size: 1.7rem; /* 17px */
    color: #1c94c4; /* Cor marrom principal */
    background: none; /* Fundo transparente */
    margin-top: 1rem; /* Espaçamento superior */
    padding: 0.8rem 3rem; /* Espaçamento interno */
    border: 1px solid #1c94c4; /* Borda marrom */
    border-radius: 0.5rem; /* Cantos arredondados */
    cursor: pointer; /* Cursor de pointer */
}

/* Efeito hover para botões */
.btn:hover {
    background: #1c94c4; /* Marrom mais escuro */
    color: #fff; /* Texto branco */
}



/* ========== LAYOUT GERAL ========== */
/* Estilo base para todas as seções */
section {
    padding: 3rem 7%; /* Espaçamento interno */
}

/* Container principal para centralizar conteúdo */
.container {
    width: 90%; /* Largura de 90% do pai */
    max-width: 1200px; /* Largura máxima */
    margin: 0 auto; /* Centraliza horizontalmente */
    padding: 0 15px; /* Espaçamento interno */
}

/* Navbar Styles */
.topo-site {
    display: flex;
    position: fixed; /* Fixa o cabeçalho no topo */
    top: 0;
    left: 0;
    right: 0;
    align-items: center; /* Alinha itens verticalmente */
    justify-content: space-between; /* Espaço entre itens */
    padding: 1rem 9%; /* Espaçamento interno */
    z-index: 1000; /* Garante que fique acima de outros elementos */
    background: #1c94c4; /* Cor marrom */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Estilo do logo */
.topo-site .logo {
    font-size: 2.5rem; /* 25px */
    color: #fff; /* Texto branco */
    font-weight: bolder; /* Negrito */
}

/* Imagem do logo */
.topo-site .logo img {
    width: 200px; /* Altura fixa */
}

/* Menu de navegação */
.topo-site .menu-site {
    display: flex; /* Layout flexível */
}


/* Itens do menu */
.topo-site .menu-site a {
    color: #fff; /* Texto branco */
    font-size: 1.7rem; /* 17px */
    margin: 0 1rem; /* Espaçamento entre itens */
    padding: 0.5rem 1rem; /* Espaçamento interno */
}

/* Efeito hover para itens do menu */
.topo-site .menu-site a:hover {
    color: #130f40; /* Azul escuro */
}

/* Ícones do cabeçalho (menu mobile) */
.topo-site .icons div {
    color: #fff; /* Cor branca */
    font-size: 2.5rem; /* 25px */
    margin-left: 1.7rem; /* Espaçamento à esquerda */
    cursor: pointer; /* Cursor de pointer */
}

/* Efeito hover para ícones */
.topo-site .icons div:hover {
    color: #130f40; /* Azul escuro */
}

/* Main Content Styles */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2em;
}

/* ========== SLIDER PRINCIPAL ========== */
.destaque-principal {
    padding: 0;
    margin-top: 8rem; /* Compensa o header fixo */
}

/* Slides individuais */
.destaque-principal .slide {
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    min-height: 80vh; /* Altura mínima da viewport */
    background-size: cover !important; /* Cobre todo o espaço */
    background-position: center !important; /* Centraliza a imagem */
}

/* Conteúdo dentro do slide */
.destaque-principal .slide .content {
    display: none; /* Escondido por padrão */
    width: 60rem; /* Largura fixa */
    text-align: center; /* Texto centralizado */
}

/* Título do slide */
.destaque-principal .slide .content h3 {
    font-size: 7rem; /* 60px */
    line-height: 1.3; /* Espaçamento entre linhas */
    color: #fff; /* Texto branco */
    padding: 2rem 0; /* Espaçamento interno */
    animation: sliderReveal 1s ease forwards; /* Animação de entrada */
}

/* Span dentro do título */
.destaque-principal .slide .content span {
    color: #1c94c4; /* Cor marrom */
}

/* Botão dentro do slide */
.destaque-principal .slide .content .btn {
    background-color: #2875fa; /* Fundo marrom */
    color: #fffffffb; /* Texto branco */
}

/* Efeito hover para botão no slide */
.destaque-principal .slide .content .btn:hover {
    background-color: #fff; /* Fundo branco */
    color: #94cce4; /* Texto marrom */
}

/* Mostra conteúdo do slide ativo */
.destaque-principal .swiper-slide-active .content {
    display: inline-block; /* Mostra o conteúdo */
}

/* Animação para conteúdo do slide ativo */
.destaque-principal .swiper-slide-active .content {
    animation: scaleContent 4s linear forwards; /* Animação de escala */
}

/* ========== SEÇÃO DESTAQUES ========== */
.destaques {
    padding: 80px 0; /* Espaçamento interno */
    background: var(--light); /* Cor de fundo (variável) */
}

/* Grid de destaques */
.grid-destaques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Grid responsivo */
    gap: 30px; /* Espaço entre itens */
    margin-top: 50px; /* Espaçamento superior */
}

/* Ícone de destaque */
.icone-destaque {
    font-size: 3rem; /* 30px */
    color: var(--primary); /* Cor primária (variável) */
    margin-bottom: 20px; /* Espaçamento inferior */
}

/* Container alternativo */
.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Estilo base para imagens */
img {
    max-width: 100%; /* Largura máxima */
    height: auto; /* Altura automática */
    display: block; /* Remove espaço abaixo */
}

/* Estilo para títulos */
h1, h2, h3 {
    font-family: var(--font-secondary); /* Fonte secundária (variável) */
    color: var(--primary-color); /* Cor primária (variável) */
    margin-top: 0; /* Remove margem superior */
}

/* Estilo específico para h2 */
h2 {
    text-align: center; /* Texto centralizado */
    margin-bottom: 40px; /* Espaçamento inferior */
    font-size: 3.2rem; /* 22px */
}

/* Estilo base para links */
a {
    text-decoration: none; /* Remove sublinhado */
    color: var(--secondary-color); /* Cor secundária (variável) */
    transition: color 0.3s ease; /* Transição suave de cor */
}

/* Efeito hover para links */
a:hover {
    color: var(--accent-color); /* Cor de destaque (variável) */
}

/* Estilo alternativo para botões */
.btn {
    display: inline-block;
    background-color: var(--secondary-color); /* Cor secundária */
    color: var(--light-text-color); /* Cor de texto claro */
    padding: 10px 20px; /* Espaçamento interno */
    border: none; /* Remove borda */
    border-radius: 5px; /* Cantos arredondados */
    cursor: pointer; /* Cursor de pointer */
    font-size: 2rem; /* 10px */
    font-family: var(--font-secondary); /* Fonte secundária */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transições suaves */
}

/* Efeito hover para botão alternativo */
.btn:hover {
    background-color: #d35400; /* Laranja mais escuro */
    transform: translateY(-2px); /* Move ligeiramente para cima */
}

/* Classe de espaçamento para seções */
.section-padding {
    padding: 60px 0; /* Espaçamento interno */
}

/* Animação de fade */
.fade {
    animation-name: fade; /* Nome da animação */
    animation-duration: 1.5s; /* Duração */
}

/* Definição da animação fade */
@keyframes fade {
    from {opacity: .4} /* Começa semi-transparente */
    to {opacity: 1} /* Termina totalmente visível */
}

/* Estilo para botões de navegação (prev/next) */
.prev, .next {
    cursor: pointer; /* Cursor de pointer */
    position: absolute; /* Posicionamento absoluto */
    top: 50%; /* Alinha verticalmente */
    width: auto; /* Largura automática */
    padding: 16px; /* Espaçamento interno */
    margin-top: -22px; /* Ajuste fino de posição */
    color: white; /* Texto branco */
    font-weight: bold; /* Negrito */
    font-size: 18px; /* 18px */
    transition: 0.6s ease; /* Transição suave */
    border-radius: 0 3px 3px 0; /* Cantos arredondados */
    user-select: none; /* Não permite seleção de texto */
    background-color: rgba(0,0,0,0.3); /* Fundo semi-transparente */
}

/* Posicionamento específico para next */
.next {
    right: 0; /* Alinha à direita */
    border-radius: 3px 0 0 3px; /* Cantos arredondados */
}

/* Efeito hover para prev/next */
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8); /* Fundo mais escuro */
}

/* ========== SEÇÃO DE SERVIÇOS ========== */
#services {
    background-color: var(--light-gray-bg); /* Cor de fundo (variável) */
}

/* Grid de serviços */
.services-grid {
    display: grid;
    
    gap: 20px; /* Espaço entre itens */
}

/* Itens de serviço */
.service-item {
    background-color: var(--bg-color); /* Cor de fundo (variável) */
    padding: 2rem; /* Espaçamento interno */
    text-align: center; /* Texto centralizado */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    height: 100%;   /* Transições suaves */
}

.service-item img{
     height: 30rem; /* Altura */
    width: 20rem; /* Largura */
    object-fit: contain; /* Largura total */
    display: block; /* Remove espaço abaixo */
    transition: transform 0.5s ease; /* Transição suave */
    cursor: pointer;
}

/* Título do serviço */
.service-item h3 {
    font-size: 2rem;
     margin-bottom: 10px; /* Espaçamento inferior */
    color: var(--secondary-color); /* Cor secundária (variável) */
}


.service-item p {
    font-size: 1.50rem;
}

/* Efeito hover para itens de serviço */
.service-item:hover {
    transform: translateY(-5px); /* Move ligeiramente para cima */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* Sombra mais pronunciada */
}

/* Ícone de serviço */
.service-icon {
    width: 60px; /* Largura fixa */
    height: 60px; /* Altura fixa */
    margin: 0 auto 20px auto; /* Centraliza e adiciona espaço abaixo */
}

/* ========== SEÇÃO DE PROJETOS ========== */
/* Galeria de projetos */
.projects-gallery {
    display: grid;
    grid-template-columns: 1fr; /* 1 coluna em mobile */
    gap: 20px; /* Espaço entre itens */
    display: flex;
}

/* Itens de projeto */
.project-item {
    position: relative; /* Para posicionamento absoluto dos filhos */
    overflow: hidden; /* Esconde conteúdo que ultrapassa */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra suave */
    width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagem do projeto */
.project-item img {
    width: 100%;
    object-fit: contain; /* Largura total */
    display: block; /* Remove espaço abaixo */
    transition: transform 0.5s ease; /* Transição suave */
    cursor: pointer;
}

/* Efeito hover para imagem do projeto */
.project-item:hover img {
    transform: scale(1.1); /* Aumenta ligeiramente */
}

/* Informações do projeto (mostradas no hover) */
.project-info {
    position: absolute; /* Posicionamento absoluto */
    bottom: 0; /* Alinha na base */
    left: 0; /* Alinha à esquerda */
    width: 100%; /* Largura total */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0,0,0,0) 100%); /* Gradiente escuro */
    color: white; /* Cor de texto claro (variável) */
    padding: 20px; /* Espaçamento interno */
    box-sizing: border-box; /* Inclui padding na largura */
    transform: translateY(100%); /* Esconde inicialmente */
    opacity: 0; /* Invisível inicialmente */
    transition: transform 0.4s ease-out, opacity 0.4s ease-out; /* Transições suaves */
}

/* Mostra informações no hover */
.project-item:hover .project-info {
    transform: translateY(0); /* Volta à posição original */
    opacity: 1; /* Torna visível */
}

/* Título do projeto */
.project-info h3 {
    margin: 0 0 0 5px 0; /* Espaçamento */
    font-size: 1.5rem; /* 13px */
    color: white; /* Cor de texto claro */
}

/* Descrição do projeto */
.project-info p {
    margin: 0; /* Remove margens */
    font-size: 1rem; /* 9px */
}

/* ========== NAVEGAÇÃO DO SLIDER ========== */
/* Botões de navegação do slider */
.swiper-button-prev,
.swiper-button-next {
    height: 4.5rem; /* Altura */
    width: 4.5rem; /* Largura */
    line-height: 4.5rem; /* Centraliza conteúdo verticalmente */
    margin-left: 1.5rem; /* Espaçamento à esquerda */
    color: #1c94c4; /* Cor marrom */
    border: 0.1rem solid #1c94c4; /* Borda marrom */
    transform: translateY(-50%) rotate(45deg); /* Rotação e posicionamento */
}

/* Seta dentro dos botões */
.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 1.5rem; /* 15px */
    transform: rotate(-45deg); /* Contra-rotação para alinhar seta */
}

/* Efeito hover para botões de navegação */
.swiper-button-prev:hover,
.swiper-button-next:hover {
    color: #fff; /* Texto branco */
    background-color: #94cce4; /* Marrom mais escuro */
}

/* ========== SEÇÃO DE DESTAQUES ========== */
.destaques {
    padding: 5rem 0; /* Espaçamento interno */
}

/* Título da seção */
.titulo {
    font-size: 2.8rem; /* 28px */
    color: #130f40; /* Azul escuro */
    padding: 1.2rem 0; /* Espaçamento interno */
    text-align: center; /* Texto centralizado */
    border-bottom: 1rem solid rgba(0, 0, 0, 0.1); /* Borda inferior */
    margin-bottom: 3rem; /* Espaçamento inferior */
}

/* Span dentro do título */
.titulo span {
    color: #8b5a2b; /* Cor marrom */
}

/* Grid de destaques */
.grid-destaques {
    display: grid;
    gap: 1.5rem; /* Espaço entre itens */
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); /* Grid responsivo */
}

/* Itens do grid */
.grid-destaques article {
    border: 1px solid #ddd; /* Borda cinza */
    border-radius: 8px; /* Cantos arredondados */
    overflow: hidden; /* Esconde conteúdo que ultrapassa */
    transition: transform 0.3s, box-shadow 0.3s; /* Transições suaves */
}

/* Efeito hover para itens do grid */
.grid-destaques article:hover {
    transform: translateY(-5px); /* Move ligeiramente para cima */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Imagens no grid */
.grid-destaques img {
    width: 100%; /* Largura total */
    height: 20rem; /* Altura fixa */
    object-fit: cover; /* Cobre o espaço mantendo proporções */
}

/* Títulos no grid */
.grid-destaques h3 {
    font-size: 1.8rem; /* 18px */
    padding: 1rem; /* Espaçamento interno */
    color: #130f40; /* Azul escuro */
}

/* Parágrafos no grid */
.grid-destaques p {
    font-size: 1.5rem; /* 14px */
    padding: 0 1rem 1rem; /* Espaçamento interno */
    color: #666; /* Cinza médio */
}

/* ========== NEWSLETTER ========== */
.newsletter {
    background-color: #f9f9f9; /* Fundo cinza claro */
    padding: 5rem 0; /* Espaçamento interno */
    text-align: center; /* Texto centralizado */
}

/* Título da newsletter */
.newsletter h2 {
    font-size: 2.5rem; /* 25px */
    margin-bottom: 2rem; /* Espaçamento inferior */
    color: #130f40; /* Azul escuro */
}

/* Formulário da newsletter */
#newsletter-form {
    display: flex; /* Layout flexível */
    max-width: 50rem; /* Largura máxima */
    margin: 0 auto; /* Centraliza horizontalmente */
}

/* Campo de input */
#newsletter-form input {
    flex: 1; /* Ocupa todo espaço disponível */
    padding: 1.5rem; /* Espaçamento interno */
    font-size: 1.6rem; /* 16px */
    border: 1px solid #ddd; /* Borda cinza */
    border-radius: 0.5rem 0 0 0.5rem; /* Cantos arredondados à esquerda */
}

/* Botão de submit */
#newsletter-form button {
    padding: 1.5rem 3rem; /* Espaçamento interno */
    font-size: 1.6rem; /* 16px */
    background-color: #1c94c4; /* Marrom */
    color: white; /* Texto branco */
    border: none; /* Remove borda */
    border-radius: 0 0.5rem 0.5rem 0; /* Cantos arredondados à direita */
    cursor: pointer; /* Cursor de pointer */
}

/* Efeito hover para botão */
#newsletter-form button:hover {
    background-color: #1c94c486; /* Marrom mais escuro */
}

/* ========== RODAPÉ ========== */
.rodape {
    background: #1c94c4; /* Marrom */
    text-align: center; /* Texto centralizado */
    padding: 5rem 0 0; /* Espaçamento interno */
}

/* Container do rodapé */
.rodape .box-container { /* Grid responsivo */
    gap: 2rem; /* Espaço entre colunas */
    max-width: 1500px; /* Largura máxima */
    margin: 0 1rem; /* Centraliza horizontalmente */
    padding: 0 1rem; /* Espaçamento interno */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    background: #1c94c4;
}

/* Caixas individuais no rodapé */
.rodape .box-container .box h3 {
    font-size: 2.2rem; /* 22px */
    text-transform: capitalize; /* Primeira letra maiúscula */
    color: #fff; /* Texto branco */
    padding: 1rem 0; /* Espaçamento interno */
}

/* Parágrafos no rodapé */
.rodape .box-container .box p {
    font-size: 1.5rem; /* 15px */
    color: #fff; /* Texto branco */
    line-height: 2; /* Espaçamento entre linhas */
    padding: 1rem 0; /* Espaçamento interno */
}

/* Redes sociais no rodapé */
.rodape .box-container .box .redes-sociais {
    margin-top: 1rem; /* Espaçamento superior */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    flex-wrap: wrap;         /* Permite quebra de linha se necessário */
    gap: 0.3rem;            /* Espaçamento entre os ícones (substitui margin-right) */
}

/* Ícones de redes sociais */
.rodape .box-container .box .redes-sociais a { /* Permite definir largura/altura */
    color: #fff; /* Texto branco */
    border: 0.1rem solid #fff; /* Borda branca */
    border-radius: 50%; /* Cantos ligeiramente arredondados */
    width: 4.5rem; /* Largura fixa */
    height: 4.5rem; /* Altura fixa */
    line-height: 4.5rem; /* Centraliza verticalmente */
    text-align: center; /* Centraliza horizontalmente */
    font-size: 1.8rem; /* 18px */
    transition: all 0.3s ease; /* Adiciona transição suave ao hover */
    
}

/* Efeito hover para ícones de redes sociais */
.rodape .box-container .box .redes-sociais a:hover {
    background-color: #fff; /* Fundo branco */
    color: #94cce4; /* Texto marrom */
    transform: scale(1.05); /* Efeito de leve zoom opcional */
}

/* Links no rodapé */
.rodape .box-container .box .link { /* Ocupa toda a linha */
    font-size: 1.7rem; /* 17px */
    line-height: 2; /* Espaçamento entre linhas */
    padding: 0.5rem 0; /* Espaçamento interno */
    text-decoration: underline; /* Sublinhado */
    color: #fff; /* Texto branco */
}

/* Efeito hover para links */
.rodape .box-container .box .link:hover {
    color: #130f40; /* Azul escuro */
}

/* Direitos autorais */
.direitos {
    
    text-align: center; /* Texto centralizado */
    background: #1c94c4;
    color: #fff; /* Texto branco */
    font-size: 2rem; /* 20px */
    margin-top: 3rem; /* Espaçamento superior */
    padding-top: 3rem; /* Espaçamento interno superior */
    text-transform: capitalize; /* Primeira letra maiúscula */
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* Borda superior transparente */
}


/* Span dentro dos direitos autorais */
.direitos span {
    color: #130f40; /* Azul escuro */
}

/* ========== ANIMAÇÕES ========== */
/* Animação de revelação do slider */
@keyframes sliderReveal {
    0% {
        transform: translateY(30px); /* Começa 30px abaixo */
        opacity: 0; /* Invisível */
    }
    100% {
        transform: translateY(0px); /* Volta à posição original */
        opacity: 1; /* Totalmente visível */
    }
}

/* Animação de escala para conteúdo */
@keyframes scaleContent {
    0% {
        transform: scale(1); /* Tamanho normal */
    }
    100% {
        transform: scale(1.15); /* Aumenta ligeiramente */
    }
}



/* ========== S ========== */
/* Banner para páginas internas */
.banner-interno {
    position: relative; /* Para posicionamento absoluto de filhos */
    height: 40vh; /* 40% da altura da viewport */
    background-size: cover !important; /* Cobre todo o espaço */
    background-position: center !important; /* Centraliza a imagem */
    display: flex; /* Layout flexível */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    margin-top: 8rem; /* Compensa o header fixo */
}

/* Conteúdo do banner interno */
.banner-interno .content {
    text-align: center; /* Texto centralizado */
    z-index: 2; /* Garante que fique acima da imagem de fundo */
}

/* Título do banner interno */
.banner-interno .content h1 {
    font-size: 5rem; /* 50px */
    color: #fff; /* Texto branco */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra de texto */
}

/* Parágrafo do banner interno */
.banner-interno .content p {
    font-size: 2rem; /* 20px */
    color: #fff; /* Texto branco */
    padding-top: 1rem; /* Espaçamento superior */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra de texto */
}

/* ========== PÁGINA SOBRE ========== */
/* Seção de história */
.nossa-historia {
    padding: 5rem 0; /* Espaçamento interno */
}

/* Container flexível */
.flex-container {
    display: flex;
    flex-wrap: wrap; /* Quebra linha quando necessário */
    gap: 3rem; /* Espaço entre itens */
    align-items: center; /* Alinha itens verticalmente */
}

/* Imagem no flex container */
.flex-container .imagem {
    flex: 1 1 30rem; /* Cresce, encolhe, base de 30rem */
}

/* Estilo para imagens */
.flex-container .imagem img {
    width: 100%; /* Largura total */
    border-radius: 1rem; /* Cantos arredondados */
}

/* Conteúdo no flex container */
.flex-container .conteudo {
    flex: 1 1 40rem; /* Cresce, encolhe, base de 40rem */
}

/* Título no conteúdo */
.flex-container .conteudo h2 {
    font-size: 3rem; /* 30px */
    color: #130f40; /* Azul escuro */
    margin-bottom: 1.5rem; /* Espaçamento inferior */
}

/* Parágrafo no conteúdo */
.flex-container .conteudo p {
    font-size: 1.6rem; /* 16px */
    color: #666; /* Cinza médio */
    line-height: 1.8; /* Espaçamento entre linhas */
    padding: 1rem 0; /* Espaçamento interno */
}

/* Destaque na página sobre */
.destaque {
    background: #f9f9f9; /* Fundo cinza claro */
    padding: 2rem; /* Espaçamento interno */
    margin-top: 2rem; /* Espaçamento superior */
    border-left: 4px solid #1c94c4; /* Borda lateral marrom */
}

/* Título do destaque */
.destaque h3 {
    font-size: 2rem; /* 20px */
    color: #1c94c4; /* Marrom */
}

/* ========== VALORES ========== */
.valores {
    background: var(--light); /* Cor de fundo (variável) */
    padding: 60px 0; /* Espaçamento interno */
}

/* Grid de valores */
.grid-valores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Grid responsivo */
    gap: 30px; /* Espaço entre itens */
    margin-top: 40px; /* Espaçamento superior */
}

/* Itens de valores */
.valor-item {
    background: white; /* Fundo branco */
    padding: 30px; /* Espaçamento interno */
    border-radius: 8px; /* Cantos arredondados */
    text-align: center; /* Texto centralizado */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Sombra suave */
    transition: all 0.3s ease; /* Transição suave */
}

/* Efeito hover para itens de valores */
.valor-item:hover {
    transform: translateY(-10px); /* Move para cima */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Sombra mais pronunciada */
}

/* Ícone nos valores */
.valor-item i {
    font-size: 4rem; /* 30px */
    color: var(--primary); /* Cor primária (variável) */
    margin-bottom: 20px; /* Espaçamento inferior */
}

/* Título nos valores */
.valor-item h3 {
    font-size: 2rem; /* 15px */
    margin-bottom: 15px; /* Espaçamento inferior */
    color: var(--secondary); /* Cor secundária (variável) */
}
.valor-item p{
    font-size: 1.5rem
}

/* ========== EQUIPE ========== */
.nossa-equipe {
    padding: 5rem 0; /* Espaçamento interno */
    background: #f9f9f9; /* Fundo cinza claro */
}

/* Grid da equipe */
.grid-equipe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); /* Grid responsivo */
    gap: 3rem; /* Espaço entre itens */
    margin-top: 3rem; /* Espaçamento superior */
}

/* Membros da equipe */
.membro {
    background: #fff; /* Fundo branco */
    padding: 2rem; /* Espaçamento interno */
    text-align: center; /* Texto centralizado */
    border-radius: 1rem; /* Cantos arredondados */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Imagem dos membros */
.membro img {
    width: 15rem; /* Largura fixa */
    height: 15rem; /* Altura fixa */
    object-fit: cover; /* Cobre o espaço mantendo proporções */
    border-radius: 50%; /* Formato circular */
    margin-bottom: 1.5rem; /* Espaçamento inferior */
}

/* Nome dos membros */
.membro h3 {
    font-size: 2rem; /* 20px */
    color: #130f40; /* Azul escuro */
}

/* Cargo dos membros */
.membro p {
    font-size: 1.5rem; /* 15px */
    color: #666; /* Marrom */
}

/* Flavors Grid Styles */
.flavors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2em;
}

/* ========== PÁGINA SERVIÇOS ========== */
/* Grid de serviços */
.grid-servicos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); /* Grid responsivo */
    gap: 2rem; /* Espaço entre itens */
    margin-top: 3rem; /* Espaçamento superior */
}

/* Itens de serviço */
.servico {
    background: #fff; /* Fundo branco */
    padding: 3rem 2rem; /* Espaçamento interno */
    text-align: center; /* Texto centralizado */
    border-radius: 1rem; /* Cantos arredondados */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: transform 0.3s; /* Transição suave */
}

/* Efeito hover para serviços */
.servico:hover {
    transform: translateY(-1rem); /* Move ligeiramente para cima */
}

/* Ícone do serviço */
.servico .icone {
    font-size: 5rem; /* 50px */
    color: #8b5a2b; /* Marrom */
    margin-bottom: 1.5rem; /* Espaçamento inferior */
}

/* Título do serviço */
.servico h3 {
    font-size: 4rem; /* 20px */
    color: #130f40; /* Azul escuro */
}

/* Descrição do serviço */
.servico p {
    font-size: 1.5rem; /* 15px */
    color: #666; /* Cinza médio */
    line-height: 1.8; /* Espaçamento entre linhas */
    padding-top: 1rem; /* Espaçamento superior */
}

/* ========== DEPOIMENTOS ========== */
.depoimentos {
    padding: 5rem 0; /* Espaçamento interno */
    background: #f9f9f9; /* Fundo cinza claro */
}

/* Slides de depoimentos */
.depoimentos-slider .slide {
    background: #fff; /* Fundo branco */
    padding: 3rem; /* Espaçamento interno */
    border-radius: 1rem; /* Cantos arredondados */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Sombra suave */
    text-align: center; /* Texto centralizado */
    margin-bottom: 4rem; /* Espaçamento inferior */
}

/* Texto do depoimento */
.depoimentos-slider .slide p {
    font-size: 1.6rem; /* 16px */
    color: #666; /* Cinza médio */
    line-height: 1.8; /* Espaçamento entre linhas */
    font-style: italic; /* Texto itálico */
    position: relative; /* Para posicionamento absoluto do pseudo-elemento */
    padding-bottom: 2rem; /* Espaçamento inferior */
}

/* Aspas decorativas antes do depoimento */
.depoimentos-slider .slide p::before {
    content: '\201C'; /* Caractere de aspas */
    font-size: 6rem; /* 60px */
    color: #8b5a2b; /* Marrom */
    opacity: 0.3; /* Semi-transparente */
    position: absolute; /* Posicionamento absoluto */
    top: -2rem; /* Posiciona acima do texto */
    left: 0; /* Alinha à esquerda */
}

/* Container do cliente (autor do depoimento) */
.cliente {
    display: flex; /* Layout flexível */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    gap: 1.5rem; /* Espaço entre elementos */
    padding-top: 1.5rem; /* Espaçamento superior */
}

/* Foto do cliente */
.cliente img {
    width: 7rem; /* Largura fixa */
    height: 7rem; /* Altura fixa */
    border-radius: 50%; /* Formato circular */
    object-fit: cover; /* Cobre o espaço mantendo proporções */
}

/* Nome do cliente */
.cliente h4 {
    font-size: 1.8rem; /* 18px */
    color: #130f40; /* Azul escuro */
}


/* ========== PÁGINA CONTATO ========== */
/* Formulário de contato */
.formulario {
    flex: 1 1 50rem; /* Cresce, encolhe, base de 50rem */
    padding: 2rem; /* Espaçamento interno */
    background: #fff; /* Fundo branco */
    border-radius: 1rem; /* Cantos arredondados */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Título do formulário */
.formulario h2 {
    font-size: 2.5rem; /* 25px */
    color: #130f40; /* Azul escuro */
    margin-bottom: 2rem; /* Espaçamento inferior */
}

/* Grupos de input */
.input-group {
    margin-bottom: 2rem; /* Espaçamento inferior */
}

/* Campos de input e textarea */
.input-group input,
.input-group textarea {
    width: 100%; /* Largura total */
    padding: 1.5rem; /* Espaçamento interno */
    font-size: 1.6rem; /* 16px */
    border: 1px solid #ddd; /* Borda cinza */
    border-radius: 0.5rem; /* Cantos arredondados */
}

/* Textarea específico */
.input-group textarea {
    height: 15rem; /* Altura fixa */
    resize: none; /* Desabilita redimensionamento */
}

/* Seção de dados de contato */
.dados-contato {
    flex: 1 1 40rem; /* Cresce, encolhe, base de 40rem */
    padding: 2rem; /* Espaçamento interno */
}

/* Título dos dados de contato */
.dados-contato h2 {
    font-size: 2.5rem; /* 25px */
    color: #130f40; /* Azul escuro */
    margin-bottom: 2rem; /* Espaçamento inferior */
}

/* Itens de informação de contato */
.info-item {
    display: flex; /* Layout flexível */
    align-items: flex-start; /* Alinha itens no topo */
    gap: 1.5rem; /* Espaço entre elementos */
    margin-bottom: 2rem; /* Espaçamento inferior */
}

/* Ícones dos itens de contato */
.info-item i {
    font-size: 2.5rem; /* 25px */
    color: #1c94c4; /* Marrom */
    padding-top: 0.5rem; /* Ajuste fino de posição */
}

/* Texto dos itens de contato */
.info-item p {
    font-size: 1.6rem; /* 16px */
    color: #666; /* Cinza médio */
    line-height: 1.8; /* Espaçamento entre linhas */
}

/* Redes sociais na página de contato */
.redes-sociais {
    display: flex; /* Layout flexível */
    gap: 1.5rem; /* Espaço entre elementos */
    margin-top: 3rem; /* Espaçamento superior */
}

/* Ícones de redes sociais */
.redes-sociais a {
    display: flex; /* Layout flexível */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    width: 4.5rem; /* Largura fixa */
    height: 4.5rem; /* Altura fixa */
    background: #1c94c4; /* Fundo marrom */
    color: #fff; /* Texto branco */
    border-radius: 50%; /* Formato circular */
    font-size: 2rem; /* 20px */
    transition: all 0.3s; /* Transição suave */
}

/* Efeito hover para ícones de redes sociais */
.redes-sociais a:hover {
    background: #130f40; /* Fundo azul escuro */
    transform: translateY(-0.5rem); /* Move ligeiramente para cima */
}

/* Seção do mapa */
.mapa {
    padding: 5rem 0; /* Espaçamento interno */
}

/* Título do mapa */
.mapa h2 {
    text-align: center; /* Texto centralizado */
    font-size: 2.5rem; /* 25px */
    color: #94cce4 ; /* Azul escuro */
    margin-bottom: 3rem; /* Espaçamento inferior */
}

/* Container do mapa */
.mapa-container {
    border-radius: 1rem; /* Cantos arredondados */
    overflow: hidden; /* Esconde conteúdo que ultrapassa */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); /* Sombra suave */
}

#menu-btn {
    display: none;
    cursor: pointer; /* Mãozinha ao passar o mouse */
}

/* ========== RODAPÉ ========== */
.rodape {
    background: #1c94c4; /* Marrom */
    text-align: center; /* Texto centralizado */
    padding: 5rem 0 0; /* Espaçamento interno */
}

/* Container do rodapé */
.rodape .box-container { /* Grid responsivo */
    gap: 2rem; /* Espaço entre colunas */
    max-width: 1500px; /* Largura máxima */
    margin: 0 1rem; /* Centraliza horizontalmente */
    padding: 0 1rem; /* Espaçamento interno */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    background: #1c94c4;
}

/* Caixas individuais no rodapé */
.rodape .box-container .box h3 {
    font-size: 2.2rem; /* 22px */
    text-transform: capitalize; /* Primeira letra maiúscula */
    color: #fff; /* Texto branco */
    padding: 1rem 0; /* Espaçamento interno */
}

/* Parágrafos no rodapé */
.rodape .box-container .box p {
    font-size: 1.5rem; /* 15px */
    color: #fff; /* Texto branco */
    line-height: 2; /* Espaçamento entre linhas */
    padding: 1rem 0; /* Espaçamento interno */
}

/* Redes sociais no rodapé */
.rodape .box-container .box .redes-sociais {
    margin-top: 1rem; /* Espaçamento superior */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    flex-wrap: wrap;         /* Permite quebra de linha se necessário */
    gap: 0.3rem;            /* Espaçamento entre os ícones (substitui margin-right) */
}

/* Ícones de redes sociais */
.rodape .box-container .box .redes-sociais a { /* Permite definir largura/altura */
    color: #fff; /* Texto branco */
    border: 0.1rem solid #fff; /* Borda branca */
    border-radius: 50%; /* Cantos ligeiramente arredondados */
    width: 4.5rem; /* Largura fixa */
    height: 4.5rem; /* Altura fixa */
    line-height: 4.5rem; /* Centraliza verticalmente */
    text-align: center; /* Centraliza horizontalmente */
    font-size: 1.8rem; /* 18px */
    transition: all 0.3s ease; /* Adiciona transição suave ao hover */
    
}

/* Efeito hover para ícones de redes sociais */
.rodape .box-container .box .redes-sociais a:hover {
    background-color: #fff; /* Fundo branco */
    color: #94cce4; /* Texto marrom */
    transform: scale(1.05); /* Efeito de leve zoom opcional */
}

/* Links no rodapé */
.rodape .box-container .box .link { /* Ocupa toda a linha */
    font-size: 1.7rem; /* 17px */
    line-height: 2; /* Espaçamento entre linhas */
    padding: 0.5rem 0; /* Espaçamento interno */
    text-decoration: underline; /* Sublinhado */
    color: #fff; /* Texto branco */
}

/* Efeito hover para links */
.rodape .box-container .box .link:hover {
    color: #130f40; /* Azul escuro */
}

/* Direitos autorais */
.direitos {
    
    text-align: center; /* Texto centralizado */
    background: #1c94c4;
    color: #fff; /* Texto branco */
    font-size: 2rem; /* 20px */
    margin-top: 3rem; /* Espaçamento superior */
    padding-top: 3rem; /* Espaçamento interno superior */
    text-transform: capitalize; /* Primeira letra maiúscula */
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* Borda superior transparente */
}


/* Span dentro dos direitos autorais */
.direitos span {
    color: #130f40; /* Azul escuro */
}

/* ========== MEDIA QUERIES ========== */
/* Dispositivos até 991px (tablets) */
@media (max-width: 991px) {
    html {
        font-size: 55%; /* Reduz tamanho da fonte base */
    }
    
    section {
        padding: 2rem; /* Reduz espaçamento das seções */
    }
    
    .topo-site {
        padding: 2rem; /* Reduz espaçamento do cabeçalho */
    }
}

/* Dispositivos até 768px (tablets pequenos/mobile) */
@media (max-width: 768px) {
    /* Menu mobile */
    .topo-site .menu-site {
        position: fixed; /* Posicionamento fixo */
        top: 8rem; /* Abaixo do cabeçalho */
        left: -100%; /* Esconde fora da tela */
        width: 250px; /* Largura total */
        height: 50vh; /* Altura restante da tela */
        background: #1c94c49c; /* Fundo marrom */
        flex-direction: column; /* Itens em coluna */
        align-items: center; /* Centraliza horizontalmente */
        padding: 60px 20px 20px; /* Espaçamento interno */
        transition: 0.3s; /* Transição suave */
        z-index: 999; /* Garante que fique acima de outros elementos */
        overflow-y: auto; 
    }
    
     /* Itens do menu mobile */
    .topo-site .menu-site a {
        display: block; /* Ocupa toda a linha */
        width: 100%; /* Largura total */
        text-align: center; /* Texto centralizado */
        margin: 1rem 0; /* Espaçamento vertical */
        padding: 1rem; /* Espaçamento interno */
        border-radius: 0.5rem; /* Cantos arredondados */
        background: rgba(255, 255, 255, 0.1); /* Fundo semi-transparente */
    }
    
    /* Menu ativo (mostrado) */
    .topo-site .menu-site.active {
        left: 0; /* Mostra na tela */
    }
    
   
    
    /* Botão do menu mobile */
    #menu-btn {
        display: block; /* Mostra o botão */
    }
    
    /* Título do slide */
    .destaque-principal .slide .content h3 {
        font-size: 4.5rem; /* Reduz tamanho da fonte */
    }
}

/* Dispositivos até 450px (celulares pequenos) */
@media (max-width: 450px) {
    html {
        font-size: 50%; /* Reduz ainda mais o tamanho da fonte base */
    }
    
    /* Título do slide */
    .destaque-principal .slide .content h3 {
        font-size: 3.5rem; /* Tamanho menor para telas pequenas */
    }
    
    
    /* Conteúdo do slide */
    .destaque-principal .slide .content {
        width: 90%; /* Largura menor para telas pequenas */
    }
}



.flavor-card {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.flavor-card:hover {
    transform: translateY(-5px);
}

.flavor-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.flavor-info {
    padding: 1em;
}

.flavor-name {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.5em;
}

.flavor-description {
    font-size: 0.9em;
    color: #666;
}

/* Featured Flavors Styles */
.featured-flavors {
    display: flex;
    justify-content: space-between;
    margin-top: 2em;
}

.flavor-card-content {
    padding: 1em;
}



/* Responsive Styles */
@media (max-width: 768px) {
   
    .topo-site .menu-site {
        position: fixed; /* Posicionamento fixo */
        top: 8rem; /* Abaixo do cabeçalho */
        left: -100%; /* Esconde fora da tela */
        width: 250px; /* Largura total */
        height: 50vh; /* Altura restante da tela */
        background: #1c94c49c; /* Fundo marrom */
        flex-direction: column; /* Itens em coluna */
        align-items: center; /* Centraliza horizontalmente */
        padding: 60px 20px 20px; /* Espaçamento interno */
        transition: 0.3s; /* Transição suave */
        z-index: 999; /* Garante que fique acima de outros elementos */
        overflow-y: auto; 
    }
    
     /* Itens do menu mobile */
    .topo-site .menu-site a {
        display: block; /* Ocupa toda a linha */
        width: 100%; /* Largura total */
        text-align: center; /* Texto centralizado */
        margin: 1rem 0; /* Espaçamento vertical */
        padding: 1rem; /* Espaçamento interno */
        border-radius: 0.5rem; /* Cantos arredondados */
        background: rgba(255, 255, 255, 0.1); /* Fundo semi-transparente */
    }
    
    /* Menu ativo (mostrado) */
    .topo-site .menu-site.active {
        left: 0; /* Mostra na tela */
    }
    
   
    
    /* Botão do menu mobile */
    #menu-btn {
        display: block; /* Mostra o botão */
    }
    .featured-flavors {
        flex-direction: column;
    }
    
    .flavor-card {
        margin-bottom: 1em;
    }
    
    .location-container {
        flex-direction: column;
    }
    
    .map-container {
        height: 300px;
    }
    
    .contact-form, .contact-info {
        flex-basis: 100%;
        margin-bottom: 1em;
    }
}

 span {
        color: #1c94c4; /* Substitua  pela cor desejada (ex: blue, #00FF00, etc.) */
    }