/*@import 'reset.css';*/
@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

body{
	font-family: "Roboto", sans-serif;
	max-width: 1024px;
	margin: 0 auto;
	background: #ddd;
	color: #10ab63;
}

body > header{
    padding: 1em 3em;
}

nav{
	z-index: 999;
	float: right;
	padding: 2em;
}

nav a{
	font-family: 'Roboto Condensed', sans-serif;
	text-decoration: none;
	color: #10ab63;
	padding: 1em 0 1em 2em;
}

nav a:hover{
	color: #008275;
}

#mostraMenu{
	display: none;
}

main section{
    padding: 3em;    
}

main section, footer{
	padding: 40px;
}

section header{
	max-width: 50%;
}

header aside{
	display: none;
	top: 1em;
	position: fixed;
    right: 6.5em;
}

header aside img{
	max-width: 4em;
}

section header, h1{
	font-family: "PT Sans Narrow", sans-serif;
    margin: 0;
    color: #10ab63;
    font-size: xx-large;
}

h1, h2{
	font-weight: normal;
}

h2{
    margin: 1.5em 0 1em 0;
}

ul li{
    margin-left: -1em;
}

section p, ul li, .diferencial-texto{
    font-family: "Roboto", sans-serif;
    font-size: large;
    color: #008275;
    line-height: 150%;
}

section#conteudo{
	background: #EEE;
}

section#conteudoEventos, section#conteudoPublicacoes, #topo{
	background: #FFF;
}

#blocoEventos{
	padding: 0;
    display: inline-flex;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
}

article.eventos{
    display: flex;
    max-width: 10em;
    min-width: 17.5em;
    margin: 2em 1em 0 0;
    border: solid 1px #ccc;
    padding: .5em;
    border-radius: .5em;
    flex-direction: column;
    justify-content: space-between;
}

article.eventos img{
	max-width: 18.5em;
    max-height: 10em;
	border-radius: .5em;
	margin: 0 0 .5em 0;
}

article .titulo{
	font-size: large;
	font-weight: bold;
}

article.localizacao{
	border: solid 1px #10ab63;
    padding: 1em;
    font-size: small;
    border-radius: .5em;
    background: #00968812;
}

article.localizacao p{
    font-size: small;
}

body footer{
	color: #CCC;
	background: #464646;
	font-size: small;
}

footer section:nth-child(2){
    display: inline-flex;
    padding: 2em 0 0 0;
}

footer section:nth-child(2) article{
	width: 33%;
	padding: 0 2em 0 0;
}

footer a{
	color: #CCC;
	text-decoration: none;
}

footer .iconSocial{
	display: inline-table;
	height: 1.7em;
	width: 1.7em;
	margin: 0 .1em;
	padding: .6em;
	border-radius: 20%;
}

footer .iconSocial img{
	position: absolute;
	max-height: 2em;
	max-width: 2em;	
}

input, textarea, button, select{
	border: solid 1px #CCC;
    padding: .5em 0 .5em 1em;
    margin: 10px 0;
    max-width: 100%;
    border-radius: .2em;
    font-family: 'Carrois Gothic', sans-serif;
    font-size: larger;
    color: #10ab63;
    outline: none;
}

input{
	min-width: 222px;
}

textarea{
	padding: .5em 1em;
	min-width: 204px;
	height: 4em;
}

input:hover, textarea:hover{
	border: solid 1px #afafaf;
}

button{
	color: #FFF;
	padding: .5em 1em;
	border: none;
    cursor: pointer;
    background: #396460;
}

button:hover{
	background: #008275;
}

button:disabled{
	background: #9e9e9e;
}

#topo #logo{
	max-height: 4em;
}

#conteudoHome{
	width: 100%;
	padding: 0;
	background: #000 url("../imagens/hero.jpeg");
	background-position: 0px 780px;
	display: inline-flex;
	align-items: flex-end;
	overflow: hidden; /* Esconde a parte da imagem que sobra */
}

#conteudoHomeTexto{
	padding: 40px;
	max-width: 50%;
	
}

#conteudoHomeTexto header, #conteudoHomeTexto p{
	color: #396460;
}

#conteudoHomeImagem{
/*	max-width: 30%;*/
    text-align: right;
}

#contrudoHome > article{
    float: left;
}

#conteudoHome img{ 
	max-width: 100%;
    max-height: 100%;
}

#parceiros .parceiro:first-child{
	margin: 0;
}

#atendimento{
	background: #f5f5f5;
}

#diferencial{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.diferencial-bloco{
	display: inline-flex;
	background: #f5f5f5;
	padding: .5em;
	max-width: 29%;
	margin: 0 1em 1em 0;
	border-radius: 1em;
}

.diferencial-imagem{
	max-width: 4em;
/*    max-height: 4em;*/
    border-right: 2px solid #FFF;
    padding: 0 .5em 0 0;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;    /* Centraliza verticalmente */
    overflow: hidden;       /* Esconde o que sai da div */
    object-position: center;
}

