/*********************************************************/
/*CSS MODE - MRPNET 2025
/*********************************************************/
/*CORES*/
:root {
  --cor_1: #0583A4;
  --cor_2: #DDFCFB;
  --cor_3: #6D6D6D;
  --cor_4: #0059B0;
}
/*********************************************************/
.botao {padding: 10px 30px; color: #fff; background-color: var(--cor_1); border-radius: 50px; font-weight: 400; text-transform: uppercase; cursor: pointer; font-size: 1.2em;}
.botao:hover {background-color: var(--cor_4);}

h1 {font-size: 3em; text-transform: uppercase; color: var(--cor_1); margin-bottom: 30px; font-weight: 500;}
p {color: #000; font-size: 1.2em; line-height: 30px; font-weight: 400;}
/*********************************************************/
/*HEADER DO SITE*/
header {width: 100%; position: relative; padding: 30px 0; z-index: 1000; display: table;}
header .content {display: flex; align-items: center; justify-content: space-between;}
header .logo {width: 340px; height: 100px;}
header .social {position: absolute; right: 5%; top: 20px;}
header .social li {font-size: 1.2em; display: inline-block; padding: 0 5px; color: var(--cor_1);}
header .social li:hover {color: var(--cor_3);}
/*********************************************************/
.sobre { padding: 60px 0; }
.sobre h1 {text-align: center;}
.sobre .content {max-width: 1128px;}
.sobre-main { display: flex; align-items: flex-start; gap: 5%; margin-bottom: 60px; }
.sobre-text { flex: 0 0 60%; text-align: justify;}
.sobre-image { flex: 0 0 25%;}
.sobre-image img {margin: auto;}

.sobre-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.sobre-cards .card { background: var(--cor_2); padding: 10px 20px 20px 20px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; min-height: 250px; }
.sobre-cards .card:hover { transform: translateY(-5px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); }
.sobre-cards .card-icon { width: 100%; height: 80px; background-position: center center; background-repeat: no-repeat; }
.sobre-cards .card-content h3 {color: var(--cor_1); float: left; font-size: 2.4em; font-weight: 500; padding: 15px 0 0 10px; text-transform: uppercase;}
.sobre-cards .texto {text-align: center;}

.sobre .ci1 {background-image: url(../images/missao.png); background-size: 70%;}
.sobre .ci2 {background-image: url(../images/visao.png); background-size: 60%;}
.sobre .ci3 {background-image: url(../images/valores.png); background-size: 80%;}
/*********************************************************/
.setores { padding-top: 40px; text-align: center;}
.setores h2 {text-transform: uppercase; color: var(--cor_1); font-weight: 400; font-size: 1.4em;}
.setores .quadro {width: 90%; margin: 30px auto 0 auto;}
.setores .icon {width: 80%; aspect-ratio: 1/1; margin: 0 auto 15px auto; background-position: center center;}

.setores .ac1 {background-image: url(../images/ac1.png);}
.setores .ac2 {background-image: url(../images/ac2.png);}
.setores .ac3 {background-image: url(../images/ac3.png);}
.setores .ac4 {background-image: url(../images/ac4.png);}
.setores .ac5 {background-image: url(../images/ac5.png);}
/*********************************************************/
.investimento {width: 100%; position: relative; background-image: url(../images/bgsite.webp); padding: 500px 0 600px 0; text-align: center; background-position: center top;}
.investimento .content {max-width: 1280px;}

.investimento h1 {color: #fff; margin-bottom: 10px;}
.investimento h2 {color: #fff; font-weight: 400; text-transform: uppercase; font-weight: 400; margin-bottom: 60px;}
.investimento h3 {font-size: 1.9em; font-weight: 900; text-transform: uppercase; color: var(--cor_4);}
.investimento .centro { display: flex; justify-content: center; align-items: stretch; gap: 20px; flex-wrap: wrap; padding: 60px 40px; border-radius: 20px; background-color: #fff;}
.investimento .quadro { flex: 1 1 250px; max-width: 30%; text-align: center; padding: 20px 10px; transition: transform 0.3s ease; }

.investimento .icon {width: 65%; aspect-ratio: 1/1; margin: 0 auto 30px auto; background-position: center center;}

.investimento .ic1 {background-image: url(../images/ic5.png);}
.investimento .ic2 {background-image: url(../images/ic6.png);}
.investimento .ic3 {background-image: url(../images/ic7.png);}
/*********************************************************/
.etapas {padding: 20px 0 40px 0; text-align: center;}
.etapas .quadro {width: 92%; margin: 20px auto; padding: 20px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; min-height: 420px; }
.etapas .icon {width: 90%; aspect-ratio: 1/1; background-position: center center; margin: 0 auto 20px auto;}

.etapas .ac1 {background-image: url(../images/p1.png);}
.etapas .ac2 {background-image: url(../images/p2.png);}
.etapas .ac3 {background-image: url(../images/p3.png);}
.etapas .ac4 {background-image: url(../images/p4.png);}
.etapas .ac5 {background-image: url(../images/p5.png);}
/*********************************************************/
.solucoes {padding: 40px 0 60px 0;}
.solucoes h1 {text-align: center;}
.solucoes .colunas {columns: 2; column-gap: 40px;}
/*********************************************************/
.sustentabilidade {padding: 40px 0; background-image: url(../images/bg2.png); background-position: center;}
.sustentabilidade h1 {text-align: center; color: #000;}
.sustentabilidade .quadro {width: 100%; padding: 40px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); border-radius: 20px; background-color: rgba(255, 255, 255, 0.8);}
.sustentabilidade .colunas {columns: 2; column-gap: 40px;}
/*********************************************************/
.parceiros {padding: 60px 0; text-align: center;}
.parceiros .quadro {margin: 10px auto; width: 90%; height: 160px; border: 1px solid #cecece; border-radius: 10px; background-position: center center;}
/*********************************************************/
.depoimentos {padding-bottom: 60px}
.depoimentos h1 {text-align: center;}
.depoimentos h2 {color: var(--cor_1); font-weight: 500; margin-bottom: 15px; text-transform: uppercase;}

.depoimentos .quadro {width: 65%; margin: 20px auto; padding: 40px; border: 1px solid #cecece; border-radius: 20px;}
.depoimentos .star {width: 200px; height: 40px; background-image: url(../images/estrelas.png); margin-bottom: 20px;}
/*********************************************************/
.contato {background-color: var(--cor_2); padding: 60px 0; display: table; width: 100%;}
.contato h2 {color: var(--cor_1); font-weight: 500; margin-bottom: 15px; text-transform: uppercase;}

.contato .esquerda {padding-top: 60px;}
.contato .dados li {display: flex; font-size: 1.4em; color: #000; margin-bottom: 20px; font-weight: 500;}
.contato .dados i {color: var(--cor_1); font-size: 1.2em; margin-right: 20px;}
.contato .botaowt {width: 300px; height: 80px; background-image: url(../images/bgw.png); display: table;}
.contato .formulario {width: 90%; margin: auto; background-color: #fff; border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); padding: 30px; text-align: center;}
.contato .input {padding: 15px; border-radius: 10px; background-color: #F6F6F8; width: 100%;}
.contato .inputtext {padding: 15px; height: 120px; resize: none; border-radius: 10px; background-color: #F6F6F8; width: 100%;}
/*********************************************************/
footer {width: 100%; display: table; padding-top: 30px; background-image: url(../images/bg-rodape.jpg); background-repeat: repeat-x; background-size: contain; background-position: bottom;}
footer a {color: #fff;}
footer a:hover {color: yellow;}

footer .logo {width: 50%; height: 150px; background-position: center center; background-repeat: no-repeat; background-size: 70%; float: left;}
footer .quadro-a {width: 35%; float: left; }
footer .quadro-b {width: 15%; float: right;}
footer .dados li {display: flex; font-size: 1.2em; color: #fff; margin-bottom: 20px; font-weight: 500;}
footer .dados i {color: #fff; font-size: 1.1em; margin-right: 20px;}

footer .menurdp li {padding-bottom: 5px;}
footer .menurdp a {color: #fff;}
footer .menurdp a:hover {color: yellow}

footer .fim {width: 100%; display: table; text-align: center; padding: 10px 0;}
footer .fim p {font-size: 0.9em; color: #fff;}
/*********************************************************/