.servicos-page-bg { padding: 80px 0 100px; background: #fff; }
.servicos-page { display: flex; flex-direction: column; gap: 75px; }
.servico-row { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; }
.servico-row.is-reverse .servico-media { order: 2; }
.servico-row.is-reverse .servico-content { order: 1; }
.servico-media { position: relative; overflow: hidden; }

.servico-media::after { content: ''; position: absolute; width: 105px; aspect-ratio: 1 / 1; height: auto; background: #fff; transform: rotate(45deg); }
.servico-media::after { top: -52px; left: -52px; }
.servico-row.is-reverse .servico-media::after { left: unset; right: -52px; }
.servico-media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 585/405; }
.servico-content { position: relative; background: #fff; padding: 15px 0; display: flex; gap: 20px; flex-direction: column; height: 100%; box-sizing: border-box; justify-content: space-between; }
/* .servico-content::before { content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; background: var(--cor1); } */
.servico-title { font: 700 25.56px  / 1.35 montserrat; color: #202020; border: 2px solid #DEDEDE; padding: 21px 20px 21px 55px; }
.servico-text { font: 14px / 1.85 montserrat; color: #5d5d5d; padding-left: 55px; hyphens: auto; }
.servico-content .whats-button { margin-top: 18px; margin-left: 55px; }

.servico-row:not(.is-reverse) .servico-title { border-right: 9px solid var(--cor1); }
.servico-row.is-reverse .servico-title { border-left: 9px solid var(--cor1); padding: 21px 55px 21px 20px; }
.servico-row.is-reverse .servico-text { padding-left: 0; padding-right: 55px; }
.servico-row.is-reverse .servico-content .whats-button { margin-left: 0; margin-right: 55px; }

@media (max-width: 1250px){
    .servico-title { font-size: clamp(18px, 2vw, 24px); }
}

@media (max-width: 990px) {
    .servico-row,
    .servico-row.is-reverse { display: flex; flex-direction: column-reverse; } 
    .servico-row.is-reverse .servico-media,
    .servico-row.is-reverse .servico-content { order: initial; }

    .servico-row .servico-content .servico-text{ padding: 0; }

    .servico-row .servico-content .servico-title { padding: 20px; text-align: center; }
    .servico-row .servico-content .whats-button { margin: 0 auto !important; }
    .servico-content { gap: 30px; }
    .servicos-page-bg { padding: 30px 0; }
    .servicos-page { gap: 50px; }
}

@media (max-width: 600px) {
    .servico-title { font-size: 16px; }
    .servico-text { font-size: 13px; }
}