/* Algemene Reset en Container */
body {
    font-family: 'Roboto', sans-serif;
    color: #343A40;
    line-height: 1.6;
}
.container {
    width: 90%;
    max-width: 1200px; /* Max breedte voor desktop */
    margin: 0 auto;
}

/* Header/Navigatie */
header {
    background-color: #FFFFFF;
    border-bottom: 2px solid #FF6600; /* Oranje lijn voor impact */
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.logo img {
    height: 80px; /* Hoogte van het logo */
}
nav ul {
    list-style: none;
    display: flex;
}
nav ul li a {
    text-decoration: none;
    color: #343A40;
    padding: 10px 15px;
    font-weight: 500;
    transition: color 0.3s;
}
nav ul li a:hover, nav ul li a.active {
    color: #FF6600; /* Oranje hover-effect */
}

/* Hero-Sectie */
#hero {
    background-color: #343A40; /* Donkere achtergrond */
    color: #FFFFFF;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
#hero .hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3; /* Transparant maken zodat de tekst leesbaar blijft */
    z-index: 1;
}
#hero .hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    max-width: 1500px; /* Tekst aan de zijkant houden */
}
#hero h1 {
    font-size: 3em;
    font-weight: 700;
    color: #FFFFFF;
}
/* Zorgt dat de tekst in de introductiesectie gecentreerd is */
#stappenplan-hero .container {
    text-align: center;
}

/* Zorg dat de H1 zelf goed opgemaakt blijft */
#stappenplan-hero h1 {
    color: #343A40; /* Zwart/Antraciet */
    font-size: 2.5em; 
    margin-bottom: 15px;
}

/* Knoppen (Call to Action) */
.button {
    display: inline-block;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    margin-right: 15px;
    margin-top: 20px;
    transition: background-color 0.3s, transform 0.2s;
}
.primary-cta {
    background-color: #FF6600; /* Fel Oranje */
    color: #FFFFFF;
}
.primary-cta:hover {
    background-color: #CC5200;
    transform: translateY(-2px); /* Lichte animatie */
}

/*Kernwaarden*/
#kernwaarden {
    padding: 60px 0;
    text-align: center;
    background-color: #F8F9FA; /* Zeer lichte grijze achtergrond */
}
#kernwaarden h2 {
    margin-bottom: 40px;
    color: #343A40;
}
#kernwaarden .grid-item {
    padding: 20px;
    display: inline-block;
    width: 30%; /* Voor 3 kolommen */
    box-sizing: border-box;
    margin: 0 1.5%;
}
.grid-item i.icon {
    font-size: 3em;
    color: #FF6600; /* Oranje iconen */
    margin-bottom: 15px;
    display: block;
}
.grid-item h3 {
    color: #343A40;
    font-size: 1.2em;
}

/*Footer en Slo*/
/* Slot CTA Banner */
#slot-cta {
    background-color: #FF6600;
    color: #FFFFFF;
    padding: 40px 0;
    text-align: center;
}
#slot-cta h2 {
    margin-bottom: 10px;
    font-size: 2em;
}
#slot-cta .cta-button {
    background-color: #FFFFFF;
    color: #FF6600;
    border: 2px solid #FFFFFF;
}
#slot-cta .cta-button:hover {
    background-color: #F8F9FA;
}

/* Footer */
footer {
    background-color: #343A40;
    color: #ADB5BD;
    padding: 20px 0;
    font-size: 0.9em;
}
footer a {
    color: #ADB5BD;
    text-decoration: none;
}
footer a:hover {
    color: #FFFFFF;
}
/* Stijl voor de introductietekst onder de hoofdtitel */
.sub-text {
    text-align: center;
    margin-bottom: 30px; /* Geeft wat ruimte onder de tekst */
    color: #6C757D; /* Iets lichtere kleur voor subtekst */
}

/*Sectie en Formulier Basis*/
#contact-formulier {
    padding: 60px 0;
    background-color: #FFFFFF; /* Witte achtergrond */
}

