:root {
	/* Fonts */
	--bs-body-font-family: 'Atkinson Hyperlegible', sans-serif;
	--bs-font-sans-serif: 'Titillium Web', sans-serif;
	
	--font-header: var(--bs-font-sans-serif);
	--header-light: 200;
	--header-regular: 400;
	--header-bold: 700;
	--header-extra-bold: 900;
	
	--font-body: var(--bs-body-font-family);
	--body-regular: 400;
	--body-bold: 700;
	
	/* Definitive color palette */
	--color-primary-light: #fff8c5;			/* zachte highlight geel (origineel: #ffcb05) */ 
	--color-primary-medium: #f4c900;		/* heldere mosterdgeel uit achtergrond */
	--color-primary-dark: #b38f00;			/* diepe warme geel */
	--color-primary-extra-dark: #6e5800;
	
	--color-secondary-light: #f8f8f8;		/* lichte grijstint voor cards/backgrounds */
	--color-secondary-medium: #999999;		/* neutrale tekstkleur */
	--color-secondary-dark: #2b2b2b;		/* voor headings/bodytext */
	--color-secondary-extra-dark: #121212;
	
	--color-tertiary-light: #ffd8b3;		/* lichte oranje tint (raketvlam/licht) */
	--color-tertiary-medium: #ff6f2c;		/* raket oranje */
	--color-tertiary-dark: #cc3b00;			/* diepe vurige oranje */
	--color-tertiary-extra-dark: #801f00;
	
	--color-accent-light: #d8f3f7;			/* achtergrond van scherm (blauwgroen tint) */
	--color-accent-medium: #4bb7c5;			/* heldere accentkleur uit het scherm */
	--color-accent-dark: #006d7a;			/* dieper blauwgroen voor buttons/icons */
	--color-accent-extra-dark: #003640;
	
	--color-electric-light: #c3ffc3;		/* pastelgroen voor subtiele achtergrond of hover */
	--color-electric-medium: #21ff21;		/* jouw originele felle groen */
	--color-electric-dark: #14b814;			/* goed voor knoppen, icoontjes of borders */
	--color-electric-extra-dark: #0c600c;	/* diep donkergroen voor tekst of extreme contrasten */
	
	--color-white: #FFFFFF;
	--color-light-grey: #eee5e5;
	--color-medium-grey: #ddcecd;
	--color-grey: #9E9494;
	--color-dark-grey: #4b4448;
	--color-black: #000000;
	
	--header-color: var(--color-secondary-extra-dark);
	--body-color: var(--color-secondary-dark);
	--line-height: 1.6;
	--paragraph-spacing: 16px;
}

/* Kleurenklassen */
.color-primary-light { color: var(--color-primary-light); }
.color-primary-medium { color: var(--color-primary-medium); }
.color-primary-dark { color: var(--color-primary-dark); }
.color-primary-extra-dark { color: var(--color-primary-extra-dark); }

.color-secondary-light { color: var(--color-secondary-light); }
.color-secondary-medium { color: var(--color-secondary-medium); }
.color-secondary-dark { color: var(--color-secondary-dark); }
.color-secondary-extra-dark { color: var(--color-secondary-extra-dark); }

.color-tertiary-light { color: var(--color-tertiary-light); }
.color-tertiary-medium { color: var(--color-tertiary-medium); }
.color-tertiary-dark { color: var(--color-tertiary-dark); }
.color-tertiary-extra-dark { color: var(--color-tertiary-extra-dark); }

.color-accent-light { color: var(--color-accent-light); }
.color-accent-medium { color: var(--color-accent-medium); }
.color-accent-dark { color: var(--color-accent-dark); }
.color-accent-extra-dark { color: var(--color-accent-extra-dark); }

.color-electric-light { color: var(--color-electric-light); }
.color-electric-medium { color: var(--color-electric-medium); }
.color-electric-dark { color: var(--color-electric-dark); }
.color-electric-extra-dark { color: var(--color-electric-extra-dark); }

.hover-color-primary-medium { color: var(--color-medium-primary); }
.hover-color-accent-medium { color: var(--color-medium-accent); }

.color-white { color: var(--color-white) !important; }
.color-red { color: red !important; }
.color-light-grey { color: var(--color-light-grey) !important; }
.color-medium-grey { color: var(--color-medium-grey) !important; }
.color-grey { color: var(--color-grey) !important; }
.color-dark-grey { color: var(--color-dark-grey) !important; }

