/* Estilo para o fundo da página inicial */
#home-banner {
    position: relative; /* Permite a sobreposição */
    background-color: #2c3e50; /* Escolha uma cor similar ao tom dominante da imagem */
    background-image: url('../images/slide-04.webp'); /* Caminho correto da imagem */
    background-size: cover;
    background-position: center;
    height: 100vh; /* A altura da imagem será 100% da altura da tela */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff; /* Cor do texto */
    padding: 0 20px;
}

#home-banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Escurece a imagem */
}


/* Estilo para o conteúdo dentro do banner */
.banner-content {
    position: relative; /* Garante que o conteúdo fique acima da sobreposição */
    width: 100%; /* Define a largura do conteúdo (entre a esquerda e o meio) */
    max-width: 800px; /* Define a largura máxima */
    padding: 20px;
    border-radius: 10px;
    text-align: left; /* Alinha o texto à esquerda */
    height: 100vh; /* Ajusta a altura para o conteúdo */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Alinha os itens verticalmente no centro */
    align-items: flex-start; /* Alinha os itens horizontalmente à esquerda */
    margin-left: -25%; /* Espaço à esquerda para telas maiores */
    opacity: 0;
    transition: opacity 1s ease-in-out;
	}

/* Estado final (após animação) */
.banner-content.animate {
	opacity: 1;
	transform: translateY(0); /* Volta à posição original */
}

/* Estilo para os títulos */
.banner-content h2 {
    font-size: 1.4rem; /* Reduz o tamanho da fonte */
    margin-bottom: 15px; /* Menor espaço abaixo */
    font-weight: bold;
}

.banner-content h3 {
    font-size: 1.2rem; /* Reduz o tamanho da fonte */
    margin-bottom: 15px; /* Menor espaço abaixo */
    font-weight: normal;
}



/* Estilo para o botão */
.banner-content .btn {
    background-color: #333; /* Cor do botão */
    color: #fff;
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
    margin-left: 20px; /* Ajuste a margem para mover o botão para a esquerda */
	font-weight: bold;
}

.banner-content .btn:hover {
    background-color: #fff; /* Cor do botão ao passar o mouse */
	color: #333;
	font-weight: bold;
}

/* Título "Sobre Nós" */
.titulo-sobre {
    font-size: 2.0rem;  /* Aumenta o tamanho do título para dar mais destaque */
    font-weight: bold;  /* Deixa o título mais forte */
    text-align: center; /* Centraliza o título */
    margin-bottom: 30px; /* Espaço abaixo do título */
}

/* Estrutura para Visão e Missão */
.informacao-visao-missao p {
    font-size: 1.2rem;  /* Tamanho do texto */
    line-height: 1.6;   /* Espaçamento entre linhas */
    margin-bottom: 20px; /* Espaçamento entre os parágrafos */
}

/* Ajuste de espaçamento entre o subtítulo e a lista */
.informacao-visao-missao p strong {
    margin-bottom: 0;  /* Reduz o espaço abaixo do subtítulo "Nossos Valores:" */
}

/* Lista de valores */
.valores-lista {
    list-style-type: disc; /* Marcadores como círculos */
    padding-left: 40px;   /* Espaçamento para a margem da lista */
    font-size: 1.1rem;    /* Tamanho do texto */
    line-height: 1.6;     /* Espaçamento entre as linhas */
    margin-top: 0;        /* Remove o espaço extra acima da lista */
    margin-bottom: 0px;  /* Espaço abaixo da lista */
	text-align: justify;     /* Justifica o texto */
}

.valores-lista li {
	font-size: 1.1rem;    /* Aumenta o tamanho da fonte dos itens da lista */
    margin-bottom: 15px;  /* Espaço entre os itens da lista */
}

.valores-lista li strong {
    font-weight: bold;      /* Título em negrito */
}

.container {
    margin: auto;
	margin-left: 0;
    width: 100%;
    max-width: 1200px;
	flex-grow: 1;
	}