#contact-formulier h2 {
    text-align: center;
    color: #343A40;
    margin-bottom: 40px;
    font-size: 2em;
}

#contact-formulier form {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background: #F8F9FA; /* Lichte grijze achtergrond voor het formulierblok */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/*Velden en Labels*/
#contact-formulier label {
    display: block; /* Zorgt dat label op een nieuwe regel staat */
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: 600;
    color: #343A40;
}
/* --- NIEUWE STIJL VOOR DATUM/TIJD VELDEN NAAST ELKAAR --- */

.form-group-inline {
    display: flex;
    justify-content: space-between;
    gap: 15px; /* Ruimte tussen de velden */
    margin-top: 15px;
}

.form-group-inline label {
    margin-top: 0; /* Haal de marge van de labels weg in deze inline groep */
    margin-bottom: 5px;
    font-weight: 600;
}

.form-group-inline input[type="date"],
.form-group-inline input[type="time"] {
    flex-grow: 1; /* Zorgt dat de velden even breed worden */
    width: auto; /* Overschrijft de 100% breedte van de algemene input */
    padding: 12px;
}

#contact-formulier input[type="text"],
#contact-formulier input[type="email"],
#contact-formulier input[type="tel"],
#contact-formulier textarea,
#contact-formulier select {
    width: 100%;
    padding: 12px;
    border: 1px solid #CED4DA; /* Neutrale rand */
    border-radius: 4px;
    box-sizing: border-box; /* Zorgt dat padding binnen de breedte valt */
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Oranje focus-effect bij aanklikken */
#contact-formulier input:focus,
#contact-formulier textarea:focus,
#contact-formulier select:focus {
    border-color: #FF6600; 
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.2); /* Lichte oranje gloed */
    outline: none;
}

#contact-formulier textarea {
    resize: vertical; /* Gebruikers mogen alleen verticaal wijzigen */
}

.privacy-note {
    font-size: 0.9em;
    color: #6C757D;
    margin-top: 20px;
}

/*De Submit Knop*/
#contact-formulier button[type="submit"] {
    display: block;
    width: 100%;
    padding: 15px;
    margin-top: 25px;
    
    /* Zelfde styling als .primary-cta op Homepagina */
    background-color: #FF6600;
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

#contact-formulier button[type="submit"]:hover {
    background-color: #CC5200; /* Iets donkerder Oranje */
    transform: translateY(-1px);
}
/* Zorgt dat de knoppen naast elkaar staan in de formulier footer */
.form-actions {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 25px;
}

/* Zorgt dat elke knop de helft van de ruimte inneemt */
.form-actions .button {
    flex-grow: 1; 
    text-align: center;
    width: 50%; /* Overrides de 100% breedte van de algemene formulierknop */
}

/* Styling voor de Reset knop */
.form-actions .secondary-cta {
    background-color: #6C757D; /* Grijs */
    color: #FFFFFF;
    border: none;
}
.form-actions .secondary-cta:hover {
    background-color: #5A6268;
    transform: translateY(-1px);
}

/*Feedbackberichten (Errors/Success)*/
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-weight: 500;
}

.alert.error {
    background-color: #F8D7DA; /* Lichtrood */
    color: #721C24; /* Donkerrood */
    border: 1px solid #F5C6CB;
}

.alert.success {
    background-color: #D4EDDA; /* Lichtgroen */
    color: #155724; /* Donkergroen */
    border: 1px solid #C3E6CB;
}

.alert ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/*Dienstenpagina*/
/* Algemene padding voor de secties */
.section-padding {
    padding: 60px 0;
}

/* Styling voor de individuele diensten secties */
.dienst-sectie {
    padding: 60px 0;
    border-bottom: 1px solid #E9ECEF; /* Lichte scheidingslijn */
}

