/* Other Services: full-width backgrounds with centered, readable content. */
@media screen {
    html body section#main-body.dc-wide-services,
    html body section#main-body.dc-wide-services > :is(.container, .container-fluid),
    html body section#main-body.dc-wide-services > :is(.container, .container-fluid) > .row,
    html body section#main-body.dc-wide-services > :is(.container, .container-fluid) > .row > .main-content {
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Use the full-width parent instead of breaking out with viewport offsets. */
    html body #main-body.dc-wide-services :is(.dc-cloud-root, .dl-lic-root) {
        width: 100% !important;
        max-width: none !important;
        left: auto !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body #main-body.dc-wide-services .dc-cloud-container,
    html body #main-body.dc-wide-services .dl-lic-root > :is(.dl-lic-tabs, .dl-lic-tab-pane, .nh-section),
    html body #main-body.dc-wide-services .dl-lic-root > .nh-banner > .container-fluid {
        box-sizing: border-box;
        width: 100% !important;
        max-width: var(--dc-layout-width, 1200px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: var(--dc-layout-gutter, 24px) !important;
        padding-right: var(--dc-layout-gutter, 24px) !important;
    }

    html body #main-body.dc-wide-services .dl-lic-root > .nh-banner {
        width: 100%;
        border-radius: 0 !important;
        padding: clamp(36px, 5vw, 72px) 0 !important;
    }
    html body #main-body.dc-wide-services .dl-lic-root > .dl-lic-info-banner {
        width: calc(100% - 2 * var(--dc-layout-gutter, 24px));
        max-width: calc(var(--dc-layout-width, 1200px) - 2 * var(--dc-layout-gutter, 24px));
        margin-left: auto;
        margin-right: auto;
    }
    html body #main-body.dc-wide-services .dl-lic-root > .nh-section > .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    html body #main-body.dc-wide-services :is(.dc-hero-grid, .dc-cloud-grid3, .dl-lic-grid,
        .dl-lic-grid-two, .dl-lic-grid-four) > * { min-width: 0; }
    html body #main-body.dc-wide-services :is(.dc-cloud-hero-title, .dc-cloud-badge,
        .dl-lic-hero-badge, .dl-lic-info-badge, .dc-cloud-btn-green, .dc-cloud-btn-outline) {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    @media (max-width: 767px) {
        html body #main-body.dc-wide-services .dl-lic-info-banner { padding: 24px 18px; }
        html body #main-body.dc-wide-services .dl-lic-info-badge { text-align: center; }
    }
}
