/*********************************************************/
/*CSS MODE - MRPNET 2025
/*********************************************************/
/*CORES*/
:root {
  --cor_1: #213C6C;
  --cor_2: #EDC21E;
  --cor_3: #6685BD;
}
/*********************************************************/
.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);}

.botao2 {padding: 10px 30px; color: #fff; background-color: var(--cor_2); border-radius: 10px; font-weight: 500; text-transform: uppercase; cursor: pointer;}
.botao2:hover {background-color: var(--cor_3);}

h1 {font-family: var(--font_s);}
p {font-weight: 400; line-height: 30px;}
/*********************************************************/
/*HEADER DO SITE*/
header {width: 100%; position: absolute; padding: 10px 0; z-index: 1000;}
header .content {display: flex; align-items: center; justify-content: center;}
header .logo {width: 300px; height: 900px;}
/*********************************************************/
.home {width: 100%; display: table; min-height: 800px; position: relative;}
.home h1 {color: var(--cor_2); text-transform: uppercase; font-size: 2.6em;}
.home p {color: #fff;}

.home .logo {width: 400px; height: 200px;}
.home .esquerda {padding-top: 15%;}
.home .imagem {width: 35%; height: 800px; background-position: right top; position: absolute; right: 0; z-index: 99; top: 10%;}
.home .fundo {width: 100%; height: 250px; position: absolute; left: 0; bottom: 0; background-image: url(../images/faixa.png); background-position: bottom center;}
/*********************************************************/
.tela-1 {width: 100%; display: table; padding-bottom: 60px;}
.tela-1 h1 {color: var(--cor_2); text-transform: uppercase; font-size: 2em; padding: 60px 0 40px 0;}
/*********************************************************/
.tela-2 {width: 100%; display: table; position: relative; background-image: url(../images/bg1.png); background-repeat: no-repeat;text-align: center; background-position: left; padding-bottom: 60px;}
.tela-2 h1 {color: var(--cor_2); font-size: 6em; text-transform: uppercase; margin-bottom: 60px; font-weight: 900; text-align: left;}
.tela-2 h2 {color: var(--cor_1); font-size: 2em; ;}
.tela-2 p {font-size: 0.8em; line-height: 21px;}

.tela-2 .cts { display: flex; flex-wrap: wrap; gap: 40px; align-items: stretch; justify-content: center; position: relative;}
.tela-2 .quadro {padding: 40px; position: relative;background-color: #cfcfcf; flex: 0 0 35%; text-align: left; padding-bottom: 160px;}

.tela-2 .imagem1 {width: 340px; height: 360px; position: absolute; left: -40px; bottom: -120px; background-position: bottom;}
.tela-2 .imagem2 {width: 340px; height: 360px; position: absolute; right: -40px; bottom: -120px; background-position: bottom;}
.tela-2 .bg1 {background-color: var(--cor_2); text-align: right;}
/*********************************************************/
.tela-3 {width: 100%; display: table; background-image: url(../images/bg2.jpg); position: relative; padding: 200px 0 80px 0;}
.tela-3 h1 {color: #fff; font-size: 2.4em; text-transform: uppercase; margin-bottom: 30px;}
.tela-3 p {color: #fff;}

.tela-3 .faixa {width: 100%; height: 250px; position: absolute; left: 0; top: 0; background-image: url(../images/faixa2.png); background-position: top center;}
.tela-3 .imagem {position: absolute; right: 0; background-position: right bottom; width: 50%; height: 780px; top: 60px;}
/*********************************************************/
.tela-4 {width: 100%; padding: 60px 0;}
.tela-4 h1 {font-size: 2em; text-transform: uppercase; color: var(--cor_1); margin-bottom: 40px;}
.tela-4 .quadro {width: 85%; height: 120px; margin: 0 auto; background-position: center center;}
/*********************************************************/
footer {width: 100%; text-align: center; padding-top: 40px; background-color: var(--cor_1);}
footer .logo {width: 240px; height: 100px; margin: 0 auto 20px auto;}

footer .social li {display: inline-block; margin: 0 15px; font-size: 1.4em; color: #fff;}
footer .social li:hover {color: var(--cor_2);}

footer .dados {margin-top: 20px;}
footer .dados li {color: #fff; ;}
/*********************************************************/
.fim {width: 100%; text-align: center; background-color: var(--cor_3); padding: 10px 0;}
.fim p {color: #fff; font-size: 0.8em;}
.fim a {color: #fff;}
.fim a:hover {color: var(--cor_2);}
/*********************************************************/