@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inconsolata:wght@200..900&display=swap');

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            background: black;
        }

        main {

            * {
                box-sizing: border-box;
            }

            h1, h2, h3, p, a, ul, li {
                margin: 0;
                font-family: Barlow, sans-serif;
                color: white;
                line-height: initial;
            }

            button {
                font-family: Inconsolata, sans-serif;
                font-weight: 800;
                border: none;
                border-radius: 1rem;
                cursor: pointer;
                transition: 0.2s;

                &:hover {
                    opacity: 0.75;
                }
            }

            section {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                gap: 2rem;
                padding: 10rem 15%;
                overflow: hidden;

                &#tutustu_tyokoneisiin {
                    background-color: #000000;
                    background-image: url("/Content/Pages/Jimms/b2b/assets/tyokone_tausta.png");
                    background-position: center;
                    background-size: cover;
                    padding: 16rem 15%;

                    h1 {
                        text-align: center;
                        font-size: 4rem;
                        font-weight: 700;
                    }

                    button {
                        font-size: 1.25rem;
                        padding: 0.75rem 1.25rem;
                        border-radius: 1.5rem;
                        background: #fff;
                        color: #000000;
                    }
                }

                &#ratkaisut {
                    background-color: #5A00D2;
                    flex-direction: row;

                    h2 {
                        font-size: 3rem;
                        font-weight: 600;
                    }

                    p {
                        font-size: 1.25rem;
                        font-weight: 400;
                        line-height: 2rem;
                    }

                    div.left {
                        flex: 2;
                        display: flex;
                        flex-direction: column;
                        gap: 2rem;
                    }

                    div.right {
                        flex: 3;

                        > img {
                            scale: 1.25;
                            margin-left: 20%;
                        }
                    }

                }

                &#miksi_valita {
                    background-color: #fff;
                    display: flex;
                    flex-direction: row;
                    padding: 0;
                    justify-content: space-between;

                    > div {
                        align-items: start;
                        margin-left: 15%;
                        min-width: 30rem;

                        h2 {
                            font-size: 3rem;
                            font-weight: 600;
                            color: #160647;
                            margin-bottom: 2rem;
                        }

                        p {
                            color: #160647;
                            font-size: 1.25rem;
                            font-weight: 500;
                        }

                        > div {
                            display: flex;
                            flex-direction: column;
                            gap: 2rem;

                            div {
                                display: flex;
                                gap: 1rem;
                                align-items: center;

                                > svg {
                                    flex: 1;
                                }

                                > p {
                                    flex: 8;
                                }
                            }
                        }
                    }

                    > img {
                        width: 50%;
                        object-fit: cover;
                        max-height: 70vh;
                    }

                }

                &#laitteet_yrityskayttoon {
                    background-color: #000000;
                    align-items: start;

                    h2 {
                        font-size: 3rem;
                        font-weight: 600;
                        color: white;
                        width: 100%;
                        text-align: center;
                    }

                    > div {
                        display: grid;
                        grid-template-columns: repeat(3, 20rem);
                        gap: 1rem;
                        width: 100%;
                        justify-content: center;

                        > div.product-class {
                            background-color: white;
                            padding: 1.25rem;
                            display: flex;
                            flex-direction: column;
                            gap: 1rem;
                            width: 20rem;
                            height: 26rem;
                            justify-self: center;

                            > div.image-container {
                                height: 50%;
                                display: flex;
                                justify-content: center;

                                > img {
                                    height: 100%;
                                    width: auto;
                                }
                            }

                            > div.text-container {
                                height: 50%;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;

                                > div {

                                    h3 {
                                        color: #160647;
                                        font-size: 1.25rem;
                                    }

                                    p {
                                        color: #160647;
                                    }
                                }

                                > button {
                                    background-color: #5A00D2;
                                    color: white;
                                    padding: 0.75rem 1rem;
                                    border-radius: 1.5rem;
                                    width: 12rem;
                                    font-size: 0.8rem;
                                }
                            }
                        }
                    }
                }

                &#koneiden_raatalointi {
                    background-color: #FF6400;
                    flex-direction: row;
                    padding: 0;
                    justify-content: space-between;
                    gap: 24rem;

                    > img {
                        flex: 1;
                        width: 50%;
                        object-fit: cover;
                        max-height: 70vh;
                    }

                    > div {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        margin-right: 15%;
                        gap: 1rem;

                        h2 {
                            font-size: 3rem;
                            font-weight: 600;
                            color: #fff;
                        }

                        p {
                            color: #fff;
                            font-size: 1.25rem;
                            font-weight: 400;
                            line-height: 2rem;
                        }
                    }

                }

                &#nain_toimimme {
                    background-color: #fff;
                    padding: 10rem 10%;

                    h2 {
                        font-size: 3rem;
                        font-weight: 600;
                        color: #160647;
                    }

                    > div {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 1rem;
                        width: 100%;
                        justify-content: center;

                        > div {
                            background-color: white;
                            padding: 0.5rem;
                            display: flex;
                            flex-direction: column;
                            gap: 1rem;
                            border-radius: 1rem;
                            border: 3px solid #160647;
                            padding: 1rem;
                            align-items: center;
                            width: 16rem;
                            height: 22rem;

                            svg {
                        		height: 8rem;
                        		padding: 2rem 0 2rem 0;
                        		width: 100%;
                    			}

                            h3 {
                                color: #160647;
                                font-size: 1.25rem;
                            }

                            p {
                                color: #160647;
                                text-align: center;
                            }

                            button {
                                background-color: #5A00D2;
                                color: white;
                            }
                        }
                    }
                }

                &#avainlukuja {
                    /*background: linear-gradient(270deg, #FF00C8 0%, #5A00D2 100%);*/
                    background-color: #000000;

                    h2 {
                        font-size: 3rem;
                        font-weight: 600;
                        color: #fff;
                    }

                    > div {
                        width: 100%;
                        display: flex;
                        gap: 4rem;
                        justify-content: center;
                        flex-wrap: wrap;

                        > div {
                            display: flex;
                            flex-direction: column;
                            gap: 0.5rem;
                            align-items: center;

                            h3 {
                                font-weight: 800;
                                font-size: 5rem;
                            }

                            p {
                                font-size: 1.5rem;
                            }
                        }
                    }
                }

                &#lue_lisaa {
                    display: none;
                    background-color: #000000;

                    h2 {
                        font-size: 3rem;
                        font-weight: 600;
                        color: #fff;
                    }

                    > div {
                        display: grid;
                        grid-template-columns: repeat(3, minmax(12rem, 16rem));
                        gap: 1rem;
                        width: 100%;
                        justify-content: center;

                        > div {
                            background-color: white;
                            padding: 1rem;
                            display: flex;
                            flex-direction: column;
                            gap: 1rem;

                            h3 {
                                color: #160647;
                            }

                            p {
                                color: #160647;
                            }

                            button {
                                background-color: #5A00D2;
                                color: white;
                            }
                        }
                    }
                }

                &#yritystili {
                    background-color: #5A00D2;
                    padding: 0;
                    flex-direction: row;
                    gap: 20rem;

                    > div {
                        margin-left: 15%;
                        display: flex;
                        flex-direction: column;
                        gap: 2rem;

                        h2 {
                            font-size: 3rem;
                            font-weight: 600;
                            color: #fff;
                        }

                        p {
                            color: #fff;
                            font-size: 1.25rem;
                            font-weight: 400;
                            line-height: 2rem;
                        }

                        button {
                            font-size: 1.25rem;
                            padding: 0.75rem 1.25rem;
                            border-radius: 1.5rem;
                            background: #fff;
                            color: #000000;
                            width: fit-content;
                        }
                    }

                    > img {
                        width: 50%;
                        object-fit: cover;
                        max-height: 70vh;
                    }
                }

                &#palaute {
                    padding: 0;
                    overflow: hidden;
                    flex-direction: row;
                    gap: 0;
                    height: 32rem;
                    position: relative;

                    > div {
                        position: absolute;
                        padding: 10rem 30%;
                        width: 100%;
                        height: 32rem;
                        transition: 0.5s;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        gap: 1rem;

                        > p:nth-child(1) {
                            font-size: 1.25rem;
                            font-weight: 400;
                            font-style: italic;
                        }

                        > p:nth-child(2) {
                            font-size: 1.25rem;
                            font-weight: 700;
                        }

                        &.first {
                            background-color: #000000;
                        }

                        &.second {
                            background-color: #000000;
                            translate: 100%;
                        }
                    }

                }

                &#kiinnostuitko {
                    background-color: #fff;

                    h2 {
                        font-size: 3rem;
                        font-weight: 600;
                        color: #160647;
                        text-align: center;
                    }

                    p {
                        color: #160647;
                        font-size: 1.25rem;
                        font-weight: 400;
                        line-height: 2rem;
                        width: 60%;
                        text-align: center;
                    }

                    > div {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 1rem;
                        width: 100%;
                        justify-content: center;

                        > div {
                            background-color: #5A00D2;
                            padding: 0.5rem;
                            display: flex;
                            flex-direction: column;
                            gap: 1rem;
                            padding: 1rem;
                            align-items: center;
                            width: 18rem;
                            min-height: 18rem;

                            svg {
                        		height: 8rem;
                        		padding: 2rem 0 2rem 0;
                        		width: 100%;
                    			}

                            h3 {
                                color: #fff;
                                font-weight: 500;
                                font-size: 1.15rem;
                                text-align: center;
                            }

                            a {
                                margin-top: -1rem;
                                color: #fff;
                                font-weight: 700;
                                text-decoration: underline;
                                font-size: 1.25rem;
                            }

                            p {
                                color: #fff;
                                text-align: center;
                                font-weight: 400;
                                font-size: 1rem;
                                line-height: 1.5rem;
                            }

                            button {
                                background-color: #5A00D2;
                                color: white;
                            }
                        }
                    }
                }

                &#ota_yhteytta {
                    background-color: #000000;

                    h2 {
                        font-size: 1.5rem;
                        font-weight: 600;
                        color: #fff;
						text-align: center;
                    }

                    > div {
                        display: flex;
                        gap: 4rem;
                        flex-wrap: wrap;
                        justify-content: center;

                        > div {
                            display: flex;
                            gap: 1rem;

                            div.left {
                                width: 14rem;

                                > img {
                                    width: 100%;
                                }

                            }

                            div.right {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                            }
                        }
                    }
                }

                &#usein_kysytyt {
                    display: none;
                    background-color: #fff;
                    gap: 1rem;

                    h2 {
                        font-size: 3rem;
                        font-weight: 600;
                        color: #160647;
                    }

                    > div {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 50%;

                        p {
                            color: #160647;
                            font-size: 1.25rem;
                            font-weight: 500;
                            line-height: 2rem;
                        }

                        svg {
                            margin-right: 1rem;
                        }
                    }

                    hr {
                        width: 50%;
                        border: 2px solid #160647;
                    }

                }
            }
        }

        @media (max-width: 2500px) {
            main {
                section#yritystili,
                section#koneiden_raatalointi {
                    gap: 12rem;
                }
            }
        }

        @media (max-width: 1500px) {
            main {
                section#ratkaisut {
                    flex-direction: column;

                    > div.right > img {
                        margin-left: 0;
                    }
                }

                section#miksi_valita > img,
                section#yritystili > img,
                section#koneiden_raatalointi > img {
                    display: none;
                }

                section#miksi_valita > div,
                section#yritystili > div {
                    margin-left: 0;
                }

                section#miksi_valita,
                section#koneiden_raatalointi,
                section#yritystili {
                    padding: 10rem 15%;
                }

                section#kiinnostuitko > p {
                    width: 75%;
                }
            }
        }

        /* laptop */
        @media (max-width: 1250px) {
            main {
                section#nain_toimimme > div {
                    grid-template-columns: repeat(3, minmax(12rem, 16rem));
                }
            }
        }

        /* tablet */
        @media (max-width: 1000px) {
            main {
                section#laitteet_yrityskayttoon > div {
                    grid-template-columns: repeat(2, 20rem);
                }

                section#nain_toimimme > div,
                section#lue_lisaa > div {
                    grid-template-columns: repeat(2, minmax(12rem, 16rem));
                }

                section#kiinnostuitko > p {
                    width: 100%;
                }

            }
        }

        /* mobile */
        @media (max-width: 700px) {
            main {
                section#ratkaisut > div.right > img {
                    scale: 1;
                }

                section#miksi_valita > div {
                    min-width: 100%;
                }

                section#laitteet_yrityskayttoon > div,
                section#nain_toimimme > div,
                section#lue_lisaa > div {
                    grid-template-columns: 1fr;
                }

                section#tutustu_tyokoneisiin > h1 {
                    font-size: 3rem;
                }

                section#palaute > div {
                    padding: 10% 2rem;
                }

                section#ota_yhteytta > div > div {
                    flex-direction: column;
                }
            }
        }