#contato {
position: relative;
background-color: #fafbff;
z-index: 1;
}
#contato::after {
content: ' ';
display: block;
height: 65.9%;
width: 86.5%;
background-color: #26276C;
border-radius: 30px 0 0 30px;
-webkit-border-radius: 30px 30px 30px 30px;
-moz-border-radius: 30px 0 0 30px;
-ms-border-radius: 30px 0 0 30px;
-o-border-radius: 30px 0 0 30px;
position: absolute;
top: 220px;
right: 7%;
background-image: url(//mistraltecnologia.com.br/wp-content/themes/mistral-tecnologia/tecnologia/form-bg.webp);
background-repeat: no-repeat;
background-position: right bottom;
} .contato-rodape{
display: none;
}
#contato .container {
width: 90%;
max-width: 1470px;
z-index: 1;
position: relative;
color: var(--branco);
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 219px 0vw 174px 0vw;
gap: 7vw;
}
#contato .container::after {
content: url(//mistraltecnologia.com.br/wp-content/themes/mistral-tecnologia/tecnologia/triangulos.png);
transform: rotate(90deg);
position: absolute;
top: 59%;
left: -9vw;
}
#contato .esq {
width: 43%;
color:#ffff;
}
#contato .titulo {
font-size: 3.65vw;
font-weight: 700;
line-height: 3.65vw;
color: #ffff;
}
#contato .texto {
font-weight: 500;
font-size: 0.833vw;
line-height: 1.2541vw;
margin-top: 33px;
}
#contato .destaque {
font-weight: 700;
font-size: 0.9375vw;
line-height: 1.3541vw;
}
#contato .dir {
margin-top: -58px;
width: 65.3%;
background-color: var(--branco);
padding: 3.02083vw 3.02083vw 2.083vw;
box-shadow: 0px 0px 10px 0px #00000033;
border-radius: 20px 20px 0 0;
-webkit-border-radius: 20px 20px 0 0;
-moz-border-radius: 20px 20px 0 0;
-ms-border-radius: 20px 20px 0 0;
-o-border-radius: 20px 20px 0 0;
position: relative;
}
* #contato .dir::before {
content: ' ';
display: block;
width: 100%;
height: 58px;
background-color: var(--roxo);
position: absolute;
left: 0;
bottom: -58px;
border-radius: 0 0 20px 20px;
box-shadow: 10px 10px 10px 0px #0000000D;
-webkit-border-radius: 0 0 20px 20px;
-moz-border-radius: 0 0 20px 20px;
-ms-border-radius: 0 0 20px 20px;
-o-border-radius: 0 0 20px 20px;
}
#contato .dir .box-input {
margin-bottom: 10px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
align-items: center;
display: flex;
gap: 9px;
}
#contato .dir .box-input::before {
content: ' ';
display: block;
width: 99%;
height: 1px;
background-color: var(--preto);
position: absolute;
bottom: 0;
left: 0.5%;
z-index: 1;
}
#contato .dir .box-input input,
#contato .dir .box-input select,
#contato .dir .box-input textarea {
width: 100%;
background-color: var(--branco);
height: 50px;
border: 1px solid #DBDBDB;
color: var(--preto);
border-radius: 5px;
font-size: 14px;
padding-left: 15px;
-webkit-transition: .2s all ease-in-out;
-o-transition: .2s all ease-in-out;
transition: .2s all ease-in-out;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
#contato .dir .box-input .inpt-telefone{
padding-left: 45px;
}
#contato .dir .box-input .ddi{
z-index: 1;
position: absolute;
top: 16px;
left: 15px;
font-weight: 300;
color: var(--preto);
font-size: 14px;
}
#contato .dir .box-input .label-form {
background-color: var(--branco);
z-index: 2;
color: var(--preto);
position: absolute;
top: 16px;
left: 15px;
font-size: 14px;
font-weight: 600;
-webkit-transition: .2s all ease-in-out;
-o-transition: .2s all ease-in-out;
transition: .2s all ease-in-out;
}
#contato .dir .box-input .label-form.subir {
font-size: 11px;
background-color: var(--roxo);
padding: 2.5px 4px 3px;
color: var(--branco);
left: 12px;
top: -9px;
z-index: 1;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
#contato .dir .box-input textarea {
resize: none;
height: 97px;
padding-top: 12px;
}
#contato .dir .box-input.box-check {
margin-top: 15px;
margin-bottom: 10px;
}
#contato .dir .box-input.box-check::before {
content: none;
}
#contato .dir #sobre-chk {
accent-color: var(--roxo);
border: none;
cursor: pointer;
line-height: 0;
margin: 0;
width: 12px;
height: 12px;
}
#contato .dir .autorizo {
font-size: 12px;
text-align: left;
flex: 1;
color: var(--preto);
}
#contato .dir .obrigatorio {
font-size: 12px;
margin-top: 15px;
opacity: .9;
color: var(--preto);
text-align: center;
font-weight: 600;
}
#contato .dir .enviar {
border: none;
font-size: 16px;
font-weight: 700;
padding: 17px 1%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
text-align: center;
display: block;
color: var(--branco);
background-color: var(--roxo);
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
cursor: pointer;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
overflow: hidden;
}
#contato .dir .enviar svg {
position: relative;
z-index: 2;
}
@media screen and (max-width: 1800px) {
#contato::after {
width: 90%;
right: 5%;
}
}
@media screen and (max-width: 1800px) {
#contato::after {
width: 95%;
right: 2.5%;
}
}
@media screen and (max-width: 1440px) {
#contato .container::after {
}
#contato::after {
width: 95%;
}
#contato .texto {
font-size: 14px;
line-height: 22px;
}
#contato .destaque {
font-size: 16px;
line-height: 24px;
}
}
@media screen and (max-width: 1024px) {
#contato .container {
flex-direction: column;
gap: 60px;
align-items: center;
padding: 150px 0vw 140px 0vw;
}
#contato .titulo {
font-size: 38px;
line-height: 42px;
margin-bottom: 40px;
}
#contato .esq {
padding: 60px 0 0 10px;
width: 100%;
}
#contato .texto {
font-size: 16px;
line-height: 24px;
}
#contato .destaque {
font-size: 18px;
line-height: 26px;
}
#contato .dir {
margin-top: 0;
width: 100%;
max-width: 600px;
padding: 40px 30px;
margin: 0 auto;
}
#contato .dir::before {
height: 40px;
bottom: -40px;
}
#contato::after{
top: 150px;
}
}
@media screen and (max-width: 600px) {
#contato .dir {
padding: 35px 20px;
width: 95%;
}
#contato .container::after {
content: none;
}
#contato .titulo {
font-size: 6.35vw;
line-height: 10vw;
}
#contato .container {
}
}
@media screen and (max-width: 460px) {
#contato .container {
}
#contato .titulo {
font-size: 30px;
line-height: 10vw;
}
#contato .dir .enviar {
font-size: 14px;
padding: 14px 1%;
gap: 10px;
}
}