/* Estilo inicial do cabeçalho */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 20px 0;
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
	right: 0;
    z-index: 1000;
    transition: padding 0.3s ease-in-out, height 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* Cabeçalho com fundo transparente para a página inicial */
.header-transparent {
    background-color: transparent;
    color: white; /* Se necessário, ajuste as cores dos textos */
}

/* Cabeçalho com fundo escuro para as demais páginas */
.header-dark {
    background-color: #333;
    color: white; /* Se necessário, ajuste as cores dos textos */
}

.header-wrapper {
    width: 100%; /* Garante que ocupe toda a largura disponível */
    max-width: 1200px; /* Limita a largura máxima para 1200px (ou o valor desejado) */
    margin: 0 auto; /* Centraliza o conteúdo */
    padding: 0 10px; /* Adiciona um pequeno espaçamento nas laterais */
}


/* Container para o cabeçalho */
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
	transform: translateY(-100%);
    opacity: 0;
    transition: transform 1.0s ease, opacity 1.0s ease;
}

/* Estado final (após animação) */
.header-container.animate {
    transform: translateY(0);
    opacity: 1;
}

/* Logo */
.logo img {
    height: 50px; 
    transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
}

/* Efeito ao passar o mouse sobre o logo */
.logo img:hover {
    transform: scale(1.1);
}

@font-face {
    font-family: 'CustomFont';
    src: url('/public/fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Menu de navegação */
nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    flex-direction: row; /* Menu horizontal em telas grandes */
    max-width: 100%; /* Impede o menu de ultrapassar a tela */
    width: 100%; /* Garante que o menu ocupe toda a largura disponível */
}

/* Divisores entre os itens do menu */
nav ul li {
    position: relative; /* Necessário para o posicionamento do ::after */
    display: flex; /* Garante que o conteúdo dentro do li será alinhado */
    justify-content: center; /* Alinha o conteúdo no centro */
    text-align: center; /* Garante que o texto dentro do link estará centralizado */
}

/* Remover a barrinha do último item */
nav ul li:last-child {
    border-bottom: none; /* Remove a borda do último item */
}

/* Estilo dos links do menu */
nav ul li a {
    position: relative; /* Necessário para o ::after */
    text-decoration: none;
    font-size: 16px;
    color: #fff;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Efeito ao passar o mouse sobre os links do menu */
nav ul li a:hover {
    color: #808080;
    transform: scale(1.1);
}

/* Efeito de underline animado ao passar o mouse no link */
nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 10px; /* Coloca a linha abaixo do texto do link */
    left: 0;
    right: 0;
    margin: 0 auto; /* Centra a linha */
    width: 0; /* Inicialmente a largura é 0 */
    height: 1px; /* Altura da linha */
    background-color: #808080;
    transition: width 0.3s ease;
}

/* Ao passar o mouse sobre o link */
nav ul li a:hover::after {
    width: 100%;
}


/* Efeito do cabeçalho quando rolar a página */
header.shrink {
    padding: 10px 0;
    background-color: #333;
}

/* Logo no cabeçalho reduzido */
header.shrink .logo img {
    transform: scale(0.8);
    height: 40px;
}



/* Menu Principal */
.menu {
    list-style: none;
    padding: 0;
    margin: 0; /* Remova a margem para evitar centralização incorreta */
    display: flex;
    flex-direction: row; /* Alinha os itens do menu na horizontal */
    align-items: center; /* Alinha os itens do menu ao centro verticalmente */
    justify-content: space-around; /* Distribui os itens com espaços iguais entre eles */
}

.menu li {
  position: relative;
}

.menu a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #fff;
}

/* Estilos para o submenu */
.submenu {
    list-style: none;
    padding: 0;
    margin: 0; /* Remova qualquer margem adicional */
    display: none; /* Inicialmente oculto */
    position: absolute;
    top: 100%; /* Abre o submenu logo abaixo do item do menu */
    left: 0; /* Alinha à esquerda do item pai */
    background-color: #333;
    min-width: 2200px; /* Largura mínima para o submenu */
	right: auto; /* Impede que o submenu se mova para o lado direito */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adiciona sombra para destacar */
}

.submenu li {
  width: 100%; /* Largura dos itens do submenu */
}

.submenu a {
  padding: 10px;
}

