/* 
Theme Name:		 WIM Elementor child
Theme URI:		 https://wearewim.nl/
Description:	 WIM Elementor child theme
Author:			 Sjoerd van der Sluis
Author URI:		 https://wearewim.nl/
Template:		 wim-elementor
Version:		 1.0.0
Text Domain:	 wim-elementor-child
*/

/*
    Plaats hier de style
*/

:root {
	    --brabant-red: #E2231A;
    --brabant-red-deep: #B41812;
    --brabant-cream: #FBF5EC;
    --brabant-ink: #14110F;
	    --brabant-red: #e2231a;
	    --brabant-ink: #14110f;
	--spacing: .25rem;
	    --radius: .5rem;
    --background: oklch(98% .012 80);
    --foreground: oklch(18% .02 30);
    --card: oklch(100% 0 0);
    --card-foreground: oklch(18% .02 30);
    --popover: oklch(100% 0 0);
    --popover-foreground: oklch(18% .02 30);
    --primary: oklch(55% .23 27);
    --primary-foreground: oklch(99% .01 80);
    --secondary: oklch(95% .02 80);
    --secondary-foreground: oklch(18% .02 30);
    --muted: oklch(95% .02 80);
    --muted-foreground: oklch(45% .03 40);
    --accent: oklch(95% .05 27);
    --accent-foreground: oklch(18% .02 30);
    --destructive: oklch(55% .23 27);
    --destructive-foreground: oklch(99% 0 0);
    --border: oklch(90% .02 60);
    --input: oklch(90% .02 60);
    --ring: oklch(55% .23 27);
    --brabant-red: #e2231a;
    --brabant-red-deep: #b41812;
    --brabant-cream: #fbf5ec;
    --brabant-ink: #14110f;
    --sidebar: oklch(98% .012 80);
    --sidebar-foreground: oklch(18% .02 30);
    --sidebar-primary: oklch(55% .23 27);
    --sidebar-primary-foreground: oklch(99% .01 80);
    --sidebar-accent: oklch(95% .02 80);
    --sidebar-accent-foreground: oklch(18% .02 30);
    --sidebar-border: oklch(90% .02 60);
    --sidebar-ring: oklch(55% .23 27);
	    --blur-md: 12px;
	    --border: oklch(90% .02 60);
	    --color-white: #fff;
	--font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-700: oklch(50.5% .213 27.518);
    --color-red-900: oklch(39.6% .141 25.723);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-300: oklch(87.9% .169 91.605);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-amber-600: oklch(66.6% .179 58.318);
    --color-amber-900: oklch(41.4% .112 45.904);
    --color-green-100: oklch(96.2% .044 156.743);
    --color-green-900: oklch(39.3% .095 152.535);
    --color-emerald-50: oklch(97.9% .021 166.113);
    --color-emerald-100: oklch(95% .052 163.051);
    --color-emerald-200: oklch(90.5% .093 164.15);
    --color-emerald-300: oklch(84.5% .143 164.978);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-emerald-600: oklch(59.6% .145 163.225);
    --color-emerald-700: oklch(50.8% .118 165.612);
    --color-emerald-900: oklch(37.8% .077 168.94);
    --color-blue-50: oklch(97% .014 254.604);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-200: oklch(88.2% .059 254.128);
    --color-blue-300: oklch(80.9% .105 251.813);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-900: oklch(37.9% .146 265.522);
    --color-purple-100: oklch(94.6% .033 307.174);
    --color-purple-200: oklch(90.2% .063 306.703);
    --color-purple-500: oklch(62.7% .265 303.9);
    --color-purple-900: oklch(38.1% .176 304.987);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tighter: -.05em;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-md: 12px;
    --blur-3xl: 64px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
    --default-mono-font-family: var(--font-mono);
    --color-border: var(--border);
    --font-display: "Archivo Black", "Archivo", Impact, sans-serif;
	    --font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-700: oklch(50.5% .213 27.518);
    --color-red-900: oklch(39.6% .141 25.723);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-300: oklch(87.9% .169 91.605);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-amber-600: oklch(66.6% .179 58.318);
    --color-amber-900: oklch(41.4% .112 45.904);
    --color-green-100: oklch(96.2% .044 156.743);
    --color-green-900: oklch(39.3% .095 152.535);
    --color-emerald-50: oklch(97.9% .021 166.113);
    --color-emerald-100: oklch(95% .052 163.051);
    --color-emerald-200: oklch(90.5% .093 164.15);
    --color-emerald-300: oklch(84.5% .143 164.978);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-emerald-600: oklch(59.6% .145 163.225);
    --color-emerald-700: oklch(50.8% .118 165.612);
    --color-emerald-900: oklch(37.8% .077 168.94);
    --color-blue-50: oklch(97% .014 254.604);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-200: oklch(88.2% .059 254.128);
    --color-blue-300: oklch(80.9% .105 251.813);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-900: oklch(37.9% .146 265.522);
    --color-purple-100: oklch(94.6% .033 307.174);
    --color-purple-200: oklch(90.2% .063 306.703);
    --color-purple-500: oklch(62.7% .265 303.9);
    --color-purple-900: oklch(38.1% .176 304.987);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tighter: -.05em;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-md: 12px;
    --blur-3xl: 64px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
    --default-mono-font-family: var(--font-mono);
    --color-border: var(--border);
    --font-display: "Archivo Black", "Archivo", Impact, sans-serif;
}

