/* ALGEMEEN */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

body {
    background-color: #fff;
    color: #333;
    line-height: 1.6;
}

/* NAVIGATIE */
nav {
    background-color: #2a2a2a;
    padding: 15px 50px;
}

nav .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav .logo {
    height: 60px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 5px;
}

nav ul li a:hover {
    background-color: #f39c12;
    color: #fff;
}

/* HEADER */
.main-header {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
}

.header-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hele afbeelding zichtbaar */
}

.header-text {
    position: absolute;
    bottom: 20px;
    left: 50px;
    color: #fff;
    background-color: rgba(0,0,0,0.4);
    padding: 20px;
    border-radius: 10px;
}

/* CTA BUTTON ONDER HEADER */
.header-cta {
    text-align: center;
    margin: 30px 0;
}

.cta-button {
    background-color: #f39c12;
    color: #fff;
    padding: 15px 35px;
    text-decoration: none;
    font-size: 18px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #e67e22;
}

/* USP BALK */
.usp {
    display: flex;
    justify-content: space-evenly;
    background-color: #ecf0f1;
    padding: 20px 0;
    font-weight: bold;
}

/* PROJECTCARDS */
.projects {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin: 40px 0;
    gap: 20px;
}

body.index .project-card {
    width: 300px;       /* originele grootte homepage */
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s;
    background-color: #f5f5f5;
    text-align: center;
}

body.index .project-card img {
    width: 100%;
    height: 200px;      /* originele hoogte homepage */
    object-fit: cover;
}

.project-card h3 {
    padding: 10px 0;
}

.project-card:hover {
    transform: translateY(-10px);
}

/* WERKWIJZE */
.work-process {
    background-color: #f8f8f8;
    padding: 50px 20px;
}

.work-process h2 {
    text-align: center;
    margin-bottom: 30px;
}

.process-steps {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.step {
    width: 200px;
    text-align: center;
    margin-bottom: 20px;
}

/* TESTIMONIALS */
.testimonials {
    background-color: #ecf0f1;
    padding: 50px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* TESTIMONIAL SLIDER */
.testimonial-slider {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    flex: 1 1 100%; /* slider neemt volledige breedte boven */
}

/* TESTIMONIAL CARDS blijven zoals ze zijn */
.testimonial-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    min-width: 250px;
}

.testimonial-card .stars {
    color: #f39c12;
    margin-top: 10px;
}

/* REVIEW FORMULIER RECHTS */
.review-submit-right {
    flex: 0 0 30%;       /* breedte ongeveer 35%, staat onder slider */
    width: 300px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    min-width: 250px;
    margin-left: auto;    /* duwt het formulier naar rechts */
    margin-top: 20px;     /* ruimte boven het formulier */
    display: flex;
    flex-direction: column;  /* alles onder elkaar */
    gap: 15px; 
    align-items: center;  /* <--- alles horizontaal in het midden */
    text-align: center;   /* <--- tekst in het midden */
}

/* Klikbare sterren voor reviewform */
.star-rating {
    display: flex;
    flex-direction: row-reverse; /* zodat 5 sterren links */
    justify-content: center;
    gap: 5px;
    font-size: 24px;
}

.star-rating input {
    display: none; /* verberg de radio buttons */
}

.star-rating label {
    cursor: pointer;
    color: #ccc; /* standaard grijs */
    transition: color 0.2s;
}

.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
    color: #f39c12; /* oplichten van sterren */
}


.review-submit-right h3 {
    margin-bottom: 10px;
    font-size: 20px;
}

.review-submit-right form {
    display: flex;
    flex-direction: column; /* alle velden onder elkaar */
    gap: 1rem;              /* ruimte tussen velden */
    width: 100%
}

.review-submit-right input,
.review-submit-right textarea {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    width: 100%;  /* kleiner zodat het blokje niet te breed wordt */

}

.review-submit-right textarea {
    min-height: 100px;
    resize: vertical;
}