/* Padrão para todos os contêineres de página */
.page-container {
    width: 100%;
    max-width: 1200px;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinha o conteúdo no topo */
    box-sizing: border-box;
    margin: 0 auto;    /* Centraliza o contêiner horizontalmente */
    padding: 20px;     /* Espaçamento interno */
    margin-top: 0 auto;  /* Ajuste a margem superior conforme necessário para empurrar o conteúdo para baixo */
    margin-bottom: 0; /* Espaço abaixo do contêiner */
    flex-grow: 1;      /* Permite que o contêiner cresça para ocupar o espaço disponível */

    /* Adicionando a borda */
    /*border: 1px solid #ccc; /* Borda fina e de cor neutra */

    /* Adicionando uma sombra */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra leve para profundidade */
}


/* Ajuste de título */
.page-container h1 {
    font-size: 1.0rem;  /* Reduzido de 1.25rem */
}

.page-container h2 {
    font-size: 1.5rem;  /* Aumenta o tamanho do subtítulo */
    margin-top: 0px;   /* Espaço acima dos subtítulos */
    margin-bottom: 10px; /* Espaço abaixo dos subtítulos */
}

.page-container h3 {
    font-size: 0.7rem;  /* Reduzido de 1rem */
}

/* Parágrafo */
.page-container p {
    font-size: 1.2rem;   /* Aumenta o tamanho da fonte do parágrafo */
    line-height: 1.8;     /* Aumenta o espaçamento entre as linhas */
    text-align: justify;     /* Justifica o texto */
    margin-bottom: 20px;     /* Ajuste o espaçamento inferior */
}

.page-container p strong {
    font-weight: 700;        /* Aplica o negrito na parte "Nossa Visão:" */
}





/* Estilos para a seção de serviços */
#servicos {
    padding: 0 20px;
    text-align: center;
}

#servicos h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

#servicos h3 {
    font-size: 1.5em;
    margin-bottom: 20px;
	text-align: center;
}

#servicos p {
    font-size: 1.2em;
    margin-bottom: 40px;
    color: #666;
}

.servicos-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 auto;
    max-width: 1200px;
}

.servico-box {
	text-align: justify;
    background: transparent;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.servico-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.servico-box h3 {
    font-size: 1.8em;
    margin-bottom: 10px;
    color: #333;
}

.servico-box p {
    font-size: 1em;
    color: #555;
}

/* Div para a linha divisória */
.page-divider {
    width: 100%;
    height: 1px;
    background-color: #ddd; /* Tom mais claro de cinza */
    margin: 50px auto;
    opacity: 0.7; /* Torna a linha mais clara visualmente */
}

/* Estilos para a seção de serviços */
#vantagens {
    padding: 0 20px;
    text-align: center;
}

#vantagens h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

#vantagens h3 {
    font-size: 1.5em;
    margin-bottom: 20px;
	text-align: center;
}

#vantagens p {
    font-size: 1.2em;
    margin-bottom: 40px;
    color: #666;
}

.vantagens-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 auto;
    max-width: 1200px;
}

.vantagem-box {
	text-align: justify;
    background: transparent;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vantagem-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.vantagem-box h3 {
    font-size: 1.8em;
    margin-bottom: 10px;
    color: #333;
}

.vantagem-box p {
    font-size: 1em;
    color: #555;
}

/* Estilos gerais da seção */
#parceiros {
    padding: 0;
	margin-top: 0;
}

/* Cabeçalho da seção */
.section-header {
    text-align: center;
    margin-bottom: 30px;
}

.section-header h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 10px;
}

.section-header p {
    font-size: 1.1rem;
    color: #666;
}

/* Estilo das colunas */
.row {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}


.col {
    flex: 1;
    text-align: center;
    padding: 20px;
    border-radius: 0;
	border: 1px solid #ddd;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.col:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}


.col h3 {
    font-size: 1.5rem;
    color: #333;
    margin: 20px 0;
}

.col p {
    font-size: 1rem;
    color: #555;
}

/* Ícones */
.icon-wrapper {
    font-size: 40px;
    color: #2c3e50;
    margin-bottom: 15px;
}

.icon-wrapper img {
    width: 50px;  /* Ajuste o valor conforme necessário */
    height: 50px; /* Ajuste o valor conforme necessário */
}

/* Estilo de ícones específicos */
.xlwpf {
    font-size: 50px;
}

.xlio {
    font-size: 50px;
}



























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

#contato {
    padding: 0;
	margin-top: 50px;
	margin-bottom: 0;
}