html,body {
	    background: var(--brabant-cream);
	overflow-x: hidden;
}

--tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid;
}


.brabantblok {
	    background-color: #fff;
    background-image: linear-gradient(45deg, var(--brabant-red) 25%, transparent 25%, transparent 75%, var(--brabant-red) 75%), linear-gradient(45deg, var(--brabant-red) 25%, transparent 25%, transparent 75%, var(--brabant-red) 75%);
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px;
width: calc(var(--spacing) * 8);
	        height: calc(var(--spacing) * 8);
}

.item {
	color: color-mix(in oklab, var(--brabant-ink) 70%, transparent);
}

.hoofdmenu a {
	color: color-mix(in oklab, var(--brabant-ink) 70%, transparent)!important;
}

.hoofdmenu a:hover {
	color: #e2231a!important;
}

.hoofdmenu .elementor-nav-menu li:not(:last-child) .elementor-item {
    padding-right: 30px !important;
}

.brabantred {
	background-color: var(--brabant-red)!important;
}

.brabant-check-sm {
	    background-color: #fff;
    background-image: linear-gradient(45deg, var(--brabant-red) 25%, transparent 25%, transparent 75%, var(--brabant-red) 75%), linear-gradient(45deg, var(--brabant-red) 25%, transparent 25%, transparent 75%, var(--brabant-red) 75%);
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px;
}

.opacity-60 {
    opacity: .6;
}

.h-3 {
    height: calc(var(--spacing) * 3);
}

.top-0 {
    top: 0;
}

.inset-x-0 {
    inset-inline: 0;
}

.absolute {
    position: absolute;
}

.border-b {
    border-bottom-color: var(--brabant-cream)!important;
    border-bottom-width: 1px!important;
	    border-bottom: solid;
	    --tw-backdrop-blur: blur(var(--blur-md));
}

.z-40 {
    z-index: 40;
}

.trotsopbrabant {
	border-bottom: solid calc(var(--spacing) * 2) color-mix(in oklab, var(--color-white) 30%, transparent);
	line-height: .85!important;
}

.backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
}

.uppercase {
    text-transform: uppercase;
}

.tracking-\[0\.18em\] {
    --tw-tracking: .18em;
    letter-spacing: .18em;
}

.font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
}

.text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
}

.py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
}

.px-4 {
    padding-inline: calc(var(--spacing) * 4);
}

.text-white {
    color: var(--color-white);
}

@supports (color:color-mix(in lab, red, red)) {
    .bg-white\/10 {
        background-color: 
color-mix(in oklab, var(--color-white) 10%, transparent);
    }
}

@supports (color:color-mix(in lab, red, red)) {
    .border-white\/30 {
        border-color: 
color-mix(in oklab, var(--color-white) 30%, transparent);
    }
}

.bg-white {
    background-color: var(--color-white);
}

.rounded-full {
    border-radius: 3.40282e38px;
}

.w-1\.5 {
    width: calc(var(--spacing) * 1.5);
}

.h-1\.5 {
    height: calc(var(--spacing) * 1.5);
}

* {
    border-color: var(--border);
}

.w-fit {
    width: fit-content;
}

.gap-2 {
    gap: calc(var(--spacing) * 2);
}

.items-center {
    align-items: center;
}

@supports (color:color-mix(in lab, red, red)) {
    .border-white\/30 {
        border-color: 
color-mix(in oklab, var(--color-white) 30%, transparent)!important;
		border: solid 1px;
    }
}

