/*********************************************************/
/*CSS MODE - MRPNET 2025
/*********************************************************/
/*CORES*/
:root {
  --cor_1: #006E7C;
  --cor_2: #333;
  --cor_3: #868387;
  --cor_4: #212121;
}

h1 {color: var(--cor_2); font-size: 2.4em;}
p {color: var(--cor_3); font-family: var(--font_t); line-height: 30px;}
/*********************************************************/
.botao-verde {padding: 10px 30px; color: #fff; background-color: var(--cor_1); border-radius: 10px; font-weight: 500; text-transform: uppercase; cursor: pointer; font-family: var(--font_s);}
.botao-verde:hover {background-color: var(--cor_2);}

.botao-verde-b {background-color: var(--cor_1); position: absolute; left: 20px; bottom: 10px; padding: 5px 20px; color: #fff; font-weight: 700; border-radius: 5px;}
.botao-verde-b:hover {background-color: var(--cor_3);}

.botao-verde-c {background-color: var(--cor_2); position: absolute; left: 20px; bottom: 10px; padding: 5px 20px; color: #fff; font-weight: 700; border-radius: 5px;}
.botao-verde-c:hover {background-color: var(--cor_4);}
/*********************************************************/
/*HEADER DO SITE*/
header {width: 100%; position: relative; padding: 10px 2%; z-index: 1000; display: flex; align-items: center; justify-content: space-between;}
header .logo {width: 220px; height: 60px;}
header .social li {display: inline-block; padding: 0 5px; font-size: 1.2em;}
header .social li:hover {color: var(--cor_2);}
/*********************************************************/
.home {width: 100%; display: table; position: relative; background-color: #FAFAFA; min-height: 750px;}
.home h1 {padding-bottom: 20px;}
.home h2 {font-size: 1.1em; font-weight: 300; text-transform: uppercase; color: var(--cor_1); letter-spacing: 2px; padding-bottom: 10px;}

.home .esquerda {width: 45%; padding: 150px 0 0 10%;}
.home .img-1 {position: absolute; right: 0; top: 0; width: 50%; height: 750px;}
.home .barra {position: absolute; right: 0; bottom: 0; height: 120px; z-index: 2; background-position: bottom center; width: 100%; background-image: url(../images/divisao.png);}
/*********************************************************/
.tela-1 {width: 100%; display: table; padding: 80px 0;}
.tela-1 h1 {padding-bottom: 20px;}
.tela-1 .direita {padding-top: 80px;}
/*********************************************************/
.tela-2 {width: 100%; display: table; padding: 80px 0; background-image: url(../images/bg1.jpg); background-position: center center; background-attachment: fixed; text-align: center;}
.tela-2 h2 {font-size: 1.1em; font-weight: 300; text-transform: uppercase; color: var(--cor_1); letter-spacing: 2px; padding-bottom: 10px;}
.tela-2 h1 {padding-bottom: 40px;}
.tela-2 h3 {color: var(--cor_1); text-transform: uppercase; padding: 20px 10px;}
.tela-2 p {font-size: 0.9em; line-height: 22px; color: #fff;}

.tela-2 .quadro {width: 30%; margin: 1.5%; background-color: #fff; min-height: 280px; position: relative; float: left;}
.tela-2 .texto {width: 100%; background-color: var(--cor_1); padding: 15px 20px; border-top-left-radius: 15px; border-bottom: 5px solid var(--cor_1); text-align: left; min-height: 220px; position: relative;}
/*********************************************************/
.tela-3 {width: 100%; display: table; padding: 60px 0; position: relative; background-image: url(../images/bg2.jpg); background-position: center center; text-align: center;}
.tela-3 h1 {color: var(--cor_1); text-align: center; padding-bottom: 40px;}
.tela-3 h2 {font-size: 1.4em; font-family: var(--font_s); color: #fff; text-align: center;}
.tela-3 p {font-size: 0.9em; line-height: 22px;}
.tela-3 .cont {display: flex; flex-wrap: wrap; gap: 40px 20px; justify-content: center; align-items: center;}
.tela-3 .quadro { padding: 50px 30px 0 30px; min-height: 320px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); border-radius: 5px; flex: 0 0 calc(25% - 20px); }
.tela-3 .quadro:hover {background-color: var(--cor_1);}
.tela-3 .bg1 {background-color: #40BED5;}
.tela-3 .bg2 {background-color: #64CCC5;}
.tela-3 .icon {width: 90%; background-position: center center; margin: 0 auto 20px auto;  height: 120px; }
.tela-3 h2 span {font-size: 1.6em !important; display: block; }

.tela-3 .ac1 {background-image: url(../images/ac1.png);}
.tela-3 .ac2 {background-image: url(../images/ac2.png);}
.tela-3 .ac3 {background-image: url(../images/ac3.png);}
.tela-3 .ac4 {background-image: url(../images/ac4.png);}
.tela-3 .ac5 {background-image: url(../images/ac5.png);}
.tela-3 .ac6 {background-image: url(../images/ac6.png);}
.tela-3 .ac7 {background-image: url(../images/ac7.png);}
/*********************************************************/
footer {width: 100%; display: table; background-color: var(--cor_4); border-top: 20px solid var(--cor_1); padding: 20px 0;}
footer h2 {font-size: 0.9em; padding-bottom: 10px; color: #fff;}

footer .logo {width: 220px; height: 60px; margin: 20px auto;}
footer .quadro {width: 25%; float: left; padding-right: 20px;}
footer .quadro-full {width: 50%; float: right;}
footer .social {width: 100%; text-align: center;}
footer .social li {display: inline-block; padding: 0 5px; font-size: 1.2em;}
footer .social li:hover {color: #fff;}
footer .dados li {color: #fff; font-size: 0.9em;}
footer .logos {width: 100%; height: 125px; border-radius: 10px; background-color: #3B3F42; background-position: center center; background-size: 90%;}
/*********************************************************/
.fim {width: 100%; text-align: center;}
.fim p {font-size: 0.9em;}
.fim a {color: var(--cor_3);}
.fim a:hover {color: var(--cor_1);}
.fim .content {border-top: 2px solid #666666; padding-top: 10px; margin-top: 20px;}
/*********************************************************/
.navegacao {width: 100%; display: table; padding: 15px 0; background-color: var(--cor_1); text-align: center;}
.navegacao li {color: #fff; display: inline-block; padding: 0 5px;}
.navegacao a {color: #fff;}
.navegacao a:hover {color: var(--cor_3);}
/*********************************************************/
.sobre {width: 100%; display: table; padding-top: 60px; background-image: url(../images/bg3.jpg); background-attachment: fixed;}
.sobre h2 {padding: 5px; border-radius: 5px; background-color: #F2F5F1; font-size: 0.7em; font-weight: 300; display: inline-block;}
.sobre h1 {color: var(--cor_1); padding-bottom: 40px;}

.sobre .esquerda {width: 40%; margin: 80px 0 0 10%; position: relative;}
.sobre .direita {padding-right: 10%;}
.sobre .quadro {background-color: var(--cor_1); width: 45%; position: absolute; right: 80px; bottom: -40px; padding: 20px; z-index: 1; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);}
.sobre img {border-radius: 10px;}
.sobre .dados li {background-image: url(../images/check.png); background-position: left top 5px; background-repeat: no-repeat; background-size: 15px; padding: 0 0 10px 30px; font-size: 0.8em; color: #fff;}
/*********************************************************/
.qualidades {width: 100%; display: table; padding: 30px 10%; background-color: var(--cor_1); text-align: center;}
.qualidades h3 {font-size: 1.4em; font-weight: 400; text-transform: uppercase; padding-bottom: 20px; color: #fff;}
.qualidades p {font-size: 0.9em; color: #fff; font-style: italic; line-height: 22px;}
.qualidades .dif {width: 30%; float: left; margin: 0 1.5%; }
/*********************************************************/
.socios {width: 100%; position: relative; margin-bottom: -30px;}
.socios h1 {text-align: center; text-transform: uppercase; padding: 40px 10px 10px 10px; color: var(--cor_1);}
.socios h2 {color: #fff; font-size: 1.2em; padding: 0;}
.socios p {color: #fff; line-height: 15px;}
.socios .equipe {width: 100%; position: relative;;}
.socios .quadro {width: 100%; min-height: 500px; position: relative; filter: grayscale(100%); transition: transform 0.5s ease, filter 0.5s ease; background-position: center center;}
.socios .quadro:hover {filter: grayscale(0%); transform: scale(1.1);}
.socios .legenda {position: absolute; bottom: 0; width: 90%; text-align: center; left: 5%; background: rgba(0,110,124,0.7); padding: 5px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
/*********************************************************/
.servico {width: 100%; display: table; padding: 60px 0; background-image: url(../images/bg3.jpg); background-attachment: fixed;}
.servico h1 {color: var(--cor_1); padding-bottom: 10px;}
.servico h2 {padding: 5px; border-radius: 5px; background-color: #F2F5F1; font-size: 0.7em; font-weight: 300; display: inline-block;}
.servico .direita {padding-top: 120px;}
.servico img {border-right: 10px solid var(--cor_1); border-bottom: 5px solid var(--cor_1);}
/*********************************************************/
.contato {width: 100%; display: table; padding: 60px 0; background-image: url(../images/bg3.jpg); background-attachment: fixed;}
.contato h1 {color: var(--cor_1); font-size: 1.4em; padding-bottom: 20px;}
.contato h2 {color: var(--cor_2); padding-bottom: 15px;}
.contato li {color: var(--cor_2); line-height: 30px; display: flex;}
.contato i {color: var(--cor_1); padding: 7px 10px 0 0;}

.contato .direita {padding-left: 5%;}
/*********************************************************/
.trabalhe {width: 100%; display: table; background-color: #37517E; min-height: 500px; padding-top: 20px;}
.trabalhe h1 {color: #fff; text-align: center; padding: 20px 0;}
.trabalhe iframe {width: 100%; height: 450px; background-color: #37517E;}
/*********************************************************/
.formulario .input {width: 100%; padding: 15px; border-radius: 10px; border: 1px solid var(--cor_3); background-color: #f9f9f9; font-family: var(--font_s);}
.formulario .inputtext {width: 100%; height: 140px; resize: none; padding: 15px; border-radius: 10px; border: 1px solid var(--cor_3); background-color: #f9f9f9; font-family: var(--font_s);}
/*********************************************************/
.mapa iframe{width: 100%; height: 300px; border-radius: 10px; border-bottom: 10px solid var(--cor_1);}
/*********************************************************/
.mazz:hover {background-color: #055481 !important;}
.solucoes {width: 80%; margin: auto; background-color: #055481; padding: 20px; border-radius: 10px; display: table;}
.solucoes h4 {color: #fff; font-size: 2em; padding-bottom: 20px;}
.solucoes .logo {float: left; width: 35%; height: 200px; background-image: url(../images/mazzolasol.png); background-position: center center; background-size: 60%;}
.solucoes .txt {float: right; width: 60%; text-align: center; padding-top: 20px;}
/*********************************************************/