:root {
--roxo: #8303FF;
--cinza-escuro: #1E1E24;
--branco: #FFFFFF;
--preto-ligth: #171C24;
--cinza-claro: #B5B5B5;
--azul-marinho: #26276C;
--azul-medio: #08A8F7;
}
.site-main {
overflow: hidden;
}
#banner {
background-color: #FAFBFF;
position: relative;
}
#banner .container {
padding: 240px 0 13vw 0;
display: flex;
justify-content: space-between;
background-color: #FAFBFF;
}
#banner .introducao h1 {
color: var(--roxo);
font-size: 2.5vw;
font-weight: 700;
line-height: 2.9vw;
}
#banner .introducao p {
width: 86.3%;
color: var(--azul-marinho);
font-size: 0.9vw;
font-weight: 400;
line-height: 1.4vw;
letter-spacing: 1%;
margin-top: 30px;
}
#banner .introducao a {
width: 294px;
height: 45px;
display: inline-flex;
align-items: center;
text-align: center;
gap: 10px;
font-size: 14px;
font-weight: 700;
color: var(--branco);
background-color: var(--roxo);
border-radius: 10px;
margin-top: 30px;
padding: 15px 12px 16px 15px;
position: relative;
overflow: hidden;
}
#banner .introducao a .decoracao {
position: absolute;
right: -13vw;
}
#banner .introducao {
width: 51%;
position: relative;
}
#banner .banner-destaque {
padding: 22vw 0 5vw;
width: 49%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
bottom: 0;
background-image: url(//mistraltecnologia.com.br/wp-content/themes/mistral-tecnologia/tecnologia/gestao/mistral-gestao-banner.webp);
background-repeat: no-repeat;
background-size: cover;
}
#banner .banner-destaque .conteudo h3 {
font-size: 14px;
font-weight: 500;
line-height: 24px;
text-align: center;
text-transform: uppercase;
color: var(--preto-ligth);
margin-bottom: 33px;
margin-left: 0;
}
#banner .banner-destaque .conteudo .numeros {
display: flex;
justify-content: flex-start;
gap: 30px;
padding-top: 20px;
}
#banner .banner-destaque .conteudo .numeros>div {
width: 33.33%;
display: flex;
flex-direction: column;
align-items: center;
}
#banner .banner-destaque .conteudo .numeros .numeros-3 {
margin-top: 47px;
width: 100%;
display: flex;
justify-content: center;
}
#banner .banner-destaque .conteudo .numeros div h4 {
font-size: 36px;
font-weight: 800;
line-height: 46px;
color: var(--branco);
padding-bottom: 10px;
}
#banner .banner-destaque .conteudo .numeros div h5 {
font-size: 12px;
font-weight: 500;
line-height: 20px;
color: var(--branco);
text-align: center;
text-transform: uppercase;
}
#banner .banner-destaque .conteudo .numeros div h4 span {
font-size: 26px;
line-height: 26px;
font-weight: 800;
color: var(--azul-medio);
}
#banner .banner-destaque .conteudo .numeros div p {
font-weight: 500;
font-size: 14px;
line-height: 16.88px;
text-align: center;
border-top: 1px solid var(--branco);
color: var(--branco);
padding-top: 10px;
}
#banner .banner-destaque .conteudo {
width: 100%;
max-width: 541px;
}
#banner .titulo-centralizado {
font-size: 14px;
line-height: 24px;
font-weight: 500;
text-align: center;
color: var(--branco);
text-transform: uppercase;
}
#servicos {
background-color: #FAFBFF;
}
#servicos .container {
background-color: #FAFBFF;
width: 90%;
max-width: 1366px;
position: relative;
padding: 6.25vw 0;
}
#servicos .header-servicos {
display: flex;
flex-direction: row;
margin-bottom: 35px;
align-items: center;
gap: 56px
}
#servicos .header-servicos h2 {
width: 50%;
font-size: 1.6666vw;
line-height: 2.0833vw;
font-weight: 300;
}
#servicos .header-servicos h2 span {
color: var(--roxo);
font-weight: 800;
line-height: 40px;
}
#servicos .header-servicos p {
font-size: 16px;
line-height: 26px;
font-weight: 500;
width: 50%;
color: var(--preto-ligth);
}
#servicos .grupo-servicos {
display: flex;
flex-direction: row;
gap: 29px;
}
#servicos .card-servicos {
display: flex;
flex-direction: column;
gap: 10px;
width: 50%;
height: 188px;
border-radius: 20px;
background-color: var(--cinza-escuro);
padding: 2.0vw 1.5vw 1.82vw 1.87vw;
margin-top: 25px;
}
#servicos .grupo-servicos .card-servicos svg {
margin-bottom: 5px;
}
#servicos .card-titulo {
color: var(--branco);
font-size: 16px;
line-height: 24px;
font-weight: 700;
}
#servicos .card-descricao {
color: var(--cinza-claro);
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
#servicos .header-servicos::after {
content: url(//mistraltecnologia.com.br/wp-content/themes/mistral-tecnologia/tecnologia/triangulos.png);
width: 40px;
height: 40px;
transform: rotate(90deg);
position: absolute;
right: -3.5vw;
}
#servicos .icon::after {
content: url(//mistraltecnologia.com.br/wp-content/themes/mistral-tecnologia/tecnologia/triangulos.png);
width: 40px;
height: 40px;
transform: rotate(90deg);
position: absolute;
right: -3.5vw;
top: 82.5%;
}
#solucoes {
padding: 2vw 0;
position: relative;
background-color: #fafbff;
}
#solucoes .titulo {
font-weight: 300;
font-size: 1.875vw;
line-height: 2.5vw;
text-align: center;
margin-bottom: 15px;
}
#solucoes .titulo span {
font-weight: 700;
color: var(--roxo);
}
#solucoes .texto {
font-weight: 500;
font-size: 0.833vw;
line-height: 1.3541vw;
text-align: center;
max-width: 1047px;
margin: 0 auto;
}
#solucoes .tit {
font-size: 1.45833vw;
line-height: 1.875vw;
color: var(--roxo);
margin-bottom: 15px;
}
#solucoes .info {
font-weight: 500;
font-size: 14px;
line-height: 20px;
}
#solucoes .blocos {
display: flex;
flex-wrap: wrap;
gap: 25px;
row-gap: 50px;
margin-top: 40px;
position: relative;
padding: 0 0 6.25vw 0;
}
#solucoes .blocos::after {
content: url(//mistraltecnologia.com.br/wp-content/themes/mistral-tecnologia/tecnologia/triangulos.png);
transform: rotate(90deg);
position: absolute;
top: 55%;
right: -5vw;
}
#solucoes::before {
content: ' ';
display: block;
width: 17.2395vw;
height: 22.4479vw;
background-image: url(//mistraltecnologia.com.br/wp-content/themes/mistral-tecnologia/tecnologia/home/solucoes-detalhe.webp);
background-size: cover;
position: absolute;
top: 22vw;
left: 0;
}
#solucoes .container {
position: relative;
}
#solucoes .antes {
width: 4.427vw;
height: 5.156vw;
position: absolute;
top: -1vw;
left: 10vw;
}
#solucoes .depois {
width: 4.427vw;
height: 5.156vw;
position: absolute;
top: 0;
right: 10vw;
}
#solucoes .box {
background-color: #eceff6;
border: 1px solid #D7D7D7;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
padding: 3.3333vw 2.8645vw;
width: calc(33.333% - 16.6666px);
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 16vw;
transition: var(--transicao);
-webkit-transition: var(--transicao);
-moz-transition: var(--transicao);
-ms-transition: var(--transicao);
-o-transition: var(--transicao);
}
#solucoes .box:hover {
box-shadow: 0px 5px 10px 0px #00000040;
}
#solucoes .btn {
color: var(--branco);
font-size: 0.7291vw;
background-color: var(--chumbo);
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
display: block;
padding: 0.59895vw 1.1458vw;
font-weight: 700;
overflow: hidden;
position: relative;
transition: var(--transicao);
-webkit-transition: var(--transicao);
-moz-transition: var(--transicao);
-ms-transition: var(--transicao);
-o-transition: var(--transicao);
position: absolute;
width: calc(100% - 5.729vw);
left: 2.8645vw;
bottom: -19px;
}
#solucoes .btn.animacao-btn::before,
#solucoes .btn.animacao-btn::after {
background: var(--roxo);
}
#solucoes .btn.animacao-btn span {
justify-content: space-between;
}
#solucoes .ico {
position: absolute;
top: 2.343vw;
right: 2.343vw;
width: 30px;
height: 30px;
}
#banner::before {
content: ' ';
display: block;
width: 22vw;
height: 38vw;
background-image: url(//mistraltecnologia.com.br/wp-content/themes/mistral-tecnologia/tecnologia/gestao/simbolo.webp);
background-size: cover;
position: absolute;
top: 10.7vw;
left: 0;
z-index: 1;
}
@media only screen and (max-width: 1800px) {
#banner .banner-destaque::before {
width: 47vw;
height: 29.5vw;
}
}
@media only screen and (max-width: 1700px) {
#banner .banner-destaque::before {
height: 30.5vw;
}
}
@media only screen and (max-width: 1600px) {
#banner .banner-destaque::before {
width: 54vw;
height: 34.5vw;
bottom: -11vw;
}
}
@media only screen and (max-width: 1440px) {
#banner .introducao p {
font-size: 18px;
line-height: 28px;
}
#banner .banner-destaque .conteudo .numeros div h4 {
font-size: 1.8vw;
}
#banner .banner-destaque .conteudo .numeros div h4 span {
font-size: 1.8vw
}
#banner .banner-destaque .conteudo .numeros div h4 {
padding-bottom: 0;
}
#banner .banner-destaque {
padding: 25vw 0 4vw;
width: 55%;
}
#banner .banner-destaque .conteudo {
max-width: 600px;
}
}
@media only screen and (max-width: 1400px) {
#banner .banner-destaque::before {
width: 54vw;
height: 33.2vw;
}
}
@media only screen and (max-width: 1385px) {
#banner .banner-destaque::before {
width: 57vw;
height: 36.2vw;
}
#banner .banner-destaque .conteudo .numeros {
padding-top: 10px;
}
}
@media only screen and (max-width: 1300px) {
#banner .banner-destaque::before {
width: 57vw;
}
}
@media only screen and (max-width: 1257px) {
#banner .banner-destaque::before {
width: 59vw;
height: 38vw;
}
#banner .introducao h1 {
font-size: 39px;
line-height: 49px;
}
#banner .container {
padding: 180px 0 13vw 0;
}
#banner .banner-destaque {
padding: 26vw 0 4vw;
width: 57%;
}
#banner .banner-destaque .conteudo {
max-width: 550px;
}
}
@media only screen and (max-width: 1200px) {
#banner .banner-destaque::before {
height: 40vw;
}
}
@media only screen and (max-width: 1190px) {
#banner .banner-destaque::before {
width: 65.2vw;
height: 41vw;
}
}
@media only screen and (max-width: 1080px) {
#servicos .card-servicos {
padding: 2.5vw 2.3vw 2.32vw 2.37vw;
}
#banner .banner-destaque::before {
width: 64.2vw;
height: 41.2vw;
}
}
@media only screen and (max-width: 1024px) {
#banner .banner-destaque .conteudo .numeros div h4 {
font-size: 36px;
font-weight: 800;
line-height: 46px;
padding-bottom: 10px;
}
#banner .banner-destaque .conteudo .numeros div h5 {
font-size: 12px;
font-weight: 500;
line-height: 20px;
text-align: center;
text-transform: uppercase;
}
#banner .banner-destaque .conteudo .numeros div h4 span {
font-size: 26px;
line-height: 26px;
font-weight: 800;
}
#banner .banner-destaque .conteudo .numeros div p {
font-weight: 500;
font-size: 14px;
line-height: 16.88px;
text-align: center;
padding-top: 10px;
}
#banner .introducao {
width: 100%;
padding: 0 5%;
}
#banner .container {
width: 100%;
padding: 150px 0 100px;
flex-direction: column;
margin: 0;
}
#banner .container .decoration {
width: 100%;
}
#banner .banner-destaque .conteudo .numeros {
flex-direction: row;
width: 90%
}
#banner .introducao p {
width: 100%;
}
#banner .introducao a {
width: 294px
}
#banner .banner-destaque {
width: 100%;
position: relative;
margin-top: 60px;
padding: 42vw 0 8vw;
}
#servicos .grupo-servicos {
flex-direction: column;
align-items: center;
gap: 0;
}
#servicos .card-servicos {
width: 100%;
margin-top: 29px;
padding: 3.8vw 3.38vw 3.4vw 3.5vw;
}
#servicos .icon::after {
right: -25px;
top: 90%;
}
.flex {
flex-direction: column;
}
#servicos .header-servicos {
margin-bottom: 0px;
flex-direction: column;
gap: 20px;
}
#servicos .header-servicos p {
width: 100%;
}
#servicos .header-servicos h2 {
width: 100%;
font-size: 36px;
line-height: 48px;
}
#servicos .header-servicos h2 br {
display: none;
}
#banner .banner-destaque::before {
width: 100%;
height: 190%;
bottom: -38vw;
right: calc(-5% - 0.5vw);
}
#servicos .container {
width: 90%;
max-width: 1366px;
position: relative;
padding: 10px 0 6.25vw 0;
}
#solucoes .titulo {
font-size: 36px;
line-height: 48px;
}
#solucoes .box {
width: 41.7vw;
height: auto;
padding: 10.2vw 5.3vw 7vw;
}
#solucoes .btn.animacao-btn span {
font-size: 14px;
}
#solucoes .btn {
padding: 1.13vw 2.15vw;
}
#solucoes .tit {
font-size: 2.5vw;
}
#solucoes .ico {
position: absolute;
top: 4.343vw;
right: 4.343vw
}
#solucoes .depois {
display: none;
}
#solucoes .container {
z-index: 2;
}
#solucoes::before {
display: none
}
#solucoes .antes {
display: none;
}
}
@media only screen and (max-width: 900px) {
#banner .banner-destaque::before {
bottom: -40vw;
}
}
@media only screen and (max-width: 800px) {
#banner .banner-destaque::before {
bottom: -45vw;
}
}
@media only screen and (max-width: 768px) {
#solucoes .ico {
width: 4vw;
height: 4vw;
}
}
@media only screen and (max-width: 700px) {
#banner .banner-destaque::before {
bottom: -50vw;
}
#servicos .container {
padding: 10px 0 6.25vw 0;
}
}
@media only screen and (max-width: 600px) {
#banner .banner-destaque::before {
height: 165%;
}
#servicos .grupo-servicos .card-servicos svg {
width: 35px;
height: 35px;
}
#banner .banner-destaque::before {
bottom: -60vw;
}
#banner .banner-destaque .conteudo .numeros {
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}
#banner .introducao {
max-width: 100%;
}
#solucoes .blocos {
flex-direction: column;
align-items: center;
padding: 0px 0 20.2vw 0;
}
#solucoes .box {
width: 100%;
padding: 15.5vw 9vw 10vw;
z-index: 1;
}
#solucoes .btn {
padding: 1.93vw 3.7vw;
}
#solucoes .ico {
width: 5vw;
height: 5vw;
top: 7.8vw;
right: 7.8vw;
}
#solucoes .tit {
font-size: 4.5vw;
line-height: 6vw;
}
#solucoes .titulo,
#servicos .header-servicos h2 {
font-size: 6vw;
line-height: 8vw;
}
#servicos .header-servicos h2 {
width: 100%;
}
#banner .banner-destaque {
justify-content: flex-end;
background-image: url(//mistraltecnologia.com.br/wp-content/themes/mistral-tecnologia/tecnologia/gestao/mistral-gestao-banner-mobile.webp);
padding: 82vw 0px 13vw;
}
#banner .banner-destaque .conteudo .numeros>div {
width: calc(50% - 7.5px);
}
#banner .banner-destaque .conteudo {
max-width: 85%;
}
}
@media only screen and (max-width: 530px) {
#banner .banner-destaque::before {
width: 110%;
height: 160%;
bottom: -64vw;
}
}
@media only screen and (max-width: 500px) {
#solucoes .depois {
right: 6vw;
}
}
@media only screen and (max-width: 425px) {
#banner .introducao h1 {
font-size: 32px;
line-height: 42px;
}
#banner .banner-destaque::before {
width: 120%;
bottom: -80vw;
}
#solucoes .box {
padding: 25vw 7vw 15vw;
}
#solucoes .depois {
right: 3vw;
}
#solucoes::before {
top: 28vw;
}
#banner .introducao {
max-width: 100%;
}
#solucoes .ico {
width: 7vw;
height: 7vw;
}
#solucoes .btn {
padding: 2.7vw 5vw;
}
#banner .banner-destaque .conteudo .numeros div p {
font-size: 12px;
line-height: 14.88px;
}
#banner .titulo-centralizado {
font-size: 12px;
line-height: 20px;
}
#servicos .card-servicos {
padding: 15px;
}
}
@media only screen and (max-width: 400px) {
#banner .c #banner .banner-destaque::before {
bottom: -90vw;
width: 125%;
}
#banner .banner-destaque .conteudo .numeros {
width: 95%;
}
}
@media only screen and (max-width: 385px) {
#servicos .grupo-servicos .card-servicos svg {
width: 30px;
height: 30px;
}
#banner .banner-destaque::before {
width: 130%;
bottom: -90vw;
}
}
@media only screen and (max-width: 345px) {
#servicos .grupo-servicos .card-servicos svg {
width: 30px;
height: 30px;
}
#banner .banner-destaque::before {
width: 142%;
bottom: -100vw
}
#banner .banner-destaque .conteudo .numeros div h4 {
font-size: 26px;
line-height: 32px;
}
}