/*********************************************************/
/*	STYLE CSS										 	 */
/*	DESENVOLVIDO POR: GLOBALWS							 */
/*	CEO: MICHAEL PICOLO									 */
/*********************************************************/
html, body {width:100%; height:100%; font-family: "Montserrat", serif;}
/*********************************************************/
:root {
	--azul: #1351b4;
	--azul-claro: #2c6acc;
	--azul-escuro: #032c6c;
	--azul-2: #6F828D;
	--cinza: #f8f8f8;
}

.esquerda {width: 47%; float: left;}
.direita {width: 47%; float: right;}

.aparecer {display: none !important;}

.bgcover {background-repeat: no-repeat; background-size: cover; background-position: center center;}
.bg100  {background-repeat: no-repeat; background-size: 100%; background-position: center center;}

.bg-azul {background-color: var(--azul);}
.bg-azul-claro {background-color: var(--azul-claro);}
/*********************************************************/
/*	TOPO & RODAPE										 */
/*********************************************************/
header {width: 100%; display: table;}
header .inicio {width: 100%; padding: 5px 0; background-color: var(--azul); display: table;}
header .social {float: right;} 
header .social li {color: #fff; font-size: 1.2em; float: left; padding-left: 20px;}
header .social li:hover {color: yellow;}

header .topo {width: 100%; display: table; padding: 10px 0;}
header .logo {width: 20%; height: 100px; float: left;}
header .menu {float: right; padding-top: 40px;}
/*********************************************************/
footer {width: 100%; display: table; padding-top: 20px; background-color: var(--azul);}
footer h2 {color: #fff; font-size: 1em; padding-bottom: 20px;}
footer li {color: #fff; font-size: 0.9em; padding-bottom: 5px;}
footer a {color: #fff;}
footer a:hover {color: yellow;}
footer .logo {width: 20%; float: left; height: 100px; margin-right: 5%;}

footer .quadro {width:30%; float: left; padding-right: 30px;}
footer .quadro-2 {width:15%; float: right; text-align: center;}
footer .social {width: 100%; padding-top: 40px;}
footer .social li {display: inline-block; font-size: 1.2em; padding: 0 10px;}
footer .social li:hover {color: yellow;} 
/*********************************************************/
.fim {width: 100%; display: table; padding: 20px 0; text-align: center; background-color: var(--azul-escuro);}
.fim p {font-size: 0.8em; color: #fff;}
/*********************************************************/
.chamadas {width: 100%; position: relative; display: table; z-index: 99999;}
.chamadas h2 {color: #fff; font-size: 0.8em; font-weight: 500; text-transform: uppercase;}

.chamadas .quadro {width: 33.33%; float: left; height: 180px;  z-index: 9999; margin-top: -170px;}
.chamadas .icon {width: 100px; height: 100px; background-position: center center; background-size: 65%; background-color: var(--azul-escuro); border-radius: 50%; margin: 0 auto -40px auto; position: relative; z-index: 1;}
.chamadas .texto {width: 100%; text-align: center; padding: 50px 22% 10px 22%; min-height: 110px;  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;}
.chamadas .texto:hover {background-color: var(--azul-escuro);}
/*********************************************************/
.ic1 {background-image: url(../images/ic1.png);}
.ic2 {background-image: url(../images/ic2.png);}
.ic3 {background-image: url(../images/ic3.png);}
/*********************************************************/
.tela-1 {width: 100%; display: flex; text-align: center; padding: 40px 0;}
.tela-1 h1 {color: var(--azul); text-transform: uppercase; font-size: 1.4em; padding-bottom: 30px;}
.tela-1 h2 {text-transform: uppercase; color: var(--azul-claro); font-size: 1.8em; font-weight: 800; padding-bottom: 40px;}
.tela-1 a {color: var(--azul-claro);}
.tela-1 a:hover {color: var(--azul-escuro); text-decoration: none !important;}
.tela-1 p {color: var(--azul-claro); font-weight: 600; line-height: 30px;}

.tela-1 .quadro {width: 90%; margin: 10px auto; border-radius: 10px; padding: 40px; background-color: var(--cinza); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); min-height: 420px;}
.tela-1 .icon {width: 100px; height: 100px; margin: 0 auto 20px auto;}
/*********************************************************/
.tela-2 {width: 100%; display: table; padding: 60px 0; background-attachment: fixed;}
.tela-2 h1 {width: 100%; padding: 10px 20px; color: #fff; background-color: var(--azul); text-transform: uppercase; font-weight: 700; font-size: 1.2em; margin-bottom: 5px;}
.tela-2 p {width: 100%; padding: 10px 20px; color: #fff; background-color: rgba(19, 81, 180, 0.8); font-size: 1.2em; line-height: 30px;}
.tela-2 .bt {width: 100%; padding: 10px 20px; color: #fff; background-color: var(--azul); text-transform: uppercase; font-weight: 700; font-size: 1.2em; margin-top: 5px; display: block; transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;}
.tela-2 .bt:hover {background-color: var(--azul-escuro)}
/*********************************************************/
.tela-3 {width: 100%; display: table;}
.tela-3 h1 {width: 100%; padding: 20px 0; color: #fff; text-transform: uppercase; font-weight: 700; font-size: 2em; background-color: var(--azul); text-align: center;}
.tela-3 .adv {width: 100%; min-height: 750px; background-position: center center;}
/*********************************************************/
.navegacao {width: 100%; display: table; padding: 20px 0; background-color: var(--cinza); border-bottom: 1px solid #dfdfdf;}
.navegacao li {float: left; padding-right: 10px; color: #000; font-size: 0.8em; font-weight: 500;}
.navegacao i {color: var(--azul);}
.navegacao a:hover {color: var(--azul);}
/*********************************************************/
.tela-4 {width: 100%; display: table; padding: 60px 0;}
.tela-4 h1 {color: var(--azul); text-transform: uppercase; font-weight: 800; padding-bottom: 40px; font-size: 2em;}
.tela-4 p {line-height: 30px;}
/*********************************************************/
.blog {width: 100%; display: table; padding: 60px 0; background-color: var(--cinza);}
.blog h2 {font-size: 1.2em; color: var(--azul); padding-bottom: 10px;}
.blog h2:hover {color: var(--azul-escuro);}
.blog p {line-height: 25px; font-size: 0.9em; font-weight: 400;}

.blog .quadro {width: 30%; float: left; margin: 0 1.5% 40px 1.5%; background-color: #fff; min-height: 480px; position: relative; border-radius: 10px; overflow: hidden;}
.blog .imagem {width: 100%; height: 280px; background-position: center center; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;}
.blog .imagem:hover { transform: scale(1.1); filter: brightness(0.8); }
.blog .texto {width: 100%; padding: 20px;}
.blog .link {position: absolute; right: 20px; bottom: 10px; color: var(--azul); font-size: 0.9em;}
.blog .link:hover {color: var(--azul-escuro);}

.post {width: 100%; display: table; padding: 60px 0;}
.post h1 {color: var(--azul); font-weight: 700; font-size: 2em; padding-bottom: 40px;}
.post p {font-weight: 400; line-height: 30px;}
.post .capa {width: 50%; margin: 0 auto 40px auto;}
/*********************************************************/
.accordion {width: 100%; }
.accordion-item {margin-bottom: 30px; } 
.accordion-item:last-child { border-bottom: none;}
.accordion-header { width: 100%; padding: 20px; font-weight: 400; text-transform: uppercase; background: var(--cinza); color: var(--azul); border: none; text-align: left; outline: none; cursor: pointer; font-size: 0.9em !important; transition: background-color 0.3s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border-radius: 10px;}
.accordion-header:hover { background-color: var(--azul); color: #fff;}
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: var(--cinza); padding: 0 20px; margin-bottom: 20px;}
.accordion-content .quadro {padding: 20px;}
.accordion-item.active .accordion-content { max-height: 200px;}

.accordion .txt {padding: 20px 0;}
.accordion .txt p {font-size: 1em; line-height: 30px; font-weight: 400; text-align: left;}
/*********************************************************/
.faq {width: 100%; display: table; padding: 60px 0;}
.faq h1 {color: var(--azul); font-weight: 700; font-size: 2em; padding-bottom: 40px; text-align: center;}
/*********************************************************/
.contato {width: 100%; display: table; padding: 60px 0; background-image: url(../galeria/bg4.jpg); background-position: bottom;}
.contato h1 {color: var(--azul); font-weight: 700; font-size: 2em; padding-bottom: 10px; text-align: center;}
.contato h2 {background-color: var(--azul); font-weight: 700; text-transform: uppercase; width: 100%; text-align: center; padding: 20px 0; color: #fff;}
.contato ul {min-height: 200px;}
.contato li {font-size: 1em; font-weight: 500; padding-bottom: 10px; line-height: 25px; display: flex;}
.contato i {color:var(--azul-claro); padding-right: 10px;}
.contato .mapa {width: 100%; padding: 10px; background-color: #fff; border-radius: 10px;}
.contato iframe {width: 100%; height: 260px; border-radius: 10px;}
.contato .fala {width: 60%; margin: auto; text-align: center;}
.contato .esquerda, .direita {background-color: rgba(255, 255, 255, 0.8); border-radius: 10px; overflow: hidden;}
.contato .texto {width: 100%; padding: 40px;}
/*********************************************************/
.detalhes {width: 100%; display: table; padding: 80px 0; }
.detalhes h1 {color: var(--azul); font-weight: 700; font-size: 2em; }
.detalhes p {font-size: 1em; line-height: 30px; font-weight: 400; }
.detalhes .lateral {width: 30%; float: left; text-align: center;}
.detalhes .txt {width: 65%; float: right;}
.detalhes .icon {width: 100px; height: 100px; margin: 0 auto 20px auto;}
/*********************************************************/
.equipe {width: 100%; display: table; padding-bottom: 40px; background-color: var(--cinza); text-align: center; }
.equipe h1 {width: 100%; padding: 20px 0; color: #fff; text-transform: uppercase; font-weight: 700; font-size: 2em; background-color: var(--azul); text-align: center;}
.equipe h2 {font-size: 1.1em; text-align: center;}
.equipe h3 {color: var(--azul); font-size: 0.9em; text-align: center; font-weight: 600; padding-bottom: 20px;}
.equipe p {font-size: 0.9em; line-height: 25px; font-weight: 400; text-align: left;}

.equipe .quadro {width: 31%; float: left; margin: 0 0.5% 40px 0.5%; min-height: 550px; position: relative; background-color: #fff;}
.equipe .imagem {width: 100%; aspect-ratio: 1/1; background-position: center center; max-height: 300px; position: relative; z-index: 0;}
.equipe .texto {width: 90%; margin: -60px auto 0 auto; z-index: 99; position: relative; background-color: rgba(255, 255, 255, 0.8); padding: 10px 15px;}
/*********************************************************/