@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;700;800&display=swap');


*{
    margin: 0;
    padding:0;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

html{
    overflow-x: hidden !important;
    font-size: 62.5%;
}

body{
    overflow-x: hidden !important;
}

a{
    text-decoration: none;
}

a:hover{
    text-decoration: none;
}

h2{
    font-size: 3.5rem !important; 
    font-weight: 600 !important;
    font-family: 'Montserrat';
}

.container{
    width: 80%;
    margin: auto;
    display: flex;
}

.fundo-principal{
    width: 100vw;
    background: linear-gradient(to bottom right,rgba(149, 149, 158, 0.678), rgba(17, 17, 19, 0.658)), url(img/fundo-original.jpeg);
    background-size: cover;
    background-position: right top;
    padding-bottom: 6rem;
    border-bottom: 3px solid #ae966a;
}

header{
    width: 100vw;
    padding: 1rem 0;
}


header img{
    width: 30rem;
}

.destaque{
    width: 100vw;
    color: #fff;
    text-align: center;
}



.destaque .container{
    padding-top: 8rem;
}

.destaque-text{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    text-shadow: -2px 2px  3px #000000be;

}

.destaque h2{
    font-size: 5.2rem !important;
    font-weight: 700;
}

.destaque p{
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.3rem;
}

.whatsapp-button{
    display: inline;
    padding: 1rem 1.5rem;
    font-size: 1.6rem;
    border-radius: 8px;
    font-weight: 700;
    background-color: #590c13;
    text-shadow: none;
   
    color: #fff;
}

.whatsapp-button img{
    width: 2rem;
}

.inss{
    width: 100vw;
    background-color: #111;
    padding: 6.5rem 0;
    color: #fff;
    border-bottom: 2px solid #ae966a;
}

.inss .container{
    flex-direction: column;
    align-items: center;
    gap: 3rem;

}

.inss-img{
    width: 90%;
    height: 40rem;
    background: linear-gradient(rgba(17, 17, 17, 0.493), rgba(17, 17, 17, 0.564)), url(img/inss-2.jpeg);
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    padding: 5px;
   
}

.inss-text{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
}

.inss-img p{
    font-size: 2.5rem;
    text-align: center;
    font-weight: 700;
}


.como-podemos{
    width: 100vw;
    padding: 6rem 0;
    background-color: #212121;
    color: #fff;
    border-bottom: 2px solid #ae966a;
}

.como-podemos .container{
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}

.beneficios-division{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    width: 100%;
}

.beneficio-card{
    width: 45% ;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;

   
    background-color: rgb(253, 251, 251);
    background-color: #FBFBFF;
    color: #000;
    padding: 20px;
    border-radius: 0 15px 0 15px;
    border-bottom: 3px solid #ae966a;
    text-align: center;
}

.beneficio-card h3{
    font-size: 2rem;
    font-weight: 500;
}

.beneficio-card img{
    width: 4rem;
}

.beneficio-card p{
    font-size: 1.6rem;
    font-weight: 400;
}



.quem-somos{
    width: 100vw;
    padding: 6rem 0;
    background-color: #111;
    border-bottom: 2px solid #ae966a;
}

.quem-somos .oab{
    font-size: 2rem;
    align-self: flex-start;
}

.quem-somos .container{
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}


.quem-img{
    width: 50%;
}

.quem-img img{
    width: 100%;
    border-radius: 15px 0px 15px 0px;
}

.quem-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    width: 50%;
    color: #fff;
    text-align: center;
    color: #fff;  
}
.quem-text .title{
    align-self: flex-start;
}

.quem-text h2{
    text-align: start;
    font-size: 4rem;
    margin-bottom: 1rem;
}

.quem-text p{
    font-size: 1.8rem;
    line-height: 2.3rem;
    text-align: justify;
}

.traco{
    width: 25rem;
    height: 2px;
    background-color: #ae966a;
    margin: 1rem auto;
}



.porque{
    width: 100vw;
    background-color: #212121;
    padding: 6.5rem 0;
    border-bottom: 2px solid #ae966a;
}

.porque .container{
    flex-direction: row;
    gap: 2rem;
}

.porque-text{
    width: 60%;
    color: #fff;
    text-align: center;
}