.border-white { border-color: var(--color-white) !important; }
.border-light-grey { border-color: var(--color-light-grey) !important; }
.border-medium-grey { border-color: var(--color-medium-grey) !important; }
.border-grey { border-color: var(--color-grey) !important; }
.border-dark-grey { border-color: var(--color-dark-grey) !important; }
.border-black { border-color: var(--color-black) !important; }

/* Kleurenklassen achtergronden */
.bg-color-primary-light { background-color: var(--color-primary-light); }
.bg-color-primary-medium { background-color: var(--color-primary-medium); }
.bg-color-primary-dark { background-color: var(--color-primary-dark); }
.bg-color-primary-extra-dark { background-color: var(--color-primary-extra-dark); }

.bg-color-secondary-light { background-color: var(--color-secondary-light); }
.bg-color-secondary-medium { background-color: var(--color-secondary-medium); }
.bg-color-secondary-dark { background-color: var(--color-secondary-dark); }
.bg-color-secondary-extra-dark { background-color: var(--color-secondary-extra-dark); }

.bg-color-tertiary-light { background-color: var(--color-tertiary-light); }
.bg-color-tertiary-medium { background-color: var(--color-tertiary-medium); }
.bg-color-tertiary-dark { background-color: var(--color-tertiary-dark); }
.bg-color-tertiary-extra-dark { background-color: var(--color-tertiary-extra-dark); }

.bg-color-accent-light { background-color: var(--color-accent-light); }
.bg-color-accent-medium { background-color: var(--color-accent-medium); }
.bg-color-accent-dark { background-color: var(--color-accent-dark); }
.bg-color-accent-extra-dark { background-color: var(--color-accent-extra-dark); }

.bg-color-electric-light { background-color: var(--color-electric-light); }
.bg-color-electric-medium { background-color: var(--color-electric-medium); }
.bg-color-electric-dark { background-color: var(--color-electric-dark); }
.bg-color-electric-extra-dark { background-color: var(--color-electric-extra-dark); }

.bg-color-white { background-color: var(--color-white) !important; }
.bg-color-light-grey { background-color: var(--color-light-grey) !important; }
.bg-color-medium-grey { background-color: var(--color-medium-grey) !important; }
.bg-color-grey { background-color: var(--color-grey) !important; }
.bg-color-dark-grey { background-color: var(--color-dark-grey) !important; }
.bg-color-red { background-color: red !important; }

/* Speciale styling voor de color-pallet pagina */
.color-block {
	height: 100px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	font-weight: bold;
	color: #fff;
}
.color-block.light {
	color: #000;
}

/* Buttons */
.btn-medium{ font-size: 1.1rem; }
.btn-large{ font-size: 1.3rem; }
.btn-extra-large{ font-size: 1.5rem; }

.btn-tag{
	font-size: 0.75rem;
	padding: 5px 10px !important;
}
.btn-outline {
	background-color: transparent;
	border: 2px solid currentColor;
	color: inherit;
	transition: all 0.3s ease-in-out;
}
.btn-outline:hover {
	border: 2px solid currentColor;
	color: inherit;
}
/* === PRIMARY === */
.btn-primary-light {
	background-color: var(--color-primary-light);
	color: var(--color-primary-medium);
}
.btn-primary-light:hover {
	background-color: var(--color-primary-medium);
	color: var(--color-white);
}
.btn-primary-medium {
	background-color: var(--color-primary-medium);
	color: var(--color-primary-dark);
}
.btn-primary-medium:hover {
	background-color: var(--color-primary-dark);
	color: var(--color-white);
}
.btn-primary-dark {
	background-color: var(--color-primary-dark);
	color: var(--color-white);
}
.btn-primary-dark:hover {
	background-color: var(--color-primary-extra-dark);
	color: var(--color-primary-medium);
}

/* Outline */
.btn-outline-primary-light {
	color: var(--color-primary-light);
}
.btn-outline-primary-light:hover {
	color: var(--color-primary-medium);
}
.btn-outline-primary-medium {
	color: var(--color-primary-medium);
}
.btn-outline-primary-medium:hover {
  background-color: var(--color-primary-medium);
  color: var(--color-white);
  border-color: var(--color-primary-medium);
}
.btn-outline-primary-dark {
	color: var(--color-primary-dark);
}
.btn-outline-primary-dark:hover {
  color: var(--color-primary-extra-dark);
  background-color: var(--color-primary-medium);
}

