/* =================================
   Services page only
================================= */

@media (min-width: 1200px) {
    .price-card-title {
        min-height: 58px;
    }

    .price-card-value {
        min-height: 68px;
    }
}


/* =================================
   Integration systems diagram
================================= */

.integration-system-stack {
    min-height: 460px;
}

.integration-system-card {
    flex: 1 1 0;
}

.integration-system-icon {
    width: 44px;
    height: 44px;
}

.integration-system-icon-blue {
    color: var(--brand-blue);
    background-color: color-mix(
            in srgb,
            var(--brand-blue-light) 16%,
            transparent
    );
}

.integration-system-icon-cyan {
    color: var(--brand-cyan);
    background-color: color-mix(
            in srgb,
            var(--brand-cyan) 14%,
            transparent
    );
}

.integration-system-icon-green {
    color: var(--brand-green);
    background-color: color-mix(
            in srgb,
            var(--brand-green-light) 16%,
            transparent
    );
}

.integration-api-card {
    border: 1px solid color-mix(
            in srgb,
            var(--brand-blue) 25%,
            transparent
    );

    background-color: color-mix(
            in srgb,
            var(--brand-blue-light) 12%,
            var(--bs-body-bg)
    );
}

.integration-api-icon {
    color: var(--brand-blue);
}

.integration-api-icon .bi {
    font-size: 3.5rem;
}

.integration-service-card {
    border: 1px solid color-mix(
            in srgb,
            var(--brand-cyan) 25%,
            transparent
    );

    background-color: color-mix(
            in srgb,
            var(--brand-cyan) 10%,
            var(--bs-body-bg)
    );
}

.integration-service-icon {
    width: 44px;
    height: 44px;

    color: var(--brand-cyan);
}