@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap');

html {
    scroll-behavior: smooth;
}

body,
ul {
    font-family: 'Nunito Sans', sans-serif;
    padding: 0;
    margin: 0;
}

* {
    margin: 0%;
}

.containerSite {
    display: grid;
    grid-template: 110px auto auto auto 450px 1fr 40px / 1fr 1fr;
    /* gap: 3px; */
    color: white;
    /* background-color: black; */
    /* padding: 10px; */
}

.header {
    background-color: white;
    /* background-color: rgb(95, 95, 95); */
    grid-column-start: 1;
    grid-column-end: 3;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.main-1 {
    background-color: #000;
    grid-column-start: 1;
    grid-column-end: 3;
    display: flex;
    flex-direction: row;
    /* align-items: stretch; */
    justify-content: center;
    /* align-self: center; */
    /* flex-wrap: wrap; */
    padding: 80px 50px;
    box-sizing: border-box;
    gap: 80px;
}

.areaAtuacao {
    /* background-color: blue; */
    grid-column-start: 1;
    grid-column-end: 3;
}

.quemSomos {
    background-color: #f1f1f1;
    grid-column-start: 1;
    grid-column-end: 3;
    display: grid;
    grid-template: 50px 1fr auto / 1fr 1fr;
    padding: 20px 50px;
    box-sizing: border-box;
    row-gap: 30px;
}

@media only screen and (max-width: 464px) {

    #edificio {
        width: 100%;
    }
}

.localizacao {
    /*     background-color: green; */
    grid-column-start: 1;
    grid-column-end: 3;
}

.contato {
    background-color: white;
    grid-column-start: 1;
    grid-column-end: 3;
    display: flex;
    justify-content: center;
    padding: 50px;
    color: #000;
    /*     background-color: #005e05; */
    gap: 70px;
}

.footer {
    grid-column-start: 1;
    grid-column-end: 3;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    color: white;
    gap: 10px;
    /*     border: solid 1px black; */
}

.footer a{
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer img{
    height: 18px;
}

/* -------------------------------------- */

.mainAbout {
    max-width: 500px;
    /* height: 50px; */
    /*     border: solid 1px white; */
    font-size: 20px;
    text-align: center;
    line-height: 1.6;
    line-height: 1.3;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
}

.formContactMain {
    display: grid;
    grid-template: 1fr 1fr 1fr 3fr 1fr / 1.5fr 1fr;
    gap: 15px;

    max-width: 500px;

    /*     border: solid 1px black; */
}

.inputNome1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
}

.inputEmail1 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
}

.inputTel1 {
    grid-column-start: 1;
    grid-column-end: 3;
}

.inputAssunto1 {
    grid-column-start: 1;
    grid-column-end: 3;
}

.inputMsg1 {
    grid-column-start: 1;
    grid-column-end: 3;
    resize: none;
}

.containerBtn1 {
    grid-column-start: 2;
    grid-column-end: 3;
}

#btnForm1 {
    width: 100px;
    height: 46px;
    float: right;
    cursor: pointer;
    background-color: #D08D57;
    color: #FFF;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    font-family: 'Nunito Sans', sans-serif;
}

#btnForm1:hover:after {
    content: url(./icons/seta.svg);
    color: #000;
}

textarea:focus,
input:focus {
    outline: none;
}

.form1 {
    font-family: 'Nunito Sans', sans-serif;
    padding: 16px;
    background-color: #eeeeee;
    border: none;
    color: #011C40;
}

::-webkit-input-placeholder {
    /* Edge */
    color: #011C40;
}

:-ms-input-placeholder {
    /* Internet Explorer */
    color: #011C40;
}

::placeholder {
    color: #011C40;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Trava o Chrome ao passar o mouse */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Aparentemente, alguma margem ainda está lá, embora esteja oculta */
}

input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

@media only screen and (max-width: 990px) {
    .main-1 {
        flex-direction: column;
        padding: 50px 50px;
        gap: 20px;
    }

    .mainAbout {
        width: 100%;
        max-width: none;

        justify-content: space-evenly;
    }

    .formContactMain {
        display: grid;
        grid-template: 1fr 1fr 1fr 3fr 1fr / 50% 50%;

        max-width: none;
        width: 98%;
    }
}