.review-submit-right button {
    background-color: #f39c12;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    align-self: center; /* knop mooi in het midden */
    padding: 10px 20px;

}

.review-submit-right button:hover {
    background-color: #e67e22;
}

/* RESPONSIVE */
@media(max-width: 1024px){
    .projects, 
    .process-steps, 
    .testimonial-slider, 
    .service-items {
        flex-direction: column;
        align-items: center;
    }

    /* Slider boven, formulier onder op mobiel */
    .testimonial-slider,
    .review-submit-right {
        flex: 1 1 100%;   /* beide full-width op mobiel */
        margin-left: 0;   /* geen push naar rechts */
        margin-top: 20px; /* ruimte tussen slider en formulier */
    }
}


/* CTA WIDE */
.cta-wide {
    background-color: #f39c12;
    color: black;
    text-align: center;
    padding: 50px 20px;
    margin: 50px 0;
}

.cta-wide h2 {
    margin-bottom: 15px;
}

.cta-wide p {
    margin-bottom: 25px;
}

.cta-wide .cta-button {
    display: inline-bock;
    background-color: #fff;
    color: black;
}

.cta-wide .cta-button:hover {
    background-color: black;
    color: #fff;
}

/* WAT DOEN WE */
.services {
    background-color: #f8f8f8;
    padding: 50px 20px;
}

.services h2 {
    text-align: center;
    margin-bottom: 30px;
}

.service-items {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.service-items div {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 200px;
    text-align: center;
    margin-bottom: 20px;
}

/* FOOTER */
footer {
    background-color: #2a2a2a;
    color: #fff;
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

footer a {
    color: #fff;
    text-decoration: none;
    margin: 0 5px;
}

footer img {
    width: 25px;
    height: 25px;
    margin-left: 10px;
}

.review-section {   /* maak een container om de foto en het formulier heen */
    display: flex;          /* foto en formulier naast elkaar */
    gap: 5px;               /* afstand tussen foto en formulier */
    flex-wrap: nowrap;       /* altijd naast elkaar, niet onder elkaar */
    align-items: flex-start; /* uitlijnen bovenaan */
}

.review-image-wrapper {
    float: left;
    height: 400px;
    width: calc(100% - 305px);
    overflow: hidden;       /* dit is goed */
    margin-right: 5px;
    border-radius: 10px;    /* kan blijven als je ronde hoeken wilt */
    background: none;       /* belangrijk: geen achtergrondkleur! */
    padding: 0;             /* geen padding, anders komt zwarte rand door */
    border: none;           /* geen border */
}


.review-image-loos {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;      /* vult container volledig, kan inzoomen */
    object-position: center;
    margin: 0;              /* geen extra ruimte rond de afbeelding */
    padding: 0;
    border: none;
}



.review-submit-right {
    width: 300px;           /* blijft vast breed */
}

/* OVER ONS – tekst niet te breed laten lopen */
.about-content {
    display: block;        /* geen flex meer */
    padding-bottom: 50px;
}

.about-content .text-block {
    max-width: 1300px;
    margin: 0;             /* helemaal links */
    padding-left: 20px;  /* ruimte links */
    text-align: left;      /* tekst links */
}

/* OVER ONS – beide foto’s rechts onder elkaar */
/* Container voor beide foto’s rechts */
.about-img-container {
    float: right;       /* hele container rechts */
    width: 260px;       /* breedte = bovenste foto */
    margin-left: 40px;  /* ruimte tussen container en tekst */
}

.about-img-container .about-img {
    width: 100%;        /* foto’s vullen container */
    border-radius: 6px;
    margin-bottom: 24px; /* ruimte tussen de twee foto’s */
}

/* Tweede foto iets kleiner (optioneel) */
.about-img-container .about-img.small {
    width: 200px;       /* smaller dan de bovenste foto */
}

/* floats netjes afsluiten */
.text-block::after {
    content: "";
    display: block;
    clear: both;
}

/* Hover-effect voor de projectfoto’s */
.about-img-container .about-img {
    transition: transform 0.3s ease; /* soepel effect bij hover */
}

.about-img-container .about-img:hover {
    transform: scale(1.05); /* licht vergroten bij hover */
    z-index: 2;             /* zorgt dat de foto boven andere elementen komt */
}

    .about-img-container .about-img {
        width: 100%;
    }

/* RENOVATIE PAGINA HEADER */
.renovatie-header {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

.renovatie-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* voorkomt dat er ruimte onder de afbeelding ontstaat */
}

.renovatie-title {
  position: absolute;
  bottom: 30px;
  left: 50px;
  transform: none;        /* BELANGRIJK: dit uitzetten */
  color: #fff;
  font-size: 3em;
  font-weight: bold;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
  text-align: left;
  z-index: 10;
}

/* Renovatie intro tekstblok */
.renovatie-intro {
    max-width: 720px;
    margin: 60px 0 60px 50px;
    background: #f8f8f8;
    padding: 30px 35px;
    border-left: 6px solid #f39c12;
    border-radius: 6px;
}

.renovatie-intro h2 {
    margin-bottom: 15px;
}

.renovatie-intro p {
    font-size: 17px;
    line-height: 1.8;
}

/* RENOVATIE PAGINA – foto naast tekstblok */
.renovatie-container {
    display: flex;
    align-items: flex-start; 
    gap: 40px; 
    flex-wrap: wrap; 
    margin: 60px 50px; 
}

.renovatie-image {
    flex: 0 0 350px; 
}

.renovatie-image img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    object-fit: cover;
}

/* RENOVATIE PAGINA – foto naast tekstblok */
.renovatie-container {
    display: flex;             /* tekst en foto naast elkaar */
    align-items: flex-start;   /* bovenkant uitlijnen */
    gap: 40px;                 /* ruimte tussen tekst en foto */
    flex-wrap: wrap;           /* mobiel: afbeelding onder tekst */
    margin: 60px 50px;         /* marge rondom */
}

.renovatie-image {
    flex: 0 0 350px;           /* vaste breedte voor foto */
    margin-left: 4cm;  /* duwt de foto helemaal naar rechts */
}

.renovatie-image img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    object-fit: cover;
}

