/*********************************************************/
/*CSS MODE - MRPNET 2025
/*********************************************************/
/*CORES*/
:root {
  --cor_1: #1e4cb0;
  --cor_2: #18c4eb;
  --cor_3: #b10f2e;
}

.azul {color: var(--cor_2);}
.vermelho {color: var(--cor_3);}
/*********************************************************/
.botao {padding: 10px 30px; color: var(--cor_1); border-radius: 50px; font-weight: 500; cursor: pointer; display: block; border: 1px solid var(--cor_1); text-align: center; width: 90%;}
.botao:hover {background-color: var(--cor_1); color: #fff;}

.botao-2 {padding: 10px 30px; color: var(--cor_2); border-radius: 50px; font-weight: 500; cursor: pointer; display: block; border: 1px solid var(--cor_2); text-align: center; width: 70%;}
.botao-2:hover {background-color: var(--cor_2); color: var(--cor_1);}

.teia-1 {width: 50%; height: 2000px; position: absolute; z-index: 1; background-image: url(../images/rede.png); right: 0; top: 0; background-position: top right;}
.teia-2 {width: 35%; height: 1400px; position: absolute; z-index: 1; background-image: url(../images/rede-2.png); left: 0; top: 0; background-position: top left;}
.teia-3 {width: 40%; height: 1100px; position: absolute; z-index: 1; background-image: url(../images/rede.png); right: 0; top: 0; background-position: top right;}

p {font-size: 1.1em; line-height: 30px;}
/*********************************************************/
/*HEADER DO SITE*/
header {width: 100%; position: relative; padding: 10px 0; background: var(--cor_1); }
header .content {display: flex; align-items: center; justify-content: space-between;}
header .logo {width: 160px; height: 100px;}
/*********************************************************/
.chamada {width: 100%; text-align: center; padding: 20px 0 40px 0; background-color: var(--cor_2);}
.chamada h1 {color: var(--cor_1); font-weight: 700; font-size: 2em; position: relative; z-index: 2;}
.chamada i {font-size: 2em; padding-right: 30px;  position: relative; top: 10px;}
/*********************************************************/
.tela-1 {width: 100%; display: table; position: relative; padding: 60px 0;}
.tela-1 h1 {color: var(--cor_1); font-size: 2em; padding-bottom: 10px; border-bottom: 1px solid var(--cor_2); margin: 100px 0 20px 0;}
.tela-1 picture {position: relative; z-index: 2;}
/*********************************************************/
.tela-2 {width: 100%; display: table; position: relative; padding: 60px 0; background-color: var(--cor_1);}
.tela-2 h1 {color: #fff; font-size: 2em; padding-bottom: 10px; border-bottom: 1px solid var(--cor_2); margin: 100px 0 20px 0;}
.tela-2 p {color: #fff;}
.tela-2 picture {position: relative; z-index: 2;}
/*********************************************************/
.tela-3 {width: 100%; display: table; position: relative; padding: 60px 0;}
.tela-3 h1 {color: var(--cor_1); font-size: 2em; padding-bottom: 10px; border-bottom: 1px solid var(--cor_2); margin: 100px 0 20px 0;}
.tela-3 picture {position: relative; z-index: 2;}
.tela-3 .esquerda {position: relative; z-index: 2;}
/*********************************************************/
.tela-4 {width: 100%; padding: 20px 0 40px 0; background-color: var(--cor_3); position: relative; text-align: center;}
.tela-4 li {display: inline-block; color: #fff; font-size: 1.6em; width: 40%; position: relative; z-index: 2; font-weight: 600;}
.tela-4 i {font-size: 2em; padding-right: 20px;  position: relative; top: 10px;}
/*********************************************************/
footer {width: 100%; display: table; text-align: center; padding-top: 30px;}
footer .logo {width: 140px; height: 100px; margin: 0 auto 10px auto; display: inline-block;}
footer .social li {display: inline-block; padding: 0 15px; font-size: 1.4em; color: var(--cor_1);}
footer .social li:hover {color: var(--cor_2);}
/*********************************************************/
.fim {width: 100%; display: table; padding: 15px 0; text-align: center;}
.fim p {font-size: 0.8em;}
.fim a {color: #000;}
.fim a:hover {color: var(--cor_2);}
/*********************************************************/
.tela-5 {width: 100%; display: table; position: relative; padding: 60px 0; }
.tela-5 .content {padding-right: 20%;}
.tela-5 h1 {color: var(--cor_1); font-size: 2em; padding-bottom: 10px; border-bottom: 1px solid var(--cor_2); margin-bottom: 40px;}
.tela-5 h2 {padding: 10px; background-color: var(--cor_1); color: #fff; font-weight: 700; font-size: 1.2em; display: inline-block; border-top-right-radius: 50px; border-bottom-right-radius: 50px; margin-bottom: 40px;}
.tela-5 h3 {font-weight: 500; color: var(--cor_1); font-size: 1.2em; line-height: 35px;}
.tela-5 h3 span {color: var(--cor_2); font-weight: 700;}

.tela-5 .quadro {width: 100%; display: table; padding-bottom: 15px; border-bottom: 1px solid var(--cor_2); margin-bottom: 15px;}
/*********************************************************/
.tela-6 {width: 100%; display: table; position: relative; padding: 60px 0; background-color: #f7f7f7;}
.tela-6 h1 {color: var(--cor_1); font-size: 2em; padding-bottom: 10px; border-bottom: 1px solid var(--cor_2); margin-bottom: 40px;}
.tela-6 picture {position: relative; z-index: 2;}
/*********************************************************/
.tela-7 {width: 100%; display: table; position: relative; padding-top: 60px; }
.tela-7 h1 {color: var(--cor_1); font-size: 2em; padding-bottom: 10px; border-bottom: 1px solid var(--cor_2); margin-bottom: 40px;}
.tela-7 h2 {width: 100%; padding: 20px; background-color: var(--cor_1); color: #fff; font-weight: 600; font-size: 1.2em;}
.tela-7 h2 span {width: 60%; display: block; color: #fff !important;}

.tela-7 .quadro {width: 46%; float: left; margin: 0 4% 60px 0; padding-top: 200px; position: relative;}
.tela-7  p {font-size: 1em; line-height: 25px;}
.tela-7 .imagem {position: absolute; right: 0; top: 0; width: 45%; height: 260px;}

.tela-7 .conteudo {width: 100%; display: table; padding-top: 20px;}
.tela-7 .conteudo i {font-size: 2em;}
.tela-7 .icone {width: 10%; float: left;}
.tela-7 .texto {width: 88%; float: right;}
.tela-7 span {color: var(--cor_1) !important;}

.tela-7 .imgs li{width: 25%; float: left;}

.tela-7 .tela-7a {width: 100%; display: table; padding: 40px 0; background-color: #f7f7f7;}
/*********************************************************/