/*********************************************************/
/*CSS MODE - MRPNET 2025
/*********************************************************/
/*CORES*/
:root {
  --cor_1: #015088;
  --cor_2: #2C2C2C;
  --cor_3: #F1F3F5;
  --cor_4: #545454;
}
/*********************************************************/
.botao {padding: 10px 30px; color: #fff; background-color: var(--cor_1); border-radius: 50px; font-weight: 500; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); font-family: var(--font_s);}
.botao:hover {background-color: var(--cor_2);}

span {color: var(--cor_1);}
p {line-height: 30px; font-weight: 400; color: var(--cor_2);}
h1 {font-size: clamp(1.2rem, 4vw, 2rem);}

.img1 {position: absolute; right: 0; top: 20%; width: 50%; height: 600px;}
/*********************************************************/
header {width: 100%; position: relative; padding: 10px 0; z-index: 1000; text-align: center; }
header .inicio {width: 100%; padding-bottom: 10px; border-bottom: 2px solid var(--cor_3);}
header .social li {display: inline-block; font-size: 0.9em; color: var(--cor_4); padding:0 15px; border-right: 2px solid var(--cor_3); font-weight: 500;}
header .social li:last-child { border-right: none; }
header .social i {color: var(--cor_1); padding-right: 5px;}
header .social a {color: var(--cor_1);}
header .social a:hover {color: var(--cor_2);}
header .logo {width: 120px; height: 100px; float: left; background-position: center;}
/*********************************************************/
.sobre {width: 100%; display: table; padding: 80px 0;}
.sobre h2 {color: var(--cor_1); font-family: var(--font_s); text-transform: uppercase; padding-left: 45px; font-size: 1em; background-image: url(../images/icon.png); background-repeat: no-repeat; background-position: left center;}
.sobre h1 {padding: 20px 0 40px 0; color: var(--cor_2); }
.sobre .direita {background-image: url(../images/bg-1.png); min-height: 700px; padding-top: 160px; background-size: 97%; background-position: right top;}
.sobre img {border-radius: 20px;}
/*********************************************************/
.servicos {width: 100%; display: table; padding: 60px 0; background-image: url(../banners/); text-align: center; background-image: url(../images/bg-2.jpg); background-attachment: fixed;}
.servicos h1 {padding-bottom: 40px;}
.servicos h2 {font-size: 1.2em; padding: 20px 0; color: var(--cor_2); font-family: var(--font_s);}
.servicos i {font-size: 5em; margin-top: -40px; color: var(--cor_1);}
.servicos p {line-height: 25px; font-size: 0.9em;}
.servicos .quadro {width: 31%; background-color: #fff; min-height: 260px; padding: 20px 15px; position: relative; display: inline-table; margin: 0 1% 40px 1% ; border-radius: 20px; border-top-left-radius: 60px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);}
.servicos .quadro:hover {background-color: #f9f9f9;}
/*********************************************************/
.chamada {width: 100%; padding: 30px 0; background-color: var(--cor_1); text-align: center;}
.chamada h3 {color: #fff; font-family: var(--font_s); font-size: 2em; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}
/*********************************************************/
footer {width: 100%; padding-top: 20px; display: table; background-image: url(../images/bg-rodape.jpg);}
footer h2 {font-size: 1em; color: #fff; padding-bottom: 10px;}
footer .sub li a{color: #fff; text-transform: uppercase; font-size: 0.8em; padding-bottom: 5px;} 
footer .sub li a:hover {color: yellow}
footer .dados li {color: #fff; padding-bottom: 10px;}
footer .social {padding-top: 25px;}
footer .social li {font-size: 1.6em; color: #fff;}
footer .social li:hover {color: yellow;}
footer .logo {width: 50%; float: left; background-position: center; height: 160px; background-repeat: no-repeat;}
footer .quadro {width: 25%; float: left;}
/*********************************************************/
.fim {width: 100%; display: table; text-align: center; padding: 20px 0;}
.fim p, a {color: #fff; font-size: 0.9em;}
.fim a:hover {color: yellow;}
/*********************************************************/
.navegacao {width: 100%; display: table; background-color: var(--cor_1); padding: 10px 0;}
.navegacao li {float: left; padding-right: 10px; color: #fff; font-family: var(--font_s);}
.navegacao a:hover {color: yellow;}
/*********************************************************/
.contato {width: 100%; display: table; padding-top: 80px; text-align: center; background-image: url(../images/background-site.jpg);}
.contato h1 {padding-bottom: 40px;}
.contato .dados li {width: 33.33%; float: left; padding: 0 40px; font-weight: 600; color: var(--cor_2);}
.contato .dados i {color: var(--cor_1); font-size: 4em; margin-bottom: 20px;}
.contato iframe {width: 100%; height: 500px;}
/*********************************************************/
.faq {width: 100%; display: table; padding: 60px 0; background-image: url(../images/bgcontato.webp); background-attachment: fixed;}
.faq h1 {padding-bottom: 40px; text-align: center;}
/*********************************************************/
.accordion {width: 100%; }
.accordion-item {margin-bottom: 30px; } 
.accordion-item:last-child { border-bottom: none;}
.accordion-header { width: 100%; padding: 20px; font-weight: 400; text-transform: uppercase; background: var(--cor_1); color: #fff; border: none; text-align: left; outline: none; cursor: pointer; font-size: 0.9em !important; transition: background-color 0.3s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border-radius: 10px; font-family: var(--font_s);}
.accordion-header:hover { background-color: var(--cor_4); color: #fff;}
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: var(--cinza); padding: 0; margin-bottom: 20px;}
.accordion-content .quadro {padding: 20px;}
.accordion-item.active .accordion-content { max-height: 200px;}

.accordion i {padding-right: 20px;}
.accordion .txt {padding: 40px; background-color: #fff; border-radius: 20px;}
.accordion .txt p {font-size: 1em; line-height: 30px; font-weight: 400; text-align: left;}
/*********************************************************/
.funciona {width: 100%; display: table; padding: 60px 0; position: relative;}
.funciona h1 {padding-bottom: 40px;}
/*********************************************************/