.diferencial-imagem img{
	max-width: 160%;
    max-height: 160%;
}

.diferencial-texto{
	display: flex;
	justify-content: center; /* Centraliza horizontalmente */
	align-items: center;     /* Centraliza verticalmente */
	padding: 0 1em;
}

#termometro{
	display: inline-flex;
}

.nivel{
	display: inline-grid;
	text-align: center;
	color: #FFF;
	padding: 1em;
	min-width: 3.2em;
	min-height: 2.6em;
	cursor: pointer;
}

.nivel:nth-child(1){
	background: #5ab33b;
	border-radius: 1em 0em 0em 1em;
}

.nivel:nth-child(2){
	background: #78c841;
}

.nivel:nth-child(3){
	background: #96dc46;
}

.nivel:nth-child(4){
	background: #c8d23d;
}

.nivel:nth-child(5){
	background: #fac833;
}

.nivel:nth-child(6){
	background: #f9bc2e;
}

.nivel:nth-child(7){
	background: #fbb12a;
}

.nivel:nth-child(8){
	background: #f07d17;
}

.nivel:nth-child(9){
	background: #f0640f;
}

.nivel:nth-child(10){
	background: #e1451b;
}

.nivel:nth-child(11){
	background: #dc2829;
	border-radius: 0em 1em 1em 0em;
}

.nivel article{
	font-size: xx-small;
}

#mensagemTermometro{
	display: none;
	position: relative;
	background: #5ab33b;
	color: #FFF;
	border-radius: 1em;
	padding: 1em;
	margin: 1em 0 0 0;
}

#mensagemTermometroSeta {
	display: none;
	content: '';
	position: absolute;
	top: -9px;
	left: 35px;
	border-width: 10px 10px 0 10px;
	border-style: solid;
	border-color: #5ab33b transparent transparent transparent;
	transform: scaleY(-1);
}

#mensagemTermometro header{
	color: #FFF;
	margin: 0 0 0.5em 0;
}

#infoRolagem{
	display: none;
	font-size: smaller;
}


/* CSS do Box de depoimento - início */
.depoimento-box {
				display: none;
				background: #fff;
				padding: 20px;
				border-radius: 0.5em;
				box-shadow: 0 2px 8px rgba(0,0,0,0.1);
				margin: 40px 0;
			}

		  .depoimento-box form textarea,
		  .depoimento-box form select,
		  .depoimento-box form input {
		    width: 100%;
		    padding: 10px;
		    margin: 8px 0;
		    border-radius: 6px;
		    border: 1px solid #ccc;
		    font-size: 1em;
		  }

		  .depoimento-box form button:hover {
		    background: #005fa3;
		  }

		  .depoimentos-lista .depoimento {
			font-size: smaller;
		  	max-width: 28%;
		    background: #fff;
		    padding: 15px 20px;
			border-radius: 0.5em;
		    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
		  }

			.depoimentos-lista{
				display: inline-flex;
    			justify-content: space-between;
    			margin-bottom: 1em;
			}

		.depoimentos-lista .depoimento p{
			font-size: small;
		}

		  .depoimentos-lista .depoimento small {
		  	font-size: x-small;
		    display: block;
		    margin-top: 8px;
		    color: #666;
		    font-size: 0.9em;
		  }

/* CSS do box de depoimento - FIM */

/* Estilos para visualização em telas pequenas */
/* max-width  */
@media screen and (max-width: 960px) {
	#topo nav{
		position: absolute;
		display: none;
		float: right;
        background: #008275;
        border-radius: 1em;
        right: 3em;
	}

	#topo nav a{
		display: list-item;
		color: #FFF;
		margin: 0 0 0 -2em;
		list-style-type: none;
	}

	#mostraMenu, #ocultaMenu{
		float: right;
		display: block;
		padding: .5em;
		border-radius: 1em;
	}

	article.eventos{
		width: 100%;
	}

	section header{
	    max-width: 100%;
	}

	header aside{
		display: block;
	}

	footer section:nth-child(2){
	    display: inline-block;
	    padding: 2em 0 0 0;
	}

	footer section:nth-child(2) article{
		width: 90%;
		padding: 0 2em 2em 0;
	}

	.depoimentos-lista{
		display: flex;
		justify-content: space-between;
		margin-bottom: 1em;
		flex-wrap: wrap;
	}

	.depoimentos-lista .depoimento {
		max-width: 100%;
		margin-bottom: 1.5em;
	}

	.diferencial-bloco {
		max-width: none;
	}

	.nivel{
		padding: 0.5em;
		margin: 0 0 .5em 0;
		min-width: 4.2em;
        min-height: 1em;
        border-radius: .5em;
	}

	.nivel:nth-child(1){
		border-radius: .5em;
	}

	.nivel:nth-child(11){
		border-radius: .5em;
	}

	#termometro {
		overflow-y: auto; /* Adiciona rolagem vertical automaticamente */
        max-width: 100%;
	}

	#mensagemTermometroSeta {
		opacity: 0;
	}

	#infoRolagem{
		display: block;
	}

}