.porque-text p{
    font-size: 1.6rem;
    line-height: 2rem;
    font-weight: 400;
    text-align: justify;
    margin: 2rem 0;
}

.porque-img{
    width: 40%;
    position: static;
}

.porque-img img{
    width: 100%;
    border-radius: 0 15px 0 15px;
}

.escritorio-img{
    width: 50%;
    display: flex;
    justify-content: center;
}

.images-grid{
    width: 400px;
    display: grid;
    grid-template-columns: 230px 1fr;
    grid-template-rows: 160px 160px;
    grid-template-areas:
     "image1 image2 "
     "image1 image3";
     gap: 10px;
}

.images-grid img{
    height: 100%;
    width: 100%;
}

.image1{
    grid-area: image1;
}

.image2{
    grid-area: image2;
}

.image3{
    grid-area: image3;
}


.atendimento{
    width: 100vw;
    padding: 6rem 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right(50px);
    background:  linear-gradient(#1f191988, #13090993) , url(img/brasil.jpg);
    background-size: cover;
    background-position: center;
    color: #fff;
    background-attachment: fixed;
    border-bottom: 2px solid #ae966a;

}

.atendimento p{
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
    text-shadow: -1px 1px  2px #000000be;
}

.atendimento .container{
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.atendimento .whatsapp{
    background-color: #000;
}


.duvidas{
    width: 100vw;
    background-color:  #111;
    color:#fff;
    padding: 6.5rem 0;
    border-bottom: 2px solid #ae966a;

}

.duvidas .container{
    flex-direction: row;
    justify-content: space-between;
    gap: 3rem;
}

.duvidas p{
    font-size: 1.8rem;
    line-height: 2rem;
    font-weight: 400;
    margin-top: 2rem;
    text-align: justify;
}

.solicitar{
    width: 50%;
}

.vantagens{
    width: 45%;
}

.vantagens h3{
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.vantagens li{
    background-color: rgba(0, 0, 0, 0.616);
    margin: 1.5rem 0;
    padding: 10px;
    font-size: 1.6rem;
    list-style: none;
}

.vantagens li img{
    height: 15px;
}

.clientes{
    width: 100vw;
    padding: 6.5rem 0;
    background-color: #212121;
    border-bottom: 2px solid #ae966a;
    color: #fff;
}
.clientes h2{
    font-weight: 700;
    text-align: center;
}

.clientes .container{
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.clientes video{
    width: 400px;
}

.consulta{
    width: 100vw;
    background-color: #FBFBFF;
    color: #ae966a;
    padding: 6.5rem 0;
    border-bottom: 2px solid #ae966a;
}


.consulta .container{
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.consulta p{
    font-size: 1.8rem;
    font-weight: 500;
    text-align: center;
    color: #111;
}

.consulta .traco{
    background-color: #ae966a;
}


.equipe{
    width: 100vw;
    padding: 6rem 0;
    border-bottom: 2px solid #ae966a;

}
.equipe .container{
    flex-direction: column;
    gap: 3rem;
}

.equipe .equipe-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem ;
}

.equipe .equipe-container .equipe-card{
    width:23%;
    max-width: 300px;
    min-width: 180px;
    height: 300px;
    border: .5px solid rgba(0, 0, 0, 0.300);
    background-size: cover;
    background-position: center;
    color: #fff;
    font-size: 1.8rem;
    padding: 10px;
    display: flex;
    align-items: flex-end;
}

.equipe .equipe-container #brian {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.300), rgba(0, 0, 0, 0)), url(img/Brian-Davies.jpg);
    background-size: cover;
    background-position: top center;

}

.equipe .equipe-container #cintia {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.990), rgba(0, 0, 0, 0.300), rgba(0, 0, 0, 0)), url(img/Cintia-Rocha.jpg);
    background-size: cover;
    background-position: top center;

}

.equipe .equipe-container #tainara {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.990), rgba(0, 0, 0, 0.300), rgba(0, 0, 0, 0)), url(img/Tainara-Isadora.jpg);
    background-size: cover;
    background-position: top center;
}

.equipe .equipe-container #maria {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.990), rgba(0, 0, 0, 0.300), rgba(0, 0, 0, 0)), url(img/maria-eduarda.png);
    background-size: cover;
    background-position: top center;
}