@media only screen and (max-width: 770px) {

    .formContactMain {
        display: grid;
        grid-template: 1fr 1fr 1fr 1fr 3fr 1fr / 1fr 1fr;


        max-width: none;
    }

    .inputNome1 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 1;
    }

    .inputEmail1 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 2;
    }

    .inputTel1 {
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .inputAssunto1 {
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .inputMsg1 {
        grid-column-start: 1;
        grid-column-end: 3;
        resize: none;
    }

    .containerBtn1 {
        grid-column-start: 2;
        grid-column-end: 3;
    }

}


/* -------------------------------------- */

.titleAtuacao {
    /* border-bottom: solid 4px red; */
    height: 50px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    text-transform: uppercase;
    text-align: center;
    color: #000;
    font-weight: 700;
}

#linhaMain {
    width: 40%;
    border-bottom: solid 2px #ffffff;
}

#linha {
    width: 23%;
    margin-top: 10px;
    border-bottom: solid 3px #000;
}

#linhaArea {
    width: 40%;
    border-bottom: solid 3px #000;
    margin: 5px;
}

.cardAreas {
    /* border: solid 1px red; */
    /* height: 500px; */
    /* width: 100%; */
    padding: 50px;
    /* pode esticar e preencher espaço vazio do pai */
    flex-grow: 1;
    display: grid;
    /* grid-template: auto auto auto / auto auto auto; */
    /*  grid-template-columns: auto auto auto; */
    /* Cards Responsivos */
    grid-template-columns: repeat(3, minmax(280px, 0fr));
    justify-content: center;
    align-content: center;
    gap: 50px 80px;
}

@media only screen and (max-width: 1120px) {
    .cardAreas {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

.area {
    width: 300px;
    height: 300px;
    margin: auto;
    /*     border: solid 1px black; */
    border-radius: 10px;
    /* box-shadow: 0px 0px 10px 0px  rgba(0, 0, 0, 0.226); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* transition: .5s; */
    /*     background-color: red; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #000;
    font-weight: 700;
    font-size: 20px;
}

.ar {
    width: 280px;
    height: 424px;
    /*     border: solid 1px green; */
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.226);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    cursor: pointer;
}

.Empresarial {
    background-image: url(./images/a-empresarial.png);
}

.Contratual {
    background-image: url(./images/a-contratual.png);
}

.Familia {
    background-image: url(./images/a-familia.png);
}

.Matrimonial {
    background-image: url(./images/a-matrimonial.png);
}

.Bancario {
    background-image: url(./images/a-bancaria.png);
}

.Internacional {
    background-image: url(./images/a-internacional.png);
}

.mask {
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.3;
    transition: .5s;
}

.mask:hover {
    opacity: 0.1;
}

/* -------------------------------------- */

.titleQuemSomos {
    /* background-color: white; */
    /*     background-color: rgb(145, 0, 158); */
    /* height: 50px; */
    /* width: 50px; */
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    margin-top: 15px;
}

.video {
    /* background-color: white; */
    /* background-color: rgb(255, 238, 0); */
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 25px 0px 0px 0px;
}

.containerVideo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: solid 1px black; */
}

@media only screen and (min-width: 1300px) {

    .containerTexto {
        max-width: 600px;
    }

}

#video {
    width: 550px;
}

.texto {
    /* background-color: white; */
    /* background-color: rgb(204, 109, 1); */

    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
    text-align: justify;
    padding: 20px 40px;
    /* padding-right: 80px; */
    color: #011C40;
}

@media only screen and (max-width: 1270px) {

    .titleQuemSomos {
        /* background-color: rgb(145, 0, 158); */
        /* height: 50px; */
        /* width: 50px; */
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        font-weight: 700;
        text-transform: uppercase;
        /* margin-top: 15px; */
    }

    .video {
        /*  background-color: rgb(255, 238, 0); */
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    #video {
        width: 90%;
    }

    .texto {
        /* background-color: rgb(204, 109, 1); */
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 4;
        padding: 20px 40px;
    }

}

/* -------------------------------------- */

.maps {
    width: 100%;
    height: 100%;
}

/* -------------------------------------- */

.logoMenu {
    background-color: white;
    display: flex;
    align-items: center;
}

#menu {
    display: flex;
    list-style: none;
    gap: 5px;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    /* background-color: red; */
}

.linkMenu {
    display: block;
    text-decoration: none;
    color: #000;
    font-size: 16px;
    padding: 10px;
}

.linkMenu:hover {
    background-color: #D08D57;
    color: white;
}

