:root {
--color-red: #d62d0d;
--color-white: #ffffff;
--color-white-2: #dedede;
--color-gray: #828282;
--color-gray-2: #484848;
--color-gray-3: #707070;
--color-gray-4: #858585;
--color-orange: #eea600;
--color-black-2: #08141a;
--color-black-3: #04090c;
--color-yellow: #fcc443;
--color-cta-hover: #afafc3;
}
@font-face {
font-family: 'Open Sans';
src: url(//varsystemsengenharia.com.br/wp-content/themes/varsystem/fonts/opensans/OpenSans-Regular.ttf);
}
@font-face {
font-family: 'Rubik';
src: url(//varsystemsengenharia.com.br/wp-content/themes/varsystem/fonts/rubik/Rubik-SemiBold.ttf);
font-weight: 600;
}
@font-face {
font-family: 'Rubik';
src: url(//varsystemsengenharia.com.br/wp-content/themes/varsystem/fonts/rubik/Rubik-Regular.ttf);
font-weight: 400;
}
@font-face {
font-family: 'Rubik';
src: url(//varsystemsengenharia.com.br/wp-content/themes/varsystem/fonts/rubik/Rubik-Light.ttf);
font-weight: 300;
}
@font-face {
font-family: 'Open Sans Bold';
src: url(//varsystemsengenharia.com.br/wp-content/themes/varsystem/fonts/opensans/OpenSans-Bold.ttf);
}
* {
}
html {
font-size: 62.5%; }
body {
font-size: 1.4rem; }
.main-wrapper {
max-width: 1920px;
margin: 0 auto;
overflow: hidden;
}
a {
font-size: 1.6rem;
color: var(--cor-azul1);
}
a:hover {
transition: all 0.3s;
}
div {
font-family: 'open sans', arial, sans-serif;
font-size: 1.6rem;
}
p {
color: var(--color-white);
font-family: 'open sans', arial, sans-serif;
font-size: 1.6rem;
line-height: 1.5;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
margin: 0;
}
h1 {
font-size: 4rem;
}
h2 {
font-size: 3rem;
}
h3 {
font-size: 2.2rem;
}
h4 {
color: var(--color-gray);
font-size: 1.8rem;
}
h5 {
font-size: 1.6rem;
}
ul {
padding-left: 20px;
}
ul li,
ol li {
color: var(--color-gray);
font-size: 1.6rem;
}
li + li { }
img,
iframe {
max-width: 100%;
height: auto;
}
.hidden {
display: none !important;
}  .container {
width: 100%;
max-width: 1270px !important;
padding: 0;
margin: 0 auto;
left: 0 !important;
}
.custom-container {
width: 1270px;
margin: 0 auto;
} .visible-xs {
display: none !important;
}
.hidden-xs {
display: block !important;
}
.visible-lg {
display: none !important;
}
.hidden-lg {
display: block !important;
} [class^='gap'] {
display: block;
clear: both;
}
.gap10 {
height: 10px;
}
.gap20 {
height: 20px;
}
.gap30 {
height: 30px;
}
.gap40 {
height: 40px;
}
.gap50 {
height: 50px;
}
.gap60 {
height: 60px;
} .sub h1,
.title h1 {
font-size: 4rem;
color: var(--color-red);
}
.title p,
.sub h2,
.sub p { }
.sub h2 + p {
color: var(--color-gray);
font-size: 1.8rem;
margin-top: 20px;
}
.title.big h2,
.sub.big h2 {
font-size: 4rem;
}
.title h2,
.sub h2 {
color: var(--color-red);
font-size: 3.2rem;
font-family: 'Rubik';
font-weight: 600;
}
.title h3,
.sub h3,
.title h3 + p,
.sub h3 + p {
text-align: left;
}
.title strong,
.sub strong { } .cta a {
background-color: var(--color-red);
border-radius: 18px;
border: 1px solid var(--color-red);
color: var(--color-white);
display: inline-block;
font-size: 1.8rem;
padding: 10px 20px;
text-align: center;
line-height: 1;
transition: all 0.3s;
text-decoration: none;
font-family: 'Rubik';
font-weight: 400;
}
.cta.cta-servicos a {
width: 234px;
}
.cta a:hover {
background: var(--color-cta-hover);
border-color: var(--color-cta-hover);
}
.cta.alt a {
background-color: var(--color-orange);
border: 1px solid var(--color-orange);
color: var(--color-white);
}
.cta.alt a:hover {
background-color: transparent;
border: 1px solid var(--color-white);
color: var(--color-white);
} .video-wrapper {
}
.video-wrapper a:hover {
opacity: 0.8;
} .swiper-slide {
display: flex;
justify-content: center;
}
.swiper-wrapper {
text-align: center;
}
.swiper-button-prev,
.swiper-button-next {
color: #dedede !important;
opacity: 0.5;
} .bg-cinza {
background-color: #f5f5f5;
}
.bg-branco {
background-color: #fff;
} .custom-list {
}
.custom-list ul {
padding-left: 0;
}
.custom-list li + li {
margin-top: 15px;
}
.custom-list li {
color: var(--color-gray);
font-size: 1.6rem;
font-weight: 400;
list-style: none;
max-width: 95%;
padding-left: 20px;
position: relative;
}
.custom-list li:before { border-radius: 100%;
content: '';
display: inline-block;
height: 7px;
width: 7px;
position: absolute;
left: 0;
top: 10px;
} #faixa_topo {
background-color: var(--color-red);
width: 100%;
height: 40px;
padding: 5px 0;
display: flex;
align-items: center;
justify-content: center;
}
#faixa_topo .faixa_topo_container {
width: 100%;
max-width: 1270px;
display: flex;
align-items: center;
justify-content: space-between;
}
#faixa_topo .faixa_topo_container .faixa_topo_content {
display: flex;
flex-direction: row;
gap: 15px;
}
#faixa_topo .faixa_topo_container .faixa_topo_content .faixa_topo_single {
display: flex;
align-items: center;
gap: 8px;
color: var(--color-white-2);
}
#faixa_topo .faixa_topo_container .faixa_topo_content .faixa_topo_single:nth-child(2) {
border-left: 1px solid var(--color-white);
border-right: 1px solid var(--color-white);
padding: 0 15px;
}
#faixa_topo .faixa_topo_container .faixa_topo_content .faixa_topo_single i {
font-size: 2.2rem;
}
#faixa_topo .faixa_topo_container .faixa_topo_content .faixa_topo_single .fa-whatsapp {
font-size: 1.9rem;
}
#faixa_topo .faixa_topo_container .faixa_topo_content .faixa_topo_single .fa-envelope-o {
font-size: 1.6rem;
}
#faixa_topo .faixa_topo_container .faixa_topo_content .faixa_topo_single p {
font-size: 1.4rem;
}
#faixa_topo .faixa_topo_container .faixa_topo_content .faixa_topo_single a {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
text-decoration: none;
}
#faixa_topo .faixa_topo_container .faixa_right {
color: var(--color-white-2);
gap: 20px;
}
#faixa_topo .faixa_topo_container .faixa_right a {
font-size: 2.2rem;
}
#header {
background-color: transparent;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9997;
}
#header-wrapper {
display: flex;
align-items: center;
}
#header-wrapper > .container-fluid {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
width: 1270px;
}  @keyframes hideHeader {
from {
background-color: transparent;
opacity: 1;
height: 156px;
}
to {
opacity: 0;
height: 0;
}
} @keyframes showHeader {
from {
opacity: 0;
height: 0;
}
to {
background-color: var(--color-red);
opacity: 1;
height: 136px;
}
} #header-wrapper {
animation-fill-mode: forwards;
animation: unset;
height: 136px;
transition: all 0.3s ease;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
#header-wrapper .colorido,
#header-wrapper .branco {
display: none;
}
#header-wrapper.header-scroll {
background-color: transparent !important;
margin-top: 60px;
} #header-wrapper.hide-header {
animation: hideHeader 0.3s forwards;
} #header-wrapper:not(.hide-header):not(.header-scroll) {
animation: showHeader 0.3s forwards;
}
#header-wrapper:not(.hide-header):not(.header-scroll) li.current_page_item {
border-bottom: 2px solid var(--color-white) !important;
}
#header-wrapper:not(.hide-header):not(.header-scroll) li:hover {
border-bottom: 2px solid var(--color-white) !important;
}
#header-wrapper:not(.hide-header):not(.header-scroll) li .sub-menu li:hover {
border: 0 !important;
}
#header-wrapper.header-scroll .branco {
display: block;
}
#header-wrapper:not(.header-scroll) .colorido {
display: block;
}
#header-wrapper:not(.header-scroll) #menu-superior ul li a {
color: var(--color-white);
} #whatsapp-flut {
position: fixed;
right: 30px;
bottom: 30px;
z-index: 999;
}
#whatsapp-flut a {
display: flex;
width: 50px;
height: 50px;
}
#whatsapp-flut a:hover {
animation: pulse 1.5s infinite;
}
#whatsapp-flut a img {
width: 50px;
height: auto;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
} #menu-superior-container {
position: relative;
}
#menu-superior-wrapper {
}
#menu-superior-wrapper nav#menu-superior {
background-color: transparent;
padding: 0px 0;
width: 100%;
}
#menu-superior-wrapper nav#menu-superior ul {
display: flex;
align-items: center;
margin: 0;
gap: 85px;
}
#menu-superior-wrapper nav#menu-superior ul li {
list-style: none;
position: relative;
transition: all ease 0.3s;
border-bottom: 2px solid transparent;
}
#menu-superior-wrapper nav#menu-superior ul li.current_page_item {
border-bottom: 2px solid var(--color-red);
}
#menu-superior-wrapper nav#menu-superior ul li a {
color: var(--color-white);
display: block;
font-size: 1.6rem;
padding: 10px 0;
text-decoration: none;
text-transform: uppercase;
font-family: 'Rubik';
font-weight: 300;
}
#menu-superior-wrapper nav#menu-superior ul li:hover {
border-bottom: 2px solid var(--color-red);
}
#menu-superior ul li a:hover,
#menu-superior ul li.current-menu-item a {
color: var(--color-red);
text-decoration: none;
} #menu-superior ul.sub-menu { background-color: var(--color-white);
box-shadow: 0px 3px 6px #00000029;
display: none !important;
height: auto;
min-width: 223px;
padding: 0;
position: absolute;
top: 40px;
z-index: 2;
flex-direction: column;
gap: 0 !important;
}
#menu-superior ul.sub-menu li {
border-bottom: 0 !important;
width: 100%;
max-width: 100%;
margin: 0;
}
#menu-superior ul.sub-menu li a {
border-bottom: 1px solid #efefef;
color: var(--color-gray-2) !important;
display: block;
font-size: 1.5rem !important;
font-weight: normal;
padding: 9px 10px 9px 20px !important;
}
#menu-superior ul.sub-menu li:hover {
background-color: #efefef;
}
#menu-superior .sub-menu li:last-child a {
border-bottom: none;
}
#menu-superior .sub-menu li a:after {
display: none;
}
#menu-superior .sub-menu li a:hover,
#menu-superior .sub-menu li.current-menu-item a {
color: #fff;
background-color: var(--cor-azul1);
}
#menu-superior li:hover .sub-menu {
display: block !important;
} #menu-mobile {
cursor: pointer;
height: 50px;
float: right;
margin-top: 9px;
overflow: hidden;
position: relative;
width: 34px;
z-index: 9999;
}
#menu-mobile span {
height: 3px;
background-color: #fff;
display: block;
width: 40px;
transition: all 0.3s ease;
margin: 6px 0;
}
#menu-mobile:hover span {
}
#menu-mobile:hover .span2 {
width: 80%;
}
#menu-mobile.close {
opacity: 1;
}
#menu-mobile.close .span1 {
transform: rotate(-45deg);
position: absolute;
top: 10px;
transition: all 1s ease;
}
#menu-mobile.close .span2 {
width: 0;
transition: all 0.3s ease;
}
#menu-mobile.close .span3 {
transform: rotate(45deg);
position: absolute;
top: 10px;
transition: all 1s ease;
}
#menu-mobile.close [class^='span'] {
background-color: var(--color-red);
} #menu-mobile-wrapper {
background-color: #fff;
position: fixed;
top: 0;
left: 0;
width: 100%;
opacity: 0;
height: auto;
display: none;
padding: 0 20px 0 20px;
transition: all 0.3s linear;
z-index: 9998;
}
#menu-mobile-wrapper.open {
opacity: 1;
transition: all 0.3s linear;
} #menu-mobile-wrapper ul {
margin: 0;
padding: 0;
padding-top: 130px;
}
#menu-mobile-wrapper li {
background-color: #fff;
list-style: none;
padding: 0;
margin: 0;
text-align: left;
line-height: 1.3;
}
#menu-mobile-wrapper li a {
border-top: 1px solid #c4c6c8;
color: var(--color-red);
display: block;
font-size: 1.6rem;
font-weight: bold;
line-height: 1;
margin: 5px 0;
padding: 10px 0px;
text-align: left;
text-decoration: none;
}
#menu-mobile-wrapper li:not(.menu-item-has-children) a { }
#menu-mobile-wrapper li:first-child a {
border-top: none;
}
#menu-mobile-wrapper li a:hover,
#menu-mobile-wrapper li:hover,
#menu-mobile-wrapper li a:active,
#menu-mobile-wrapper li:active,
#menu-mobile-wrapper li a:focus,
#menu-mobile-wrapper li:focus {
background: transparent;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
transition: all 0.6s;
} #menu-mobile-wrapper ul.sub-menu {
border-top: none;
border-bottom: none;
margin-left: 0;
position: relative;
visibility: unset;
z-index: 1;
}
#menu-mobile-wrapper li.menu-item-has-children {
}
#menu-mobile-wrapper .menu-item-has-children a {
padding-bottom: 0;
}
#menu-mobile-wrapper li > ul {
padding-top: 0;
padding-left: 0;
}
#menu-mobile-wrapper li > ul.sub-menu li {
}
#menu-mobile-wrapper li > ul.sub-menu li a { border-bottom: none;
font-size: 1.5rem;
font-weight: normal;
padding: 10px 15px 4px 15px;
max-width: 100%;
}
#menu-mobile-wrapper li > ul.sub-menu li a:hover,
#menu-mobile-wrapper li > ul.sub-menu li a:focus,
#menu-mobile-wrapper li > ul.sub-menu li a:active { }
#menu-mobile-wrapper li:hover > ul.sub-menu {
display: block;
}   .cover-dark {
display: none;
background: #fff;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 998;
} #footer {
max-width: 1920px;
margin: 0 auto;
}
#footer .footer-container {
background-color: var(--color-black-2);
padding: 50px 0;
}
#footer .footer-container .footer-content {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 100px;
}
#footer .footer-container .footer-logo {
display: flex;
flex-direction: column;
gap: 30px;
max-width: 326px;
}
#footer .footer-container .footer-logo p {
color: var(--color-white-2);
font-size: 1.3rem;
}
#footer .footer-container .footer-logo .footer-socials {
display: flex;
gap: 16px;
}
#footer .footer-container .footer-menu {
padding-top: 50px;
}
#footer .footer-container .footer-menu h4 {
font-family: 'Rubik';
color: var(--color-white-2);
font-size: 1.5rem;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 35px;
}
#footer .footer-container .footer-menu .menu {
list-style: none;
padding: 0;
}
#footer .footer-container .footer-menu .menu li:not(:last-child) {
margin-bottom: 4px;
}
#footer .footer-container .footer-menu .menu li a {
text-decoration: none;
color: var(--color-white-2);
font-size: 1.3rem;
}
#footer .footer-container .footer-menu .footer-menu-single {
display: flex;
gap: 10px;
max-width: 188px;
align-items: start;
overflow-wrap: anywhere;
}
#footer .footer-container .footer-menu .footer-menu-single:not(:last-child) {
margin-bottom: 35px;
}
#footer .footer-container .footer-menu .footer-menu-single img {
padding-top: 4px;
}
#footer .footer-container .footer-menu .footer-menu-single p {
color: var(--color-white-2);
font-size: 1.3rem;
}
#footer .footer-container .footer-menu.footer-menu-last .footer-menu-single:first-child {
padding-top: 50px;
}
#footer .rodape {
background-color: var(--color-black-3);
text-align: center;
padding: 10px 0;
}
#footer .rodape p {
color: #8590a1;
font-size: 1.3rem;
}
#footer .rodape a {
text-decoration: none;
font-size: 1.3rem;
}   .wpcf7 {
} .wpcf7 .row {
justify-content: space-between;
}
.wpcf7 .row .col-sm-6 {
max-width: 50%;
}
.wpcf7 .form-group {
margin-bottom: 17px;
}
.wpcf7 br {
display: none;
}
.wpcf7 h4 {
font-size: 35px;
font-weight: 900;
margin-bottom: 25px;
}
.wpcf7 span { font-size: 15px;
margin: 0;
}
.wpcf7 .row + .sub {
margin-top: 20px;
}
.wpcf7 .texto {
margin-bottom: 30px;
}
.wpcf7 label {
display: block;
font-size: 15px;
}
.wpcf7 ::placeholder {
color: var(--color-gray);
}
.wpcf7 input[type='text'],
.wpcf7 input[type='email'],
.wpcf7 input[type='number'],
.wpcf7 input[type='phone'],
.wpcf7 textarea {
background-color: #f8f8f8;
border: 1px solid #bbbbbb;
border-radius: 5px;
font-size: 15px;
color: var(--color-gray-4);
height: 45px;
padding: 16px;
width: 100%;
}
.wpcf7 textarea {
height: 210px;
padding: 10px;
}
.wpcf7 select {
background-color: transparent;
border: 1px solid #a7a9ac;
border-radius: 4px;
color: var(--cor-padrao);
height: 36px;
padding: 0px 10px;
width: 100%;
}
.wpcf7 .wpcf7-list-item {
display: block;
}
.wpcf7 .wpcf7-list-item span {
font-size: 18px;
}
.wpcf7 input[type='checkbox'],
input[type='radio'] {
margin-right: 10px;
margin-top: 5px;
}
.wpcf7 input[type='submit'],
.wpcf7 button {
background-color: var(--color-red);
border: 1px solid var(--color-red);
margin: 23px 0;
border-radius: 20px;
color: var(--color-white);
cursor: pointer;
display: inline-block;
width: 146px;
height: 40px;
transition: all 0.3s;
font-family: 'Rubik';
font-size: 1.8rem;
font-weight: 300;
float: right;
}
.wpcf7 input[type='submit']:hover,
.wpcf7 button:hover {
background: transparent;
background: var(--color-cta-hover);
border-color: var(--color-cta-hover);
color: var(--color-white);
text-decoration: none;
}
.wpcf7 .wpcf7-spinner {
display: block;
} .wpcf7 input[type='text'].wpcf7-not-valid,
.wpcf7 input[type='email'].wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
background: #ffe1e2;
color: #ff585d;
}
.wpcf7 div.wpcf7-validation-errors,
.wpcf7 div.wpcf7-mail-sent-ok {
background: #fff;
border: 2px solid #d9d9d9;
color: #398f14;
font-size: 12px;
padding: 7px 15px;
}
.wpcf7-form .wpcf7-response-output {
border-radius: 10px;
border-color: #fff;
background: #fff;
clear: both;
font-size: 14px;
margin: 0 !important;
padding: 12px 15px !important;
}
.wpcf7 form.sent .wpcf7-response-output { background-color: #dff2bf;
border: 0;
color: #4f8a10;
}
.wpcf7 form.invalid .wpcf7-response-output { background-color: #ffe1e2;
border: 0;
color: #ff585d;
}
.wpcf7 span.wpcf7-not-valid-tip {
color: #ff585d;
font-weight: bold;
font-size: 12px;
margin-top: 5px;
} .grecaptcha-badge {
visibility: hidden;
} #hero_home .title-home {
display: flex;
flex-direction: column;
gap: 20px;
align-items: start;
justify-content: center;
margin: 0 auto;
padding-top: 100px;
height: 100%;
width: 100%;
max-width: 1270px;
}
#hero_home .title-home h1 {
max-width: 623px;
color: var(--color-white);
font-family: 'Rubik';
font-size: 4rem;
font-weight: 600;
}
#hero_home .title-home p {
max-width: 484px;
color: var(--color-white);
font-size: 2rem;
}
#home-quemsomos {
width: 100% !important;
max-width: 1020px !important;
left: 0 !important;
margin: 0 auto;
padding: 55px 0 75px;
display: flex;
align-items: stretch;
}
#home-quemsomos .home-quemsomos-single .title h2 {
color: var(--color-red);
font-size: 3.2rem;
font-family: 'Rubik';
font-weight: 600;
}
#home-quemsomos .home-quemsomos-single .text {
margin: 30px 0 35px;
max-width: 404px;
}
#home-quemsomos .home-quemsomos-single .text p {
color: var(--color-gray-2);
font-size: 1.6rem;
margin-bottom: 20px;
}
#home-servicos {
background-color: #f2f2f2;
padding: 70px 0 100px;
}
#home-servicos .nossos-servicos-container {
margin-top: 70px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 70px;
grid-row-gap: 70px;
}
#home-servicos .nossos-servicos-container .nossos-servicos-single {
display: flex;
align-items: center;
flex-direction: column;
text-align: center;
width: 270px;
}
#home-servicos .nossos-servicos-container .nossos-servicos-single a:hover {
opacity: 0.8;
}
#home-servicos .nossos-servicos-container .nossos-servicos-single img {
border-radius: 100%;
width: 188px;
height: 188px;
margin-bottom: 20px;
}
#home-servicos .nossos-servicos-container .nossos-servicos-single h3 {
color: var(--color-gray-2);
font-family: 'Rubik';
font-weight: 600;
font-size: 2.6rem;
line-height: 1;
height: 63px;
margin-bottom: 10px;
}
#home-servicos .nossos-servicos-container .nossos-servicos-single p {
color: var(--color-gray-3);
font-size: 1.8rem;
line-height: 1.3;
}
.fale-conosco-container .fale-conosco-single p.mail-contato {
word-break: break-all;
}
#home-servicos .nossos-servicos-container .nossos-servicos-single p.mail-contato {
background-color: darkblue;
}
#home-clientes {
padding: 100px 0;
}
#home-clientes .swiper {
margin-top: 70px;
}
#home-bloco-contato {
}
#home-bloco-contato .home-bloco-contato-container {
padding: 0;
}
#home-bloco-contato .home-bloco-contato-container .home-bloco-contato-text {
display: none;
}
#cta-contato {
background: linear-gradient(180deg, rgba(214, 45, 13, 1) 0%, rgba(139, 29, 8, 1) 100%);
padding: 70px 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#cta-contato h3 {
font-size: 3.2rem;
color: var(--color-white);
font-family: 'Rubik';
font-weight: 600;
margin-bottom: 35px;
}
#cta-contato p {
font-size: 1.8rem;
color: var(--color-white);
font-family: 'Rubik';
font-weight: 400;
margin-bottom: 35px;
}
#cta-contato .cta-faixa-entre-contato {
}
#cta-contato .cta-faixa-entre-contato a {
width: 260px;
} .internas-header {
height: 310px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 60px;
background-position: center;
}
.internas-header .page-title h1 {
color: var(--color-white);
font-size: 4rem;
font-family: 'Rubik';
font-weight: 600;
}
.internas {
padding: 80px 0 0;
}
.internas .text-clientes p {
color: var(--color-gray-2);
font-size: 1.8rem;
margin-bottom: 60px;
}
.internas .slider-padding {
padding: 40px 0;
}  #quem-somos {
padding-bottom: 80px;
width: 100%;
max-width: 1040px;
margin: 0 auto;
}
#quem-somos .title {
width: 100%;
max-width: 432px;
}
#quem-somos .text {
width: 100%;
max-width: 532px;
margin: 35px 0 20px;
}
#quem-somos .text p {
color: var(--color-gray-2);
margin-bottom: 35px;
}
#quem-somos-mvv {
width: 100% !important;
max-width: 1040px !important;
margin: 0 auto;
left: 0 !important;
padding-bottom: 80px;
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 30px;
}
#quem-somos-mvv::after,
#quem-somos-mvv::before {
display: none;
}
#quem-somos-mvv .wpb_single_image {
min-height: 92px;
}
#quem-somos-mvv .mvv-single {
width: 320px;
padding: 35px 25px;
background-color: var(--color-white);
border: 1px solid var(--color-gray-3);
border-radius: 10px;
transition: all 0.3s ease;
}
#quem-somos-mvv .mvv-single .text {
margin: 0;
}
#quem-somos-mvv .mvv-single:hover {
background-color: #f2f2f2;
}
#quem-somos-mvv .mvv-single h3 {
color: var(--color-gray-2);
font-size: 2.6rem;
font-family: 'Rubik';
font-weight: 600;
padding: 30px 0 0 0;
}
#quem-somos-mvv .mvv-single p {
color: var(--color-gray-2);
}
#quemsomos-numbers {
background-color: #f2f2f2;
}
#quemsomos-numbers #quemsomos-number-content {
width: 100% !important;
max-width: 1270px !important;
left: 0 !important;
margin: 0 auto;
padding: 70px 0;
}
#quemsomos-numbers #quemsomos-number-content .quemsomos-numbers-single .numbers-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#quemsomos-numbers #quemsomos-number-content .quemsomos-numbers-single h4 {
font-size: 6rem;
color: var(--color-red);
font-family: 'Rubik';
font-weight: 600;
margin-bottom: 16px;
}
#quemsomos-numbers #quemsomos-number-content .quemsomos-numbers-single p {
font-size: 2.4rem;
color: var(--color-gray-2);
font-family: 'Rubik';
font-weight: 600;
width: 266px;
}
@media screen and (max-width: 1023px) {
#quemsomos-numbers #quemsomos-number-content .quemsomos-numbers-single p br {
display: none;
}
} #clientes-logo {
width: 1123px;
margin: 0 auto;
padding: 70px 0 80px;
display: flex;
align-items: center;
justify-content: center;
gap: 80px;
flex-wrap: wrap;
} #section-servicos {
}
.servicos-box { align-items: stretch;
}
.servicos-box .servicos-img {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.servicos-box .servicos-projetos-left {
background-image: url(https://varsystemsengenharia.com.br/wp-content/uploads/2024/08/servicos-projetos.jpg);
}
.servicos-box .servicos-sprinklers {
background-image: url(https://varsystemsengenharia.com.br/wp-content/uploads/2024/08/servicos-sprinklers.jpg);
}
.servicos-box .servicos-diluvio {
background-image: url(https://varsystemsengenharia.com.br/wp-content/uploads/2024/08/servicos-sistema-de-diluvio.jpg);
}
.servicos-box .servicos-espuma {
background-image: url(https://varsystemsengenharia.com.br/wp-content/uploads/2024/08/servicos-sistema-de-espuma.jpg);
}
.servicos-box .servicos-paineis {
background-image: url(https://varsystemsengenharia.com.br/wp-content/uploads/2024/08/servicos-paineis-eletricos.jpg);
}
.servicos-box .servicos-gas {
background-image: url(https://varsystemsengenharia.com.br/wp-content/uploads/2024/08/servicos-sistema-de-co2.jpg);
}
.servicos-box .servicos-novec {
background-image: url(https://varsystemsengenharia.com.br/wp-content/uploads/2024/08/servicos-sistema-de-gas-novec.jpg);
}
.servicos-box .servicos-manutencao {
background-image: url(https://varsystemsengenharia.com.br/wp-content/uploads/2024/08/servicos-manutencao.jpg);
}
.servicos-box .servicos-box-right {
background-color: #ececec;
padding: 90px 0 90px 122px !important;
}
.servicos-box .servicos-box-left {
background-color: #484848;
padding: 90px 122px 90px 0 !important;
}
.servicos-box .servicos-box-left > .vc_column-inner .wpb_wrapper {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.servicos-box .servicos-box-left > .vc_column-inner .wpb_wrapper .title,
.servicos-box .servicos-box-left > .vc_column-inner .wpb_wrapper .text {
display: flex;
justify-content: end;
}
.servicos-box .servicos-box-left > .vc_column-inner .wpb_wrapper .cta {
display: flex;
width: 404px;
}
.servicos-box .servicos-box-right .title h2 {
color: var(--color-red);
font-size: 3.2rem;
font-family: 'Rubik';
font-weight: 600;
}
.servicos-box .servicos-box-right .text p {
color: var(--color-gray-2);
font-size: 1.6rem;
width: 404px;
padding-bottom: 15px;
}
.servicos-box .servicos-box-left .title h2 {
color: var(--color-yellow);
font-size: 3.2rem;
font-family: 'Rubik';
font-weight: 600;
width: 404px;
}
.servicos-box .servicos-box-left .text p {
color: var(--color-white);
font-size: 1.6rem;
width: 404px;
padding-bottom: 15px;
} #fale-conosco {
padding-bottom: 80px;
}
#fale-conosco.container-contato {
max-width: 1050px !important;
left: 0 !important;
margin: 0 auto;
width: 100% !important;
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
}
#fale-conosco.container-contato::after,
#fale-conosco.container-contato::before {
display: none;
}
#fale-conosco .fale-conosco-left {
}
#fale-conosco .fale-conosco-left .text {
width: 434px;
margin-bottom: 100px;
}
#fale-conosco .fale-conosco-left .text p {
color: var(--color-gray-2);
font-size: 1.8rem;
width: 255px;
}
#fale-conosco .fale-conosco-left .text p:first-child {
margin-bottom: 35px;
}
.fale-conosco-container {
display: flex;
flex-direction: column;
gap: 35px;
}
.fale-conosco-container .fale-conosco-single {
display: flex;
gap: 15px;
align-items: start;
}
.fale-conosco-container .fale-conosco-single img {
padding-top: 5px;
}
.fale-conosco-container .fale-conosco-single p {
color: var(--color-gray-2);
font-size: 1.8rem;
line-height: 1.3;
width: 230px;
}
#maps-container {
min-height: auto;
margin: 0;
}
#maps-container > .wpb_column {
margin: 0;
padding: 0;
}
#maps-container #maps-contato {
margin: 0;
}
#maps-container #maps-contato > .wpb_wrapper {
padding: 0;
margin: 0;
}
#maps-container #maps-contato > .wpb_wrapper > .wpb_map_wraper {
padding-bottom: 27%;
} .internas-404 {
height: 176px;
}
.internas-404-body {
padding: 80px 0;
}
body.error404 .page-title-wrapper {
background-image: url(//varsystemsengenharia.com.br/wp-content/themes/varsystem/images/bg/header-sobre-nos.png);
}
#pg-404 { text-align: center;
max-width: 800px;
margin: 0 auto;
}
#pg-404 .ops {
color: var(--color-black-2);
font-size: 3.2rem;
font-weight: bold;
margin-bottom: 2rem;
}
#pg-404 h1 {
color: var(--color-red);
margin-bottom: 2rem;
}
#pg-404 h3 {
font-size: 1.8rem;
font-weight: 500;
margin-bottom: 5rem;
}
#pg-404 .cta a {
text-decoration: none;
}   @media screen and (max-width: 1536px) {
#home-servicos .nossos-servicos-container .nossos-servicos-single {
width: 100%;
}
} @media screen and (max-width: 1440px) {
} @media screen and (max-width: 1366px) { #faixa_topo {
padding: 5px 50px;
}
#hero_home .title-home {
padding: 70px 50px 0;
}
#header-wrapper > .container-fluid,
#home-servicos .nossos-servicos-container {
padding: 0 50px;
}
#home-quemsomos {
padding: 100px 50px;
}
#home-clientes {
padding: 100px 50px;
}
#footer .footer-container {
padding: 50px;
} .servicos-box .servicos-box-right {
padding: 90px 0 90px 90px !important;
} #clientes-logo {
justify-content: space-between;
}
} @media screen and (max-width: 1280px) {
#footer .footer-container .footer-content {
gap: 50px;
flex-wrap: wrap;
}
#home-servicos .nossos-servicos-container .nossos-servicos-single img {
width: 158px;
height: 158px;
}
#menu-superior-wrapper nav#menu-superior ul {
gap: 45px;
} #quem-somos {
padding: 0 50px 80px;
}
#quem-somos-mvv {
max-width: 100% !important;
padding: 0 50px 80px;
justify-content: space-evenly;
}
#quemsomos-numbers #quemsomos-number-content {
max-width: 100% !important;
padding: 70px 50px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
#quemsomos-numbers #quemsomos-number-content::after,
#quemsomos-numbers #quemsomos-number-content::before {
display: none;
}
#quemsomos-numbers #quemsomos-number-content .quemsomos-numbers-single h4 {
font-size: 4rem;
}
#quemsomos-numbers #quemsomos-number-content .quemsomos-numbers-single p {
font-size: 1.8rem;
width: 100%;
} .servicos-box .servicos-box-right {
padding-left: 50px !important;
}
.servicos-box .servicos-box-left {
padding-right: 50px !important;
} #clientes-logo {
width: 100%;
padding: 70px 50px 80px;
gap: 50px;
} #fale-conosco.container-contato {
max-width: 100% !important;
padding: 0 50px 50px;
gap: 30px;
justify-content: space-between;
}
#fale-conosco .fale-conosco-left {
width: 30%;
}
#fale-conosco .fale-conosco-right {
width: 70%;
}
} @media screen and (max-width: 1024px) { h1 {
font-size: 4rem;
}
h2 {
font-size: 3.8rem;
}
h3 {
font-size: 3rem;
}
h4 {
font-size: 2.5rem;
} .hidden-lg {
display: none !important;
}
.visible-lg {
display: block !important;
}
.title.big h2,
.sub.big h2 {
font-size: 4rem;
}
.title h2,
.sub h2 {
font-size: 3.8rem;
}
.sub h2 + p {
font-size: 2rem;
margin-top: 15px;
}
.cta a {
font-size: 1.7rem;
} #home-servicos .nossos-servicos-container .nossos-servicos-single img {
width: 148px;
height: 148px;
}
#home-servicos .nossos-servicos-container .nossos-servicos-single h3 {
margin-bottom: 20px;
}
#footer .footer-container .footer-content {
gap: 30px;
}
#footer .footer-container .footer-menu {
padding: 0;
} #quem-somos-mvv .mvv-single {
padding: 35px 23px;
} .servicos-box .servicos-box-right,
.servicos-box .servicos-box-left {
padding: 50px 50px !important;
}
.servicos-box .servicos-box-right .text,
.servicos-box .servicos-box-right .cta-servicos,
.servicos-box .servicos-box-left .cta-servicos {
margin: 0;
}
.servicos-box .servicos-box-right .text p,
.servicos-box .servicos-box-left .text p,
.servicos-box .servicos-box-left .title h2,
.servicos-box .servicos-box-left > .vc_column-inner .wpb_wrapper .cta {
width: 100%;
}
.servicos-box .servicos-box-left .text p,
.servicos-box .servicos-box-right .text p {
padding-bottom: 35px;
}
.servicos-box .servicos-box-left > .vc_column-inner .wpb_wrapper .title,
.servicos-box .servicos-box-left > .vc_column-inner .wpb_wrapper .text {
margin: 0;
}
.servicos-box .servicos-box-left > .vc_column-inner .wpb_wrapper .title,
.servicos-box .servicos-box-left > .vc_column-inner .wpb_wrapper .text {
width: 100%;
justify-content: flex-start;
} #fale-conosco .fale-conosco-left {
width: 40%;
}
#fale-conosco .fale-conosco-right {
width: 60%;
}
} @media screen and (max-width: 900px) {
#home-servicos .nossos-servicos-container {
grid-column-gap: 30px;
}
#home-servicos .nossos-servicos-container .nossos-servicos-single img {
width: 128px;
height: 128px;
}
#home-servicos .nossos-servicos-container .nossos-servicos-single h3 {
font-size: 2.2rem;
margin-bottom: 0;
}
#home-servicos .nossos-servicos-container .nossos-servicos-single p {
font-size: 1.6rem;
}
#footer .footer-container .footer-menu {
padding-top: 0;
}
#footer .footer-container .footer-menu.footer-menu-last .footer-menu-single:first-child {
padding-top: 0;
}
#faixa_topo .faixa_topo_container .faixa_right {
display: none;
}
#header-wrapper > .container-fluid,
#home-servicos .nossos-servicos-container {
padding: 0 20px;
} #clientes-logo {
justify-content: space-around;
}
}  @media screen and (max-width: 800px) { h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2.8rem !important;
}
h3 {
font-size: 2.2rem;
}
h4 {
font-size: 1.8rem;
}
h5 {
font-size: 1.6rem;
}
h6 {
font-size: 1.5rem;
}
p,
div,
a,
ol li {
font-size: 1.6rem;
} .hidden-xs {
display: none !important;
}
.visible-xs {
display: block !important;
}
.cta a {
font-size: 1.6rem;
}
.title.big h2,
.sub.big h2 {
font-size: 2.5rem;
}
.title h2,
.sub h2 {
font-size: 2.5rem;
}
.sub h2 + p {
font-size: 1.6rem;
margin-top: 5px;
}
#faixa_topo {
display: none;
}
#logo img {
width: 170px;
}
#header-wrapper.header-scroll {
margin: 0;
height: 106px;
} @keyframes showHeader {
from {
opacity: 0;
height: 0;
}
to {
background-color: var(--color-red);
opacity: 1;
height: 106px;
}
}
#hero_home .title-home {
padding: 0 20px;
}
#hero_home .title-home h1 {
font-size: 3.2rem;
text-align: center;
max-width: 100%;
}
#hero_home .title-home p {
font-size: 1.7rem;
text-align: center;
max-width: 100%;
}
#menu-mobile-wrapper ul {
padding-top: 80px;
}
#home-quemsomos {
padding: 50px 20px;
flex-direction: column;
}
#home-quemsomos .home-quemsomos-single {
width: 100%;
text-align: center;
}
#home-quemsomos .home-quemsomos-single .home-quemsomos-img {
text-align: center;
}
#home-quemsomos .home-quemsomos-single .text {
max-width: 100%;
}
#home-quemsomos .home-quemsomos-single .cta {
display: flex;
justify-content: center;
}
#home-servicos {
padding: 50px 20px 15px;
}
#home-servicos .nossos-servicos-container {
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 50px;
margin-top: 0;
padding: 0;
}
#home-servicos .nossos-servicos-container .nossos-servicos-single h3 {
margin-bottom: 15px;
}
#home-clientes {
padding: 50px 20px 15px;
margin: 0;
}
#home-clientes .swiper {
margin-top: 0;
}
#cta-contato {
padding: 50px 20px;
}
#cta-contato h3 {
font-size: 2.8rem;
}
#footer .footer-container {
padding: 50px 20px;
}
#footer .footer-container .footer-logo {
max-width: 100%;
}
#footer .footer-container .footer-content {
flex-direction: column;
gap: 50px;
}
#footer .footer-container .footer-menu h4 {
margin-bottom: 20px;
}
#footer .footer-container .footer-menu .footer-menu-single {
max-width: 100%;
}
#footer .rodape {
padding: 10px 20px;
}
#footer .rodape p {
font-size: 1.3rem !important;
} .internas {
padding: 50px 0 0;
}
.internas-header {
height: 230px;
padding-bottom: 40px;
}
.internas-header .page-title h1 {
font-size: 3.4rem;
} #quem-somos {
padding: 0 20px 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#quem-somos .quem-somos-single {
width: 100%;
}
#quem-somos .quem-somos-single .title {
margin: 0 auto;
}
#quem-somos .quem-somos-single .text {
margin: 35px auto 20px;
}
#quem-somos .quem-somos-single .quem-somos-img {
text-align: center;
}
#quem-somos-mvv {
padding: 0 20px 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#quem-somos-mvv .mvv-single {
width: 100%;
max-width: 300px;
}
#quem-somos-mvv .mvv-single h3 {
padding: 0;
}
#quemsomos-numbers #quemsomos-number-content {
padding: 50px 20px;
flex-direction: column;
}
#quemsomos-numbers #quemsomos-number-content .quemsomos-numbers-single {
width: 100%;
}
#quemsomos-numbers #quemsomos-number-content .quemsomos-numbers-single h4 {
font-size: 5rem;
}
#quemsomos-numbers #quemsomos-number-content .quemsomos-numbers-single p {
font-size: 2rem;
} .box-mobile {
background-color: darkblue;
flex-direction: column;
height: auto;
}
.box-mobile .servicos-img {
width: 100% !important;
height: 350px;
order: 2;
}
.box-mobile .servicos-box-right,
.box-mobile .servicos-box-left {
width: 100% !important;
height: auto;
padding: 50px 20px !important;
text-align: center;
}
.box-mobile .servicos-box-right .title h3 {
text-align: center;
}
.box-mobile .servicos-box-left .title h3 {
text-align: center !important;
}
.box-mobile .servicos-box-left > .vc_column-inner .wpb_wrapper .title,
.box-mobile .servicos-box-left > .vc_column-inner .wpb_wrapper .text {
justify-content: center;
}
.box-mobile .servicos-box-left .text p,
.box-mobile .servicos-box-right .text p {
text-align: center !important;
}
.box-mobile .servicos-box-left > .vc_column-inner .wpb_wrapper .cta {
justify-content: center;
} #clientes-logo {
padding: 0 20px;
justify-content: center;
gap: 10px 40px;
}
.text-clientes {
padding: 0 20px;
} #fale-conosco.container-contato {
max-width: 100% !important;
padding: 0 20px 50px;
gap: 30px;
flex-direction: column;
justify-content: space-between;
}
#fale-conosco .fale-conosco-left {
width: 100%;
}
#fale-conosco .fale-conosco-right {
width: 100%;
}
#fale-conosco .fale-conosco-left .text {
margin-bottom: 50px;
}
#maps-container #maps-contato > .wpb_wrapper > .wpb_map_wraper {
padding-top: 57%;
} #whatsapp-flut {
right: 0;
bottom: 10px;
}
#whatsapp-flut a img {
width: 40px;
}
} @media screen and (max-width: 480px) {
#home-servicos .nossos-servicos-container {
grid-template-columns: repeat(1, 1fr);
}
#home-servicos .nossos-servicos-container .nossos-servicos-single h3 {
height: auto;
}
}