/* === SECONDARY === */
.btn-secondary-light {
	background-color: var(--color-secondary-light);
	color: var(--color-secondary-medium);
}
.btn-secondary-light:hover {
	background-color: var(--color-secondary-medium);
	color: var(--color-white);
}
.btn-secondary-medium {
	background-color: var(--color-secondary-medium);
	color: var(--color-secondary-dark);
}
.btn-secondary-medium:hover {
	background-color: var(--color-secondary-dark);
	color: var(--color-white);
}
.btn-secondary-dark {
	background-color: var(--color-secondary-dark);
	color: var(--color-white);
}
.btn-secondary-dark:hover {
	background-color: var(--color-secondary-extra-dark);
	color: var(--color-secondary-medium);
}
.btn-outline-secondary-light {
	color: var(--color-secondary-light);
}
.btn-outline-secondary-light:hover {
	color: var(--color-secondary-medium);
}
.btn-outline-secondary-medium {
	color: var(--color-secondary-medium);
}
.btn-outline-secondary-medium:hover {
	background-color: var(--color-secondary-medium);
	color: var(--color-white);
	border-color: var(--color-secondary-medium);
}
.btn-outline-secondary-dark {
	color: var(--color-secondary-dark);
}
.btn-outline-secondary-dark:hover {
	color: var(--color-secondary-extra-dark);
	background-color: var(--color-secondary-medium);
}

/* === TERTIARY === */
.btn-tertiary-light {
	background-color: var(--color-tertiary-light);
	color: var(--color-tertiary-medium);
}
.btn-tertiary-light:hover {
	background-color: var(--color-tertiary-medium);
	color: var(--color-white);
}
.btn-tertiary-medium {
	background-color: var(--color-tertiary-medium);
	color: var(--color-tertiary-extra-dark);
}
.btn-tertiary-medium:hover {
	background-color: var(--color-tertiary-dark);
	color: var(--color-white);
}
.btn-tertiary-dark {
	background-color: var(--color-tertiary-dark);
	color: var(--color-white);
}
.btn-tertiary-dark:hover {
	background-color: var(--color-tertiary-extra-dark);
	color: var(--color-tertiary-medium);
}
.btn-outline-tertiary-light {
	background-color: transparent;
	border-color: var(--color-tertiary-light);
	color: var(--color-tertiary-light);
}
.btn-outline-tertiary-light:hover {
	background-color: var(--color-tertiary-medium);
	color: var(--color-white);
	border-color: var(--color-tertiary-medium);
}
.btn-outline-tertiary-medium {
	color: var(--color-tertiary-medium);
}
.btn-outline-tertiary-medium:hover {
	background-color: var(--color-tertiary-medium);
	color: var(--color-white);
	border-color: var(--color-tertiary-medium);
}
.btn-outline-tertiary-dark {
	background-color: transparent;
	border-color: var(--color-tertiary-dark);
	color: var(--color-tertiary-dark);
}
.btn-outline-tertiary-dark:hover {
	background-color: var(--color-tertiary-medium);
	color: var(--color-tertiary-extra-dark);
}

/* === ACCENT === */
.btn-accent-light {
	background-color: var(--color-accent-light);
	color: var(--color-accent-dark);
}
.btn-accent-light:hover {
	background-color: var(--color-accent-medium);
	color: var(--color-white);
}
.btn-accent-medium {
	background-color: var(--color-accent-medium);
	color: var(--color-accent-dark);
}
.btn-accent-medium:hover {
	background-color: var(--color-accent-dark);
	color: var(--color-white);
}
.btn-accent-dark {
	background-color: var(--color-accent-dark);
	color: var(--color-white);
}
.btn-accent-dark:hover {
	background-color: var(--color-accent-extra-dark);
	color: var(--color-accent-medium);
}
.btn-outline-accent-light {
	color: var(--color-accent-light);
}
.btn-outline-accent-light:hover {
	color: var(--color-accent-medium);
}
.btn-outline-accent-medium {
	color: var(--color-accent-medium);
}
.btn-outline-accent-medium:hover {
	background-color: var(--color-accent-medium);
	color: var(--color-white);
	border-color: var(--color-accent-medium);
}
.btn-outline-accent-dark {
	color: var(--color-accent-dark);
}
.btn-outline-accent-dark:hover {
	color: var(--color-accent-extra-dark);
	background-color: var(--color-accent-medium);
}