/* RENOVATIE BANNER – los van de container */
.renovatie-banner {
    width: 100%;                  /* over volledige schermbreedte */
    height: 250px;                /* hoogte banner, pas aan indien nodig */
    background-image: url('images/kantoorbanner.jpg'); /* jouw bannerfoto */
    background-size: cover;       /* afbeelding vult volledig */
    background-position: center;  /* centreren */
    display: flex;
    align-items: center;          /* verticale centrering van tekst */
    justify-content: center;      /* horizontale centrering van tekst */
    margin: 40px 0 0 0;           /* ruimte boven banner, los van container */
    position: relative;
}

.banner-text {
    background-color: rgba(0, 0, 0, 0.5); /* semi-transparant vak voor leesbaarheid */
    padding: 20px 40px;
    border-radius: 8px;
    text-align: center;
    color: #fff;
}

.banner-text h2 {
    margin-bottom: 10px;
    font-size: 2em;
}

.banner-text p {
    font-size: 1.2em;
}

    .banner-text h2 {
        font-size: 1.5em;            /* tekst iets kleiner */
    }

    .banner-text p {
        font-size: 1em;
        padding: 15px 20px;          /* padding aanpassen */
    }

.ontwikkelen-header {
    position: relative;
    width: 100%;
    height: 80vh; /* hoogte header voor deze pagina */
    background-image: url('images/projectontwikkeling.jpg');
    background-size: cover;
    background-position: center; /* of top center, afhankelijk van focus */
    background-repeat: no-repeat;
}

.ontwikkelen-header .hero-content {
    position: absolute;
    bottom: 20px;  /* links onderin */
    left: 20px;
    color: white;
    font-size: 1rem; /* kleiner dan 3rem */
    text-align: left;
    z-index: 2;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.6);
}

