/*********************************************************/
/*	STYLE CSS										 	 */
/*	DESENVOLVIDO POR: GLOBALWS							 */
/*	CEO: MICHAEL PICOLO									 */
/*********************************************************/
html, body {width:100%; height:100%; font-family: "Rubik", sans-serif; background-color: #000;}
/*********************************************************/
:root {
	--laranja: #EA4D2A;
	--cinza: #272727;
}

.esquerda {width: 47%; float: left;}
.direita {width: 47%; float: right;}
.centro {width: 60%; margin: auto;}

.aparecer {display: none !important;}

span {color: var(--laranja);}
p {line-height: 25px; font-weight: 400;}

.linha {width: 250px; height: 5px; background-color: var(--laranja); margin: 20px 0; display: inline-block;}

.botao {padding: 10px 20px; border-radius: 10px; background-color: var(--laranja); color: #fff; font-family: "Oswald", sans-serif; text-transform: uppercase; cursor: pointer; display: inline-block; transition: background-color 0.3s ease-in-out; position: relative; z-index: 99;}
.botao:hover {background-color: #fff; color: var(--laranja);}

.bgcover {background-repeat: no-repeat; background-size: cover; background-position: center center;}
.bg100  {background-repeat: no-repeat; background-size: 100%; background-position: center center;}
/*********************************************************/
header {width: 100%; display: table; position: absolute; z-index: 1; padding-top: 10px;}
header .logo {width: 312px; height: 116px; float: left;}
header .menu {float: left; margin-left: 15%; padding-top: 30px;}
header .social {float: right; padding-top: 35px;}
header .social li {color: #fff; font-size: 1.2em; float: left; padding-left: 15px;}
header .social li:hover {color: var(--laranja);}
/*********************************************************/
.home {width: 100%; display: table; position: relative;}
.home h1 {color: #fff; font-weight: 900; font-size: 2em; padding-bottom: 30px;}
.home p {color: #fff;}

.home .esquerda {padding-top: 25%;}
.home .direita {width: 35%; margin-top: 80px;}
/*********************************************************/
.sobre {width: 100%; display: table; padding-top: 40px; position: relative;}
.sobre h1 {color: var(--laranja); font-size: 2em; padding: 80px 0 20px 0; text-align: right; width: 70%; float: right;}
.sobre p {color: #fff;}
.sobre .imagem {width: 30%; height: 850px; float: left; margin-left: 15%;}
.sobre .imagem2 {width: 45%; height: 600px; margin: auto; display: none;}
.sobre .corte {width: 100%; height: 150px; position: absolute; left: 0; bottom: 0; background-image: url(../images/corte.png);}
/*********************************************************/
.solucoes {width: 100%; display: table; background-color: var(--cinza); padding: 20px 0 80px 0; background-image: url(../images/city.png); background-size: 100%; background-repeat: no-repeat; background-position: bottom center;}
.solucoes h1 {color: var(--laranja); font-size: 2em; }
.solucoes h2 {color: #fff; font-family: "Oswald", sans-serif; text-transform: uppercase; font-size: 1em; padding-bottom: 20px; height: 60px;}
.solucoes p {color: #fff;}

.solucoes .produtos {width: 100%; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5%; }
.solucoes .quadro {width: 31%; min-height: 220px; margin: 1%; background-color: #2D2D2D; padding: 20px; position: relative; border-radius: 10px; background-repeat: no-repeat; background-position: bottom right; transition: background-color 0.3s ease-in-out;}
.solucoes .quadro:hover {background-color: #3F3F3F;}
.solucoes .quadro p {font-size: 0.9em; line-height: 23px; font-weight: 300; text-align: left;}

.solucoes .bg1 {background-image: url(../images/ic1.png);}
.solucoes .bg2 {background-image: url(../images/ic2.png);}
.solucoes .bg3 {background-image: url(../images/ic3.png);}
.solucoes .bg4 {background-image: url(../images/ic4.png);}
.solucoes .bg5 {background-image: url(../images/ic5.png);}
/*********************************************************/
.alvo {width: 100%; display: table; padding-top: 60px; text-align: center; position: relative;}
.alvo h1 {color: var(--laranja); font-size: 2em;}
.alvo p {color: #fff; text-align: left;}
.alvo .corte {width: 100%; height: 100px; position: absolute; left: 0; bottom: 0; background-image: url(../images/corte2.png);}
.alvo .capa {width: 50%; margin: 30px auto 0 auto; display: none;}
/*********************************************************/
.funciona {width: 100%; display: table; background-color: var(--cinza); padding: 40px 0;}
.funciona h1 {color: var(--laranja); font-size: 2em;}
.funciona p {color: #fff; text-align: left;}
.funciona i {padding-right: 20px;}
/*********************************************************/
.accordion {width: 100%; }
.accordion-item {margin-bottom: 20px; } 
.accordion-item:last-child { border-bottom: none;}
.accordion-header { width: 100%; padding: 20px; font-weight: 500; background: #000; color: #fff; border: none; text-align: left; outline: none; cursor: pointer; font-size: 1em !important; transition: background-color 0.3s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); font-family: "Oswald", sans-serif;}
.accordion-header:hover { background-color: var(--laranja);}
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: white; 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; color: #000;}
/*********************************************************/
footer {width: 100%; display: table; text-align: center; padding-top: 20px;}
footer .logo {display: inline-block; width: 200px; height: 110px;}
footer .social li {color: #fff; font-size: 1.4em; padding: 0 20px; display: inline-block;}
/*********************************************************/
.fim {width: 100%; padding-bottom: 15px;}
.fim p {font-size: 0.8em; color: #fff; font-weight: 300;}
.fim a {color: #fff;}
.fim a:hover {color: var(--laranja);}
/*********************************************************/