/* RESET */
* {margin: 0; padding: 0; font-size: 100%; border: none; outline: none; box-sizing: border-box; font-weight: 300; font-family: "Roboto", sans-serif; color: #666;}
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
html {scroll-behavior: smooth;}
body {background-color: #fff;}
a {text-decoration: none;}
ul {list-style: none;}
img {max-width: 100%;}
.color-green {color: #02aa6d;}
.color-blue {color: #2b6cee;}
.color-white {color: #fff;}
.color-descricao {color: #afb1b6;}
.font-800 {font-weight: 800;}
.font-300 {font-weight: 300;}
.font-italic {font-style: italic;}
.botao-fora-a-fora {position: relative; float: left; width: 100%;}
.botao {position: relative; float: left; width: 300px; height: 56px; left: 50%; margin-top: 30px; margin-left: -150px; line-height: 56px; font-weight: 800; font-size: 17px; text-align: center; color: #fff; border-radius: 10px; background-color: #02aa6d; transition: 0.3s ease-out;}
.botao:hover {background-color: #64bf82;}
.botao-centralizado {position: relative; float: left; width: 300px; height: 56px; left: 50%; margin-top: 30px; margin-left: -150px; line-height: 56px; font-weight: 800; font-size: 17px; text-align: center; color: #fff; border-radius: 10px; background-color: #02aa6d; transition: 0.3s ease-out;}
.botao-centralizado:hover {background-color: #64bf82;}
.divisao {position: relative; float: left; width: 220px; height: 1px; left: 50%; margin-left: -110px; margin-bottom: 30px; background-color: rgba(31, 38, 135, .7);}

/* TOPO */
.topo {position: fixed; float: left; width: 100%; height: 90px; box-shadow: 0 4px 10px -10px rgb(0 0 0 / 60%); background: #0d0f12; z-index: 9999; transition: 0.3s ease-out;}
.logo {position: relative; float: left; width: 296px; height: 76px; left: 50%; margin-left: -148px; margin-top: 10px; cursor: pointer; transition: 0.3s ease-out;}

/* BANNER */
.banner-fora-a-fora {position: relative; float: left; width: 100%; background-image: url(../img/bg3.jpg); background-position: 78% 0%; background-size: cover;}
.banner {position: relative; float: left; width: 90%; margin-left: 5%; padding: 190px 0 100px 0;}
.banner-titulo {position: relative; float: left; font-weight: 800; font-size: 29px; color: #fff; line-height: 34px;}
.banner-subtitulo {position: relative; float: left; margin-top: 30px; font-weight: 300; font-size: 17px; color: #fff; line-height: 28px;}
.selos {position: relative; float: left; width: 100%; margin-top: 30px;}
.selos img {position: relative; float: left; width: 90px; margin: 15px;}
.texto-principal {position: relative; float: left; margin-bottom: 50px; border-radius: 5px; padding: 25px 15px; font-weight: 300; font-size: 17px; color: #fff; line-height: 28px;}
.numeros-fora-a-fora {position: relative; float: left; width: 100%;}
.numeros-caixa {position: relative; float: left; width: 300px; left: 50%; margin-left: -150px;}
.numeros-item {position: relative; float: left; width: 100%; margin-top: 30px; padding: 40px 15px; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37); border-radius: 20px; transition: 0.3s ease-out; background-color: #181b1e;}
.numeros-item:hover {box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .9);}
.numeros-item-titulo {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-weight: 800; font-size: 24px; color: #2b6cee;}
.numeros-item-descricao {position: relative; float: left; width: 100%; text-align: center; font-weight: 400; font-size: 14px; color: #afb1b6; line-height: 28px;}

/* ESTRATEGIA */
.estrategia-fora-a-fora {position: relative; float: left; width: 100%; padding: 100px 0; background: #131619;}
.estrategia {position: relative; float: left; width: 90%; margin-left: 5%;}
.estrategia-titulo {position: relative; float: left; width: 100%; margin-bottom: 30px; text-align: center; font-weight: 800; font-size: 29px; color: #fff;}
.estrategia-subtitulo {position: relative; float: left; width: 100%; margin-bottom: 30px; text-align: center; font-weight: 300; font-size: 17px; line-height: 28px; color: #afb1b6;}
.estrategia-imagem {position: relative; float: left; width: 80%; margin-left: 10%; margin-bottom: 40px; box-shadow: 0 8px 32px 0 rgba(20, 20, 20, .9);}
.estrategia-imagem img {border-radius: 10px;}
.estrategia-caixa {position: relative; float: left; width: 300px; left: 50%; margin-left: -150px;}
.estrategia-item {position: relative; float: left; width: 100%; margin-top: 30px; padding: 40px 25px; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37); border-radius: 20px; transition: 0.3s ease-out; background-color: #181b1e;}
.estrategia-item:hover {box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .9);}
.estrategia-item-icone {position: relative; float: left; width: 100%; margin-bottom: 20px;}
.estrategia-item-icone img {position: relative; float: left; width: 90px; height: 90px; left: 50%; margin-left: -45px;}
.estrategia-item-titulo {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-weight: 800; font-size: 24px; color: #fff;}
.estrategia-item-descricao {position: relative; float: left; width: 100%; text-align: center; font-weight: 400; font-size: 17px; color: #afb1b6; line-height: 28px;}

/* CRESCIMENTO */
.crescimento-fora-a-fora {position: relative; float: left; width: 100%; padding: 100px 0; background: #0d0f12;}
.crescimento {position: relative; float: left; width: 90%; margin-left: 5%;}
.crescimento-titulo {position: relative; float: left; width: 100%; margin-bottom: 30px; text-align: center; font-weight: 800; font-size: 29px; color: #fff;}
.crescimento-subtitulo {position: relative; float: left; width: 100%; margin-bottom: 30px; text-align: center; font-weight: 300; font-size: 17px; line-height: 28px; color: #afb1b6;}
.crescimento-caixa {position: relative; float: left; width: 300px; left: 50%; margin-left: -150px;}
.crescimento-item {position: relative; float: left; width: 100%; margin-top: 30px; padding: 40px 25px; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37); border-radius: 20px; transition: 0.3s ease-out; background-color: #121518;}
.crescimento-item:hover {box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .9);}
.crescimento-item-icone {position: relative; float: left; width: 100%; margin-bottom: 20px;}
.crescimento-item-icone img {position: relative; float: left; width: 90px; height: 90px; left: 50%; margin-left: -45px;}
.crescimento-item-titulo {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-weight: 800; font-size: 24px; color: #fff;}
.crescimento-item-descricao {position: relative; float: left; width: 100%; text-align: center; font-weight: 400; font-size: 17px; color: #afb1b6; line-height: 28px;}

/* CTA */
.cta-fora-a-fora {position: relative; float: left; width: 100%; padding: 100px 0; background: #121928;}
.cta {position: relative; float: left; width: 90%; margin-left: 5%;}
.cta-titulo {position: relative; float: left; width: 100%; margin-bottom: 30px; text-align: center; font-weight: 800; font-size: 29px; color: #fff;}

/* PRODUTOS */
.produtos-fora-a-fora {position: relative; float: left; width: 100%; padding: 100px 0; background: #131619;}
.produtos {position: relative; float: left; width: 90%; margin-left: 5%;}
.produtos-titulo {position: relative; float: left; width: 100%; margin-bottom: 30px; text-align: center; font-weight: 800; font-size: 29px; color: #fff;}
.produtos-subtitulo {position: relative; float: left; width: 100%; margin-bottom: 30px; text-align: center; font-weight: 300; font-size: 17px; line-height: 28px; color: #afb1b6;}
.produtos-caixa {position: relative; float: left; width: 300px; left: 50%; margin-left: -150px;}
.produtos-item {position: relative; float: left; width: 100%; margin-top: 30px; padding: 40px 25px; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37); border-radius: 20px; transition: 0.3s ease-out; background-color: #181b1e;}
.produtos-item:hover {box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .9);}
.produtos-etique {position: absolute; top: 0; right: 30px; padding: 8px; border-radius: 0 0 8px 8px; font-size: 13px; color: #fff; background: #2b6cee;}
.produtos-item-titulo {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; font-weight: 800; font-size: 24px; color: #fff;}
.produtos-item-descricao {position: relative; float: left; width: 100%; font-weight: 400; font-size: 17px; color: #afb1b6; line-height: 28px;}
.produtos-item-descricao ul {list-style: none; padding: 0;}
.produtos-item-descricao li {display: flex;}
.check {margin-top: 5px; margin-right: 8px; font-size: 1.2em;}

/* RODAPE */
footer {position: relative; float: left; width: 100%; padding: 70px 30px; text-align: center; color: #fff; font-size: 16px; line-height: 24px; background: #0d0f12;}


/*========== MOBILE FIRST ===========*/
/* SMALL DEVICES - SMARTPHONES */
@media screen and (min-width: 480px) {
.banner, .crescimento, .crescimento-caixa, .estrategia, .estrategia-caixa, .produtos, .produtos-caixa, .cta {width: 400px; left: 50%; margin-left: -200px;}
}

/* SMALL DEVICES - TABLETS */
@media screen and (min-width: 768px) {
.banner, .numeros-caixa, .crescimento, .crescimento-caixa, .estrategia, .estrategia-caixa, .produtos, .produtos-caixa, .cta {width: 700px; margin-left: -350px;}
.botao, .botao-centralizado {width: 370px; height: 65px; margin-left: -185px; line-height: 65px; font-size: 19px;}

.banner-titulo {font-size: 30px; line-height: 44px;}
.texto-principal {position: relative; float: left; width: 570px;}
.numeros-item {width: 330px; margin: 10px; padding: 25px 15px;}

.estrategia-titulo, .crescimento-titulo, .produtos-titulo, .cta-titulo {font-size: 36px;}
.divisao {width: 280px; margin-left: -140px;}
.estrategia-subtitulo, .crescimento-subtitulo, .produtos-subtitulo {font-size: 20px; line-height: 32px;}
}

/* MEDIUM DEVICES - TABLETS & DESKTOPS */
@media screen and (min-width: 960px) {
.banner, .numeros-caixa, .crescimento, .crescimento-caixa, .estrategia, .estrategia-caixa, .produtos, .produtos-caixa, .cta {width: 900px; margin-left: -450px; text-align: left;}
.banner {padding: 220px 0 100px 0;}
.botao {width: 300px; height: 56px; left: 0; margin-left: 0; line-height: 56px; font-size: 17px;}
.botao-centralizado {width: 300px; height: 56px; line-height: 56px; font-size: 17px;}

.banner-titulo {font-size: 34px; line-height: 42px;}
.texto-principal {width: 680px;}
.numeros-item {width: 430px;}

.crescimento-item, .produtos-item {width: 280px; margin: 0 10px;}
.estrategia-imagem {width: 60%; margin-left: 20%;}
.estrategia-item {width: 430px; margin: 10px;}
.estrategia-titulo, .crescimento-titulo, .produtos-titulo, .cta-titulo {font-size: 40px;}
}

/* LARGE DEVICES - WIDE SCREENS */
@media screen and (min-width: 1280px) {
.banner, .numeros-caixa, .crescimento, .crescimento-caixa, .estrategia, .produtos, .produtos-caixa, .cta {width: 1100px; margin-left: -550px;}
.botao, .botao-centralizado {width: 370px; height: 65px; line-height: 65px; font-size: 19px;}

.banner-titulo {font-size: 42px; line-height: 50px;}
.banner-subtitulo {font-size: 18px; line-height: 28px;}
.texto-principal {width: 780px;}
.numeros-item {width: 255px; padding: 25px 5px;}

.crescimento-item, .produtos-item {width: 346px; margin: 0 10px;}
}