/* === ELECTRIC === */
.btn-electric-light {
	background-color: var(--color-electric-light);
	color: var(--color-electric-medium);
}
.btn-electric-light:hover {
	background-color: var(--color-electric-medium);
	color: var(--color-white);
}
.btn-electric-medium {
	background-color: var(--color-electric-medium);
	color: var(--color-electric-dark);
}
.btn-electric-medium:hover {
	background-color: var(--color-electric-dark);
	color: var(--color-white);
}
.btn-electric-dark {
	background-color: var(--color-electric-dark);
	color: var(--color-white);
}
.btn-electric-dark:hover {
	background-color: var(--color-electric-extra-dark);
	color: var(--color-electric-medium);
}
.btn-outline-electric-light {
	color: var(--color-electric-light);
}
.btn-outline-electric-light:hover {
	color: var(--color-electric-medium);
}
.btn-outline-electric-medium {
	color: var(--color-electric-medium);
}
.btn-outline-electric-medium:hover {
	background-color: var(--color-electric-medium);
	color: var(--color-white);
	border-color: var(--color-electric-medium);
}
.btn-outline-electric-dark {
	color: var(--color-electric-dark);
}
.btn-outline-electric-dark:hover {
	background-color: var(--color-electric-medium);
	color: var(--color-electric-extra-dark);
}

@media (max-width: 1200px) {
	.container {
		max-width: 960px;
	}
}
@media (max-width: 992px) {
	.container {
		max-width: 720px;
	}
}
@media (max-width: 768px) {
	.container {
		max-width: 540px;
	}
	/*
	.client-logo{
		width: 50% !important;
		max-width: 600px;
	}
	*/
    .client-logo-small {
        width: 80px !important;
        height: auto !important;
    }
}
@media (max-width: 576px) {
	.container {
		max-width: 100%;
		padding: 0 15px;
	}
}
@media (min-width: 960px) {
	.hero-section {
	}
}

/* Standaard body styling */
body, .lead, p, small {
    font-family: var(--font-body);
    font-weight: var(--body-regular);
    line-height: var(--line-height);
    color: var(--body-color);
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
    padding: 0;
    margin: 0;
}

/* Headers styling met Titillium Web */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-header);
    font-weight: var(--header-regular);
    color: var(--header-color);
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Specifieke header styling voor verschillende gewichten */
h1 { font-weight: var(--header-extra-bold); }
h2 { font-weight: var(--header-bold); }
h3 { font-weight: var(--header-regular); }

/* Paragrafen styling */
p {
    margin-bottom: var(--paragraph-spacing);
}

/* Styling voor italic tekst */
.italic {
    font-family: var(--font-body);
    font-style: italic;
}

/* Headers met italic tekst */
.header-italic {
    font-family: var(--font-header);
    font-style: italic;
}

/* Custom CSS classes voor specifieke stijlen */
.bold { font-weight: var(--body-bold); }
.header-light { font-weight: var(--header-light); }
.header-bold { font-weight: var(--header-bold); }
.header-extra-bold { font-weight: var(--header-extra-bold); }

/* Grote koppen met Bootstrap klassen */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-header);
    font-weight: 700;
}

/* Paragraaf tekst aanpassen */
.lead {
    font-weight: 400;
}

/* Kleinere teksten */
.small, small {
    font-weight: 400;
    font-size: 0.875rem;
}

.link-hover-underline:hover { text-decoration: underline !important; }
.link-hover-color-primary-light:hover{ color: var(--color-primary-light) !important; }
.link-hover-color-primary-medium:hover{ color: var(--color-primary-medium) !important; }
.link-hover-color-primary-dark:hover{ color: var(--color-primary-dark) !important; }
.link-hover-color-accent-light:hover{ color: var(--color-accent-light) !important; }
.link-hover-color-accent-medium:hover{ color: var(--color-accent-medium) !important; }
.link-hover-color-accent-dark:hover{ color: var(--color-accent-dark) !important; }
.link-hover-color-tertiary-light:hover{ color: var(--color-tertiary-light) !important; }
.link-hover-color-tertiary-medium:hover{ color: var(--color-tertiary-medium) !important; }
.link-hover-color-tertiary-dark:hover{ color: var(--color-tertiary-dark) !important; }

.hero-header-xl { font-size: 5rem; }
.hero-header-lg { font-size: 4rem; }
.hero-header-md { font-size: 3rem; }
.hero-header-sm { font-size: 2rem; }

