/* 
Theme Name: BR78 Log
Theme URI: https://www.br78log.com.br
Author: Direscópio Design
Author URI: https://www.direscopio.com.br
Description: Tema desenvolvido para a BR78 Log.
Version: 1.0
*/

/* =========================
   BASE / RESET GLOBAL
========================= */
html {
  scroll-behavior: smooth;
	overflow-x: hidden;
}

#top {
  margin: 0 !important;
  padding: 0 !important;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Archivo, sans-serif;
  color: #2c3e50;
  overflow-x: clip;
position: relative;
  width:100%;
}
p {
font-size:12pt;
line-height:160%;
margin:0px;
padding:10px 0px;
font-family: Archivo, sans-serif;
font-weight:300;
}
a {
text-decoration:none;
font-family: Archivo, sans-serif;
font-weight:300;
}
h1, h2, h3, h4, h5 {
font-family: Archivo, sans-serif;
font-weight:700;
padding:15px 0px;
margin:0px;
line-height:110%;
}
h1 {
font-size:3em;
}
h2 {
font-size:2.5em;
}
h3 {
font-size:2em;
}
h4 {
font-size:1.8em;
}
h5 {
font-size:1.2em;
}
header {
position: absolute;
top: 0;
width: 90%;
margin:0px 5%;
z-index: 10;
z-index:999;
}
.logo {
padding:40px 0px;
float:left;
width:15%;
}
.logo svg {
height:auto;
width:100%;
}
.logo svg path {
fill:#fff;
}
#open_menu_link, .menu-mobile {
	display:none;
}
.menu {
float:left;
width:64%;
margin:30px 3% 20px 3%;
border-bottom:solid 1px #fff;
padding:20px 0px;
text-align:center;
}
.menu ul {
list-style:none;
margin:0px;
padding:0px;
}
.menu li {
	display:inline-block;
	padding:0px;
	margin:0px;
}
.menu a {
text-decoration:none;
color:#fff;
text-transform:uppercase;
font-weight:700;
padding:0px 10px;
font-size:9pt;
letter-spacing:1px;
}
.menu a:hover {
color:#45C7FF;
}
.redes-sociais {
float:left;
width:15%;
margin-top:25px;
text-align:center;
}
.redes-sociais .botao {
display:inline-block;
font-size:8pt;
font-weight:700;
padding:5px 12px;
border-radius:20px;
background:#45C7FF;
color:#163766;
margin-bottom:15px;
}
.redes-sociais .botao:hover {
color:#45C7FF;
background:#163766;
}