/* De basisstijlen voor het ::before element */
.beforewhite .elementor-widget-wrap::before {
    content: ""; /* Verplicht voor een pseudo-element */
    position: absolute; /* Vaak gewenst bij dit soort decoratieve elementen */
    opacity: 1;
    transform: rotate(12deg);
    border-radius: 2rem;
	left: 80px;
}

.beforewhite .elementor-widget-wrap::before {
    content: "";
    position: absolute;
    left: 80px;
    border-radius: 2rem;
    background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    
    /* Jouw originele transformatie (moet in de animatie behouden worden) */
    transform: rotate(12deg) translateY(30px);

    /* Animatie eigenschappen */
    animation-name: zoomInEntrance;
    animation-duration: 1000ms;
    animation-delay: 150ms;
    animation-fill-mode: forwards; /* Zorgt dat het element niet terugspringt na de animatie */
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); /* Maakt de zoom lekker vloeiend */
    
    /* Zorg dat het element onzichtbaar start voor de vertraging */
    opacity: 0;
}

/* De Zoom In animatie */
@keyframes zoomInEntrance {
    from {
        opacity: 0;
        /* We starten klein (scale 0.3) maar behouden de rotatie en vertaling */
        transform: rotate(12deg) translateY(30px) scale(0.3);
    }
    to {
        opacity: 1;
        /* We zoomen in naar de originele grootte (scale 1) */
        transform: rotate(12deg) translateY(30px) scale(1);
    }
}

/* De responsive breedte en hoogte (vanaf 48rem / md) */
@media (width >= 48rem) {
    .beforewhite .elementor-widget-wrap::before {
        width: calc(var(--spacing) * 96);
        height: calc(var(--spacing) * 96);
    }
}

/* De achtergrondkleur met moderne color-mix ondersteuning */
@supports (color: color-mix(in lab, red, red)) {
    .beforewhite .elementor-widget-wrap::before {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
}

.shadowheader::after {
    content: ""; /* Verplicht voor een pseudo-element */
    position: absolute;
    
    /* Positionering & Afmetingen */
    top: calc(var(--spacing) * -32);
    right: calc(var(--spacing) * -32);
    width: 650px;
    height: 650px;
    
    /* Styling & Vorm */
    background-color: var(--color-white);
    border-radius: 9999px; /* Vervangt de oneindig grote pixelwaarde voor een perfecte cirkel */
    opacity: 0.18;
    transform: none;
    
    /* Tailwind Blur Filter */
    --tw-blur: blur(var(--blur-3xl));
    filter: var(--tw-blur) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

.text-brabant-red {
    color: var(--brabant-red);
}

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
}

@supports (color:color-mix(in lab, red, red)) {
    .text-brabant-ink\/60 {
        color: 
color-mix(in oklab, var(--brabant-ink) 60%, transparent);
    }
}

.uppercase {
    text-transform: uppercase;
}

.tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
}

.font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
}

.text-\[10px\] {
    font-size: 10px;
}

.text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
}

@media (width >= 40rem) {
    .sm\:w-28 {
        width: calc(var(--spacing) * 28);
    }
}

@media (width >= 40rem) {
    .sm\:h-28 {
        height: calc(var(--spacing) * 28);
    }
}

@media (width >= 40rem) {
    .sm\:right-8 {
        right: calc(var(--spacing) * 8);
    }
}

@media (width >= 40rem) {
    .sm\:top-8 {
        top: calc(var(--spacing) * 8);
    }
}

.rounded-full {
    border-radius: 3.40282e38px;
}

.place-items-center {
    place-items: center;
}

.text-center {
    text-align: center;
}

.leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
}

.margintopextra {
	margin-top: 30px;
}

.font-display {
    font-family: Archivo Black, Archivo, Impact, sans-serif;
}

.redbutton .elementor-button{
	    background: var(--brabant-red)!important;
    color: #fff!important;
    box-shadow: 0 4px 0 0 var(--brabant-red-deep)!important;
	    display: inline-flex!important;
    align-items: center!important;
    gap: 8px!important;
    padding: 14px 24px!important;
    border-radius: 999px!important;
    font-weight: 700!important;
    font-size: 13px!important;
    text-transform: uppercase!important;
    letter-spacing: 0.04em!important;
    font-family: "Archivo Black", Impact, sans-serif!important;
    transition: transform .2s, box-shadow .2s, background .2s!important;
    cursor: pointer!important;
    border: 0!important;
}

