@import url('https://fonts.cdnfonts.com/css/script-mt');
@import url('https://fonts.googleapis.com/css2?family=Abyssinica+SIL&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*========== RESET ==========*/
* {margin: 0; padding: 0; box-sizing: border-box; border: none;}
body {font-family: Inter, sans-serif; color: #222; font-family: "Poppins", Sans-serif;}
html {scroll-behavior: smooth;}
.negrito {font-weight: bold;}
.italico {font-style: italic;}
.botao {position: relative; width: 260px; left: 50%; margin-left: -130px; text-align: center; border-radius: 4px; padding: 16px; color: #fff; font-weight: 900; cursor: pointer; background-color: #cc6600;}
.botao:hover {background-color: #996600;}
.conteudo-margem, .contato-margem {position: relative; float: left; width: 100%;}

/*========== SESSÃO 1 ==========*/
.sessao-1-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: url(../img/bg.jpg); background-size: cover; background-position: center;}
.sessao-1 {position: relative; float: left; width: 100%;}
.sessao-1-esquerda {position: relative; float: left; width: 100%;}
.sessao-1-direita {position: relative; float: left; width: 100%;}
.logo {position: relative; float: left; width: 100%; margin-bottom: 20px;}
.logo img {position: relative; float: left; width: 300px; left: 50%; margin-left: -150px;}
.titulo-sessao-1 {position: relative; float: left; width: 100%; margin-bottom: 20px; font-family: "Abyssinica SIL", Sans-serif; text-align: center; font-size: 30px; color: #eee; text-transform: uppercase;}
.descricao-sessao-1 {position: relative; float: left; width: 100%; margin-bottom: 20px; font-family: "Poppins", Sans-serif; text-align: center; font-size: 20px; font-weight: 500; color: #fff;}
.botoes-sessao-1 {position: relative; float: left; width: 280px; left: 50%; margin-left: -140px;}
.botao-whatsapp {position: relative; float: left; width: 280px; margin-top: 10px; margin-bottom: 10px; padding: 20px 15px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; text-transform: uppercase; color: #fff; background: #04AC1B; transition: 0.2s ease-out;}
.botao-whatsapp:hover {background: #11b227; transform: scale(1.04);}
.ou {position: relative; float: left; width: 280px; text-align: center; color: #fff; text-transform: uppercase;}
.botao-ligacao {position: relative; float: left; width: 280px; margin-top: 10px; margin-bottom: 50px; padding: 20px 15px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; text-transform: uppercase; color: #fff; background: #04AC1B; transition: 0.2s ease-out;}
.botao-ligacao:hover {background: #11b227; transform: scale(1.04);}
.img-caminhao {position: relative; float: left; width: 100%;}
.img-caminhao img {position: relative; float: left; width: 300px; left: 50%; margin-left: -150px;}

/*========== SESSÃO 2 ==========*/
.sessao-2-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #fff;}
.sessao-2 {position: relative; float: left; width: 100%;}
.titulo-sessao-2 {position: relative; float: left; width: 100%; margin-bottom: 20px; font-family: "Abyssinica SIL", Sans-serif; text-align: center; font-size: 34px; color: #222; text-transform: uppercase;}
.botao-whatsapp-2 {position: relative; float: left; width: 280px; left: 50%; margin-left: -140px; margin-top: 10px; margin-bottom: 10px; padding: 20px 15px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; text-transform: uppercase; color: #fff; background: #04AC1B; transition: 0.2s ease-out;}
.botao-whatsapp-2:hover {background: #11b227; transform: scale(1.04);}

/*========== SESSÃO 3 ==========*/
.sessao-3-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #222;}
.sessao-3 {position: relative; float: left; width: 100%;}
.sessao-3-esquerda {position: relative; float: left; width: 100%; margin-bottom: 30px;}
.sessao-3-direita {position: relative; float: left; width: 100%;}
.sub-titulo-sessao-3 {position: relative; float: left; width: 100%; margin-bottom: 20px; font-family: "Abyssinica SIL", Sans-serif; text-align: center; font-size: 38px; color: #fff; text-transform: uppercase;}
.descricao-sessao-3 {position: relative; float: left; width: 100%; margin-bottom: 20px; font-family: "Poppins", Sans-serif; text-align: center; font-size: 20px; font-weight: 500; color: #fff;}

/*========== SESSÃO 4 ==========*/
.sessao-4-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #fff;}
.sessao-4 {position: relative; float: left; width: 100%;}
.titulo-sessao-4 {position: relative; float: left; width: 100%; margin-bottom: 50px; font-weight: 500; font-family: "Abyssinica SIL", Sans-serif; text-align: center; font-size: 38px; color: #222; text-transform: uppercase;}
.transportes-caixa {position: relative; float: left; width: 280px; left: 50%; margin-left: -140px;}
.transporte {position: relative; float: left; width: 100%;}
.transporte-img {position: relative; float: left; width: 100%;}
.transporte-titulo {position: relative; float: left; width: 100%; margin-bottom: 10px; font-family: "Abyssinica SIL", Sans-serif; text-align: center; font-size: 24px; color: #222; text-transform: uppercase;}

/*========== SESSÃO 5 ==========*/
.sessao-5-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #222;}
.sessao-5 {position: relative; float: left; width: 100%;}
.titulo-sessao-5 {position: relative; float: left; width: 100%; margin-bottom: 40px; font-family: "Abyssinica SIL", Sans-serif; text-align: center; font-size: 34px; color: #fff; text-transform: uppercase;}
.botoes-sessao-5 {position: relative; float: left; width: 280px; left: 50%; margin-left: -140px;}
.botao-whatsapp-3 {position: relative; float: left; width: 280px; left: 50%; margin-left: -140px; margin-top: 10px; margin-bottom: 10px; padding: 20px 15px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; text-transform: uppercase; color: #fff; background: #04AC1B; transition: 0.2s ease-out;}
.botao-whatsapp-3:hover {background: #11b227; transform: scale(1.04);}
.ou-2 {position: relative; float: left; width: 280px; text-align: center; color: #fff; text-transform: uppercase;}
.botao-ligacao-2 {position: relative; float: left; width: 280px; margin-top: 10px; margin-bottom: 50px; padding: 20px 15px; border-radius: 10px; font-size: 15px; font-weight: 500; text-align: center; text-transform: uppercase; color: #fff; background: #04AC1B; transition: 0.2s ease-out;}
.botao-ligacao-2:hover {background: #11b227; transform: scale(1.04);}

/*========== SESSÃO 6 ==========*/
.sessao-6-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #fff;}
.sessao-6 {position: relative; float: left; width: 100%;}
.titulo-sessao-6 {position: relative; float: left; width: 100%; margin-bottom: 50px; font-weight: 500; font-family: "Abyssinica SIL", Sans-serif; text-align: center; font-size: 38px; color: #222; text-transform: uppercase;}
.diferenciais-caixa {position: relative; float: left; width: 280px; left: 50%; margin-left: -140px;}
.diferencial {position: relative; float: left; width: 100%; margin-bottom: 30px;}
.diferencial-linha {position: relative; float: left; width: 100%;}
.diferencial-img {position: relative; float: left; width: 100%;}
.diferencial-titulo {position: relative; float: left; width: 100%; margin-bottom: 10px; font-family: "Abyssinica SIL", Sans-serif; text-align: center; font-size: 24px; color: #222; text-transform: uppercase;}
.diferencial-descricao {position: relative; float: left; width: 100%; text-align: center;}
.ou-3 {position: relative; float: left; width: 280px; text-align: center; color: #222; text-transform: uppercase;}

/*========== RODAPÉ SUPERIOR ==========*/
.rodape-superior-fora-a-fora {position: relative; float: left; width: 100%; padding: 70px 30px; background: #333;}
.rodape-superior {position: relative; float: left; width: 100%;}
.rodape-superior h1 {position: relative; float: left; width: 100%; font-family: "Abyssinica SIL", Sans-serif; font-size: 24px; color: #fff; text-transform: uppercase;}
.contato-endereco {position: relative; float: left; width: 100%; margin-bottom: 20px; text-align: center; color: #fff;}
.mapa-rodape {position: relative; float: left; width: 100%; height: 250px;}

/*========== RODAPÉ INFERIOR ==========*/
.rodape-inferior {position: relative; float: left; width: 100%; padding: 20px 30px; text-align: center; font-size: 14px; color: #fff; font-weight: 500; text-transform: uppercase; background: #222;}
a.link-rodape {color: #fff; text-decoration: none;}
a.link-rodape:hover {text-decoration:underline;}


/* SMALL DEVICES - TABLETS */
@media screen and (min-width: 768px) {
.sessao-1 {width: 700px; left: 50%; margin-left: -350px;}
.sessao-1-esquerda {width: 300px;}
.sessao-1-direita {width: 400px;}
.img-caminhao {margin-top: 50px;}
.img-caminhao img {width: 400px; margin-left: -200px;}
.botoes-sessao-1 {width: 200px; margin-left: -100px;}
.botao-whatsapp, .ou, .botao-ligacao {width: 200px;}

.sessao-2 {width: 700px; left: 50%; margin-left: -350px;}

.sessao-3 {width: 700px; left: 50%; margin-left: -350px;}
.sessao-3-esquerda {width: 350px; padding: 15px; margin-bottom: 0;}
.sessao-3-direita {width: 350px; padding: 15px;}
.descricao-sessao-3 {font-size: 18px;}

.sessao-4 {width: 700px; left: 50%; margin-left: -350px;}
.transportes-caixa {width: 700px; margin-left: -350px;}
.transporte {width: 350px;}
.transporte-img img {position: relative; float: left; width: 200px; left: 50%; margin-left: -100px;}

.botoes-sessao-5 {width: 500px; margin-left: -250px;}
.botao-whatsapp-3 {width: 200px; left: 0; margin: 0;}
.ou-2, .ou-3 {width: 100px; margin-top: 19px;}
.botao-ligacao-2 {width: 200px; left: 0; margin: 0;}

.sessao-6 {width: 700px; left: 50%; margin-left: -350px;}
.diferenciais-caixa {width: 700px; margin-left: -350px;}
.diferencial {width: 350px; padding: 15px;}
.diferencial-img {position: relative; float: left; width: 200px; left: 50%; margin-left: -100px;}

}

/* MEDIUM DEVICES - TABLETS & DESKTOPS */
@media screen and (min-width: 960px) {
.sessao-1 {width: 900px; left: 50%; margin-left: -450px;}
.sessao-1-esquerda {width: 500px;}
.sessao-1-direita {width: 400px;}
.img-caminhao {margin-top: 0;}
.img-caminhao img {width: 400px; left: 0; margin-left: 0;}
.botoes-sessao-1 {width: 440px; margin-left: -220px;}
.botao-whatsapp, .botao-ligacao {width: 180px; margin-top: 0;}
.ou {width: 80px; margin-top: 19px;}

.sessao-2 {width: 900px; margin-left: -450px;}
.titulo-sessao-2 {font-size: 38px;}

.sessao-3 {width: 900px; margin-left: -450px;}
.sessao-3-esquerda, .sessao-3-direita {width: 450px;}
.descricao-sessao-3 {font-size: 20px;}

.sessao-4, .transportes-caixa {width: 900px; margin-left: -450px;}
.transporte {width: 300px;}

.sessao-6, .diferenciais-caixa {width: 900px; margin-left: -450px;}
.diferencial {width: 450px; padding: 15px;}
.diferencial-titulo {font-size: 32px;}
.diferencial-descricao {font-size: 20px;}

.rodape-superior {width: 900px; left: 50%; margin-left: -450px;}
.contato-endereco {width: 500px; margin: 0; text-align: left;}
.mapa-rodape {width: 400px; height: 200px; margin: 0;}
}

/* LARGE DEVICES - WIDE SCREENS */
@media screen and (min-width: 1280px) {
.sessao-1 {width: 1200px; margin-left: -600px;}
.sessao-1-esquerda {width: 700px;}
.sessao-1-direita {width: 400px; margin-left: 50px;}
.logo img {width: 400px; margin-left: -200px; margin-bottom: 30px;}
.titulo-sessao-1 {width: 600px; margin-left: 50px; font-size: 40px;}
.descricao-sessao-1 {width: 650px; margin-left: 25px; font-size: 23px;}
.botoes-sessao-1 {width: 480px; margin-left: -240px;}
.botao-whatsapp, .botao-ligacao {width: 200px;}
.ou {width: 80px; margin-top: 19px;}

.sessao-3 {width: 1200px; margin-left: -600px;}
.sessao-3-esquerda, .sessao-3-direita {width: 600px;}

.sessao-4, .transportes-caixa {width: 1200px; margin-left: -600px;}
.titulo-sessao-4, .titulo-sessao-6 {font-size: 50px;}
.transporte {width: 400px;}

.sessao-6, .diferenciais-caixa {width: 1200px; margin-left: -600px;}
.diferencial {width: 600px; padding: 15px;}
.diferencial-descricao {font-size: 20px;}

.rodape-superior {width: 1200px; margin-left: -600px;}
.contato-endereco {width: 600px;}
.mapa-rodape {width: 600px; height: 300px;}
}