.redes-sociais span {
vertical-align:middle;
}
.redes-sociais span svg {
height:12px;
width:auto;
margin-right:8px;
}
.redes-sociais span svg path {
fill:#163766;
}
.redes-sociais .botao:hover span svg path {
fill:#45C7FF;
}
.redes-sociais .icone {
display:inline-block;
margin-right:8px;
}
.redes-sociais .icone svg {
height:24px;
width:auto;
}
.redes-sociais .icone svg path {
fill:#fff;
}
.redes-sociais .icone:hover svg path {
fill:#45C7FF;
}
.slider {
position:relative;
min-height:120vh;
width:100%;
top:0px;
left:0px;
}
.slider .fundo .imagem {
background-size:cover;
background-position:center center;
min-height:120vh;
width:100%;
background-repeat:no-repeat;
position:absolute;
z-index:1;
}
.slider .mascara, .slider .mascara1 {
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:3;
}
.slider .mascara {
z-index:2;
background: #163766;
background: linear-gradient(180deg, rgba(22, 55, 102, 1) 0%, rgba(255, 255, 255, 0) 65%);
mix-blend-mode:multiply;
}
.slider .mascara1 {
background: #163766;
background: linear-gradient(90deg, rgba(22, 55, 102, 1) 0%, rgba(255, 255, 255, 0) 65%);
mix-blend-mode:multiply;
z-index:2;
}
.slider .titulo {
position:absolute;
width:30%;
top:40vh;
left:10%;
z-index:4;
}
.titulo h1 {
color:#fff;
}
.titulo h1 span {
color:#45C7FF;
}
.titulo p {
color:#fff;
letter-spacing:1px;
font-weight:200;
padding:0px;
}
.titulo .botao {
display:inline-block;
border:solid 2px #ffff;
padding:14px 37px;
text-transform:uppercase;
font-size:12pt;
font-weight:700;
border-radius:7px;
margin-top:30px;
color:#fff;
}
.titulo .botao:hover {
color:#45C7FF;
background:#163766;
border:solid 2px #163766;
}
.formulario {
position:absolute;
width:35%;
top:25vh;
right:10%;
overflow:hidden;
border-radius:20px;
z-index:5;
}
#wpforms-form-32 .formulario label {
	display:none;
}
.formulario .mascara {
background: #45628A;
background: linear-gradient(90deg, rgba(69, 98, 138, 1) 0%, rgba(18, 52, 99, 1) 100%);
top:0px;
left:0px;
width:100%;
height:100%;
opacity:0.9;
position:absolute;
mix-blend-mode:normal;
z-index:1;
}
.formulario .texto {
width:calc(100% - 120px);
margin:40px 60px;
position:relative;
z-index:2;
text-align:center;
color:#fff;
}
.formulario h5 {
color:#45C7FF;
}
.wpforms-container .wpforms-form .wpforms-field-label, .wpforms-container .wpforms-form .wpforms-field-sublabel, .wpforms-container .wpforms-form .wpforms-field-description, .wpforms-container .wpforms-form textarea, .wpforms-container .wpforms-form li, .wpforms-container .wpforms-form th {
    display:none;
}
#wpforms-form-32 input::placeholder {
  font-size:9pt;
}
#wpforms-form-32 input {
border:none;
margin:0px 0px 10px 0px;
padding:10px;
width:100%;
border-radius:7px;
}
#wpforms-form-32 button {
width:100%;
display:inline-block;
font-size:10pt;
font-weight:700;
padding:10px;
border-radius:7px;
background:#45C7FF;
color:#163766;
border:none;
cursor:pointer;
}
.wpforms-container .wpforms-field {
   padding:0px !important;
}
#wpforms-form-32 button:hover {
color:#45C7FF;
background:#163766;
}
.construcao {
width:100%;
z-index:3;
background:#fff;
position:relative;
}
.construcao .area {
float:left;
width:40%;
}
.construcao .descritivo {
float:left;
width:calc(60% - 200px);
padding:100px 100px 40px 100px;
}
.construcao .fundo-1, .construcao .fundo-2 {
float:left;
height:50vh;
width:100%;
background-size:cover;
background-position:left bottom;
background-repeat:no-repeat;
}
.construcao .fundo-1 {
clip-path: polygon(0 0, 100% 0, 81% 100%, 0% 100%);
margin-top:-100px;
}
.construcao .fundo-2 {
clip-path: polygon(0 0, 81% 0, 100% 100%, 0% 100%);

}
.area .num {
float:left;
background:#163766;
width:100%;
position:relative;
height:240px;
filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}
.num h3 {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
color:#fff;
font-size:1.5em;
font-weight:300;
}
.num h3 span {
color:#91D8F7;
font-weight:700;
font-size:1.8em;
}
.descritivo h2 {
margin-bottom:60px;
color:#163766;
}
.descritivo h2 span {
color:#45628A;
}
.descritivo p {
line-height:200%;
}
.modulos {
width:100%;
background:#163766;
padding:80px 0px 0px 0px;
text-align:center;
position:relative;
clear:both;
}
.modulos h2 {
color:#fff;
font-weight:400;
}
.modulos h2 strong {
color:#00AFEF;
}
.modulos h2 span {
display:inline-block;
padding:20px 0px;
vertical-align:middle;
margin-right:40px;
text-align:left;
}
.modulos svg path {
fill:#00AFEF;
}
.modulos svg {
height:50px;
width:auto;
}
.modulos .blocos {
width: 100%;
padding: 0px 0px 50px 0px;
background: #4B4B4D;
background: linear-gradient(0deg, rgba(75, 75, 77, 1) 86%, rgba(75, 75, 77, 0) 100%);
z-index: 2;
position:relative;
}
.modulos .blocos1 {
width: 90%;
display: flex;
margin:-200px 5% 50px 5%;
}
.modulos .box {
width:calc(100% / 4 - 20px);
margin:20px 10px;
filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
}
.modulos .blocos .box:nth-child(1) {
background:#163766;
color:#fff;
}
.modulos .blocos .box:nth-child(2) {
background:#45628A;
color:#fff;
}
.modulos .blocos .box:nth-child(3) {
background:#90B4C4;
color:#163766;
}
.modulos .blocos .box:nth-child(4) {
background:#CCD5DC;
color:#163766;
}
.recorte {
width:100%;
background:transparent;
}
.recorte img {
width:100%;
height:auto;
filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
position:relative;
z-index:1;
}
.box .miniatura {
height:40vh;
width:100%;
background-size:cover;
background-repeat: no-repeat;
background-size: auto 100%; /* mantém altura total */
background-position: 0 0;
}
.box .texto {
padding:40px 30px;
text-align:left;
}
.modulos .blocos .box .texto p {
margin-top:15px;
}
.modulos .blocos .box:nth-child(1) .texto p, .modulos .blocos .box:nth-child(2) .texto p {
border-top:solid 2px #90B4C4;
}
.modulos .blocos .box:nth-child(3) .texto p, .modulos .blocos .box:nth-child(4) .texto p {
border-top:solid 2px #163766;
}
.modulos h5 {
font-weight:400;
letter-spacing:0.5px;
}
.servicos1 {
  background: #45628A;
  color: #fff;
}