#contato h1 {
    text-align: center;
    font-size: 2.0rem;
    margin-bottom: 10px;
}

#contato h2 {
    text-align: center;
    font-size: 1.0rem;
    margin-bottom: 30px;
	font-weight: normal;	
}


#contato h3 {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 30px;	
}

#contato p {
    text-align: left;
    font-size: 1.0rem;
    margin-bottom: 30px;
}

.contact-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.contact-info {
    flex: 1;
    max-width: 40%;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

.contact-info h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    text-align: center;
}

.contact-info p {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #666;
}

.form-container {
    flex: 1;
    max-width: 60%;
    margin: 0 auto; /* Centraliza horizontalmente */
    padding: 15px 40px 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
}

form input, form textarea {
    width: 100%; /* Faz os campos ficarem centralizados */
    margin: 0 auto; /* Espaçamento vertical */
    display: block; /* Garante que cada campo fique em uma linha */
	margin: 0 auto;
}

.form-container form {
    display: flex;
    flex-direction: column;
}

input, textarea, select {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
	margin: 0 auto;
	box-sizing: border-box;
}

label {
    display: block;
	margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
}


button {   
	padding: 10px 20px; /* Ajuste no espaçamento interno */
    display: inline-block;
    background: #333;
    border: none;
	border-radius: 5px;
    color: white;
    border: none;
    font-size: 1rem;
	font-weight: bold;
    cursor: pointer;
	text-align: center;
    transition: background-color 0.3s, transform 0.2s;
    margin-top: 20px; /* Adicione esta linha para a distância */
	
}

button:hover {
    background: #444;
    transform: scale(1.001); /* Adiciona leve aumento no hover */
}

.button-container {
    text-align: center;
    margin-top: 40px; /* Aumente a margem superior */
	
}
.resultado {
    margin-top: 20px;
    font-size: 18px;
    padding: 15px;
    border-radius: 4px;
}
.form-group {
    margin-bottom: 20px;
}


form {
    width: auto;
    margin: 0 auto;
    max-width: 100%; /* Ajuste conforme necessário */
}

/* Estilo para o mapa no rodapé */
.footer-map {
    width: 100%;
    height: 40vh;
    margin: 20px auto;
	overflow: hidden;
    padding: 0; /* Remove qualquer padding */
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.footer-map iframe {
    border: none; /* Remove a borda do iframe */
    border-radius: 0; /* Remove qualquer borda arredondada */
}



#calculo {
    padding: 0;
    text-align: left;
    margin: auto;
    width: 100%;
    max-width: 1200px;
	flex-grow: 1;
}

#calculo h1 {
    text-align: center;
    font-size: 2.0rem;
    margin-bottom: 10px;
}

#calculo h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

#calculo h3 {
    font-size: 1.5em;
    margin-bottom: 20px;
	text-align: center;
}

#calculo h4 {
    text-align: left;
    font-size: 1.4rem;
    margin-bottom: 10px;	
}

#calculo p {
    font-size: 1.2em;
    margin-bottom: 40px;
    color: #666;
}

#documentos {
    padding: 0 20px;
    text-align: left;
}

#documentos h1 {
    text-align: center;
    font-size: 2.0rem;
    margin-bottom: 10px;
}

#documentos h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

#documentos h3 {
    font-size: 1.5em;
    margin-bottom: 20px;
	text-align: center;
}

#documentos p {
    font-size: 1.2em;
    margin-bottom: 40px;
    color: #666;
}

#resultado {
    padding: 0 20px;
    text-align: left;
	font-size: 1.2em; /* Aumenta o tamanho da fonte */
}






.notification {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f0ad4e;
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
  display: none; /* Inicialmente escondido */
  animation: fadeIn 1s forwards; /* Animação para aparecer */
}

.notification.success {
  background-color: #4CAF50;
}

.notification.error {
  background-color: #f44336;
}

.notification button {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  margin-left: 10px;
  cursor: pointer;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estiliza o ícone e a dica de ferramenta */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 280px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 20px;
    left: 0;
    margin-left: -137px;
    opacity: 0;
    transition: opacity 0.3s;
    text-transform: none !important;
    font-size: 16px;
    font-family: Arial, sans-serif;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}




























