:root {
    --color-creme: #F2ECE0;
    --color-slate: #56474E;
    --color-pebble: #93847F;
    --color-peanut: #BB9C88;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: "Lato", Arial, sans-serif;
}

img {
    display: block;
}

a {
    text-decoration: none;
    color: #000000;
}

em {
    color: var(--color-pebble);
    font-style: normal;
}

p,
h2, h1 {
    color: var(--color-slate);
}

.centered {
    width: 960px;
    margin: 0 auto;
}

/* ------------ header --------------- */

header img {
   width: 400px;
   margin: 0 auto;
   padding:20px 0px;
}
nav {
    background-color: var(--color-creme);
    color: var(--color-slate);
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    justify-content: center;
}

nav ul li {
    padding: 10px 15px;
}

nav ul li a {
    color: var(--color-pebble);
}

.current,
nav ul li:hover {
    background-color: var(--color-peanut);
}

.current a,
nav ul li a:hover {
    color: #FFFFFF;
}

/* ---------------- END HEADER -------------- */

/* ---------------- HEADER IMAGE ------------ */

.header_image {
    background-image: url("../images/header-image-3.jpg");
    background-repeat: no-repeat;
    background-position: center;
    height: 700px;
    width: 100%;
    background-color: var(--color-creme);
}

.header_image .overlay {
    background-color: var(--color-slate);
    opacity: 50%;
    height: 700px;
    width: 100%;
}

/* ---------------- END HEADER IMAGE -------- */

/* ---------------- FOOTER ------------------ */

footer {
    background-color: var(--color-creme);
    padding: 20px
}

footer p {
    padding: 10px 0px;
    color: var(--color-slate);
}

.footer_info {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.footer_services {
    text-align: left;
}

.footer_data {
    text-align: right;
}

.copyright {
    text-align: center;
    padding: 70px 0px 10px;
    font-size: 12px;
}

/* ---------------- END FOOTER -------------- */

/* ---------------- QUOTE OWNER ------------- */
.quote_owner {
    padding: 100px 0px 100px;
}

.quote_owner p {
    font-size: 36px;
    line-height: 140%;
}

/* ---------------- QUOTE OWNER ------------- */

/* ---------------- SERVICES ICONS ---------- */

.services_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 50px;
}

.services_wrapper img {
    margin-bottom: 30px;
}

/* ---------------- END SERVICES ICONS ------ */

/* ---------------- WHY US ------------------ */

.why_us ul {
    padding: 40px 60px;
    text-align: center
}

.why_us ul li {
    padding-bottom: 20px;
    list-style-type: none;
    font-size: 20px;
    color: var(--color-slate);
}

.why_us h2 {
    font-size: 48px;
    text-align: center;
}

/* ---------------- END WHY US -------------- */

/* ---------------- MAIL US ----------------- */

.mail_us {
    text-align: center;
    padding: 50px 100px 20px;
    margin-bottom: 20px;
}

.mail_us input:hover {
    background-color: var(--color-pebble);
}
.mail_us input {
    padding: 20px 200px;
    font-size: 28px;
    background-color: var(--color-peanut);
    border: none;
    color: white;
    cursor: pointer;
}


footer .mail_us, footer .mail_us input {
    width: 200px;
    padding: 20px 0;
}

/* --------------- END MAIL US -------------- */

/* --------------- EXAMPLES ----------------- */

.examples {
    background-color: var(--color-creme);
    padding: 10px 0px;
    margin-bottom: 50px;
}

.examples_wrapper {
    justify-content: center;
}

.examples_wrapper,
.right_top_examples_wrapper {
    display: flex;
    flex-wrap: wrap;
}

.examples img,
.right_top_examples_wrapper {
    margin-right: 10px;
    margin-bottom: 10px;
}

/* -------------- END EXAMPLES -------------- */

/* ---------------- TESTIMONIALS ---------------- */

.testimonials_wrapper {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 100px 0px;
}

.testimonials_wrapper div {
    width: 300px;
    padding: 30px;
    background-color: #F2EFEB;
    margin-right: 15px;
}

.testimonials_wrapper div p {
    font-size: 24px;
    color: var(--color-slate);
}

.testimonials_wrapper div.no_mr {
    margin-right: 0px;
}

/* ---------------- END TESTIMONIALS ------------ */

/* ---------------- OVER ------------------------ */
.over {
    width: 960px;
    margin: 0 auto;
    padding: 0px 0px 40px;
}

.over p {
    line-height: 140%;
    padding-left: 0px;
}

.over h2, .over h1 {
    padding: 40px 0px 20px;
}

.over ul {
    padding: 0px 0px 20px 40px;
    line-height: 140%;
}

.examples_wrapper {
    padding: 40px 0px;
    display: flex;
    flex-wrap: wrap;
}

.over_examples_wrapper {
    padding: 40px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* ---------------- END OVER -------------------- */

/* ---------------- REALISATIES ----------------- */

.realisaties {
    width: 960px;
}

.realisaties_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.realisaties_wrapper img {
    margin-bottom: 15px;
    margin-right: 15px;
}

.realisaties h2 {
    font-size: 36px;
    padding: 20px 0px;
    text-align: center;
}

/* -------------- END REALISATIES --------------- */

/* ---------------- SMALLER SCREENS ------------- */

@media screen and (max-width: 960px) {

    /* --------- HEADER IMAGE -------------- */
    .header_image {
        background-position: bottom;
    }

    header img {
        width: 300px;
    }
    /* -------- OWNERS QUOTE --------------- */
    .quote_owner {
        width: 100%;
        padding: 70px 20px;
    }

    /* --------- SERVICES ICONS --------- */
    .services_wrapper {
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }

    .services_wrapper img {
        margin-right: 10px;
    }

    /* --------- WHY US ---------------- */
    .why_us {
        width: 100%;
    }

    /* --------- MAIL US -------------- */
    .mail_us {
        width: 100%;
        padding: 20px 0;
    }

    footer .mail_us {
        margin: 0 auto;
    }

    .mail_us input {
        width: 100%;
        padding: 20px 0;
        margin-top: 20px;
    }

    /* --------- TESTIMONIALS --------- */
    .testimonials_wrapper {
        flex-wrap: wrap;
        justify-content: center;
    }

    .testimonials_wrapper div {
        margin-bottom: 20px;
        margin-right: 0;
    }

    /* -------- EXAMPLES ------------- */
    .examples {
        padding-left: 10px;
    }

    .examples_wrapper, .right_top_examples_wrapper, .over_examples_wrapper {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }

    .right_top_examples_wrapper img {
        width: 100px;
        justify-content: space-between;
    }

    .left_example img  {
        width: 272px;
    }
    .bottom_examples {
        width: 320px;
        margin: 0 auto;
        overflow: hidden;
        margin-left: 5px;
    }

    /* ----------- FOOTER ------------ */
    .footer_info {
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
    }

    .footer_services {
        padding-bottom: 100px;
        text-align: center;
        width: 100%;
    }

    .footer_data {
        text-align: center;
        width: 100%;
    }

    /* ---------- OVER ------------ */
    .examples_wrapper {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

   .over img {
        margin: 0px 20px 20px 0px;
   }

    .over p, .over h2, .over h1 {
        width: 100%px;
        padding: 20px;
    }

    .over ul {
        width: 100%;
        padding: 0px 40px;
    }

    .over {
        width: 100%;
    }

    /* ------------- REALISATIES ---------------- */
    .realisaties {
        width: 100%;
    }

    .realisaties_wrapper img {
        width: 100%;
        padding: 0px 10px;
        margin-right: 0;
    }
}

/* ---------------- END SMALLER SCREENS --------- */