/* Our offerings landing page */

.landingPageHeaderWrapper {
    text-align: center;
    margin-inline: auto;
}

    .landingPageHeaderWrapper h1 {
        font-size: 6.5rem;
    }

.landingPageHeaderIntroWrapper {
    text-align: center;
    max-width: 60ch;
    margin-inline: auto;
    font-size: 2.5rem;
    margin-bottom: 5rem;
}

    .landingPageHeaderIntroWrapper * {
        line-height: normal;
    }

.areasWrapper {
    display: flex;
    gap: 3rem;
    justify-content: center;
    text-align: center;
    margin-top: 5rem;
    align-items: stretch;
    margin-bottom: 3rem;
}

.areaWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .areaWrapper p {
        flex-grow: 1;
        margin-top: 2rem;
    }

.areaBox {
    padding-block: 7rem;
    background-color: #f3f3f3;
    align-content: center;
    background-size: cover;
    min-height: 240px;
}

.segmentButtonWrapper {
    margin-inline: auto;
    margin-top: 1rem;
}

    .segmentButtonWrapper .actionButton {
        padding-inline: 7rem !important;
    }

.ourCommitmentOuterWrapper {
    background-color: #F5EFE6;
    display: flex;
    justify-content: center;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw !important;
    padding: 3rem 0;
}

.ourCommitmentWrapper {
    /*

	background-color: #F5EFE6;
	*/
    display: flex;
    flex-direction: column;
    max-width: 1170px;
}

.ourCommitmentsInnerWrapper {
    display: flex;
    gap: 3rem;
    justify-content: center;
    text-align: center;
    margin-inline: 3rem;
    align-items: stretch;
}

.ourCommitmentHeader {
    text-align: center;
    align-items: center;
    margin-top: 6rem;
    margin-bottom: 3rem;
}

    .ourCommitmentHeader h4 {
        font-size: 5rem;
        font-weight: 400;
        color: #444;
    }


.commitmentItem {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 4rem;
}

.commitmentImage {
    margin-block: 1rem;
    /*width: 30%;*/
    width: 110px;
}

.commitmentText {
    margin-top: 3rem;
    font-size: 2.1rem;
    margin-inline: 1rem;
    margin-bottom: 3rem;
    flex-grow: 1;
    text-align: center;
    max-width: 28ch;
    margin-left: auto;
    margin-right: auto;
}



@media ( width < 992px ) {
    .areasWrapper {
        flex-direction: column;
    }

    .ourCommitmentsInnerWrapper {
        flex-direction: column;
        margin-inline: 1rem;
    }

    .commitmentItem {
        width: 100%;
        flex: none;
    }

        .commitmentItem:not(:last-child) {
            margin-bottom: 2rem;
        }

    .commitmentText {
        margin-inline: 1rem;
    }
}



/* Expert Services - Infra Asset Management - Transport Management */

:root {
    --productBoxOuterWrapperTopMargin: 24px;
    --productBoxGap: 1.8rem;
    --productBoxPadding: 2.2rem;
    --productBoxWidthPercent: 50%;
    --productBoxBg: #f9f9f9;
    --h2MarginTop: 0;
    --h2MarginBottom: 1.4rem;
    --h2FontSize: 2.2rem;
    --h2FontWeight: 400;
    --introFontSize: 1.4rem;
    --introLineHeight: auto;
    --introMarginBottom: 0.8rem;
    --introFontWeight: 400;
    --introBoldWeight: 600;
    --productLinkFontSize: 1.4rem;
    --productLinkColor: #65c8e6;
    --productLinkMarginBlock: 1.3rem;
    --productLinkArrowFontSize: 1em;
    --footerFontSize: 1.3rem;
    --productLinkFontWeight: 500;
    --categoriesWrapperMarginTop: 0.3rem;
    --categoriesWrapperGap: 0.3rem;
    --categoryFontSize: 1.2rem;
    --categoryFontWeight: 600;
    --categoryFontColor: #555;
    --categoryDelimiter: " | ";
}

h3 {
    margin-top: 6px;
}

.productBoxOuterWrapper {
    display: flex;
    max-width: 100%;
    width: 847px;
    /* outline: solid 2px orange; */
    flex-wrap: wrap;
    gap: var(--productBoxGap);
    margin-top: var(--productBoxOuterWrapperTopMargin);
}

.productBox {
    display: block;
    width: calc(50% - var(--productBoxGap) / 2);
    background-color: var(--productBoxBg);
    padding: var(--productBoxPadding);
    box-sizing: border-box;

    h2 {
        margin-top: var(--h2MarginTop);
        margin-bottom: var(--h2MarginBottom);
        font-size: var(--h2FontSize);
        font-family: 'Montserrat', sans-serif;
        font-weight: var(--h2FontWeight);
    }

    .intro {
        font-family: 'Open Sans', sans-serif;
        font-size: var(--introFontSize);
        line-height: var(--introLineHeight);
        margin-bottom: var(--introMarginBottom);
        font-weight: var(--introFontWeight);

        b,
        strong {
            font-weight: var(--introBoldWeight);
        }
    }

    a {
        text-decoration: none;
    }

        a:hover .productLink,
        a:hover .productLink::after {
            color: color-mix(in srgb, var(--productLinkColor), black 20%);
        }

    .productLink {
        font-family: 'Open Sans', sans-serif;
        font-size: var(--productLinkFontSize);
        color: var(--productLinkColor);
        margin-block: var(--productLinkMarginBlock);
        font-weight: var(--productLinkFontWeight);
    }

        .productLink::after {
            content: " \2192";
            color: var(--productLinkColor);
            font-size: var(--productLinkArrowFontSize);
            vertical-align: top;
        }

    .footer {
        font-family: 'Open Sans', sans-serif;
        font-size: var(--footerFontSize);

        .categoriesWrapper {
            margin-top: var(--categoriesWrapperMarginTop);
            display: flex;
            flex-wrap: wrap;
            gap: var(--categoriesWrapperGap);
        }

        .category {
            font-size: var(--categoryFontSize);
            font-weight: var(--categoryFontWeight);
            color: var(--categoryFontColor);
        }

            .category:not(:last-child)::after {
                content: var(--categoryDelimiter);
            }
    }
}

@media (width < 768px) {
    .productBox {
        width: 100%;
    }
}