@media (max-width: 1110px) {
    section.quem-somos > .linha-cards > .card{
        height: fit-content;
    }
    section.quem-somos > .linha-cards > .card > h3{
        margin-bottom: .5px;
    }
    section.etapas-do-processo{
        max-width: 100%;
    }
    section.etapas-do-processo > .linha-cards{
        margin-bottom: 20px;
        max-width: 80%;
    }
    section.etapas-do-processo > .linha-cards > .card{
        flex:1;
    }
    section.etapas-do-processo > .linha-cards.design{
        max-width: 80%;
    }
    footer > p{
        padding-left: 11em;
        padding-right: 10em;
    }
    .card{
        gap: .5em;
    }

}
@media (max-width: 930px) {
    section.hero{
        flex-direction:column-reverse;
    }
    section.hero > header {
        padding: 0;
    }
    section.hero > header > h1{
        padding: 0;
        padding-top: .5em;
    }

    section.hero > header > h2{
        padding-left:3em;
        padding-right: 3em;
    }
    section.hero > img {
        max-width:35%;
    }
    section.quem-somos{
        gap: 2em;
    }
    section.etapas-do-processo > .linha-cards{
        max-width: 90%;

    }
    section.etapas-do-processo > .linha-cards.design{
        flex-direction: column;
        max-width: 90%;
    }
    section.etapas-do-processo > .linha-cards > .card{
        width: 100%;
        min-height: clamp(400px, 40vh, 500px);
    }
    section.etapas-do-processo > .linha-cards.design > .card{
        width: 100%;
        min-height: clamp(50px, 30vh, 100px);
    }
    footer > p{
        padding-left: 5em;
        padding-right: 6em;
    }


}

/* tablet */
@media (max-width: 892px){
    section.hero > header > h2{
        padding-left:.5em;
        padding-right: .5em;
    }
    .container-beneficios{
        padding: 0;
    }
    .container-beneficios > .linha-cards > .card{
        height: 340px;
        width: 640px;
    }
    section.quem-somos{
        gap: 2em;
    }
    section.servico-ideal > h3{
        padding-left: 3em;
        padding-right: 3em;

    }
    footer > p{
        padding-left: 5em;
        padding-right: 6em;
    }
}
@media (max-width: 890px){
    section.quem-somos > .linha-cards {
        flex-direction: column;
    }
    section.quem-somos > .linha-cards > img {
        max-width:60%;
    }

    section.quem-somos > .linha-cards > .card{
        height: fit-content;
        width: 80%;
    }

}
@media (max-width: 690px){
    .ribbon-container{
        height:100px;
        margin-bottom: 2em;
    }
    section.hero > img {
        margin-top: 1.5em;
        max-width:100%;
    }
    .container-beneficios > .linha-cards{
        flex-direction: column;
    }
    .container-beneficios > .linha-cards > .card{
        height: 220px;
    }
    .servico-ideal > .card{
        width: 80%;
    }
    section.etapas-do-processo > .linha-cards{
        flex-direction: column;

    }
    section.etapas-do-processo >.linha-cards >.card{
        min-height: clamp(50px, 40vh, 190px);
        padding-top: 1.5em;
        padding-bottom: 1.5em;
    }
    section.etapas-do-processo >.linha-cards >.card > h3{
        margin: 0;
    }
    footer > p{
        padding-left: 1em;
        padding-right: 1em;
        height: 180px;
    }
    section.cta-final > h2{
        padding-left: 2em;
        padding-right: 2em;
    }
    section.quem-somos{
        max-width: 100%;
    }
    section.quem-somos > .linha-cards{
        max-width: 100%;
        width: 100%;
        padding: 1em;
    }
    section.quem-somos > .linha-cards > .card{
        width: 100%;
    }
    section.quem-somos > .linha-cards > img {
        max-width:90%;
    }
    .servico-ideal > .card{
        width: 90%;
        padding-left: 2.5em;
        padding-right: 2.5em;
        padding-top: 2.5em;
        padding-bottom: 2.5em;
    }
    section.nosso-trabalho >.carrossel-container>.carrossel-track>.linha-cards> img{
        width: min(800px, 90vw);
    }
    .ribbon {
        position: absolute;
        width: auto;
        height: clamp(45px, 5vw, 70px);
    }
    .ribbon-content span {
        font-size: clamp(20px, 2vw, 30px);
    }
    .ribbon-top {
        transform: rotate(6deg);
      }

      .ribbon-bottom {
        transform: rotate(-6deg);
      }
      section.hero{
        padding: 1em;
    }
    section.hero > header > h2{
        margin-bottom: .5em;
    }

}

@media (max-width: 360px) {
    section.hero{
        padding: .5em;
    }
    h1{
        padding: .1em;
        font-size: 19px;
    }
}