/* ALL */
:root {
    /*nok9 red*/
    --nok9-red: #ea0000;
    /*light gray*/
    --light-gray: #f8f8f8;
    /*medium gray*/
    --medium-gray: #ededed;
}

.about-title {
    color: white;
    text-align: center;
    font-size: 40px;
    padding: 120px 0;
    font-weight: bold;
    animation: transitionIn 1.2s ease-in-out;
}

    .about-title h1 {
        line-height: 80px;
    }

    .about-title img {
        align-content: center;
        width: 50px;
        margin-top: 30px;
    }

.about-undertitle {
    text-align: center;
    color: white;
    font-size: 3rem;
    margin: 70px 0;
    animation: transitionIn 1.2s ease-in-out;
}

    .about-undertitle h3 {
        line-height: 50px;
    }

.link {
    color: var(--nok9-red);
    font-size: 1.1rem;
    border-bottom: 0.5px solid var(--nok9-red);
}

@media screen and (max-width: 668px) {
    .about-title {
        font-size: 30px;
    }

        .about-title img {
            margin-top: 20px;
        }

    .about-undertitle {
        font-size: 2.5rem;
    }
}
/* ABOUT WIRELESS POWER */
/*QI*/
.qi {
    animation: transitionIn 1.2s ease-in-out;
    margin-top: -40px;
}

    .qi div {
        flex: 1;
    }

    .qi img {
        width: 550px;
        margin-right: -50px;
        float: right;
    }

    .qi .qi-text {
        margin-left: -50px;
        border-left: white 1px solid;
        padding-left: 40px;
        float: left;
    }

    .qi h2 {
        margin-bottom: 15px;
    }

    .qi p {
        max-width: 600px;
        margin-bottom: 20px;
    }
/*BENEFITS*/
.benefits {
    text-align: center;
    gap: 40px;
}

    .benefits .benefit1 {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
    }

    .benefits .benefit2 {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
    }

    .benefits .benefit3 {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 1;
    }

    .benefits .benefit4 {
        grid-column-start: 4;
        grid-column-end: 5;
        grid-row-start: 1;
    }

    .benefits i {
        color: white;
        font-size: 4rem;
        margin-bottom: 30px;
    }

    .benefits h3 {
        margin-bottom: 15px;
        color: white;
    }
/*WIRELESS POWER IS HERE*/
.stay {
    margin-top: 30px;
}

    .stay div {
        max-width: 100%;
    }

    .stay img {
        max-width: 100%;
        display: block;
        object-fit: cover;
        height: 700px;
    }

    .stay h2 {
        margin: 10px 0;
        font-size: 120%;
    }

    .stay p {
        margin-bottom: 10px;
        max-width: 1200px;
    }

    .stay .stay-container {
        position: relative;
        width: 100%;
        background-color: white;
    }

    .stay .stay-text {
        margin: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
    }
/*HOW DOES IT WORK*/
.work {
    margin-bottom: 0px;
}

    .work .work-text {
        max-width: 1000px;
        margin: auto;
        padding: 40px;
    }

        .work .work-text h2 {
            margin-top: 50px;
            margin-bottom: 15px;
        }

        .work .work-text p {
            margin-bottom: 15px;
        }

    .work .work-illustration {
        padding: 5px;
        max-width: 1500px;
        margin: auto;
        margin-bottom: 15px;
    }

    .work .work-illustration-small {
        display: none;
        padding: 5px;
        margin-bottom: 15px;
    }

.service-work {
    margin-top: 100px;
    margin-bottom: 0px;
}