/* Voor een afwisselend (zebra) effect */
.dienst-sectie.dienst-alternate {
    background-color: #F8F9FA; /* Zeer lichte grijze achtergrond */
}

.dienst-sectie h2 {
    color: #343A40;
    margin-bottom: 30px;
    border-bottom: 3px solid #FF6600; /* Oranje accent onder de titel */
    display: inline-block;
    padding-bottom: 5px;
}

.dienst-sectie ul {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.dienst-sectie ul li {
    padding: 10px 0 10px 25px;
    position: relative;
    border-bottom: 1px dotted #DEE2E6; /* Zachte onderstreping */
}

/* Custom bullet point (gebruik Oranje vinkje) */
.dienst-sectie ul li::before {
    content: '▶'; /* Of een vink-icoon als je Font Awesome gebruikt */
    color: #FF6600; 
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 0;
}

/* --- Over Ons Pagina Stijlen --- */

/* Introductie / Missie Sectie */
#overons-missie {
    padding: 80px 0;
    text-align: center;
}
.lead-text {
    font-size: 1.25em;
    color: #343A40;
    max-width: 800px;
    margin: 20px auto 40px auto;
}
.mission-statement blockquote {
    font-style: italic;
    font-size: 1.5em;
    color: #FF6600; /* Oranje Quote */
    border-left: 5px solid #FF6600;
    padding-left: 20px;
    margin: 40px auto;
    max-width: 700px;
    text-align: left;
}

/* Expertise Grid Sectie */
.expertise-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 40px;
    text-align: center;
}
.expertise-grid .grid-item {
    flex: 1;
    padding: 20px;
    border: 1px solid #E9ECEF;
    border-radius: 6px;
    background-color: #FFFFFF;
}
.expertise-grid .grid-item h3 {
    color: #FF6600;
    font-size: 1.4em;
    margin-bottom: 10px;
}

/* Afbeelding/Tekst Blok */
.image-text-block {
    margin-top: 60px;
    text-align: center;
}
.image-text-block img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* Carrière CTA (Hergebruikt de cta-banner stijl van de Homepagina) */
#carriere-cta {
    /* Gebruikt de styling van #slot-cta in style.css */
    /* Zorg dat de knop 'cta-button' correct is gestyled: Wit met Oranje tekst */
}

/* verkeersregelaar worden */
/* Styling voor de stappenplan list */
.stappenplan {
    list-style: none;
    padding: 0;
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}
.stappenplan li {
    background-color: #FFFFFF;
    padding: 25px;
    border-radius: 8px;
    border-top: 5px solid #FF6600; /* Oranje accent */
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
.stap-nummer {
    font-size: 2em;
    font-weight: 700;
    color: #FF6600;
    display: block;
    margin-bottom: 10px;
}
.stappenplan h3 {
    color: #343A40;
    font-size: 1.2em;
}

/* Styling voor het Sollicitatieformulier */

.sollicitatie-form label {
    display: block; 
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: 600;
    color: #343A40;
}

.sollicitatie-form input[type="text"],
.sollicitatie-form input[type="email"],
.sollicitatie-form input[type="tel"],
.sollicitatie-form textarea { /* Voeg deze toe aan je eerdere lijst van input types */
    width: 100%;
    padding: 12px;
    border: 1px solid #CED4DA; 
    border-radius: 4px;
    box-sizing: border-box; /* Zorgt dat de padding niet buiten de 100% breedte valt */
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Oranje focus-effect bij aanklikken */
.sollicitatie-form input:focus,
.sollicitatie-form textarea:focus {
    border-color: #FF6600; 
    box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.2); 
    outline: none;
}

.sollicitatie-form textarea {
    resize: vertical; 
}
/* Dit zorgt ervoor dat de knop 100% breed is in het sollicitatieformulier */
.sollicitatie-form .primary-cta {
    width: 100%; 
    display: block; /* Belangrijk: moet block zijn om 100% breed te worden */
    padding: 15px;
    margin-top: 25px;
}