/* Ajustar o submenu para que não saia da tela */
.menu li:hover > .submenu {
    right: 0;
    left: auto;
    margin-left: calc(100% - 140px); /* Ajuste para garantir que o submenu se alinhe ao lado esquerdo */
}

/* Exibe o submenu ao passar o mouse no item pai */
.menu li:hover > .submenu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: calc(100% - 20px); /* Limita o submenu para não ultrapassar 100% da tela */
    min-width: 280px; /* Largura mínima para o submenu */
    overflow: hidden; /* Garante que o conteúdo não ultrapasse o limite */
}

/* Estilos para o menu-toggle (hambúrguer) */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    z-index: 1100;
    margin-right: 20px;
  
}

.bar {
    width: 25px;
    height: 3px;
    background-color: #fff;
    border-radius: 5px;
}




















/* Estilos do botão de WhatsApp */
.whatsapp-button {
    position: fixed;
    bottom: 10px;
    right: -100px; /* Fora da tela inicialmente */
    background-color: #25D366;
    border-radius: 50%;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0; /* Invisível no início */
	will-change: transform, box-shadow, opacity, right;
    transition: right 1s ease, opacity 1s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Animação suave */
}

.whatsapp-button.active {
    right: 10px; /* Posição final dentro da tela */
    opacity: 1; /* Torna visível */
}


.whatsapp-button a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.whatsapp-icon {
    width: 50px; /* Tamanho do ícone aumentado */
    height: 50px; /* Tamanho do ícone aumentado */
    fill: #fff; /* Cor do ícone */
}