/* Define your font families for easy reference */
.font-roboto { font-family: 'Roboto', sans-serif; }
.font-open-sans { font-family: 'Open Sans', sans-serif; }
.font-lato { font-family: 'Lato', sans-serif; }
.font-montserrat { font-family: 'Montserrat', sans-serif; }
.font-source-sans-pro { font-family: 'Source Sans Pro', sans-serif; }
.font-merriweather { font-family: 'Merriweather', serif; }
.font-playfair { font-family: 'Playfair Display', serif; }
.font-nunito { font-family: 'Nunito', sans-serif; }
.font-titillium { font-family: 'Titillium Web', sans-serif; }
.font-segoe { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
/*
.special-link {
	text-decoration-line: underline;
	text-decoration-color: #21ff21;
	text-decoration-thickness: .3em;
}
*/
.special-link {
	text-decoration-line: underline;
	/* text-decoration-color: var(--color-accent-medium); */
	text-decoration-color: var(--color-electric-medium);
	text-decoration-thickness: .3em;
}
.special-link:hover{
	text-decoration-color: var(--color-accent-dark);
}

.fs-price-xl { font-size: 4rem !important; }
.text-price-sup { position: relative; line-height: 0; vertical-align: baseline; top: -1.5em; }
.text-sub { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; bottom: -.25em; }
.text-sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; top: -.5em; }

.benefit-box {
	background-color: transparent;
	transition: background-color 0.3s ease, color 0.3s ease;
	padding: 2rem 1rem;
	border-radius: 12px;
	height: 100%;
}
.benefit-box p{
	transition: color 0.3s ease;
}
.benefit-box i{
	transition: color 0.3s ease;
	color: var(--color-secondary-medium);
}

/* Hover-effect op hele box */
.benefit-box:hover {
	/* background-color: var(--color-accent-light); */ /* Of een andere zachte kleur */
}

/* Verander kleur van het icoon */
.benefit-box:hover .hover-accent-yellow {
	color: var(--color-primary-medium); /* Donkere accentkleur bij hover */
}

/* Verander kleur van de titel en tekst */
.benefit-box:hover p {
	/* color: var(--color-black); *//* Bijvoorbeeld zwart of bijna zwart */
}

