* { font-family: 'Roboto', sans-serif; }

body { overflow-x: hidden !important; }

a:hover { text-decoration: none; }
.colorBlue { color: #333069; }

.box-shadow { -webkit-box-shadow: -5px 5px 11px 0px rgba(0,0,0,0.4); -moz-box-shadow: -5px 5px 11px 0px rgba(0,0,0,0.4); box-shadow: -5px 5px 11px 0px rgba(0,0,0,0.4); }

.btn-darkblue { background-color: #333069; border-radius: 100px;font-size: 16px; font-weight: 700; text-transform: uppercase; color: #FFF;transition: .2s; }

.btn-darkblue:hover { color: #FFF; transform: translate(-2px, 2px); -webkit-box-shadow: -2px 2px 11px 0px rgba(0,0,0,0.4);-moz-box-shadow: -2px 2px 11px 0px rgba(0,0,0,0.4); box-shadow: -2px 2px 8px 0px rgba(0,0,0,0.4); }

.btn-darkblue:active,
.btn-darkblue:focus { transform: translate(-4px, 4px);
    outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }

#pageIndex h1 { background-image: url(../img/logo.png); background-size: cover; width: 156px; height: 46px; }

#sectionHeroArea { background-image: url(../img/bgheroarea.png); background-size: cover;}

.topbar { border-bottom: 1px solid rgba(51, 48, 105, 0.2);  background-color: rgba(255, 255, 255, 0.5)}
.topbar__informations { font-size: 16px; color: #333069;}
.topbar__informations .fas { font-size: 18px; }
.topbar__informations span { font-weight: 500; }
.topbar__socials svg { width: 34px; height: 34px; fill:#333069; transition: .2s;}
.topbar__socials svg:hover { fill:#007BFF; }
.topbar__socials a { color: #333069; font-weight: 700; transition: .2s; }
.topbar__socials a:hover { color: #007BFF; }

.navbar-toggler:focus { outline: none;}
.nav-link { font-size: 16px; font-weight: 500; color: #333069 !important; text-transform: uppercase; transition: .1s;}
.nav-link:hover {  color: #007BFF !important;}

.contact { padding: 10px 0; background-image: url(../img/bgcontact.jpg); background-position: center top; background-size: cover; }
.contact h2 { font-size: 32px; color: #FFF; font-weight: 700; }
.contact span { font-size: 22px; font-weight: 700; color: #fff; }
.contact__form { background-color: rgba(255, 255, 255, 0.6) }

.contact__form input[type=text],
.contact__form input[type=email] { border-radius: 50px; }

.contact__form ::placeholder { font-size: 18px; font-weight: 500; color: #c5c5c5; }

.contact .btn { margin-top: -25px; border-radius: 50px; text-transform: uppercase; font-weight: 600; }


/* SERVIÇOS */
#sectionServices h2 { font-size: 32px; font-weight: 700; color: #333069; }
#sectionServices .service { position: relative; height: 350px; border-radius: 25px; background-size: cover; transform: scale(1); transition: .5s; }
#sectionServices .service:hover { transform: scale(1.1); transition: .5s; }
#sectionServices .service h3 { margin-bottom: 0; font-size: 32px; font-weight: 900; text-transform: uppercase; color: #fff; }
#sectionServices .service-img1 { background-image: url(../img/bgservice1.png); }
#sectionServices .service-img2 { background-image: url(../img/bgservice2.png); }
#sectionServices .service-img3 { background-image: url(../img/bgservice3.png); }


/* COMO FUNCIONA */
#sectionBenefits { background-image: url(../img/bgbenefits.jpg); background-size: cover; background-repeat: no-repeat; }
#sectionBenefits h2 { font-size: 40px; font-weight: 700; color: #fff; }


/* BENEFICIOS */
.benefits__text { font-weight: 700; color: #fff; text-transform: uppercase; }
.benefits__icon { width: 80px; height: 80px; fill: #fff; }
.benefits img { background: #fff; padding: 15px; border-radius: 50px }


/* ESTADO */
#sectionStates { background-image: url(../img/bgstates.jpg); background-size: 80% }
#sectionStates h2 { font-weight: 700; color: #333069; }
#sectionStates p { font-size: 18px; color: #333069; }


/* BANNER */
#sectionTechnology { background-image: url(../img/bgtechnology.png); background-position: right; background-size: cover; background-repeat: no-repeat;}
#sectionTechnology h2 { font-weight: 900; color: #333069; text-transform: uppercase;}


/* BANNER */
#sectionClients h2 { font-weight: 500; color: #333069; text-transform: uppercase; }
.clients { background-color: #F9F9F9; }
.clients__logos svg { fill: #c5c5c5; transition: .2s; }

/* CLIENTES */
.clientes { background: url(../img//bg-clientes.png); background-attachment: fixed;}
#iconCocaCola:hover { fill: #f40009; }
#iconTim:hover .icon-tim-blue { fill: #063b88; }
#iconTim:hover .icon-tim-red { fill: #e40d2c; }

#sectionEstimate { border-top: 40px solid #333069; }
#sectionEstimate p:nth-child(1) { font-size: 22px; font-weight: 500; }
#sectionEstimate p:nth-child(2) { font-size: 30px; font-weight: 900; }
#sectionEstimate p:nth-child(3) { font-size: 20px; font-weight: 900; }


/* FOOTER */
footer { background-color: #333069; }
footer p { color: #FFF; }
footer .title { font-weight: 900; }

.footer__socials svg { width: 34px; height: 34px; fill:#FFF; transition: .2s; }
.footer__socials svg:hover { fill:rgb(207, 228, 20); }
.footer__map a { display: block; font-weight: 400; color: #fff; }
.footer__map a:hover { color: #007BFF; }

.developer { background-color: #fff; }
.developer p { color: #333069; font-weight: 700; }
.developer img { width: 120px; }



/* PAGINA VENTNOBRE */
.ventnobre { background: url(../img/exaustor-draw.png); background-repeat: no-repeat; background-attachment: fixed; background-position: right; }
.cliente img { border: 1px solid rgba(204, 204, 204, 0.562); }


@media (min-width: 768px) {
    .btn-darkblue { font-size: 24px; }

    #pageIndex h1 { width: 312px; height: 92px; }

    .contact { padding: 150px 0; }

    .contact h2 { font-size: 42px; }
    .contact span { background-color: #FFF; color: #333069; }

    #sectionStates { background-size: 20% }

}


.wa img { max-width: 30px; margin-top: 4px; vertical-align: middle;}
.wa a{display: block; height: 100%; width: 100%;}
.wa:hover {background: #41a79d;}

.wa {position: fixed; right: 40px; width: 50px; height: 50px; bottom: 30px; padding: 5px; vertical-align: middle; text-align: center;
border-radius: 50%; background: #0ba360; z-index: 99999;}
.wa::after,
.wa::before{content: ''; position: absolute; opacity: 0; border: 4px solid #0ba360; left: -10px; top: -10px; right: -10px; bottom: -10px; -webkit-border-radius: 50%; animation: WaveWhatsApp 1.5s ease infinite;}
.wa::after{animation-delay: .5s;}
@keyframes WaveWhatsApp {0%{ transform: scale(0.5); } 50%{ opacity: 1; } 100%{ transform: scale(1.2); opacity: 0; }}