@media screen and (max-width: 1312px) {
    .qi {
        margin-right: 100px;
    }

        .qi img {
            margin-top: -20px;
        }

    .work-text {
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 992px) {
    .qi {
        flex-direction: column;
        margin: auto;
    }

        .qi img {
            width: 300px;
            border-left: none;
            margin: auto;
            margin-bottom: 20px;
        }

        .qi .qi-text {
            border-left: none;
            margin: auto auto 60px auto;
            background-color: white;
            padding: 40px;
            margin-bottom: 30px;
        }

            .qi .qi-text a {
                text-align: center;
            }

            .qi .qi-text .qi-text-p {
                margin-bottom: 70px;
            }

    .benefits {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 50px;
        margin-bottom: 200px;
    }

        .benefits .benefit1 {
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 1;
        }

        .benefits .benefit2 {
            grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 1;
        }

        .benefits .benefit3 {
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 2;
        }

        .benefits .benefit4 {
            grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 2;
        }

        .benefits p {
            padding: 5px 15px;
        }

    .stay {
        display: flex;
        flex-direction: column;
        margin-bottom: -250px;
    }

        .stay .stay-container {
            background-color: transparent;
        }

        .stay .stay-text {
            margin-top: 150px;
            margin-bottom: -150px;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 40px;
            position: relative;
            align-items: center;
            justify-content: center;
            display: inline-block;
        }

            .stay .stay-text p {
                max-width: 800px;
                margin: 10px auto 30px auto;
            }

            .stay .stay-text .stay-text-p {
                margin-bottom: 70px;
            }

        .stay img {
            margin-top: -780px;
            height: 600px;
            width: 100%;
        }

    .work p {
        max-width: 800px;
    }

    .work .work-illustration {
        display: none;
    }

    .work .work-illustration-small {
        display: block;
    }
}

@media screen and (max-width: 668px) {
    .benefits {
        grid: none;
    }

        .benefits .benefit1 {
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 1;
        }

        .benefits .benefit2 {
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 2;
        }

        .benefits .benefit3 {
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 3;
        }

        .benefits .benefit4 {
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 4;
        }

    .stay {
        display: flex;
        flex-direction: column;
        margin-bottom: -350px;
    }

        .stay .stay-text {
            margin-bottom: 0px;
            background-color: white;
        }

        .stay img {
            display: none;
        }

    .work {
        margin-top: -500;
    }

        .work .work-text {
            padding: 20px;
        }

        .work .work-illustration-small {
            width: 105%;
        }
}
/* ABOUT NOK9 */
/*BACKGROUND IMAGE*/
.about-nok9-background {
    background-image: url(../images/photos/vastra.hamnen.jpg);
    background-size: 100%;
    background-position: center right;
    background-attachment: fixed;
}

    .about-nok9-background .take-space {
        height: 5px;
    }

@media screen and (max-width: 2100px) {
    .about-nok9-background {
        background-size: cover;
    }
}
/*INTRO*/
.about-nok9-intro {
    animation: transitionIn 2s ease-in-out;
    max-width: 900px;
    margin: auto;
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 50px;
    margin-top: 100px;
    background-color: rgba(255, 255, 255, 0.8);
    overflow: auto;
}

    .about-nok9-intro p {
        padding: 0 40px 0 40px;
        max-width: 800px;
        margin: 5px auto 40px auto;
        font-size: 1.1rem;
        line-height: 20pt;
    }

    .about-nok9-intro h2 {
        padding-bottom: 10px;
        font-size: 150%;
        margin: 0;
    }
/*OUR MISSION GRID*/
.our-mission {
    animation: transitionIn 2s ease-in-out;
    text-align: center;
    gap: 40px;
    margin: 80px auto 10px auto;
    max-width: 1500px;
}

    .our-mission h2 {
        color: white;
        margin-bottom: 10px;
    }

    .our-mission .mission {
        max-width: 400px;
    }

    .our-mission img {
        height: 65px;
        margin-bottom: 15px;
    }

    .our-mission i {
        font-size: 50px;
        color: white;
        margin-bottom: 30px;
    }
/*PROACTIVE NOT REACTIVE*/
.proactive {
    margin-top: 30px;
}

    .proactive div {
        max-width: 100%;
    }

    .proactive .proactive-container {
        position: relative;
        width: 100%;
        background-color: white;
    }

    .proactive .proactive-text {
        max-width: 800px;
        margin: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .proactive .pointing {
        max-width: 100%;
        display: block;
        height: 700px;
        object-fit: cover;
        object-position: right;
    }

    .proactive h3 {
        margin: 10px 0;
    }

    .proactive p {
        margin-bottom: 40px;
    }

.certifications {
    display: grid;
    gap: 20px;
    text-align: center;
    margin-bottom: 30px;
}

    .certifications .certification {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .certifications img {
        width: 80px;
        margin: auto;
    }

    .certifications .cert-text {
        margin-top: -10px auto 30px auto;
    }
/*AT THE HEART OF INNOVATION*/
.heart {
    margin-top: 30px;
}

    .heart img {
        width: 100%;
        object-fit: cover;
        height: 800px;
    }

    .heart h3 {
        margin: 10px 0;
    }

    .heart p {
        margin-bottom: 20px;
    }

    .heart .heart-container {
        position: relative;
        flex: 1;
        width: 100%;
        background-color: white;
    }

    .heart .heart-text {
        position: absolute;
        top: 50px;
        right: 220px;
        max-width: 800px;
        margin: auto;
        background-color: white;
    }

    .heart img {
        display: block;
    }

.world-map {
    margin-top: 60px;
    text-align: center;
}

    .world-map embed {
        max-width: 95%;
    }

.about-nok9-contact {
    text-align: center;
    padding-bottom: 100px;
}

    .about-nok9-contact h2 {
        margin-bottom: 30px;
    }

    .about-nok9-contact a {
        color: var(--nok9-red);
        line-height: 30px;
        font-size: 1.1rem;
    }

    .about-nok9-contact div {
        background-color: white;
        border-radius: 999px;
        padding: 20px;
        max-width: 280px;
        margin: auto;
    }

@media screen and (max-width: 1312px) {
    .heart-text {
        left: 40px;
    }
}

@media screen and (max-width: 992px) {
    .heart img {
        height: 900px;
    }

    .about-nok9-contact {
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 930px) {
    .proactive {
        display: flex;
        flex-direction: column;
    }

        .proactive .pointing {
            height: 500px;
            margin-bottom: 0px;
        }

        .proactive .proactive-text {
            position: relative;
            padding: 30px;
            background-color: white;
            margin: 300px auto -300px auto;
            max-width: 100%;
        }

    .certifications {
        margin: auto;
    }

        .certifications img {
            width: 50px;
        }

        .certifications .cert-text {
            font-size: 80%;
        }

    .heart {
        background-color: transparent;
        background-image: url(../images/photos/houses.jpg);
        background-position: center center;
    }

        .heart .heart-container {
            background-color: transparent;
        }

        .heart .heart-text {
            max-width: 90%;
            background-color: white;
            position: relative;
            margin: 30px auto 50px auto;
            left: 0px;
            padding: 20px;
        }

        .heart img {
            display: none;
        }
}

@media screen and (max-width: 750px) {
    .our-mission {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
        justify-items: center;
    }
}
/*CONTACT US*/
.contact-fade-in {
    animation: transitionIn 1.2s ease-in-out;
}
/*BACKGROUND*/
.gradient-background {
    background-image: linear-gradient(var(--medium-gray), white);
}
/*SUN NEVER SETS ON NOK9*/
.sun {
    text-align: center;
    color: white;
    margin-bottom: 80px;
    padding-left: 10px;
    padding-right: 10px;
}
/*CONTACTS*/
.contacts {
    max-width: 1500px;
    justify-items: center;
    margin: auto;
    padding: 30px 0;
}

    .contacts div {
        margin-bottom: 30px;
    }

    .contacts .contact {
        width: 300px;
    }

    .contacts .country {
        background-color: white;
        padding: 20px;
    }

    .contacts h2 {
        margin-bottom: 25px;
        font-size: 2.2rem;
    }

    .contacts h4 {
        margin-top: 20px;
    }

    .contacts a {
        color: var(--nok9-red);
        border-bottom: 1px solid var(--nok9-red);
    }

    .contacts p {
        margin: 30px 0;
    }
/*LET's CONNECT*/
.connect {
    align-content: center;
    gap: 60px;
    background-color: white;
    border-bottom: 1px solid var(--medium-gray);
    padding: 80px;
}

    .connect .phone-number {
        color: black !important;
        text-decoration: none;
    }

    .connect div {
        flex: 1;
    }

    .connect .connect-1 {
        max-width: 400px;
        justify-self: end;
        margin-right: 30px;
    }

        .connect .connect-1 h3, .connect .connect-1 p {
            margin-bottom: 30px;
        }

        .connect .connect-1 h4 {
            margin-bottom: 20px;
        }

    .connect .connect-2 input, .connect .connect-2 select, .connect .connect-2 textarea {
        width: 400px;
        margin: 5px 0 10px 0;
    }

    .connect .connect-2 textarea {
        height: 150px;
    }

    .connect .connect-2 .submit {
        background-color: var(--nok9-red);
        border: none;
        color: white;
        padding: 10px;
        margin-top: 10px;
        font-size: 1rem;
    }

    .connect .connect-2 span {
        color: var(--nok9-red);
    }

@media screen and (max-width: 1300px) {
    .sun h3 {
        line-height: 70px;
    }

    .contacts {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 668px) {
    .contacts {
        grid-template-columns: repeat(1, 1fr);
    }

    .connect {
        display: flex;
        flex-direction: column;
    }

        .connect .connect-2 input, .connect .connect-2 select, .connect .connect-2 textarea {
            width: 250px;
            margin: 5px 0 10px 0;
        }
}