.price-columns-container { background-color: #DEDEDE !important; }
.price-column { background-color: #FFFFFF !important; }

/* List styles */
ul {
	list-style-type: none;
}
.arrow-next li::before {
	content: "\276F"; /* Unicode voor een pijl naar rechts */
	margin-right: 10px; /* Ruimte tussen pijl en tekst */
	/*	color: #000; /* Kleur van de pijl */
}
.arrow-down::before {
    content: "\276F"; /* Unicode voor een pijl naar rechts */
    margin-right: 10px; /* Ruimte tussen pijl en tekst */
    display: inline-block; /* Zorg ervoor dat de transform werkt */
    transform: rotate(90deg); /* Draai de pijl */
    font-style: normal; /* Schakel italic uit */
}


/****************************************
*
*	FAQ - Accordion Section Styles
*
****************************************/
.custom-accordion .accordion-item { border: none; }
.custom-accordion .accordion-item:not(:last-child) { 
	border-bottom: 1px solid #ddd; /* Alleen onderste border toevoegen aan elk item behalve de laatste */
}

.faq-question {
    font-weight: bold;
    display: flex; /* Gebruik flexbox om items goed uit te lijnen */
    justify-content: center; /* Centreer de vraagtekst horizontaal */
    align-items: center; /* Centreer de vraagtekst verticaal */
    width: 100%; /* Volledige breedte */
    cursor: pointer;
    padding: 1rem 1.5rem; /* Ruimte toevoegen voor een betere weergave */
    position: relative; /* Positionering van de iconen aanpassen */
}
.faq-question .text {
    flex: 1; /* Zorg ervoor dat de tekst zichzelf centreert */
    text-align: center; /* Centreer de tekst */
}
.faq-question .icon {
    position: absolute; /* Icoon absoluut positioneren */
    right: 20px; /* Plaats het icoon aan de rechterkant */
    font-size: 1.2rem; /* Grootte van het icoon */
}

.accordion-body {
    border-top: none; /* Geen bovenste border bij het openen van de accordion-body */
    text-align: center; /* Tekst centreren in de antwoorden */
    padding: 1rem;
}

/* Standaard weergave */
.icon-minus {
    display: none; /* Min-icoon standaard verborgen */
}

/* button styles */
.btn {
 border-radius: 0px; /* Remove rounded corners */
 transition: background-color 0.3s ease; /* Smooth transition for hover effect */
 font-family: var(--font-header) !important;
 font-weight: 600;
}
.btn-rounded-sm {
	height: 48px;
	width: 200px;
	margin-top: 2px;
	margin-left: 40px;
	border-radius: 50px !important; /* Volledig afgeronde hoeken */
	padding: 0px !important;
	padding-top: 9px !important;
}
.btn-rounded {
	border-radius: 50px !important; /* Volledig afgeronde hoeken */
	padding: 10px 20px; /* Optioneel: extra padding voor een mooiere knop */
}
    /* Understated "verwijderen"-knop */
    .remove-btn {
        color: #888 !important; /* Grijze kleur */
        text-decoration: none !important; /* Geen onderstreping */
    }
    .remove-btn:hover {
        color: #555; /* Iets donkerder bij hover */
        text-decoration: underline; /* Onderstreep bij hover */
    }


/* Afbeeldingen */
/* CSS voor vergroting bij hover */
.zoom-effect {
	transition: transform 0.3s ease; /* Langzaam inzoomen bij hover */
}

.zoom-effect:hover {
	transform: scale(1.1); /* Zoom in naar 110% */
}

.card-header {
	background-color: var(--color-accent-medium);
	color: var(--color-secondary-light);
}

.clearfix::after {
	content: "";
	display: table;
	clear: both;
}
/* Origineel
img.client-logo {
	height: auto;
	width: 100%;
}
*/
.row .col-lg-2 .client-logo-small {
	width: 150px !important;
	height: auto !important;
}
.row .col-lg-2 .client-logo {
	width: 300px !important;
	height: auto !important;
}
.container {
	max-width: 1140px; /* Advies breedte */
	margin: 0 auto; /* Zorg ervoor dat de container gecentreerd blijft */
}
.footer-section {
	background-color: var(--color-accent-extra-dark);
	padding-top: 60px;
}
.footer-section ul li {
	color: var(--color-medium-grey);
	padding: 0.8rem 0 0.8rem 0;
}
.footer-section ul.bottom-border li{
	border-bottom: 1px solid #ff0000;
}
.footer-section ul li span.darker {
	color: #6B6161;
}
.footer-section ul li a{
	color: var(--color-secondary-medium);
	text-decoration: none;
}
.footer-section ul li a:hover{
	color: var(--color-secondary-light);
	transition: color 0.5s ease;
}
.footer-section ul::before {
	color: var(--color-secondary-medium);
}
.footer-logo {
	display: block; /* voorkomt inline whitespace-issues */
	width: 100%; /* schaal mee op kleine schermen */
	max-width: 149px; /* nooit groter dan de originele breedte */
	height: auto; /* behoudt de aspect-ratio */
}

.bg-plus {
	position: relative;
	/* Stap 1: zet hier alleen de effen achtergrondkleur */
	background-color: rgb(244, 201, 0);
	/* Zorg dat de hero of welk element dan ook hoog genoeg is om het effect te zien: */
	min-height: 400px;
}

/* Stap 2: pseudo-element voor de plusjes + verlopen mask */
.bg-plus::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	/* achtergrond van plusjes (herhalend SVG-bestand) */
	background-image: url('/public/images/plusje.svg');
	background-repeat: repeat;
	background-size: 60px 60px;

  /* pas hier alleen het masker toe op de plusjes */
	-webkit-mask-image: linear-gradient(
		to bottom right,
		rgba(0, 0, 0, 1) 20%,
		rgba(0, 0, 0, 0) 40%
	);
	mask-image: linear-gradient(
		to bottom right,
		rgba(0, 0, 0, 1) 20%,
		rgba(0, 0, 0, 0) 40%
	);
	
	/* Zorg dat het pseudo-element achter eventuele tekst of knoppen valt */
	z-index: 0;
}

/* Let er dan wel op dat eventuele content (tekst, knoppen, afbeelding)
   boven het pseudo-element komt te liggen. Zet die dan op z-index: 1 of hoger. */
.bg-plus > * {
	position: relative;
	z-index: 1;
}

.highlight-img {
	width: 100%;
	height: auto;
}
.logo{
	width: 100%;
	height: auto;
}
.navbar, .footer {
	background-color: white;
	color: var(--color-accent-dark);
}
.nav-link{
	color: var(--color-accent-dark);
}
.page-header {
	background-color: var(--color-primary-medium);
	height: 200px;
}
.pricing-container{
	max-width: 960px;
}
.pricing-container .btn:hover {
	background-color: #333; /* Darker color on hover */
	color: #fff; /* Change text color to white on hover */
}
.pricing-container .column {
	min-width: 280px;
	border: 1px solid #CCC;
	padding: 20px;
	margin-bottom: 5px; padding-bottom: 5px; /* Adjusted spacing */ margin-bottom: 20px;
	text-align: center;
}
.pricing-container .row {
	gap: 40px;
}
.pricing-container .list-item {
	list-style-type: none;
	padding-left: 0;
	text-align: left;
}
.pricing-container .list-item li::before {
	content: "\2713"; /* Unicode karakter voor een vinkje */
	color: green;
	font-weight: bold;
	display: inline-block; 
	width: 1em;
	margin-left: -1em;
}
.pricing-container .column-one h2{
	color: #666;
}
.pricing-container .column-two h2{
	color: #03a9f4;
}
.pricing-container .column-three h2{
	color: #ff5000;
}
.pricing-container .btn-one {
	color: white;
	border-color: #666;
	background-color: #666;
}
.pricing-container .btn-one:hover {
	background-color: #333S;
	color: white;
}
.pricing-container .btn-two {
	color: white;
	border-color: #03a9f4;
	background-color: #03a9f4;
}
.pricing-container .btn-two:hover {
	background-color: #01547a;
	color: white;
}
.pricing-container .btn-three {
	color: white;
	border-color: #ff5000;
	background-color: #ff5000;
}
.pricing-container .btn-three:hover {
	background-color: #b23800;
	color: white;
}
.portfolio-img {
	width: 100%;
	height: auto;
}
.ribbon { /* Ribbon to highlight product column */
	position: absolute;
	top: 0px;
	right: 0px;
	width: 120px;
	height: 120px;
	overflow: hidden;
	z-index: 1;
}
.ribbon span {
	position: absolute;
	width: 160px;
	padding: 10px 0;
	background-color: orange;
	color: white;
	font-size: 12px;
	text-align: center;
	transform: rotate(45deg);
	transform-origin: top right;
	top: 80px;
	right: -30px;
	font-weight: bold;
}
.sidebar {
	background-color: #CCC;
	min-height: 200px;
	display: block;
}
.story-header-img{
	background-color: #CCC;
	height: 400px;
}
.story-title {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 0;
	width: 100%;
}
.story-title h1{
	CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;
	grid-column: 1 / 3;
	line-height: 1.1;
	margin-top: -4rem;
	padding: 1.5rem 2.5rem 1.5rem 2.5rem;
	background-color: #FFFFFF;
}
.story-title-new {
	margin-bottom: 0;
	width: 100%;
}
.story-title-new h1{
	line-height: 1.1;
	margin-top: -4rem;
	padding: 1.5rem 2.5rem 1.5rem 2.5rem;
	background-color: #FFFFFF;
}
.story-author{
    
}


/* Sticky header */
.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 1000;
	background-color: white; /* Ensure it's the same as your navbar background */
}
.navbar {
	border-bottom: none; /* No border initially */
	transition: border-bottom 0.3s ease; /* Smooth transition when border appears */
}
/* Class to add border when scrolling */
.navbar.scrolled {
	border-bottom: 1px solid #DDD;
}