.redbutton .elementor-button:hover {
transform: translateY(-2px)!important;
    box-shadow: 0 6px 0 0 var(--brabant-red-deep)!important;
}

/* Nieuwe klasse voor het prijslabel */
.hero-price-bounce {
    /* Startpositie: onzichtbaar en volledig weggeschaald */
    opacity: 0;
    transform: scale(0.3) rotate(-8deg);
    
    /* Animatie instellingen */
    animation-name: heroPriceBounceIn;
    animation-duration: 600ms;
    animation-delay: 1500ms;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* De perfecte 'bounce' curve */
    animation-fill-mode: forwards; /* Zorgt dat de -8° en opacity 1 behouden blijven */
    
    /* Zorgt voor een vloeiende transformatie rondom het midden */
    transform-origin: center center; 
}

/* De custom Bounce In animatie met behoud van de -8° rotatie */
@keyframes heroPriceBounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-8deg);
    }
    50% {
        opacity: 1;
        /* Iets groter dan 1 voor het bounce effect */
        transform: scale(1.1) rotate(-8deg); 
    }
    70% {
        /* Iets terugveeren */
        transform: scale(0.9) rotate(-8deg);
    }
    100% {
        opacity: 1;
        /* Eindstand: perfect op ware grootte en -8° gekanteld */
        transform: scale(1) rotate(-8deg);
    }
}

.buttonwhite .elementor-button {
	background: #fff!important;
    color: var(--brabant-red)!important;
    box-shadow: 0 6px 0 0 rgba(0, 0, 0, 0.18)!important;
	display: inline-flex!important;
    align-items: center!important;
    gap: 8px!important;
    padding: 18px 24px!important;
    border-radius: 999px!important;
    font-weight: 700!important;
    font-size: 13px!important;
    text-transform: uppercase!important;
    letter-spacing: 0.04em!important;
    font-family: "Archivo Black", Impact, sans-serif!important;
    transition: transform .2s, box-shadow .2s, background .2s!important;
    cursor: pointer!important;
    border: 0!important;
}

.buttonoutline .elementor-button{
	background: transparent!important;
    color: #fff!important;
    border: 2px solid rgba(255, 255, 255, 0.4)!important;
	    display: inline-flex!important;
    align-items: center!important;
    gap: 8px!important;
    padding: 18px 24px!important;
    border-radius: 999px!important;
    font-weight: 700!important;
    font-size: 13px!important;
    text-transform: uppercase!important;
    letter-spacing: 0.04em!important;
    font-family: "Archivo Black", Impact, sans-serif!important;
    transition: transform .2s, box-shadow .2s, background .2s!important;
    cursor: pointer!important;
}

.brabant-check-sm {
    background-color: #fff;
    background-image: linear-gradient(45deg, var(--brabant-red) 25%, transparent 25%, transparent 75%, var(--brabant-red) 75%), linear-gradient(45deg, var(--brabant-red) 25%, transparent 25%, transparent 75%, var(--brabant-red) 75%);
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px;
}

.h-4 {
    height: calc(var(--spacing) * 4);
}

.marquee {
  background: var(--brabant-ink);
  color: var(--brabant-cream);
  padding: 16px 0;
  border-top: 1px solid var(--brabant-ink);
  border-bottom: 1px solid var(--brabant-ink);
  overflow: hidden;
}
.marquee-track {
  display: flex; gap: 48px;
  width: max-content;
  white-space: nowrap;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: 20px; text-transform: uppercase;
  animation: marquee 30s linear infinite;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 48px; }
.marquee-track em { color: var(--brabant-red); font-style: normal; }

/* 6) Marquee (oneindig scrollende strook) */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.reeksbalk .hred {
	color: var(--brabant-red);     
	font-family: Archivo Black, Archivo, Impact, sans-serif; 
	text-transform:uppercase; 
	font-size: 18px
}

.reeksbalkcontainer {
	border-bottom: 1px solid color-mix(in oklab, var(--brabant-ink) 10%, transparent);
}

.reeksbalk a {
    font-weight: bold;
    text-decoration: underline!important; /* Zorgt dat de lijn er sowieso staat */
    text-underline-offset: 4px!important;
    text-decoration-thickness: 2px!important;
    text-decoration-color: var(--brabant-red)!important;
}

