/**
 * Designer page builder — shared base.
 *
 * Primitives every layout relies on. Loaded once, before any layout
 * stylesheet, whenever a page renders designer_page_sections rows.
 * Layout-specific rules belong in template-parts/designer/<layout>/<layout>.css
 */

.about-service {
    display: flex;
    justify-content: center;
}

.number-list {
    display: flex;
    flex-direction: column;
    /* margin: 0 0 20px 20px; */
    counter-reset: myCounter;
    margin-left: 0;
    gap: 24px;
}

.number-list__item {
    color: #1a1a1a;
    font-weight: 600;
    font-size: 18px;
    line-height: 133%;
    margin-bottom: 0;
    counter-increment: myCounter;
    list-style: none;
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 16px 20px 16px 80px;
}

.number-list__item::before {
    content: counters(myCounter, ".", decimal-leading-zero) " ";
    position: absolute;
    left: 32px;
    top: 16px;
    font-weight: 600;
    color: #626262;
}

.step-flow .title-h2 {
    margin-bottom: 40px;
}

.process-flow-layout__title {
    line-height: 229%;
}

.case-highliht__txt .title-h4,
.case-highlight__txt .title-h4 {
    margin-bottom: 4px;
}

.btn-main {
    position: relative;
    z-index: 99;
}

.cards-count-5,
.cards-count-6,
.cards-count-7,
.cards-count-8,
.cards-count-9,
.cards-count-10 {
    grid-template-columns: repeat(5, 1fr);
}

.details-technologies .integrations-card .integrations-card__img {
    margin-bottom: 16px;
}

@media (max-width:1442px) {
    .process-flow .section-header,
        .details-section .section-header {
            max-width: 700px;
            width: 100%;
    }
    
    .process-flow .section-header .main-txt,
        .details-section .section-header .main-txt {
            font-size: 16px;
    }
}

@media(max-width:1366px) {
    .number-list {
            gap: 16px;
    }
    
    .number-list__item {
            font-size: 16px;
            padding: 12px 16px 12px 60px;
    }
}

@media(max-width:480px) {
    .number-list {
            gap: 16px;
    }
    
    .number-list__item {
            font-size: 16px;
            padding: 8px 16px 8px 52px;
    }
    
    .number-list__item::before {
            left: 16px;
            top: 12px;
    }
    
    .process-flow .section-header,
        .details-section .section-header {
            gap: 24px;
    }
    
    .process-flow-layout__title {
            font-size: 24px;
            line-height: 133%;
            margin-bottom: 24px;
    }
    
    .case-highlight {
            display: flex;
            flex-direction: column-reverse;
    }
    
    .case-highliht__txt .title-h4,
    .case-highlight__txt .title-h4 {
            line-height: 140%;
    }
}

/* Number list items with an optional description (textarea sub-field). */
.number-list__item--with-desc {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.number-list__item--with-desc .number-list__title {
    font-weight: 900;
    font-size: 24px;
    line-height: 133%;
}

.number-list__desc {
    font-weight: 600;
    font-size: 18px;
    line-height: 133%;
    color: #1a1a1a;
}

@media(max-width:1366px) {
    .number-list__item--with-desc .number-list__title {
        font-size: 20px;
    }

    .number-list__desc {
        font-size: 16px;
    }
}

@media(max-width:480px) {
    .number-list__item--with-desc .number-list__title {
        font-size: 18px;
    }

    .number-list__desc {
        font-size: 14px;
    }
}