/*********************************************************/
/*CSS MODE - MRPNET 2025
/*********************************************************/
/*CORES*/
:root {
  --cor_1: #FF5516;
  --cor_2: #3C3C3C;
  --cor_3: #fafafa;
}
/*********************************************************/
.botao-laranja {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-laranja:hover {background-color: var(--cor_2);}

p {font-size: 0.9em; line-height: 25px; color: var(--cor_2);}
h1 {color: var(--cor_2); font-weight: 700; font-size: 2em; padding-bottom: 30px;}

span {color: var(--cor_1);}
/*********************************************************/
/*HEADER DO SITE*/
header {width: 100%; position: relative; z-index: 1000;}
header .content {display: flex; align-items: center; justify-content: space-between;}

header .inicio {padding: 5px 0; background-color: var(--cor_1);}
header .inicio li {float: left; padding-right: 20px; color: #fff; font-family: var(--font_s); font-size: 0.9em;}
header .inicio i {padding-right:5px;}

header .topo {width: 100%; padding: 10px 0; background-image: url(../images/bg-topo.jpg);}
header .logo {width: 150px; height: 110px;}
header .social li {display: inline-block; color: #fff; font-size: 1.4em; padding: 0 5px;}
header .social li:hover {color: var(--cor_1);}
/*********************************************************/
.banner {position: relative;}
.banner .barra {width: 100%; height: 230px; position: absolute; bottom: 0; left: 0; background-image: url(../images/barra.png); background-position: bottom !important; z-index: 1;}
/*********************************************************/
.chamadas {width: 100%; position: relative; padding: 40px 0; background-color: var(--cor_3);}
.chamadas h2 {color: var(--cor_2); font-family: var(--font_s); padding-bottom: 10px; font-size: 1.2em;}

.chamadas .quadro {width: 90%; margin: auto; display: flex;}
.chamadas i {font-size: 2em; color: var(--cor_1); padding: 10px 15px 0 0;}
/*********************************************************/
.apresentacao {width: 100%; display: table; padding: 80px 0;}
.apresentacao h1 {border-left: 5px solid var(--cor_1); padding: 0 0 0 25px; line-height: 40px; margin-bottom: 40px;}
/*********************************************************/
.servicos {width: 100%; background-color: var(--cor_3); position: relative;}
.servicos h2 {font-size: 1em;}
.servicos a:hover {color: var(--cor_2); text-decoration: none !important;}

.servicos .esquerda {width: 35%; min-height: 500px; background-position: center center;}
.servicos .direita {width: 65%; padding: 40px;}
.servicos .quadro {width: 90%; margin: auto; text-align: center;}
.servicos .imagem {width: 100%; height: 180px; border-radius: 10px; margin-bottom: 10px;}
.servicos .quadro-b {width: 31%; margin: 1%; text-align: center; float: left;}
.servicos .imagem-b {width: 100%; height: 280px; border-radius: 10px; margin-bottom: 10px;}
/*********************************************************/
.projetos {width: 100%; display: table; padding: 80px 0;}
.projetos h1 {text-align: center;}
.projetos .centro {text-align: center;}

.projetos .quadro-full {width: 35%; float: left; position: relative; height: 520px; background-position: center center; margin: 1% 1% 1% 4%;}
.projetos .quadro-full-b {width: 35%; float: right; position: relative; height: 520px; background-position: center center; margin: 1% 1% 1% 4%;}
.projetos .quadro {width: 28%; float: left; position: relative; height: 250px; background-position: center center; margin: 1% 1% 1% 1%;}

.projetos .capa { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 85, 22, 0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; justify-content: center; align-items: center; }
.projetos .quadro:hover .capa, .projetos .quadro-full:hover .capa { opacity: 1; }
.projetos .capa h2 { color: white; font-size: 1em; border: 1px solid white; padding: 10px 20px; text-align: center; font-family: var(--font_s);}

.projetos .bloco {display: flex; flex-wrap: wrap; margin-bottom: 5px; justify-content: space-between; }
.projetos .bloco.inverso { flex-direction: row-reverse; }
.projetos .img-grande { width: 35%; height: 525px; margin: 1%; background-size: cover; background-position: center; position: relative; }
.projetos .coluna-pequenas { width: 62%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.projetos .img-pequena { width: 48%; height: 250px; margin: 1%; background-size: cover; background-position: center; position: relative; }
.projetos .img-grande:hover .capa, .img-pequena:hover .capa {opacity: 1;}
/*********************************************************/
.chamadas-2 {width: 100%; display: table; background-color: var(--cor_1);}
.chamadas-2 h2 {color: #fff; text-transform: uppercase; font-weight: 800; font-size: 8em; text-align: center; line-height: 100px;}
.chamadas-2 span {color: #fff; font-weight: 400; font-size: 0.5em; line-height: 0 !important;}

.chamadas-2 .esquerda {width: 30%; min-height: 480px; display: flex; align-items: center; justify-content: center; padding: 20px;}
.chamadas-2 .direita {width: 70%; min-height: 480px;}
/*********************************************************/
.rodape {width: 100%; display: table; background-color: var(--cor_2); padding: 20px 0;}
.rodape .logo {width: 33%; height: 110px; float: left; background-repeat: no-repeat; background-position: center center;}
.rodape a {color: #fff;}

.rodape .social {width: 33%; float: left; padding-top: 40px;}
.rodape .social li {display: inline-block; color: #fff; font-size: 1.6em; padding: 0 10px;}
.rodape .social li:hover {color: var(--cor_1);}

.rodape .dados {float: right; padding-top: 20px;}
.rodape .dados li {color: #fff; padding-bottom: 15px; font-size: 1.1em;}
.rodape .dados i {padding-right: 10px;}
/*********************************************************/
.fim {width: 100%; display: table; padding: 10px 0; background-color: var(--cor_1); text-align: center;}
.fim p {color: #fff; font-family: var(--font_s); font-size: 0.9em; font-weight: 300;}
.fim a {color: #fff;}
.fim a:hover {color: var(--cor_2);}
/*********************************************************/
.navegacao {text-align: center; position: relative;}
.navegacao h1 {text-transform: uppercase; color: #fff; font-size: 3em; font-weight: 700; font-family: var(--font_s); letter-spacing: 2px;}
.navegacao li {color: #fff; display: inline-block; padding: 0 5px;}
.navegacao a {color: #fff;}
.navegacao a:hover {color: var(--cor_1);}
.navegacao .sombra {width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); padding: 120px 0; }
/*********************************************************/
.sobre {width: 100%; display: table; padding: 60px 0; text-align: center;}

.sobre-a {width: 100%; background-color: var(--cor_3); display: table;}

.sobre-a .esquerda {width: 50%; padding: 60px 5% 40px 10%;}
.sobre-a .direita {width: 50%; min-height: 550px; background-position: center center;}
/*********************************************************/
.post {width: 100%; padding: 60px 0; background-color: var(--cor_3); background-image: url(../images/img-2.jpg); background-repeat: no-repeat; background-position: bottom;}
.post h1 {text-align: center;}

.post .capa {width: 50%; margin: 0 auto 30px auto;}
.post img {border-radius: 10px;}
.post .centro {width: 70%;}

.post .esquerda {width: 40%;}
.post .direita {width: 55%;}
.post .esquerda img {width: 100%;}

.post .galeria {width: 100%; text-align: center;}
.post .foto {width: 18%; height: 180px; background-position: center center; border-radius: 10px; margin: 0.5%; display: inline-block;}
/*********************************************************/
.contato {width: 100%; display: table; padding: 60px 0;}
.contato h1 {text-align: center;}

.contato .icon {float: left; margin-right: 20px;}
.contato .texto {float: left;}
.contato iframe {width: 100%; height: 350px;}
.contato .dados {width: 80%; margin: auto; padding: 40px; border-radius: 10px; background-color: var(--cor_3); display: table}
.contato .dados li {width: 33%; float: left; padding-right: 20px; font-size: 0.9em; line-height: 25px; color: var(--cor_2);}
.contato .dados i {width: 40px; height: 40px; border: 1px solid #ccc; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
/*********************************************************/
.clientes {padding: 60px 0; display: block; text-align: center;}
.clientes .quadro {width: 95%; margin: auto; background-position: center center; height: 120px;}
/*********************************************************/