/* =========================================================
   PRAKTIJK FILIGRANA
   NIEUWE ZACHTE KLEUREN
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    /* GROENE BASIS BEHOUDEN */
    background: #dce8d8;

    color: #705b4d;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.8;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}


/* =========================================================
   TYPOGRAFIE
   ========================================================= */

h1,
h2,
h3,
p,
a {
    font-family: Georgia, "Times New Roman", serif;
}

h1 {
    color: #705b4d;
    font-size: 42px;
    line-height: 1.25;
}

h2 {
    color: #705b4d;
    font-size: 28px;
    line-height: 1.3;
}

h3 {
    color: #705b4d;
    font-size: 24px;
    line-height: 1.35;
}

p {
    color: #705b4d;
}


/* =========================================================
   HEADER
   ========================================================= */

header {
    width: 100%;

    /* NIEUWE ZACHTE ACHTERGROND */
    background: #F8F5F1;

    border-bottom: 1px solid #d4c2b0;
}

.nav {
    width: 100%;
    max-width: 1400px;
    min-height: 175px;

    margin: 0 auto;
    padding: 28px 55px;

    display: flex;
    align-items: center;
    gap: 90px;
}

.logo-area {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
}

.logo-area img {
    display: block;
    width: 185px;
}

nav {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 42px;
}

nav a {
    color: #705b4d;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

nav a:hover {
    opacity: 0.65;
}


/* =========================================================
   KNOPPEN
   GROEN BEHOUDEN
   ========================================================= */

.button {
    display: inline-block;

    padding: 12px 27px;

    background: #718a69;
    color: white;

    border-radius: 8px;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;

    text-decoration: none;
}

.button:hover {
    background: #5f7659;
}


/* =========================================================
   HOMEPAGE
   ========================================================= */

.hero {
    width: 100%;
    padding: 70px 20px 80px;

    text-align: center;
}

.hero-wrapper {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}


/* =========================================================
   GROOT LOGO
   ========================================================= */

.hero-logo-box {
    width: 100%;

    margin: 0 auto;
    padding: 55px 40px;

    /* NIEUWE ZACHTE BLOKKLEUR */
    background: #F8F5F1;

    border: 2px solid #718a69;
    border-radius: 22px;

    text-align: center;
}

.hero-logo-box img {
    display: block;

    width: 330px;
    max-width: 80%;

    height: auto;

    margin: 0 auto;
}


/* =========================================================
   TEKSTBLOK ONDER LOGO
   ========================================================= */

.hero-text-box {
    width: 100%;

    margin: 25px auto 0;
    padding: 30px 35px;

    background: #F8F5F1;

    border: 2px solid #718a69;
    border-radius: 18px;

    text-align: center;
}

.hero-text-box p {
    display: block;

    width: 100%;
    max-width: 700px;

    margin: 0 auto 25px;

    text-align: center;

    font-size: 18px;
    line-height: 1.8;
}

.hero-text-box .button {
    display: inline-block;
}


/* =========================================================
   WELKOM
   ========================================================= */

.welcome {
    padding: 35px 0;
}

.welcome-box {
    max-width: 800px;

    margin: 0 auto;
    padding: 40px;

    background: #F8F5F1;

    border: 2px solid #718a69;
    border-radius: 18px;

    text-align: center;
}

.welcome-box h2 {
    margin-top: 0;
}

.text-link {
    display: inline-block;

    margin-top: 10px;

    color: #718a69;
    font-weight: 700;
    text-decoration: none;
}


/* =========================================================
   RECENSIES
   ========================================================= */

.reviews {
    padding: 70px 0;
}

.reviews-heading {
    max-width: 700px;

    margin: 0 auto 40px;

    text-align: center;
}

.reviews-heading h2 {
    margin: 0 0 12px;
}

.reviews-heading p {
    margin: 0;
}

.reviews-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}

.review {
    height: 100%;
    padding: 30px;

    background: #F8F5F1;

    border: 2px solid #718a69;
    border-radius: 18px;
}

.review-name {
    margin-bottom: 15px;

    font-size: 19px;
    font-weight: 700;

    text-align: center;
}