/* Ajuste para telas pequenas */
@media (max-width: 768px) {
    .page-container {
        max-width: 95%;       /* Aumenta o espaço para o contêiner em telas menores */
        padding: 20px 0 10px 0;    /* Reduz o padding para ajustar o conteúdo */
        margin-top: auto; /* Ajuste da margem superior para telas pequenas */
        margin-bottom: 0px; /* Ajuste da margem inferior */
    }
	
.container {
    margin: auto;
    max-width: 100%;
	flex-grow: 1;
	}


    .valores-lista {
        padding-left: 15px; /* Menor margem em telas pequenas */
    }
	
    .banner-content {
        width: 100%; /* Faz com que o conteúdo ocupe toda a largura da tela em dispositivos menores */
        margin-left: 0; /* Remove o espaço à esquerda em dispositivos menores */
        text-align: center; /* Centraliza o texto em telas menores */
        align-items: center; /* Centraliza os itens horizontalmente */
    }
	.banner-content h2 {
    font-size: 1.2rem;
	}

	.banner-content h3 {
		font-size: 1.0rem;
	}

.page-container p {
    font-size: 1.2rem;   /* Aumenta o tamanho da fonte do parágrafo */
    line-height: 1.8;     /* Aumenta o espaçamento entre as linhas */
    text-align: center;     /* Justifica o texto */
    margin-bottom: 20px;     /* Ajuste o espaçamento inferior */
}

    .servicos-container {
        grid-template-columns: 1fr; /* Deixa as colunas empilhadas */
    }

    .servico-box, .vantagem-box {
        padding: 10px; /* Ajusta o padding para telas menores */
    }

    #sobre-nos, #vantagens, #parceiros {
        padding: 20px; /* Ajuste do padding para dispositivos móveis */
    }

    .section-header h2 {
        font-size: 1.5rem; /* Reduz o tamanho do título */
    }

    .row {
        flex-direction: column; /* Deixa os itens em coluna */
        gap: 20px;
    }

    .col {
        flex: none;
        width: 100%; /* As colunas ocupam 100% da largura */
    }
	
    .servicos-container {
        grid-template-columns: 1fr; /* Coloca os itens em uma coluna */
		text-align: center;
    }

    .vantagens-container {
        grid-template-columns: 1fr; /* Coloca os itens em uma coluna */
    }
	
    #parceiros .row {
        display: flex;
        flex-direction: column; /* Empilha os itens em telas pequenas */
        align-items: center; /* Centraliza os itens */
    }

    #parceiros .col {
        width: 100%; /* Garante que os itens ocupem toda a largura */
        margin-bottom: 20px; /* Adiciona um espaço entre os itens */
    }

    .icon-wrapper img {
        width: 40px; /* Ajuste o tamanho do ícone para telas pequenas */
        height: 40px;
    }

/* Ajusta a disposição dos componentes de contato */
    .form-container {
        max-width: 100%; /* Garante que o formulário ocupe 100% da largura */
        padding: 10px 20px; /* Ajuste o padding do formulário */
    }

    .contact-content {
        display: block; /* Faz as colunas ficarem em bloco e não lado a lado */
    }

    .contact-info, .form-container {
        flex: none; /* Remove a flexibilidade */
        max-width: 100%; /* Garantir que ocupe toda a largura disponível */
        margin-bottom: 20px; /* Adiciona um espaçamento entre as seções */
    }

    .form-container form {
        gap: 10px; /* Menor espaçamento entre os campos */
    }

    .form-container input, .form-container textarea, .form-container button {
        font-size: 1rem; /* Ajuste do tamanho da fonte */
        padding: 8px; /* Ajuste do padding */
    }

    /* Ajuste o mapa do Google para telas menores */
    .footer-map {
        height: 30vh; /* Diminui a altura do mapa */
    }
	
    .notification {
	  position: flex;
	  top: 50%;
	  left: 5%;
	  right: 5%;
	  z-index: 9999;
    }	
	
#calculo {
    padding: 0;
    margin: auto;
	max-width: 100%;
	flex-grow: 1;
}


#calculo h1 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

#calculo h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

#calculo h3 {
    font-size: 1.5em;
    margin-bottom: 20px;
	text-align: center;
}

#calculo p {
    font-size: 1.2em;
    margin-bottom: 40px;
    color: #666;
}
}