/*********************************************************/
/*CSS MODE - MRPNET 2025
/*********************************************************/
/*CORES*/
:root {
  --cor_1: #055481;
  --cor_2: #34AEC6;
  --preto: #212121;
}
/*********************************************************/
.botao-azul {padding: 10px 30px; color: #fff; background-color: var(--cor_1); border-radius: 10px; font-weight: 500; text-transform: uppercase; cursor: pointer;}
.botao-azul:hover {background-color: var(--cor_2);}

span {color: var(--cor_2);}
h1 {color: var(--cor_1); font-size: 3em; font-weight: 900; padding-bottom: 40px;}
p {color: var(--preto); line-height: 30px; font-size: 1.1em; font-weight: 400;}

.pontos  {width: 145px; height: 145px; background-image: url(../images/pontos.png); position: absolute; left: 0; top: -140px;}
.pontos2 {width: 145px; height: 145px; background-image: url(../images/pontos2.png); position: absolute; left: 0; top: 40px;}
.curva {width: 250px; height: 600px; background-image: url(../images/curva.png); position: absolute; left: 0; bottom: 0; background-position: bottom;}

.bg1 {background-color: var(--cor_1);}
.bg2 {background-color: var(--cor_2);}

.txt {width: 65%; margin: auto;}
/*********************************************************/
/*HEADER DO SITE*/
header {width: 100%; position: absolute; left: 0; padding: 10px 0; z-index: 1000;}
header .logo {width: 250px; height: 160px; margin-left: 25%; top: 20px; position: relative;}
header .social {width: 100%; text-align: center;}
header .social li {font-size: 1.4em; padding: 0 20px;}
/*********************************************************/
footer {width: 100%; display: table; text-align: center; padding: 20px 0; background-color: var(--cor_1);}
footer .social li {display: inline-block; font-size: 1.4em; padding: 0 15px 20px 15px; color: #fff;}
footer .social li:hover {color: var(--cor_2);}
footer p {color: #fff; font-size: 0.8em; letter-spacing: 2px;}
footer a {color: #fff;}
footer a:hover {color: var(--cor_2);}
/*********************************************************/
.home {width: 100%; position: relative; min-height: 900px;}

.home .esquerda {width: 35%; margin-left: 15%; padding-top: 15%;}
.home .imagens {position: absolute; right: 0; top: 0; width: 50%;}
/*********************************************************/
.servicos {width: 100%; display: table; padding: 60px 0 80px 0; text-align: center; position: relative;}
.servicos h2 {text-align: left !important; font-weight: 500; color: var(--cor_1); padding-bottom: 20px; font-size: 1.4em;}
.servicos h3 {font-weight: 600; text-transform: uppercase; letter-spacing: 2px; padding-bottom: 30px;}

.servicos .quadro-container { display: flex; flex-wrap: wrap;  gap: 30px; max-width: 100%; margin: auto; }
.servicos .quadro { width: 31%; min-height: 300px; perspective: 1000px; }
.servicos .quadro-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s; }
.servicos .quadro:hover .quadro-inner { transform: rotateY(180deg); }
.servicos .quadro-front, .quadro-back { width: 100%; height: 100%; position: absolute; backface-visibility: hidden; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); }
.servicos .quadro-front { background: #fff; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 25px 20px; text-align: left; height: 100%; }
.servicos .quadro-front:hover {background-color: #f9f9f9;}
.servicos .quadro-front .icon { width: 80px; height: 80px;  background-position: center; position: absolute; right: 20px; bottom: 20px; }
.servicos .quadro-back { background: var(--cor_1); color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; transform: rotateY(180deg); text-align: center; padding: 25px; }
.servicos .quadro-back p {color: #fff; font-size: 0.9em; line-height: 25px; text-align: left;}
/*********************************************************/
.sobre {width: 100%; display: table; position: relative;}
.sobre h1 {color: #fff;}
.sobre h2 {padding-top: 20px; color: var(--cor_2); text-transform: uppercase; font-weight: 300; letter-spacing: 2px; font-size: 1em;}
.sobre p {color: #fff;}

.sobre .centro {width: 100%; display: table; background-color: var(--cor_1);}
.sobre .tp {width: 100%; height: 200px; background-image: url(../images/tp.png); background-position: bottom center;}
.sobre .rp {width: 100%; height: 200px; background-image: url(../images/rd.png); background-position: top center;}
.sobre .imagem {position: absolute; right: 0; top: -20px; width: 50%; height: 780px;}
/*********************************************************/
.valores {width: 100%; display: table; padding-bottom: 20px;}
.valores h2 {font-weight: 500; color: var(--cor_1); padding-bottom: 20px;}
.valores h3 {color: #444;}

.valores .esquerda {width: 30%; padding-bottom: 40px; border-bottom: 15px solid var(--cor_1);}
.valores .direita {width: 65%;}
.valores .dados li {width: 50%; float: left; padding: 0 20px 40px 0; min-height: 260px;}

.valores .icon {width: 80px; height: 80px; border-radius: 50%; background-size: 90%; background-position:  center center; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); margin-bottom: 10px;}
.valores .ic1 {background-image: url(../images/ac1.png);}
.valores .ic2 {background-image: url(../images/ac2.png);}
.valores .ic3 {background-image: url(../images/ac3.png);}
.valores .ic4 {background-image: url(../images/ac4.png);}
.valores .ic5 {background-image: url(../images/ac5.png);}
/*********************************************************/
.chamada {width: 100%; background-attachment: fixed;}
.chamada h1 {color: #fff; font-weight: 400; padding-bottom: 20px;}
.chamada p {color: #fff; font-weight: 600; letter-spacing: 2px; font-style: italic;}

.chamada .tp {width: 100%; height: 180px; background-position: top -1px center; background-image: url(../images/tp2.png);}
.chamada .rd {width: 100%; height: 180px; background-position: bottom center; background-image: url(../images/rd2.png);}
.chamada .centro {width: 55%; padding: 120px 0; margin: auto;}
/*********************************************************/
.equipe {width: 100%; display: table; position: relative; background-color: var(--cor_1); padding-bottom: 40px;}
.equipe h1 {color: #fff;}
.equipe h2 {color: #fff; padding-bottom: 10px;}
.equipe p {color: #fff; line-height: 26px; font-weight: 300;}

.equipe .quadro {width: 48%; float: left; min-height: 320px; background-color:#1E658E; border-radius: 10px; padding: 10px; margin: 1%;}
.equipe .imagem {width: 30%; height: 300px; border-radius: 10px; float: left;}
.equipe .texto {width: 65%; float: right;}
/*********************************************************/
.contato {width: 100%;  height: 600px; display: table;  background: linear-gradient(to bottom, var(--cor_1) 200px, white 200px); padding: 40px 0;}
.contato h1 {color: #fff; text-align: center;}
.contato h2 {color: var(--cor_1); letter-spacing: 2px; font-weight: 600; font-size: 1em; text-align: center; padding-bottom: 20px;}
.cotnato ul {width: 100%; display: flex;}
.contato li {color: #fff; display: flex; font-size: 1.1em; font-weight: 400; padding-bottom: 20px; letter-spacing: 2px;}
.contato i {padding-right: 10px; position: relative; margin-top: 5px; font-size: 1.2em;}

.contato .quadro {width: 100%; padding: 40px; border-radius: 10px; background-color: #fff;  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); display: table;}
.contato .esquerda {width: 30%; background-color: var(--cor_1); padding: 40px; border-radius: 10px; background-image: url(../images/curva2.png); background-position: left bottom; background-repeat: no-repeat;}
.contato .direita {width: 65%;}
.contato iframe {width: 100%; border-radius: 10px; height: 360px;}
/*********************************************************/