/* RESET */
* {margin: 0; padding: 0; font-size: 100%; border: none; outline: none; box-sizing: border-box; font-weight: 400; font-family: "Poppins", sans-serif; color: #111;}
html {scroll-behavior: smooth;}
body {background-color: #fff;}
a {text-decoration: none;}
ul {list-style: none;}
img {max-width: 100%;}
.branco {background: #fff !important;}
.fonte-branca {color: #fff !important;}
.cinza {background: #efefef !important;}
.color {color: #fdd633; font-weight: 900;}
.negrito {font-weight: 700;}

/* TOPO */
.topo {position: fixed; float: left; width: 100%; height: 110px; box-shadow: 0 4px 10px -10px rgb(0 0 0 / 60%); background-color: rgba(9,6,46,0.9); z-index: 99; transition: 0.3s ease-out;}
.topo-margem {position: relative; float: left; width: 90%; height: 120px; margin-left: 5%;}
.logo {position: relative; float: left; width: 250px; margin-top: 29px;}
.close {display: flex; width: 100%; height: 110px;}
.mobile-menu {display: none; width: 100%; height: 100%; position: fixed; overflow: auto; background-color: rgba(0,4,19,0.9); top: 0; left: 0; z-index: 9999;}
.menu {display: none;}
.btn-menu {position: absolute; top: 38px; right: 0; width: 35px; height: 35px; font-size: 17px; text-align: center; cursor: pointer; background: none; transition: 0.1s ease-out;}
.btn-menu i {color: #fff;}
.btn-close {position: absolute; top: 65px; right: 28px; width: 45px; height: 45px; font-size: 25px; text-align: center; color: #4b4750; cursor: pointer; background: none; transition: 0.1s ease-out;}
.btn-close i {color: #fff;}
.mobile-menu ul {display: block;}
.mobile-menu li {padding: 10px; text-align: center;}
.mobile-menu li a, .menu li {font-size: 20px; font-weight: 600; text-decoration: none; color: #fff; padding: 5px 7px; transition: 0.1s ease-out;}
.mobile-menu li a:hover {text-decoration: underline;}

.conteudo-margem {position: relative; float: left; width: 80%; height: auto; margin-left: 10%;}

/* SESSÃO 1 */
.sessao-1 {position: relative; float: left; width: 100%; height: auto; padding: 200px 0 170px 0; text-align: center; background-image: url("../img/bg2.jpg"); background-size: cover; background-position: top;}
.sessao-1 h1 {margin-top: 30px; font-size: 42px; line-height: 60px; font-weight: 600; font-family: "Playfair Display SC", serif; color: #fff;}
.sessao-1 p {margin-top: 30px; font-size: 20px; font-weight: 300; color: #fff;}
.botao-banner {position: relative; float: left; animation: pulse 0.7s infinite; animation-direction: alternate; -webkit-animation-name: pulse; animation-name: pulse; width: 280px; height: 60px; left: 50%; margin-top: 30px; margin-left: -140px; font-size: 15px; text-align: center; text-transform: uppercase; line-height: 60px; color: #fff; font-weight: 900; border-radius: 60px; background-color: #1fba59; cursor: pointer; transition: 0.3s ease-out;}
.botao-banner i {margin-right: 5px; color: #fff;}
.botao-banner:hover {background-color: #25d366;}
@-webkit-keyframes pulse {0% {-webkit-transform: scale(1);} 100% {-webkit-transform: scale(1.04);}}
@keyframes pulse {0% {transform: scale(1);} 100% {transform: scale(1.04);}}

/* SESSÃO 2 */
.sessao-2 {position: relative; float: left; width: 100%; padding: 70px 0; background: #fff;}
.sessao-2 h1 {margin-top: 10px; font-family: "Playfair Display SC", serif; text-align: center; font-size: 32px; font-weight: 600;}
.areas-de-atuacao-caixa {position: relative; float: left; width: 100%; margin-top: 20px;}
.areas-de-atuacao-item {position: relative; float: left; width: 100%; margin: 8px 0; padding: 20px; border-radius: 10px;}
.areas-de-atuacao-item h1 {font-family: "Playfair Display", Sans-serif; text-align: left; font-size: 19px; color: #071375;}
.areas-de-atuacao-item p {font-size: 15px;}
.linha-area {position: relative; float: left; width: 100%;}

/* SESSÃO 3 */
.sessao-3 {position: relative; float: left; width: 100%; padding: 70px 0; background: #f8f8f8;}
.sessao-3 h1 {position: relative; float: left; width: 100%; margin-top: 10px; font-family: "Playfair Display SC", serif; text-align: center; font-size: 38px; font-weight: 600;}
.sobre-nos {position: relative; float: left; width: 100%;}
.sobre-nos-texto {position: relative; float: left; width: 100%;}
.sobre-nos-texto img {position: relative; float: left; width: 100%;}
.sobre-nos-texto h1 {position: relative; float: left; width: 100%; margin-top: 30px; font-family: "Playfair Display SC", serif; text-align: center; font-size: 28px; font-weight: 600;}
.sobre-nos-texto p {position: relative; float: left; width: 100%; margin-top: 30px; font-weight: 300;}

/* SESSÃO 4 */
.sessao-4 {position: relative; float: left; width: 100%; padding: 70px 0; background: #030038;}
.mvv {position: relative; float: left; width: 340px; left: 50%; margin-left: -170px;}
.mvv-item {position: relative; float: left; width: 320px; padding: 60px 25px; margin: 10px; box-sizing: border-box; box-shadow: 0px 10px 30px rgba(255, 255, 255, 0.2); background: #fff; transition: 0.3s ease-out;}
.mvv-item:hover {box-shadow: 0px 20px 30px rgba(255, 255, 255, 0.4);}
.mvv-img {position: relative; float: left; width: 50px; height: 45px; margin-top: 5px; text-align: center; font-size: 38px;}
.mvv-img i {color: #030038;}
.mvv-titulo {position: relative; float: left; width: 205px; margin-bottom: 15px; margin-left: 15px; font-family: "Playfair Display SC", serif; font-size: 24px; font-weight: 600; color: #030038;}
.mvv-desc {position: relative; float: left; width: 205px; margin-left: 65px; font-size: 18px; font-weight: 300;}

/* SESSÃO 5 */
.sessao-5 {position: relative; float: left; width: 100%; padding: 70px 0; background: #f8f8f8;}
.contato {position: relative; float: left; width: 100%;}
.contato h1 {position: relative; float: left; width: 100%; margin-bottom: 20px; font-family: "Playfair Display SC", serif; text-align: center; font-size: 38px; font-weight: 600;}
.fale-conosco {position: relative; float: left; width: 100%; font-size: 18px; font-weight: 300; text-align: center;}
.fale-conosco i {color: #030038;}
.fale-conosco a {color: #030038; font-weight: 300;}
.fale-conosco a:hover {text-decoration: underline;}
.formulario {position: relative; float: left; width: 280px; left: 50%; margin-left: -140px; margin-top: 20px; font-size: 15px; font-weight: 300; text-align: center;}
form {font-size: 18px; font-weight: 300;}
input, select {width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #030038;}
.enviar input {width: 240px; padding: 14px; color: #fff; font-size: 18px; font-weight: 500; background-color: #030038; border: none; text-transform: uppercase; cursor: pointer; transition: 0.3s ease-out;}
.enviar input:hover {color: #ffffff; background-color: #071375;}

/* RODAPE */
footer {position: relative; float: left; width: 100%; padding: 30px; text-align: center; color: #fff; font-size: 14px; background: #030038;}
footer a {color: #fff;}
footer a:hover {text-decoration: underline;}

/* SESSÃO 5 */
.termos-de-uso {position: relative; float: left; width: 100%; padding: 150px 0 70px 0; background: #fff;}
.termos-de-uso h1 {margin-top: 10px; font-family: "Playfair Display SC", serif; font-size: 32px; font-weight: 600; color: #030038; text-transform: uppercase;}

/* SMALL DEVICES - TABLETS */
@media screen and (min-width: 768px) {
.topo-margem, .conteudo-margem {width: 700px; left: 50%; margin-left: -350px;}
.logo {width: 220px; margin-top: 34px;}

.close, .btn-menu {display: none;}
.menu {display: block; position: relative; float: left; width: 480px; padding: 20px 10px; text-align: center; font-weight: 600;}
.menu ul {position: relative; float: left; width: 100%; margin: 0; display: flex; justify-content: center; list-style: none; text-align: center;}
.menu li a, .menu li {font-size: 13px; font-weight: 600; text-decoration: none; color: #fff; padding: 26px 0px 26px 14px;}
.menu li a:hover {text-decoration: underline;}
.mobile-menu {display: none !important;}

.sessao-1 {padding: 250px 0 150px 0;}
.sessao-1 h1 {font-size: 50px; line-height: 60px;}
.sessao-1 p {font-size: 20px;}
.botao-banner {width: 320px; height: 70px; margin-left: -170px; font-size: 16px; text-align: center; line-height: 70px; border-radius: 70px;}

.areas-de-atuacao-item {width: 48%; margin: 8px 1%;}

.sobre-nos-texto img {width: 300px; margin-left: 0;}
.sobre-nos-texto h1 {float: right; width: 380px; margin-top: 0; text-align: left;}
.sobre-nos-texto p {float: right; width: 380px;}

.mvv {width: 366px; margin-left: -188px;}
.mvv-item {width: 346px;}

.contato h1 {text-align: left;}
.contato {width: 700px;}
.fale-conosco {width: 370px; font-size: 18px; font-weight: 300; text-align: left;}
.formulario {width: 330px; left: 0; margin-left: 0; margin-top: 0; text-align: left;}
}

/* MEDIUM DEVICES - TABLETS & DESKTOPS */
@media screen and (min-width: 960px) {
.topo-margem, .conteudo-margem {width: 900px; margin-left: -450px;}
.logo {width: 270px; margin-top: 28px;}

.menu {width: 540px; margin-left: 90px;}
.menu li a, .menu li {font-size: 15px;}

.sessao-1 {padding: 270px 0 170px 0;}
.sessao-1 h1 {font-size: 62px; line-height: 70px;}
.sessao-1 p {font-size: 22px;}
.botao-banner {width: 320px; height: 70px; margin-left: -170px; font-size: 16px; text-align: center; line-height: 70px; border-radius: 70px;}

.sobre-nos-texto img {width: 380px;}
.sobre-nos-texto h1 {width: 490px; font-size: 40px;}
.sobre-nos-texto p {width: 490px;}

.contato {width: 850px; margin-left: 25px;}
.fale-conosco {width: 470px;}
.formulario {width: 380px;}
}

/* LARGE DEVICES - WIDE SCREENS */
@media screen and (min-width: 1280px) {
.topo-margem, .conteudo-margem {width: 1100px; margin-left: -550px;}
.margem-rodape {width: 1100px; left: 50%; margin-left: -550px;}

.menu {width: 680px; margin-left: 150px;}
.menu li a, .menu li {font-size: 16px; padding: 26px 0px 26px 28px;}

.sobre-nos-texto img {width: 450px;}
.sobre-nos-texto h1 {width: 600px;}
.sobre-nos-texto p {width: 600px;}

.mvv {width: 100%; left: 0; margin-left: 0;}

.contato {margin-left: 125px;}
}