/*********************************************************/
/*CSS MODE - MRPNET 2025
/*********************************************************/
/*CORES*/
:root {
  --cor_1: #000;
  --cor_2: #F2E9DF;
  --cor_3: #777;
  --cor_4: #CA9F66;
}
/*********************************************************/
.botao {padding: 10px 30px; color: #fff; background-color: var(--cor_1); border-radius: 10px; font-weight: 500; text-transform: uppercase; cursor: pointer;}
.botao:hover {background-color: var(--cor_2);}

.linha {width: 400px; height: 3px; background-image: url(../images/linha.png); margin: 25px 0 40px 0;}

p {line-height: 25px; font-weight: 400;}

.img-1 {width: 30%; height: 750px; left: 20%; bottom: 0; position: absolute; background-position: bottom;}
.img-2 {width: 25%; height: 850px; right: 0; bottom: 0; position: absolute; background-position: bottom;}
.img-3 {width: 25%; height: 750px; left: 15%; bottom: -80px; position: absolute; background-position: bottom; z-index: 8;}
/*********************************************************/
/*HEADER DO SITE*/
header {width: 100%; position: absolute; padding: 10px 0; z-index: 1000; }
header .content {display: flex; align-items: center; justify-content: space-between; max-width: 90%;}
header .logo {width: 280px; height: 100px;}
header .social li {float: left; padding: 0 10px; color: #fff; font-size: 1.2em;}
header .social li:hover {color: var(--cor_4);}
/*********************************************************/
.home {width: 100%; height: 100%; position: relative;}
.home h1 {padding-top: 35%; color: #fff; font-weight: 700; font-size: 2.6em;}
.home p {color: #fff;}
.home .direita {padding-right: 15%;}
/*********************************************************/
.sobre {width: 100%; display: table; padding: 80px 0; background-image: url(../images/bg-2.jpg); background-position: right center;}
.sobre h1 {font-weight: 500; letter-spacing: 3px; color: var(--cor_3); font-size: 0.9em;}
.sobre h2 {padding-bottom: 40px;}
.sobre .direita {padding-top: 220px;}
.sobre img {box-shadow: 30px 30px 68px rgba(0, 0, 0, 0.2); border-radius: 20px;}
/*********************************************************/
.servicos {width: 100%; display: table; position: relative; padding: 80px 0; background-attachment: fixed;}
.servicos h1 {color: #fff;}
.servicos h2 {color: #fff; font-size: 1.4em; padding-bottom: 15px;}
.servicos p {color: #8f8f8f; font-weight: 300; font-size: 0.9em; line-height: 22px;}
.servicos i {color: var(--cor_4); font-size: 3em; text-shadow: 2px 2px 4px rgba(203, 159, 102, 0.6); margin-bottom: 20px;}

.servicos .quadro {width: 30%; float: left; margin: 1.5%; border: 2px dashed #3D3B3B; padding: 30px; text-align: center; transition: border-color 0.3s ease; position: relative; z-index: 8; min-height: 300px;}
.servicos .quadro:hover { border-color: #CA9F66; }
/*********************************************************/
.noticias {width: 100%; position: relative; padding: 80px 0;}
.noticias h2 {padding: 10px 0; font-size: 1.3em; color: var(--cor_1);}
.noticias h3 {text-align: center; color: var(--cor_1); text-transform: uppercase; font-weight: 500; font-size: 1.6em; padding-bottom: 20px;}
.noticias a {color: var(--cor_1);}
.noticias a:hover {color: var(--cor_2);}
.noticias p {color: #8f8f8f; font-weight: 300; font-size: 0.9em; line-height: 22px;}
.noticias .quadro {width: 90%; margin: auto;}
.noticias .imagem {width: 100%; height: 240px; background-position: center center; border-radius: 10px;}

.noticias .link { color: var(--cor_1); font-size: 0.9em;}
.noticias .link:hover {color: var(--cor_4);}

.noticias .post {width: 60%; float: left;}
.noticias .lateral {width: 35%; float: right; border-left: 5px solid var(--cor_4); padding-left: 40px;}
/*********************************************************/
.navegacao {width: 100%; display: table; padding: 10px 0; background-color: var(--cor_1);}
.navegacao li {float: left; padding-right: 10px; color: #fff;}
.navegacao a{color: #fff;}
.navegacao a:hover {color: var(--cor_4);}
/*********************************************************/
.post h1 {font-size: 2em; text-transform: none; padding-bottom: 20px;}
.post h2 {font-size: 1.2em; line-height: 25px;}
.post .quadro-m p {font-size: 0.9em; line-height: 22px;}
.post .quadro-m {width: 90%; margin: auto; border-radius: 20px; overflow: hidden; margin-bottom: 20px;}
.post .imagem {height: 200px;}
.post img {width: 100%;}
.post .texto {min-height: 100px; padding: 20px;}
/*********************************************************/
/*********************************************************/
.contato {width: 100%; display: table; padding-top: 80px; position: relative; background-color: var(--cor_1);}
.contato h3 {font-size: 0.9em; padding-bottom: 10px;}
.contato iframe {width: 100%; height: 400px;}
.contato .mapa-e {width: 35%; float: left;}
.contato .mapa-d {width: 35%; float: right;}
.contato .centro {width: 30%; float: left; background-color: #fff;  position: relative; box-shadow: 0 0 12px rgba(0, 0, 0, 0.15); height: 480px; margin-top: -40px; padding: 40px; border-radius: 10px; z-index: 9;}

.contato .dados li {display: flex; width: 100%; margin-bottom: 20px;}
.contato .dados i {font-size: 1.4em; padding-right: 20px; color: var(--cor_4);}
.contato .social li {float: left; font-size: 1.8em; color: var(--cor_4); padding-right: 20px;}
.contato .social li:hover {color: var(--cor_1);}
/*********************************************************/
footer {width: 100%; display: table; padding: 50px 0 20px 0; background-color: var(--cor_1); text-align: center; position: relative; margin-top: -40px;}
footer p {color: #fff; font-size: 0.9em; font-weight: 300;}
footer a {color: #fff;}
footer a:hover {color: var(--cor_4);}
/*********************************************************/
.vc {width: 100%; display: table; position: relative; padding: 80px 0 40px 0; background-color: var(--cor_1); color: #fff;}
.vc h1 {font-size: 3em; margin-bottom: 0; color: #fff;}

.vc .direita {width: 50%; padding-right: 15%;}
.vc .social li {float: left; font-size: 1.8em; color: #fff; padding-right: 20px;}
.vc .social li:hover {color: var(--cor_4);}
/*********************************************************/