.whatsapp-button:hover {
    transform: scale(1.1); /* Animação de aumento ao passar o mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Ajusta a posição do botão do WhatsApp quando o reCAPTCHA está visível */
body:has(.grecaptcha-badge) .whatsapp-button {
    bottom: 90px; /* Ajuste a distância conforme necessário */
}

/* Estilos do botão de subir */
.scroll-to-top {
    position: fixed;
    bottom: 10px;
    left: 20px;
    background-color: #333; /* Cor do fundo do botão */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0; /* Invisível no início */
    will-change: transform, box-shadow, opacity;
    transition: opacity 0.5s ease, transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease; /* Animação suave */
}

.scroll-to-top:hover {
    background-color: #555;
    transform: scale(1.2);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.scroll-to-top i {
    font-size: 36px;
    color: white; /* Cor do ícone (branco) */
    transition: color 0.3s ease; /* Transição suave para o ícone */
}

/* Cor externa e interna do botão quando perto do footer */
.scroll-to-top.change-color {
    background-color: #fff; /* Cor externa do botão */
}

.scroll-to-top.change-color i {
    color: #333; /* Cor interna (do ícone) */
}

/* Ajuste de visibilidade */
.scroll-to-top.show {
    opacity: 1;
}







































/* Responsividade - Exibir o menu de hambúrguer em telas pequenas */
@media (max-width: 768px) {

    header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 100%; /* Garante que o cabeçalho ocupe toda a largura da tela */
        margin: 0; /* Garantir que não tenha margens laterais */
		
    }
	
    .header-container {
        padding-left: 10px;  /* Ajuste o padding conforme necessário */
        padding-right: 10px; /* Ajuste o padding conforme necessário */
        width: 100%; /* Garante que o container ocupe a largura total */
    }
	
    /* Ajuste do logo no mobile */
    .logo {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%; /* Garante que o container ocupe toda a largura da tela */
        max-width: 100%; /* Garante que o container não ultrapasse a tela */
        margin: 0 auto; /* Centraliza o conteúdo */
    }


    /* Esconde o menu de navegação padrão em telas pequenas */
    nav ul {
        display: flex; /* Esconde o menu de navegação em telas pequenas */
        flex-direction: column; /* Força o menu a ser vertical */
        align-items: flex-start; /* Alinha itens à esquerda */
        width: 100%;
        max-width: 100%; /* Limita o menu à largura total da tela */
        background-color: #333;
        position: absolute;
        top: 60px; /* Ajusta a posição do menu */
        right: 0; /* Coloca o menu à direita */
        padding: 0; /* Remove o padding */
        z-index: 999;
        border-radius: 8px; /* Borda arredondada */
        transition: max-width 0.5s ease;
        list-style: none;
        margin: 0;
		gap: 0;
		
    }
	
    /* Divisores entre os itens do menu */
    nav ul li {
        margin: 0; /* Remove o espaçamento entre os itens */
        width: 100%; /* Aumenta a largura para 100% para ocupar toda a largura do menu */
		position: relative; /* Necessário para o posicionamento do ::after */
		margin: 0;
		text-align: center;
    }

    /* Estilo dos links do menu */
    nav ul li a {
		display: block;
		padding: 10px 0; /* Adiciona espaçamento superior e inferior */
		font-size: 16px; /* Mantém a legibilidade do texto */
		color: white;
		text-decoration: none;
		position: relative; /* Necessário para o ::after */
        text-decoration: none;
        
        
        width: 100%; /* Para ocupar toda a largura do menu */
        text-align: left; /* Alinha o texto à esquerda */
        transition: color 0.3s ease, transform 0.3s ease;
    }


    /* Remover a barrinha do último item */
    nav ul li:last-child {
        border-bottom: none; /* Remove a borda do último item */
    }



/* Efeito ao passar o mouse sobre os links do menu */
nav ul li a:hover {
    color: #808080;
    transform: scale(1.1);
}

/* Efeito de underline animado ao passar o mouse no link */
nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 10px; /* Coloca a linha abaixo do texto do link */
    left: 0;
    right: 0;
    margin: 0 auto; /* Centra a linha */
    width: 0; /* Inicialmente a largura é 0 */
    height: 1px; /* Altura da linha */
    background-color: #808080;
    transition: width 0.3s ease;
}

/* Ao passar o mouse sobre o link */
nav ul li a:hover::after {
     width: 90%;
}

    /* Exibe o ícone de hambúrguer em telas pequenas */
    .menu {
        display: none; /* Oculta o menu por padrão em telas menores */
        flex-direction: column;
        align-items: flex-start;
        background-color: #fff;
        position: flex;
        top: 100%;
        right: 10px; /* Coloca o menu à direita */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        width: 75%; /* Ajuste a largura do menu */
		justify-content: space-around; /* Distribui os itens com espaços iguais entre eles */
    }

.menu a {
    display: block;
    padding: 5px 30px;
    text-decoration: none;
    color: #333;
    /*border-bottom: 1px solid #ccc;*/
    position: relative; /* Mantém o item no fluxo normal */
}

/* Exibe o submenu ao passar o mouse no item pai */
.menu li:hover > .submenu {
  display: block;
}

	

    /* Mostrar o menu quando o toggle for ativado */
    .menu.active {
    display: flex;
    flex-direction: column;
    max-width: 100%; /* Expande até a largura total */
    margin-right: 20px; /* Ajusta a margem direita */
    }

    .menu-toggle {
		
        display: flex;
        flex-direction: column;
        cursor: pointer;
        gap: 5px;
        z-index: 1100;
        margin-left: 20px; /* Ajuste para que o ícone de hambúrguer fique no lado esquerdo */
    }

    /* Exibir o menu de navegação ao clicar no ícone de hambúrguer */
    nav.active ul {
        display: flex;
        flex-direction: column;
        gap: 0; /* Remove o espaçamento entre os itens */
    }

	/* Estilos para o submenu */
	.submenu {
		list-style: none;
		padding: 0;		
		margin: 0; /* Remova qualquer margem adicional */
		display: none; /* Inicialmente oculto */
		position: absolute;
		top: 100%; /* Abre o submenu logo abaixo do item do menu */
		left: 0; /* Alinha à esquerda do item pai */
		background-color: #fff;
		max-width: 100%; /* Garante que o submenu não ultrapasse a largura da tela */
		min-width: 220px; /* Largura mínima para o submenu */
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1), -2px 2px 5px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombras nas laterais e na parte inferior */
	}


    .submenu-list {
        position: static; /* Submenus são alinhados naturalmente */
		margin-left: 20px;
    }
	
.menu li:hover > .submenu {
    right: 0;
    left: auto;
}

	
.submenu li {
  width: 100%; /* Largura dos itens do submenu */
}

.submenu a {
  padding: 5px 40px;
}


    .whatsapp-button {
        padding: 10px; /* Reduz o padding do botão */
    }

    .whatsapp-icon {
        width: 40px; /* Tamanho do ícone reduzido */
        height: 40px; /* Tamanho do ícone reduzido */
    }
}