/* PROJECTCARDS / HOE WIJ WERKEN */
.work-process {
    background-color: #f8f8f8; /* zelfde achtergrond als op homepage */
    padding: 50px 20px;
}

.work-process h2 {
    text-align: center;
    margin-bottom: 30px;
}

.projects {
    display: flex;
    justify-content: space-evenly; /* net zoals homepage */
    flex-wrap: wrap;
    margin: 40px 0;
    gap: 20px;
}

.project-card {
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s;
    background-color: #f5f5f5;
    text-align: center;
}

.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.project-card h3 {
    padding: 10px 0;
}

.project-card:hover {
    transform: translateY(-10px);
}

.faq-section {
    background-color: #f8f8f8;
    padding: 50px 20px;
}

.faq-section h2 {
    text-align: center;
    margin-bottom: 30px;
}

.faq-item {
    margin: 10px auto;      /* automatisch centreren */
    max-width: 500px;       /* maximale breedte van de balk */
}

.faq-question {
    width: 100%;             /* blijft 100% van de faq-item container */
    text-align: left;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.innovatie-section {
    background-color: #f5f5f5;
    padding: 50px 20px;
    text-align: center;
}

.innovatie-section h2 {
    margin-bottom: 30px;
}

.innovatie-items {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 20px;
}

.innovatie-item {
    width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.innovatie-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 10px;
}

.innovatie-item p {
    font-weight: bold;
    font-size: 1rem;
}



.faq-question:hover {
    background-color: #f0f0f0;
}

.faq-answer {
    display: none;
    padding: 15px;
    border-left: 3px solid #f39c12;
    background-color: #fff;
    margin-top: 5px;
    border-radius: 0 5px 5px 0;
}

.faq-item.active .faq-answer {
    display: block;
}

/* ==============================
   Onderhoudsabonnement header
   ============================== */
.onderhoudsabonnement-header {
    position: relative;
    width: 100%;
    height: 80vh; /* hoogte header voor deze pagina */
    background-image: url('images/onderhoudsabonnement.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.onderhoudsabonnement-header .hero-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    font-size: 1rem;
    text-align: left;
    z-index: 2;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.6);
}

/* ==============================
   ONDERHOUDSABONNEMENT PAGINA
   ============================== */

/* Onderhoud introductie */
.onderhoud-intro-box {
    max-width: 800px;
    margin: 50px auto;
    background-color: #f8f8f8;
    padding: 30px 35px;
    border-left: 6px solid #f39c12;
    border-radius: 8px;
    line-height: 1.7;
}

/* Wat is inbegrepen */
.included-box {
    max-width: 800px;
    margin: 40px auto;
    background-color: #fff;
    padding: 30px 35px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.included-box h2 {
    text-align: center;
    margin-bottom: 25px;
}

.included-list {
    list-style: none;
    padding-left: 0;
}

.included-list li {
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 15px;
}

.included-list .icon {
    font-size: 1.8rem;
    color: #f39c12;
    display: inline-block;
    width: 30px;      /* vaste ruimte voor elk icoon */
    text-align: center;
}

/* Hoe het werkt - processtappen */
.onderhoud-process {
    background-color: #f5f5f5;
    padding: 50px 20px;
}

.onderhoud-process h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
}

.process-steps {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: nowrap;   /* voorkom dat stappen onder elkaar komen */
    gap: 30px;
    overflow-x: auto;    /* horizontaal scrollen bij smalle schermen */
    padding-bottom: 10px; /* ruimte onder de stappen */
}

.onderhoud-page .step {
    background-color: #fff;
    padding: 25px 20px;
    border-radius: 10px;
    text-align: center;
    min-width: 220px;
    flex: 0 0 auto;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.step h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: #f39c12;
}

.step p {
    font-size: 1rem;
    line-height: 1.6;
}

.step:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/* Voor wie sectie */
.services .service-items {
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap; /* kan blijven voor meerdere items */
}

.onderhoud-page .services .service-item {
    background-color: #fff;
    padding: 20px 15px;
    border-radius: 8px;
    width: 250px;
    text-align: center;
    font-size: 1.1rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.services .service-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/* CTA knop */
.header-cta {
    text-align: center;
    margin: 50px 0;
}

.header-cta .cta-button {
    background-color: #f39c12;
    color: #fff;
    padding: 15px 40px;
    font-size: 1.2rem;
    border-radius: 6px;
    transition: background-color 0.3s;
    text-decoration: none;
}

.header-cta .cta-button:hover {
    background-color: #e67e22;
}

.nieuwbouw-header {
    position: relative;
    width: 100%;
    height: 80vh; /* hoogte header */
    background-image: url('images/nieuwbouw.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.nieuwbouw-header .hero-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    font-size: 1rem;
    text-align: left;
    z-index: 2;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.6);
}

/* Responsief onderhoudsabonnement */
@media(max-width: 1024px){
    .process-steps, 
    .services .service-items {
        flex-direction: column;
        align-items: center;
    }

    .step, .services .service-item {
        width: 80%;
        margin-bottom: 20px;
    }

    .onderhoud-intro-box, 
    .included-box {
        width: 90%;
        margin: 40px auto;
    }

    .included-list .icon {
        font-size: 1.8rem;
        color: #f39c12;
        display: inline-block;
        width: 30px;
        text-align: center;
    }

    .included-note {
        margin-top: 20px;
        font-size: 0.95rem;
        color: #555;
        font-style: italic;
        text-align: center;
    }
}
/* =====================================================
   NIEUWBOUW PAGINA – INHOUD (USP → FOOTER)
   ===================================================== */

/* Algemene spacing tussen de inhoudssecties */
body.nieuwbouw-pagina section:not(.usp):not(.cta) {
    padding: 70px 0;
}

/* Afwisselende lichte achtergrond voor rust */
body.nieuwbouw-pagina section:nth-of-type(even):not(.usp):not(.cta) {
    background-color: #f5f5f5;
}

/* Kaart-stijl voor alle tekstblokken */
body.nieuwbouw-pagina section:not(.usp):not(.cta) .container {
    background-color: #fff;
    max-width: 1100px;
    margin: 0 auto;
    padding: 45px 50px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Koppen en tekst leesbaarder */
body.nieuwbouw-pagina h2 {
    font-size: 28px;
    margin-bottom: 20px;
}

body.nieuwbouw-pagina p {
    font-size: 17px;
    line-height: 1.8;
}

/* Bouwproces visueel aantrekkelijk */
body.nieuwbouw-pagina .proces ul {
    list-style: none;
    padding-left: 0;
    margin-top: 30px;
}

body.nieuwbouw-pagina .proces li {
    background-color: #f8f8f8;
    padding: 15px 20px;
    margin-bottom: 12px;
    border-radius: 6px;
    font-weight: bold;
    border-left: 4px solid #f39c12;
}

body.nieuwbouw-pagina .waarom h2,
body.nieuwbouw-pagina .waarom p {
    text-align: center;
}

/* CTA NIEUWBOUW – oranje zoals homepage */
body.nieuwbouw-pagina .cta {
    background-color: #f39c12;
    text-align: center;
    padding: 70px 20px;
    margin: 90px 0;
}

body.nieuwbouw-pagina .cta .container {
    background: none;
    box-shadow: none;
    padding: 0;
}

body.nieuwbouw-pagina .cta h2,
body.nieuwbouw-pagina .cta p {
    color: #000;
}

body.nieuwbouw-pagina .cta .cta-button {
    background-color: #fff;
    color: #000;
    display: inline-block;
    margin-top: 25px;
}

body.nieuwbouw-pagina .cta .cta-button:hover {
    background-color: #000;
    color: #fff;
}

/* Mobiel optimalisatie */
@media (max-width: 768px) {
    body.nieuwbouw-pagina section:not(.usp):not(.cta) .container {
        padding: 30px 25px;
    }

    body.nieuwbouw-pagina h2 {
        font-size: 24px;
    }
}

/* =========================================
   NIEUWBOUW – Wat verstaan wij onder nieuwbouw
   HARD rechts positioneren
   ========================================= */

body.nieuwbouw-pagina section.uitleg {
    position: relative;
}

body.nieuwbouw-pagina section.uitleg .container {
    max-width: 500px;
    margin: 0;                    /* geen centering */
    position: relative;
    left: 15%;                    /* DIT is de sleutel */
}

/* NIEUWBOUW – Banner onder 'Wat verstaan wij onder nieuwbouw' */
body.nieuwbouw-pagina section.uitleg {
    background: url('images/nieuwbouwbanner.jpg') no-repeat center center;
    background-size: cover;     /* zorgt dat de banner de volledige sectie vult */
    padding: 120px 50px;        /* meer padding zodat tekst goed op de banner staat */
    border-radius: 0;           /* optioneel: geen afgeronde hoeken voor banner */
}

/* Tekst beter leesbaar op de banner */
body.nieuwbouw-pagina section.uitleg .container {
    background: transparent;  /* semi-transparant zwart vlak */
    color: #000;                     /* witte tekst */
    padding: 45px 50px;
    border-radius: 10px;
    max-width: 520px;                /* behoud compacte breedte */
    position: relative;
    left: -5cm;                      /* behoud huidige positie */
}

/* NIEUWBOUW – Proces stap voor stap als blokjes */
body.nieuwbouw-pagina section.proces {
    background-color: #f8f8f8;   /* subtiele achtergrond */
    padding: 60px 20px;           /* ruimte rondom */
    text-align: center;            /* titel gecentreerd */
}

body.nieuwbouw-pagina section.proces h2 {
    margin-bottom: 40px;
    font-size: 2rem;
    color: #2a2a2a;
}

/* Container voor de blokjes */
body.nieuwbouw-pagina section.proces .steps-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;                     /* ruimte tussen blokjes */
    max-width: 1000px;
    margin: 0 auto;                /* gecentreerd */
}

/* Elk stap-blokje */
body.nieuwbouw-pagina section.proces .step-box {
    background-color: #fff;
    padding: 30px 20px;
    border-radius: 10px;
    flex: 1 1 220px;               /* min breedte voor responsive */
    max-width: 180px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover effect */
body.nieuwbouw-pagina section.proces .step-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/* Checkmark in elk blokje */
body.nieuwbouw-pagina section.proces .step-box::before {
    content: "✔";
    color: #f39c12;
    font-size: 1.5rem;
    margin-bottom: 15px;
}

/* Tekst in het blokje */
body.nieuwbouw-pagina section.proces .step-box p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    text-align: center;
}

/* Proces-sectie: container “onzichtbaar” maken zodat blokjes naast elkaar staan */
body.nieuwbouw-pagina section.proces .container {
    background: none !important;       /* verwijdert achtergrond */
    padding: 0 !important;             /* geen padding */
    margin: 0 auto !important;         /* geen marge boven/onder, centreren */
    max-width: 100% !important;        /* laat container volle breedte nemen */
    box-shadow: none !important;       /* verwijdert schaduw */
}

/* COOKIE MODAL */
#cookie-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* donkere overlay */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.cookie-content {
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.cookie-content h2 {
    margin-bottom: 15px;
    font-size: 22px;
    color: #333;
}

.cookie-content p {
    font-size: 16px;
    color: #555;
    margin-bottom: 25px;
}

.cookie-content a {
    color: #f39c12;
    font-weight: bold;
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.cookie-buttons button {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

#only-necessary {
    background-color: #ccc;
    color: #333;
}

#only-necessary:hover {
    background-color: #b3b3b3;
}

#accept-all {
    background-color: #f39c12;
    color: #fff;
}

#accept-all:hover {
    background-color: #e67e22;
}

/* MOBIEL */
@media (max-width: 600px) {
    .cookie-buttons {
        flex-direction: column;
    }

    .cookie-buttons button {
        width: 100%;
    }
}