h1, h2, h3, h4 {
    color: var(--azul);
}

h1 {
    font-size: 22px;
    font-weight: bold;
}

h2 {
    font-size: 28px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

main .banners {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Banner Principal */
main .bannerPrincipal {
    background-image: url("/content/img/banner-topo.jpg");
}

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

    background-color: var(--azulTransparente);

    padding: var(--margin) 0;
}

main .bannerPrincipal div img {
    display: block;

    width: 150px;

    margin: auto;
}

main .bannerPrincipal div h1 {
    display: block;

    width: 50%;
    min-width: 300px;

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

    color: white;

    text-align: center;
}

/* Sobre */
main .sobre {
    width: 90%;
    margin: auto;
    margin-top: var(--margin);
}

main .sobre h2 {
    width: fit-content;

    margin: auto;
}

main .sobre p:first-of-type {
    width: fit-content;

    margin: auto;
}

main .sobre .itens {
    display: flex;
    flex-wrap: wrap;

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

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

    aspect-ratio: 16/9;

    min-width: 300px;

    margin: var(--padding);
}

main .sobre .itens .img {
    background-image: url("/content/img/imagem-001.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

main .sobre .itens .text h3, main .sobre .itens .text h4 {
    width: fit-content;

    margin: auto;

    text-align: center;
}

/* Soluções */
main .solucoes {
    width: 90%;

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

main .solucoes h2 {
    width: fit-content;

    margin: auto;
}

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

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

    min-width: 300px;

    margin: var(--margin);
}

main .solucoes .itens .item h3 {
    width: fit-content;

    margin: auto;

    text-align: center;
}

main .solucoes .itens .item img {
    display: block;
    width: 100px;
    margin: auto;
}

main .solucoes .itens .item:last-of-type img {
    display: block;
    width: 50%;
    margin: auto;
}

/* Diferenciais */
main .diferenciais {
    width: 90%;

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

    background-color: var(--azulTransparente);

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

main .diferenciais h3 {
    margin-top: var(--padding);
}
main .diferenciais p {
    text-align: justify;

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

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

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

    margin: var(--margin);

    min-width: 300px;

    background-color: white;

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

main .diferenciais .itens .item h3:first-of-type {
    margin-top: 0;
}

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

    aspect-ratio: 40/9;
}

main .bannerEquipe h2 {
    width: fit-content;

    color: white;

    position: relative;

    top: 50%;
    left: 50%;

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

main .equipe {
    width: 90%;

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

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

main .equipe .itens .item {
    aspect-ratio: 4/3;

    flex: 1;
    
    min-width: 300px;

    margin: var(--margin);
}

main .equipe .itens .item img {
    aspect-ratio: 4/3;

    width: 100%;

    object-fit: cover;
    object-position: top;

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

main .equipe .itens .item h3 {
    display: block;

    width: fit-content;

    margin: auto;

    text-align: center;
}

main .equipe .itens .item p {
    text-align: justify;
}

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

/* Contato */
main .contato {
    background-color: var(--azulTransparente);

    padding: var(--margin);
}

main .contato h2 {
    display: block;

    width: fit-content;

    margin: auto;
}

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

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

    min-width: 300px;
}

main .contato .itens .item a, main .contato .itens .item img, main .contato .itens .item p {
    display: block;

    width: fit-content;

    margin: auto;

    text-align: center;
}

main .contato .itens .item a img, main .contato .itens .item img {
    width: 100px;
}

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;
}