main{
    flex: 1;
}
.destaque{
    padding: 2em 0 2em 0;
    border-top: 2px solid #2d7d9a;
}
.destaque .flex{
    display: flex;
    align-items: flex-start;
    gap: 2em;
}
.destaque .flex .texto h1{
    line-height: 1em;
    color: var(--azul);
}
.destaque .flex .texto h2{
    line-height: 1em;
    color: var(--azul);
}
.destaque .flex .texto p:not(:last-child){
    margin: 2em 0 2em 0;
}
.destaque .flex .texto p:last-child{
    margin: 2em 0 0 0;
}
.destaque .flex .animacao{
    flex: 1;
}
@media only screen and (min-width: 1025px), only screen and (min-device-width: 1025px){
    .destaque .flex{
        flex-wrap: nowrap;
    }
    .destaque .flex .texto{
        flex: 1;
    }
}
@media only screen and (max-width: 1024px), only screen and (max-device-width: 1024px){
    .destaque .flex{
        flex-wrap: wrap;
    }
    .destaque .flex .texto{
        flex: 100%;
    }
}

.servicos{
    padding: 2em 0 2em 0;
    text-align: center;
    border-top: 2px solid #2d7d9a;
}
.servicos .flex{
    display: flex;
    align-items: flex-start;
    margin: 2em 0 0 0;
    gap: 2em;
}
.servicos .flex div{
    flex: 1;
}
.servicos .flex div h3{
    font-weight: bold;
}
.servicos .flex div li{
    display: inline-block;
    width: auto;
    margin: 0.5em 0 0 0;
    padding: 0.3em 1em;
    color: #fff;
    background: var(--azul);
    border-radius: 30px;
}
@media only screen and (min-width: 641px), only screen and (min-device-width: 641px){
    .servicos .flex{
        flex-wrap: nowrap;
    }
    .servicos .flex div{
        flex: 1;
    }
}
@media only screen and (max-width: 640px), only screen and (max-device-width: 640px){
    .servicos .flex{
        flex-wrap: wrap;
    }
    .servicos .flex div{
        flex: 100%;
    }
}