/* Dropdown styles */
.navbar-nav .dropdown {
	position: relative;
}

.navbar-nav .dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	background-color: white;
	min-width: 160px;
	padding: 12px 16px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.navbar-nav .dropdown-menu .dropdown-item {
	color: var(--color-accent-dark);
	padding: 8px 16px;
	text-decoration: none;
	display: block;
}
.navbar-nav .dropdown-menu .dropdown-item:hover {
	background-color: var(--color-primary-medium);
}
.navbar-nav .dropdown:hover .dropdown-menu {
	display: block;
}
/* Highlight active navigation link with a top border */
.navbar-nav .nav-link.active {
	border-top: 3px solid var(--color-primary-medium); /* Change color to match your design */
	color: var(--color-primary-medium); /* Optional: Change the text color as well */
}

/* Horizontal alignment for navbar */
.navbar-nav {
	display: flex;
	flex-direction: row; /* Ensures items are in a row */
	align-items: center; /* Vertically center the items */
	justify-content: flex-start; /* Align items to the left, or use center if you prefer centered */
	list-style: none; /* Remove default bullet points */
}

.nav-item {
	margin-left: 15px; /* Adjust spacing between menu items */
}

.nav-item a {
	text-decoration: none; /* Remove underline from links */
	padding: 10px 15px; /* Adjust padding for clickable area */
	color: var(--color-accent-dark); /* Use your preferred color */
}

.nav-item a:hover {
	color: var(--color-primary-medium); /* Change color on hover */
}

