﻿/*nok9 red*/
:root {
    --nok9-red: #ea0000;
    /*light gray*/
    --light-gray: #f8f8f8;
    /*medium gray*/
    --medium-gray: #ededed;
}

.services-background {
    background-color: var(--medium-gray);
}

.services-background-fade {
    background-image: linear-gradient(var(--light-gray), var(--medium-gray));
}

.services-title {
    margin-bottom: 50px;
}

.services-double {
    display: flex;
}

    .services-double h3 {
        margin-top: 40px;
        margin-bottom: 10px;
    }

    .services-double img {
        width: 50%;
        display: block;
        margin: auto;
    }

    .services-double .text-container {
        position: relative;
        width: 50%;
        background-image: linear-gradient(var(--light-gray), var(--medium-gray));
    }

    .services-double .text {
        padding-left: 40px;
        padding-right: 40px;
        margin: 0;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

        .services-double .text p {
            margin-bottom: 20px;
            max-width: 800px;
        }

        .services-double .text ul {
            margin-left: 15px;
            margin-bottom: 20px;
        }

.consulting {
    animation: transitionIn 1.2s ease-in-out;
}

.research-lab li {
    color: var(--nok9-red);
}

    .research-lab li span {
        color: black;
    }

.research-lab .take-space {
    display: none;
}

@media screen and (max-width: 1430px) {
    .services-background {
        background-color: var(--medium-gray);
        background-image: none;
    }

    .services-double {
        flex-direction: column;
    }

        .services-double h2 {
            padding-top: 40px;
        }

        .services-double img {
            width: 100%;
        }

        .services-double .text-container {
            width: 100%;
            order: 2;
        }

            .services-double .text-container .text {
                position: relative;
                -ms-transform: translateY(0%);
                transform: translateY(0%);
            }

    .consulting {
        margin-bottom: 80px;
    }

    .research-lab .take-space {
        display: block;
    }

    .research-lab img {
        margin-top: 20px;
    }
}