.review-text {
    margin: 0;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   HOMEPAGE CTA
   ========================================================= */

.home-cta {
    padding: 70px 0;
}

.cta-box {
    max-width: 800px;

    margin: 0 auto;
    padding: 45px 35px;

    background: #F8F5F1;

    border: 2px solid #718a69;
    border-radius: 18px;

    text-align: center;
}

.cta-box h2 {
    margin-top: 0;
}


/* =========================================================
   DIENSTEN
   ========================================================= */

.diensten-intro {
    padding: 65px 0 40px;
    text-align: center;
}

.diensten-intro .container {
    max-width: 800px;
}

.diensten-overzicht {
    padding: 10px 0 45px;
}

.diensten-overzicht .container {
    max-width: 900px;
}

.dienst {
    margin: 25px auto;
    padding: 35px 40px;

    background: #F8F5F1;

    border: 2px solid #718a69;
    border-radius: 18px;
}

.dienst h2 {
    margin: 0 0 20px;
    text-align: center;
}

.dienst p {
    margin: 0 0 18px;
}

.dienst-waarschuwing {
    margin-top: 25px;
    padding: 22px 25px;

    background: #f7f7f7;

    border-left: 4px solid #718a69;
    border-radius: 10px;
}


/* =========================================================
   DIENSTEN ONDERKANT
   ========================================================= */

.diensten-onderkant {
    padding: 20px 0 70px;
}

.diensten-onderkant .container {
    max-width: 900px;

    display: flex;
    flex-direction: column;
    gap: 25px;
}

.diensten-info-box {
    padding: 42px 40px;

    background: #F8F5F1;

    border: 2px solid #718a69;
    border-radius: 25px;

    text-align: center;
}

.dieren-illustratie {
    width: 100%;
    margin-top: 25px;

    text-align: center;
}

.dieren-illustratie img {
    display: block;

    width: 70%;
    max-width: 500px;

    height: auto;

    margin: 0 auto;
}


/* =========================================================
   TARIEVEN
   ========================================================= */

.tarief {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 30px;

    background: #F8F5F1;

    border: 2px solid #718a69;
    border-radius: 18px;
}

.tarief h2 {
    margin: 0 0 20px;
    text-align: center;
}

.tarief-prijs {
    margin-top: 25px;
    padding-top: 20px;

    border-top: 1px solid #c7d4c3;

    text-align: center;
}

.tarief-prijs strong {
    display: block;
    font-size: 30px;
}

.tarieven-intro {
    max-width: 800px;

    margin: 65px auto 45px;

    text-align: center;
}

.tarieven-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

    margin-bottom: 45px;
}

.tarieven-toelichting {
    max-width: 900px;

    margin: 0 auto 45px;
    padding: 30px 40px;

    background: #F8F5F1;

    border: 2px solid #718a69;
    border-radius: 18px;

    text-align: center;
}


/* =========================================================
   CONTACT
   ========================================================= */

main.container > h1 {
    width: 100%;

    margin: 65px auto 18px;

    text-align: center;
}

main.container > p {
    width: 100%;
    max-width: 800px;

    margin: 0 auto 45px;

    text-align: center;
}

.contact-box {
    max-width: 800px;

    margin: 0 auto 70px;
    padding: 40px;

    background: #F8F5F1;

    border: 2px solid #718a69;
    border-radius: 18px;

    text-align: center;
}


/* =========================================================
   OVER NEI
   ========================================================= */

.over-nei {
    max-width: 900px;

    margin: 0 auto;

    padding: 65px 20px 70px;
}

.nei-content {
    padding: 40px;

    background: #F8F5F1;

    border: 2px solid #718a69;
    border-radius: 18px;
}

.nei-content h2 {
    margin: 40px 0 15px;
    text-align: center;
}

.nei-content h2:first-child {
    margin-top: 0;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
    padding: 30px 20px;

    background: #F8F5F1;

    border-top: 1px solid #d4c2b0;

    text-align: center;
}

footer p {
    margin: 5px 0;
    font-size: 15px;
}


/* =========================================================
   HOMEPAGE - TEKST ONDER HET LOGO
   ========================================================= */

.hero {
    text-align: center !important;
}

.hero-info {
    width: 90% !important;
    max-width: 700px !important;

    margin: 25px auto 0 !important;
    padding: 30px 35px !important;

    background: #F8F5F1 !important;

    border: 2px solid #718a69 !important;
    border-radius: 18px !important;

    text-align: center !important;

    display: block !important;
}

.hero-info p {
    width: 100% !important;
    max-width: none !important;

    margin: 0 auto 25px !important;

    text-align: center !important;
}

.hero-info .button {
    display: inline-block !important;
    margin: 0 auto !important;
}


/* =========================================================
   OVER KIM
   ========================================================= */

.over-kim-intro {
    max-width: 800px;

    margin: 60px auto 40px;

    text-align: center;
}

.over-kim-intro h1 {
    margin-bottom: 20px;
}


