main h2 {
    width: fit-content;
    margin: auto;
    margin-top: var(--margin);
    color: var(--azul);

    font-size: 32px;
    font-weight: bold;
}

main  h3 {
    display: block;

    width: fit-content;

    margin: var(--padding) auto;

    font-size: 28px;

    color: var(--azul);
}

main  h4 {
    display: block;

    width: fit-content;

    margin: var(--padding) auto;

    font-size: 22px;

    color: var(--azul);
}

main .banners {
    aspect-ratio: 50/9;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Banner */
main .bannerPrincipal {
    aspect-ratio: 32/9;
    
    background-image: url("/content/img/FMB-banner004.jpg");
}

main .bannerPrincipal div {
    width: 100%;
    height: 100%;

    background-color: var(--azulTransparente);
}

main .bannerPrincipal div h1 {
    display: block;

    width: 500px;

    line-height: 1.5;

    font-size: 22px;

    text-align: center;

    position: relative;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    color: white;
}

/* Escritório */
main .escritorio {
    width: 90%;

    margin: auto;
    margin-top: var(--margin);
}

main .escritorio img {
    display: block;

    width: 150px;

    margin: auto;
}

main .escritorio .itens {
    display: flex;
    flex-wrap: wrap;
}

main .escritorio .itens .item {
    flex: 1;
    min-width: 300px;

    vertical-align: middle;

    margin: 10px;
    padding: 10px;

    border-radius: 10px;
}

main .escritorio .itens .img {
    aspect-ratio: 16/9;

    background-image: url("/content/img/predio-fmb.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

main .escritorio .itens .text {
    background-color: lightgray;
}

main .escritorio .itens .text div {
    width: 50%;
    min-width: 250px;

    position: relative;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

main .escritorio .itens .text div h4, main .escritorio .itens .text div p:last-of-type {
    width: fit-content;

    margin: auto;
    margin-top: 10px;
}

main .escritorio .itens .text div p {
    display: block;

    margin: auto;
    margin-top: 10px;

    text-align: justify;
}

main .escritorio .itens .text div h4 {
    font-size: 22px;
    font-weight: bold;

    color: var(--azul);
}

main .escritorio .itens .text div p:first-of-type {
    margin-top: auto;
}

/* Diferenciais */
main .bannerDiferenciais {
    margin-top: var(--margin);

    background-image: url("/content/img/FMB-banner005.jpg");
}

main .bannerDiferenciais div {
    display: block;

    width: 100%;
    height: 100%;

    background-color: var(--douradoTransparente);
}

main .bannerDiferenciais div h2 {
    display: block;

    width: fit-content;

    margin: 0;

    position: relative;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    color: white;
}

main .diferenciais {
    width: 90%;

    margin: auto;
    margin-top: var(--margin);
}

main .diferenciais .itens {
    display: flex;
    flex-wrap: wrap;
}

main .diferenciais .itens .item {
    flex: 1;

    min-width: 300px;

    margin: var(--margin);
    padding: var(--margin);

    border-radius: var(--padding);

    background-color: var(--azulTransparente);
}

main .diferenciais .itens .item img {
    display: block;

    width: 100px;

    margin: auto;
}

main .diferenciais .itens .item p {
    text-indent: 25px;
    text-align: justify;
}

/* Áreas de Atuação */
main .bannerAreasAtuacao {
    margin-top: var(--margin);

    background-image: url("/content/img/civil-003.jpg");
}

main .bannerAreasAtuacao div {
    display: block;

    width: 100%;
    height: 100%;

    background-color: var(--douradoTransparente);
}

main .bannerAreasAtuacao div h2 {
    display: block;

    width: fit-content;

    margin: 0;

    position: relative;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    color: white;
}

main .areasAtuacao {
    width: 90%;

    margin: auto;
}

main .areasAtuacao .itens {
    display: flex;
    flex-wrap: wrap;
}

main .areasAtuacao .itens .item {
    aspect-ratio: 16/9;
    flex: 1;

    min-width: 300px;

    margin: var(--margin);
}

main .areasAtuacao .itens .item ul {
    list-style: disc;
    list-style-position: inside;
}

main .areasAtuacao .previdenciario .img {
    background-image: url("/content/img/previ-003.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    border-radius: var(--padding);
}

main .areasAtuacao .imobiliario .img {
    background-image: url("/content/img/casa-001.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    border-radius: var(--padding);
}

/* Equipe */
main .bannerEquipe {
    margin-top: var(--margin);

    background-image: url("/content/img/civil-003.jpg");
}

main .bannerEquipe div {
    display: block;

    width: 100%;
    height: 100%;

    background-color: var(--azulTransparente);
}

main .bannerEquipe div h2 {
    display: block;

    width: fit-content;

    margin: 0;

    position: relative;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    color: white;
}

main .equipe {
    width: 90%;

    margin: auto;
}

main .equipe .itens {
    display: flex;

    flex-wrap: wrap;
}

main .equipe .itens .item {
    aspect-ratio: 16/9;

    flex: 1;
    flex-wrap: wrap;

    min-width: 300px;

    margin: var(--margin);
    border-radius: var(--padding);
}

main .equipe .itens .item img {
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: top;

    display: block;
    width: 100%;

    border-radius: var(--padding);
}

main .equipe .itens .img {
    border-radius: var(--padding);

    background-image: url("/content/img/frank-002.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

main .equipe .itens .item ul {
    list-style: disc;
    list-style-position: inside;
}

/* Contato */
main .bannerContato {
    margin-top: var(--margin);

    background-image: url("/content/img/FMB-banner004.jpg");
}

main .bannerContato div {
    display: block;

    width: 100%;
    height: 100%;

    background-color: var(--douradoTransparente);
}

main .bannerContato div h2 {
    display: block;

    width: fit-content;

    margin: 0;

    position: relative;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    color: white;
}

main .contato {
    width: 90%;

    margin: auto;
}

main .contato p {
    width: 50%;
    min-width: 300px;

    margin: auto;
    margin-top: var(--padding);
}

main .contato form {
    width: 50%;
    min-width: 300px;

    margin: auto;
    
    display: none;
}

main .contato form div label {
    display: block;

    margin: var(--padding);
    margin-left: 0;
}

main .contato form div input, main .contato form div textarea {
    display: block;

    width: 100%;

    padding: var(--padding);

    resize: none;
}

main .contato form div textarea {}

main .contato form input[type="submit"] {
    display: block;

    margin-top: var(--margin);

    width: 100%;

    padding: var(--padding);

    border-radius: var(--padding);

    outline: none;

    border: none;

    background-color: var(--azul);

    transition: 200ms all ease-in-out;

    color: white;
}

main .contato form input[type="submit"]:hover {
    cursor: pointer;

    background-color: var(--dourado);

    color: black;
}

main .contato .itensContato .itens {
    display: flex;
    flex-wrap: wrap;
}

main .contato .itensContato .itens .item {
    flex: 1;

    min-width: 300px;
}

main .contato .itensContato .itens .item img {
    display: block;
    width: 100px;

    margin: auto;
}

main .contato .itensContato .itens .item p {
    text-align: center;
}

main .contato .itensContato .itens .item p a {
    display: block;
}

main .contato .mapa {
    width: 90%;

    padding: var(--padding);

    margin: auto;
    margin-top: var(--margin);
    margin-bottom: var(--margin);
}

main .contato .mapa div {
    aspect-ratio: 16/9;

    margin: auto;
}

main .contato .mapa div iframe {
    width: 100%;
    height: 100%;
}

/* Whatsapp */
main .whatsapp {
    position: fixed;

    right: 10px;
    bottom: 10px;
}

main .whatsapp a {
    display: block;
}

main .whatsapp a img {
    display: block;

    width: 100px;
}