.equipe .equipe-container #joyce {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.990), rgba(0, 0, 0, 0.300), rgba(0, 0, 0, 0)), url(img/joyce-camilo.png);
    background-size: cover;
    background-position: top center;
}

.equipe .equipe-container #joao {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.990), rgba(0, 0, 0, 0.300), rgba(0, 0, 0, 0)), url(img/joao.png);
    background-size: cover;
    background-position: top center;
}

.equipe .equipe-container #maine {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.990), rgba(0, 0, 0, 0.300), rgba(0, 0, 0, 0)), url(img/maine.png);
    background-size: cover;
    background-position: center center;
}

.equipe .equipe-container #eleonora {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.990), rgba(0, 0, 0, 0.300), rgba(0, 0, 0, 0)), url(img/Eleonora.png);
    background-size: cover;
    background-position: 50% 30%;
}
.equipe .equipe-container #helena {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.990), rgba(0, 0, 0, 0.300), rgba(0, 0, 0, 0)), url(img/Helena.png);
    background-size: cover;
    background-position: bottom center;
}




.dados{
    background-color: #212121;
    color: #fff;
    width: 100vw;
    padding: 6rem 0;
    border-bottom: 2px solid #ae966a;

}

.dados .container{
    gap: 2rem;
    justify-content: center;
}

.dados h3{
    font-size: 2rem;
    margin-bottom: 10px;
}

.insta{
    height: 480px;
    overflow: hidden;
}

.elfsight-app-afbca9cd-73c4-4bcf-a633-bfb010600ef4 a.eapps-link{
    background: none !important;
    opacity: 0;
}

footer{
    width: 100vw;
    background-color: #111;
    padding-top: 5rem;
    padding-bottom: 3.5rem;
    color: #fff;
}

footer .container{
    flex-direction: column;
    gap: 2rem;
}

footer .footer-div{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

footer ul{
    list-style: none;
}

footer li{
    font-size: 1.2rem;
    margin: 1rem;
}

footer li img{
    width: 1.5rem;
}


.social img{
    width: 5rem;
    margin-left: .5rem;
}

.cop{
    font-size: 1.2rem;
    align-self: center;
    text-align: center;
}

.whatsapp-fixed{
    background-color: rgb(3, 168, 3);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 60px;
    border-radius: 100%;
    position: fixed;
    left: calc(100vw - 85px);
    bottom: 15px;
    padding: 10px;
    z-index: 10;
}

.whatsapp-fixed img{
    width: 70%;
}

.politica .container{
    flex-direction: column;
}



@media (max-width:991px){
    html{
        font-size: 55%;
    }
    .container{
        width: 90%;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .fundo-principal{
        background-position: center;
    }

    .destaque .container{
        padding-top: 4rem;
    }
    .destaque h2{
        font-size: 4.5rem;
    }

    .inss-img{
        width: 100%;
    }

    h2{
        text-align: center;
    }
    .beneficio-card{
        width: 95%;
    }
    .quem-img{
        width: 100%;
    }
    .quem-text{
        width: 100%;
    }
    .porque .container{
        gap: 3rem;
    }
    .porque-text{
        width: 100%;
    }
     .porque .container{
        gap: 3rem;
    }
    
   .clientes video{
    width: 90%;
   }
    .clientes h2{
        font-size:3rem ;
    }
    .solicitar{
        width: 100%;
    }
    .vantagens{
        width: 100%;
    }

    .escritorio-img{
        width: 100%;
    }

    .equipe .equipe-container{
        flex-wrap: wrap;
    }

    .equipe .equipe-container .equipe-card{
        width: 100%;
    }

    
    .location iframe{
        width: 100%;
    }

    .insta{
        margin: center;
    }

    .insta div{
        width: 100%;
    }
    
    .dados .container{
        align-items: center;
        justify-content: center;
    }

    .insta iframe{
        min-width: 150px;
    }

    .insta div blockquote{
        width: 100%;
    }

    footer .footer-div{
        justify-content: center;
    }
}

@media (max-width: 460px){
    .destaque h2{
        font-size: 4rem !important;
    }
    .images-grid{
        width: 90%;
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: 110px 110px;
       
    }
}

@media (max-width:300px){
    html{
        font-size: 50%;
    }

}