/* Dropdown menu alignment */
.dropdown-menu {
	display: none; /* Initially hidden */
	position: absolute;
	top: 100%;
	left: 0;
	background-color: white;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dropdown:hover .dropdown-menu {
	display: block; /* Show dropdown on hover */
}

/*Mobile-Friendly Navigation */
@media (max-width: 768px) {
	.navbar-nav {
		flex-direction: column; /* Stack items vertically on smaller screens */
		align-items: flex-start; /* Align to the left on small screens */
	}
	.nav-item {
		margin-left: 0; /* Remove left margin on small screens */
	}
}

/*********************************

	ANIMATIONS

*********************************/
@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-50%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(50%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.hero-slide-left {
	animation: slideInLeft 1s ease-out forwards;
}

.hero-slide-right {
	opacity: 0; /* verberg initieel */
	animation: slideInRight 1s ease-out forwards;
	animation-delay: 0.4s;
}

/* Slide in from left */
.slide-in-left {
	opacity: 0;
	transform: translateX(-50%);
	transition: transform 1s ease-out, opacity 1s ease-out;
}
.slide-in-left.in-view {
	opacity: 1;
	transform: translateX(0);
}
.slide-in-right {
	opacity: 0;
	transform: translateX(50%);
	transition: transform 1s ease-out, opacity 1s ease-out;
}
.slide-in-right.in-view {
	opacity: 1;
	transform: translateX(0);
}
/* Slide in from bottom */
.slide-in-bottom {
	opacity: 0;
	transform: translateY(50%);
	transition: transform 1s ease-out, opacity 1s ease-out;
}
.slide-in-bottom.in-view {
	opacity: 1;
	transform: translateY(0);
}
/* Slide in from top */
.slide-in-top {
	opacity: 0;
	transform: translateY(-50%);
	transition: transform 1s ease-out, opacity 1s ease-out;
}
.slide-in-top.in-view {
	opacity: 1;
	transform: translateY(0);
}
/* Fade in */
.fade-in {
	opacity: 0;
	transition: opacity 2s ease-out;
}
.fade-in.in-view {
	opacity: 1;
}
/* Zoom in */
.zoom-in {
	opacity: 0;
	transform: scale(0.9);
	transition: transform 1s ease-out, opacity 1s ease-out;
}
.zoom-in.in-view {
	opacity: 1;
	transform: scale(1);
}
.scroll-down {
	font-size: 2rem;	/* grootte pijltje */
	color: #FFF;		/* kleur aanpassen aan je design */
	opacity: 0.4;		/* doorzichtigheid */
	animation: bounce 2s infinite;
	display: inline-block;	/* nodig voor transform animatie */
/*  cursor: pointer; */		/* optioneel: alsof je erop kunt klikken */
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(8px); }
	60% { transform: translateY(4px); }
}

/*********************************************************************

		SHOP - WEBWINKEL

**********************************************************************/

/* SHOP - PRODUCT PAGINA */
/* Container voor het grote productbeeld */
.zoom-container {
    position: relative;
    overflow: hidden;
    width: 444px; /* Breedte van de afbeelding */
    height: 568px; /* Hoogte van de afbeelding */
    cursor: zoom-in;
}

/* De productafbeelding */
.zoom-container img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease; /* Zorgt voor het zoom-effect */
    transform-origin: center center; /* Center de afbeelding */
    position: absolute;
}

/* Add styles for the hamburger menu */
.navbar {
	background-color: #FFF;
	overflow: visible;
	position: relative;
}

.menu-icon {
	font-size: 30px;
	cursor: pointer;
	color: black;
	padding: 15px;
	display: none; /* Hidden by default */
}

.nav-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-around;
	background-color: #FFF;
}

.nav-links li {
	display: inline;
}

.nav-links a {
	text-decoration: none;
	padding: 14px 20px;
	display: block;
}

/* Responsive styling */
@media screen and (max-width: 768px) {
	.nav-links {
		display: none;
		flex-direction: column;
		width: 100%;
		background-color: white;
		position: absolute;
		top: 50px;
		left: 0;
	}
	
	.nav-links li {
		text-align: center;
	}
	
	.menu-icon {
		display: block; /* Display the hamburger icon on small screens */
	}
	
	.nav-links.show {
		display: flex;
	}
}

.navbar.sticky {
	padding-top: 0px !important;
}

/* WINKELWAGEN STYLING */
.col-product { width: 45%; }
.col-subtotal { width: 20%; }
.col-price { width: 10%; }
.col-actions { width: 5%; }
.align-right { text-align: right; }