/* =========================================================
   OVER KIM - BLOKKEN
   ========================================================= */

.over-kim-blok {
    max-width: 900px;

    margin: 25px auto;
    padding: 35px 40px;

    /* NIEUWE WARME LICHTE KLEUR */
    background: #F8F5F1 !important;

    border: 2px solid #718a69;
    border-radius: 18px;

    box-shadow:
        0 6px 20px rgba(70, 90, 65, 0.07);
}

.over-kim-blok h2 {
    margin-top: 0;
    margin-bottom: 22px;

    text-align: center;
}

.over-kim-blok p {
    margin-bottom: 17px;
}

.over-kim-blok p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .nav {
        padding-left: 35px;
        padding-right: 35px;
        gap: 55px;
    }

    nav {
        gap: 28px;
    }

    .tarieven-grid,
    .reviews-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 800px) {

    .nav {
        min-height: 130px;

        padding: 20px 25px 24px;

        flex-direction: column;

        gap: 20px;
    }

    .logo-area img {
        width: 150px;
    }

    nav {
        width: 100%;

        flex-wrap: wrap;

        justify-content: center;

        gap: 13px 22px;
    }

    .hero {
        padding: 45px 15px 55px;
    }

    .hero-logo-box {
        padding: 40px 25px;
    }

    .hero-logo-box img {
        width: 300px;
    }
}


/* =========================================================
   KLEIN MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    body {
        font-size: 16px;
    }

    h1 {
        font-size: 34px;
    }

    h2 {
        font-size: 25px;
    }

    .container {
        width: 90%;
    }

    .nav {
        padding: 20px;
        gap: 18px;
    }

    .logo-area img {
        width: 140px;
    }

    nav {
        gap: 11px 18px;
    }

    nav a {
        font-size: 15px;
    }

    .hero {
        padding: 45px 15px 55px;
    }

    .hero-logo-box {
        padding: 35px 20px;
    }

    .hero-logo-box img {
        width: 250px;
        max-width: 85%;
    }

    .hero-text-box {
        padding: 28px 20px;
    }

    .hero-text-box p {
        font-size: 16px;
    }

    .welcome {
        padding: 50px 0;
    }

    .welcome-box {
        padding: 30px 25px;
    }

    .reviews {
        padding: 50px 0;
    }

    .review {
        padding: 25px;
    }

    .dienst {
        padding: 28px 22px;
    }

    .diensten-info-box {
        padding: 32px 22px;
    }

    .tarief {
        padding: 25px 22px;
    }

    .tarieven-toelichting {
        padding: 25px 22px;
    }

    .contact-box {
        padding: 30px 22px;
    }

    .over-nei {
        padding: 45px 18px 50px;
    }

    .nei-content {
        padding: 28px 22px;
    }

    footer {
        padding: 25px 15px;
    }

    .over-kim-intro {
        margin: 45px auto 30px;
    }

    .over-kim-blok {
        padding: 28px 22px;
        margin: 20px auto;
    }
}

/* =====================================================
   NIEUWE WARME ACHTERGRONDEN
   ===================================================== */

/* Header */
header {
    background: #F8F5F1 !important;
}

/* Footer */
footer {
    background: #F8F5F1 !important;
}

/* Alle gewone contentblokken */
.welcome-box,
.review,
.cta-box,
.dienst,
.diensten-info-box,
.tarief,
.tarieven-toelichting,
.contact-box,
.nei-content,
.over-kim-blok {
    background: #F8F5F1 !important;
}

/* Groene randen behouden */
.welcome-box,
.review,
.cta-box,
.dienst,
.diensten-info-box,
.tarief,
.tarieven-toelichting,
.contact-box,
.nei-content,
.over-kim-blok {
    border-color: #718A69;
}

/* =====================================================
   WARME LICHTE BLOKKEN
   ===================================================== */

/* Header */
header {
    background: #F8F5F1 !important;
}

/* Footer */
footer {
    background: #F8F5F1 !important;
}

/* Homepage */
.hero-info,
.hero-text-box {
    background: #F8F5F1 !important;
}

/* Alle contentblokken */
.welcome-box,
.review,
.cta-box,
.dienst,
.diensten-info-box,
.tarief,
.tarieven-toelichting,
.contact-box,
.nei-content,
.over-kim-blok {
    background: #F8F5F1 !important;
}

/* Groen behouden */
.welcome-box,
.review,
.cta-box,
.dienst,
.diensten-info-box,
.tarief,
.tarieven-toelichting,
.contact-box,
.nei-content,
.over-kim-blok {
    border-color: #718A69;
}