/* =========================================================
   SERVICES
========================================================= */

.services-section {
    width: 100%;
    padding: clamp(5rem, 8vw, 9rem) 0;
    background-color: #000000;
}

.services-section__container {
    width: 100%;
}

.service-item {
    width: 100%;
    margin-bottom: clamp(4rem, 7vw, 7rem);
}

.service-item:last-child {
    margin-bottom: 0;
}

.service-item__content {
    width: calc(50% - 1.5rem);
    max-width: none;
    margin-right: auto;
}

/* Serviços pares vão para a direita */
.service-item:nth-child(even) .service-item__content {
    margin-right: 0;
    margin-left: auto;
}

/* Serviços ímpares ficam à esquerda */
.service-item:nth-child(odd) .service-item__content {
    margin-right: auto;
    margin-left: 0;
}


/* =========================================================
   SERVICES - TYPOGRAPHY
========================================================= */
.service-item__title {
    margin: 0 0 1.5rem;
    color: #878787 !important;
    font-size: clamp(2.8rem, 5vw, 5rem);
    font-weight: var(--fw-medium);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.service-item__description {
    color: #878787 !important;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.2;
    text-align: justify;
}

.service-item__description p {
    text-align: justify;
}

.service-item__description * {
    color: inherit !important;
}


/* =========================================================
   SERVICES - MOBILE
========================================================= */
@media (max-width: 767.98px) {
    .service-item__content,
    .service-item:nth-child(even) .service-item__content,
    .service-item:nth-child(odd) .service-item__content {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

.services-section {
    --service-gap: clamp(4rem, 7vw, 7rem);
}


/* =========================================================
   SERVICES - CONNECTING LINES
========================================================= */

@media (min-width: 768px) {
    .service-item {
        position: relative;
        width: 100%;
        margin-bottom: var(--service-gap);
    }

    /* =====================================================
       LINHA HORIZONTAL
    ===================================================== */

    .service-item:not(:last-child)::after {
        content: "";
        position: absolute;
        z-index: 0;
        top: -10px;
        width: 58%;
        height: 1px;
        background-color: #3f3f3f;
        pointer-events: none;
    }

    .service-item:nth-child(odd):not(:last-child)::after {
        left: 21%;
    }

    .service-item:nth-child(even):not(:last-child)::after {
        right: 21%;
    }


    /* =====================================================
       LINHA VERTICAL
    ===================================================== */

    .service-item:not(:last-child)::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: -10px;
        width: 1px;
        height: calc(100% + var(--service-gap));
        background-color: #3f3f3f;
        pointer-events: none;
    }

    /* Ímpar:
       horizontal vai da esquerda para direita
       vertical nasce na ponta direita
    */
    .service-item:nth-child(odd):not(:last-child)::before {
        left: 79%;
    }

    /* Par:
       horizontal vai da direita para esquerda
       vertical nasce na ponta esquerda
    */
    .service-item:nth-child(even):not(:last-child)::before {
        right: 79%;
    }

    .service-item__content {
        position: relative;
        z-index: 1;
    }
}