#btnMobile {
    display: none;
    /* display: block; */
}

@media only screen and (max-width: 800px) {

    #btnMobile {
        display: flex;
        gap: 5px;
        padding: 5px 1px;
        font-size: 1rem;
        border: none;
        background: none;
        cursor: pointer;
        color: #011C40;
        font-family: 'Nunito Sans', sans-serif;
    }

    #hamburguer {
        color: #000;
        width: 20px;
        border-top: solid 2px;
    }

    #hamburguer::after,
    #hamburguer::before {
        content: "";
        display: block;
        width: 20px;
        height: 2px;
        margin-top: 5px;
        background: currentColor;
        transition: .3s;
        position: relative;
    }

    #menu {
        display: block;
        position: absolute;
        width: 100%;
        top: 110px;
        right: 0px;
        background-color: white;
        transition: .6s;
        z-index: 10000;
        height: 0px;
        visibility: hidden;
        overflow-y: hidden;
    }

    .linkMenu {
        color: #011C40;
        padding: 10px 0;
        margin: 0 5px;
        border-bottom: solid 2px #000;
    }

    #nav.active #menu {
        display: block;
        height: calc(100vh - 110px);
        visibility: visible;
        overflow-y: auto;
    }

    #nav.active #hamburguer {
        /* background: blue; */
        border-top-color: transparent;
    }

    #nav.active #hamburguer::before {
        transform: rotate(135deg);
    }

    #nav.active #hamburguer::after {
        transform: rotate(-135deg);
        top: -7px;
    }
}

/* -------------------------------------- */

.contato-child1 {
    /*     border: solid 1px red; */
    max-width: 545px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

.contato-child2 {
    /*     border: solid 1px red; */
    max-width: 545px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contato-child1 a {
    color: white;
}

.contato a {
    color: #000;
}

@media only screen and (max-width: 550px) {

    .quemSomos {
        padding: 15px 0px;
        row-gap: 10px;
    }
}

.formContactFooter {
    display: grid;
    grid-template: 1fr 1fr 1fr 3fr 1fr / 2fr 1fr;
    gap: 15px;

    max-width: 510px;
}

.inputNome2 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
}

.inputEmail2 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
}

.inputTel2 {
    grid-column-start: 1;
    grid-column-end: 3;
}

.inputAssunto2 {
    grid-column-start: 1;
    grid-column-end: 3;
}

.inputMsg2 {
    grid-column-start: 1;
    grid-column-end: 3;
    resize: none;
}

.containerBtn2 {
    grid-column-start: 2;
    grid-column-end: 3;
}

#btnForm2 {
    width: 100px;
    height: 46px;
    float: right;
    cursor: pointer;
    background-color: #000;
    color: white;
    font: bold;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

#btnForm2:hover:after {
    content: url(./icons/seta_branca.svg);
}

textarea:focus,
input:focus {
    outline: none;
}

.form2 {
    font-family: 'Nunito Sans', sans-serif;
    padding: 18px;
    background-color: #eeeeee;
    border: none;
    color: #011C40;
}


@media only screen and (max-width: 980px) {

    .contato {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px 50px;
        gap: 10px;
    }

    .contato-child1 {
        height: 100%;
        max-width: none;
        width: 100%;
    }

    .contato-child2 {
        height: 100%;
        max-width: none;
        width: 100%;
    }

    .formContactFooter {
        display: grid;
        grid-template: 1fr 1fr 1fr 3fr 1fr / 50% 50%;

        max-width: none;
        width: 90%;
    }

}

@media only screen and (max-width: 770px) {

    .formContactFooter {
        display: grid;
        grid-template: 1fr 1fr 1fr 1fr 3fr 1fr / 2fr 1fr;
        gap: 10px;

        max-width: none;
    }

    .inputNome2 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 1;
    }

    .inputEmail2 {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 2;
    }

    .inputTel2 {
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .inputAssunto2 {
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .inputMsg2 {
        grid-column-start: 1;
        grid-column-end: 3;
        resize: none;
    }

    .containerBtn2 {
        grid-column-start: 2;
        grid-column-end: 3;
    }

}

/* -------------------------------------- */

.whatsAppFloat {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: white;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    text-decoration: none;
    z-index: 100000;
}

.callFloat {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    left: 30px;
    background-color: #5f5f5f;
    color: white;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    text-decoration: none;
    z-index: 100000;
}