.linkbtn .elementor-button  {
	        border: 1px solid color-mix(in oklab, var(--brabant-ink) 20%, transparent)!important;
	    padding-block: calc(var(--spacing) * 2)!important;
	    padding-inline: calc(var(--spacing) * 4)!important;
	    border-radius: 3.40282e38px!important;
	font-size: 13px;
}

.linkbtn .elementor-button:hover  {
	        border: 1px solid var(--brabant-red)!important;
}

.why {
	    background: var(--brabant-cream);
    padding: 96px 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(20, 17, 15, 0.04) 1px, transparent 0);
    background-size: 4px 4px;
}

.subintro span{
	    font-family: "Archivo Black", Impact, sans-serif!important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--brabant-red)!important;
	font-weight: normal!important;
}

.subintrocontact span{
	color: rgba(251, 245, 236, 0.6)!important;
		    font-family: "Archivo Black", Impact, sans-serif!important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
	font-weight: normal!important;
}

.check-bg {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background-color: #fff;
    
    /* Aangepaste gradients met micro-witte lijntjes op de overgangen */
    background-image: 
        linear-gradient(45deg, var(--brabant-red) 24%, transparent 26%, transparent 74%, var(--brabant-red) 76%), 
        linear-gradient(45deg, var(--brabant-red) 24%, transparent 26%, transparent 74%, var(--brabant-red) 76%);
    
    background-size: 32px 32px;
    background-position: 0 0, 16px 16px;
    opacity: 0.9;
	height: fit-content;
}

.productimage img{
	    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.35));
	    animation: float-slow 6s ease-in-out infinite;
}

@keyframes float-slow {
  0%, 100% {
    transform: translate(0, 10px) rotate(-3deg);
  }
  50% {
    transform: translate(0, 40px) rotate(3deg);
  }
}

.productbeschrijving {
	color: rgba(20, 17, 15, 0.75)!important;
}

.icoonlijst {
		color: rgba(20, 17, 15, 0.75)!important;
}

.buttonoutlinemerk .elementor-button{
	background: transparent!important;
    color: black!important;
    border: 2px solid rgba(20, 17, 15, 0.4)!important;
	    display: inline-flex!important;
    align-items: center!important;
    gap: 8px!important;
    padding: 18px 24px!important;
    border-radius: 999px!important;
    font-weight: 700!important;
    font-size: 13px!important;
    text-transform: uppercase!important;
    letter-spacing: 0.04em!important;
    font-family: "Archivo Black", Impact, sans-serif!important;
    transition: transform .2s, box-shadow .2s, background .2s!important;
    cursor: pointer!important;
}

.check-bg .hero-price-bounce {
	top: 0;
	right: 0;
}

.zakelijk {
    background: var(--brabant-ink)!important;
    color: var(--brabant-cream)!important;
    padding: 96px 0!important;
    position: relative!important;
    overflow: hidden!important;
}

.zakelijk-stripe {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 8px;
    opacity: 0.7;
}

.check-sm {
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.check, .check-sm {
    background-color: #fff;
    background-image: linear-gradient(45deg, var(--brabant-red) 25%, transparent 25%, transparent 75%, var(--brabant-red) 75%), linear-gradient(45deg, var(--brabant-red) 25%, transparent 25%, transparent 75%, var(--brabant-red) 75%);
}

.zakelijkblok {
	padding: 24px!important;
    background: rgba(255, 255, 255, 0.05)!important;
    border: 1px solid rgba(255, 255, 255, 0.1)!important;
    border-radius: 16px!important;
}

.zakelijkblok.marginright {
		margin-right:0;
}

.zakelijkblok.marginleft {
	margin-left: 10px;
}

@media screen and (max-width:767px) {
	.zakelijkblok.marginright {
		margin-right: 0;
}

.zakelijkblok.marginleft {
	margin-left: 0;
	margin-top: 10px;
}
	
	.gf-tabs-list {
		display: block!important;
	}
	
	.gf-tabs-list .gf-tab-trigger {
		width: 100%!important;
	}
}

.footer-stripe {
    height: 12px;
    opacity: 0.7;
}

.footerkleur {
	    color: rgba(251, 245, 236, 0.8)!important;
}

.footerkleur h2{
	    color: rgba(251, 245, 236, 0.8)!important;
}

.footerkleur span{
	    color: rgba(251, 245, 236, 0.8)!important;
}

.footerbottom {
	border-top: solid 1px 
color-mix(in oklab, var(--color-white) 10%, transparent);
}