.servicos2 {
  background: #90B4C4;
  color: #163766;
}

.servicos3 {
  background: #CCD5DC;
  color: #163766;
}

.servicos4 {
  background: #163766;
  color: #fff;
}

.servicos5 {
  background: #45628A;
  color: #fff;
}
.servicos {
width:100%;
display:flex;
}
.bloco-g, .bloco-m {
float:left;
}
.bloco-g {
width:calc(60% - 200px);
margin:100px;
}
.bloco-m {
width:40%;
background-size:cover;
background-repeat: no-repeat;
background-size: auto 100%; /* mantém altura total */
background-position: 0 0;
}
/* Animação horizontal infinita */
@keyframes moverBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -80px 0; /* ajuste conforme largura da imagem */
    }
}
.chamada {
	width:100%;
	background-size:cover;
	background-position:center center;
	position:relative;
	color:#fff;
}
.chamada .mask {
	height:100%;
	width:100%;
	z-index:1;
	position:absolute;
	background:#000;
	opacity:0.8;
	mix-blend-mode:multiply;
}
.chamada .box {
	text-align:center;
	padding:100px 0px;
	width:50%;
	margin:0px 25%;
	position:relative;
	z-index:2;
}
.chamada .botao {
display:inline-block;
background:#45C7FF;
padding:14px 37px;
text-transform:uppercase;
font-size:12pt;
font-weight:700;
border-radius:7px;
margin-top:30px;
color:#fff;
}
.chamada .botao:hover {
color:#fff;
background:#163766;
}
footer {
    background: #163766;
    padding: 40px 0px;
    text-align: center;
    color: #fff;
    float: left;
    width: 100%;
}
footer svg {
	height:60px;
	width:auto;
}
footer svg path {
	fill:#fff;
}
footer p {
	padding:20px 0px 0px 0px;
}
.whatsapp-button {
	position:fixed;
	right:20px;
	bottom:20px;
	background:#1BD741;
	padding:10px 25px;
	text-align:center;
	color:#fff;
	z-index:998;
	border-radius:7px;
}
.whatsapp-button:hover {
	background:#078721;
}
.whatsapp-button svg {
	height:30px;
	width:auto;
	margin-right:10px;
	vertical-align:middle;
}
.whatsapp-button svg path {
	fill:#fff;
}
@media all and (max-width: 1100px) {
	header .menu, header .redes-sociais {
		display:none;
	}
	.logo {
		width: 50%;
	}
	.slider {
		min-height:1px;
	}
	.slider .fundo {
		padding-top:20vh;
		padding-bottom:40px;
	}
	.slider .fundo .imagem {
		min-height:100%;
		height:100%;
		top:0px;
		left:0px;
	}
	.slider .titulo {
		width: 80%;
		top: auto;
		left: auto;
		margin:0px 10% 40px 10%;
		text-align:center;
		position:relative;
	}
	.formulario {
		margin:0px 10% 0px 10%;
		width: 80%;
		top: auto;
		right: auto;
		position:relative;
	}
	.construcao .area {
		width: 100%;
	}
	.construcao .fundo-1, .construcao .fundo-2 {
		height: 40vh;
		width: 100%;
	}
	.construcao .fundo-1, .construcao .fundo-2 {
		clip-path: none;
		margin-top: 0px;
	}
	.construcao .descritivo {
		width: 100%;
		padding: 60px 10%;
	}
	.modulos h2 {
		width:80%;
		margin:0 10%;
	}
	.modulos h2 span {
		display: block;
		padding: 10px 0px;
		vertical-align: middle;
		margin-right: 0px;
		text-align: center;
	}
	.modulos .blocos1 {
		display: block;
	}
	.modulos .box {
		width: 100%;
		margin: 20px 0px;
		filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
		text-align:center;
	}
	.servicos {
		display: block;
		float:left;
	}
	.bloco-g, .bloco-m {
		width: 100%;
		margin:0px;
		padding: 60px 10%;
	}
	.bloco-m {
		min-height: 50vh;
	}
	.chamada {
		width: 100%;
		float: left;
	}
	.chamada .box {
		width: 80%;
		margin: 0px 10%;
	}
}