/* 
Theme Name:		 The Duke Child
Theme URI:		 https://thedukegolf.nl/
Description:	 The Duke is een Members Only Business & Golf Club. Wilt u lid worden of bent u benieuwd naar alle exclusiviteiten van een membership? Neem dan contact op met The Duke.
Author:			 Sjoerd van der Sluis
Author URI:		 https://wearewim.nl/
Template:		 the-duke
Version:		 1.0.0
Text Domain:	 the-duke-child
*/

/*
    HEADER
*/	

/* ==========================================================================
   1. FONT DECLARATIONS (@font-face)
   ========================================================================== */

/* --- MARCHER (WOFF2) --- */
@font-face {
    font-family: 'Marcher';
    src: url('https://theduke.nl/wp-content/themes/the-duke-child/media/fonts/font-marcher-thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marcher';
    src: url('https://theduke.nl/wp-content/themes/the-duke-child/media/fonts/font-marcher-extralight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marcher';
    src: url('https://theduke.nl/wp-content/themes/the-duke-child/media/fonts/font-marcher-light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marcher';
    src: url('https://theduke.nl/wp-content/themes/the-duke-child/media/fonts/font-marcher-book.woff2') format('woff2');
    font-weight: 350; /* Wordt vaak tussen light en regular gezet */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marcher';
    src: url('https://theduke.nl/wp-content/themes/the-duke-child/media/fonts/font-marcher-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marcher';
    src: url('https://theduke.nl/wp-content/themes/the-duke-child/media/fonts/font-marcher-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marcher';
    src: url('https://theduke.nl/wp-content/themes/the-duke-child/media/fonts/font-marcher-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marcher';
    src: url('https://theduke.nl/wp-content/themes/the-duke-child/media/fonts/font-marcher-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marcher';
    src: url('https://theduke.nl/wp-content/themes/the-duke-child/media/fonts/font-marcher-extrabold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marcher';
    src: url('https://theduke.nl/wp-content/themes/the-duke-child/media/fonts/font-marcher-black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --- KENTWELL (WOFF2) --- */
@font-face {
    font-family: 'Kentwell';
    src: url('https://theduke.nl/wp-content/themes/the-duke-child/media/fonts/kentwell-webfont.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- OPERETTA (TTF) --- */
@font-face {
    font-family: 'Operetta';
    src: url('https://theduke.nl/wp-content/themes/the-duke-child/media/fonts/Operetta18-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Operetta';
    src: url('https://theduke.nl/wp-content/themes/the-duke-child/media/fonts/Operetta18-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Operetta';
    src: url('https://theduke.nl/wp-content/themes/the-duke-child/media/fonts/Operetta18-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Operetta';
    src: url('https://theduke.nl/wp-content/themes/the-duke-child/media/fonts/Operetta18-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   2. ELEMENT STYLING (Toepassing van de fonts)
   ========================================================================== */

/* Koppen (H1 t/m H6) krijgen altijd Operetta (Standaard Bold, pas aan naar wens) */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Operetta', serif !important;
    font-weight: 700; 
}

/* Paragrafen en standaard tekst krijgen Marcher */
p, li {
    font-family: 'Marcher', sans-serif!important;
    font-weight: 300; /* Regular */
}

/* Elementor knoppen krijgen ALTIJD Operetta */
.elementor-button {
    font-family: 'Operetta', serif !important;
    font-weight: 500; /* Medium variant voor knoppen is vaak het mooist leesbaar */
}

span.elementor-button-text {
    font-family: 'Operetta', serif !important;
    font-weight: 500; /* Medium variant voor knoppen is vaak het mooist leesbaar */
}

.overlay-eyebrow {
	    font-family: 'Operetta', serif !important;
    font-weight: 400; /* Medium variant voor knoppen is vaak het mooist leesbaar */
}

.overlay-title span {
	font-family: 'Operetta', serif !important;
}

.eyebrow {
	font-family: 'Operetta', serif !important;
}

.gform-body input{
	font-family: 'Marcher', sans-serif!important;
}

.gform-body select{
	font-family: 'Marcher', sans-serif!important;
}

.gform-body textarea{
	font-family: 'Marcher', sans-serif!important;
}


:root {
    --duke-blue: #002d40;
    --duke-gold: #8b734b;
    --duke-white: #ffffff;
    --max-w: 1400px;
}

/* 1. Header Layout */
.duke-header-wrapper {
    width: 100%;
    position: relative;
    padding-top: 15px;
}

.duke-header-container {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.duke-logo-outer {
    padding-right: 35px;
}

.duke-logo-outer img {
    height: 49px!important;
    display: block;
	width: 300px;
}

/* 2. Blauwe Navigatie Balk */
.duke-nav-block {
    background-color: var(--duke-blue);
    display: flex;
    flex-grow: 1;
    height: 47px!important;
    align-items: center;
}

.duke-main-nav { height: 100%; flex-grow: 1; }
.duke-menu { display: flex; list-style: none; margin: 0; padding: 0; height: 100%; }
.duke-menu > li { position: static; height: 100%; }

/* Menu Item Animatie: Beneden naar boven wit */
.duke-menu > li > a {
    color: var(--duke-white);
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.5px;
    padding: 0 30px;
    height: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: color 0.4s ease;
	    font-family: 'Marcher', sans-serif !important;
font-weight: 300;
font-style: normal;
}

.duke-menu > li > a::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 0;
    background: var(--duke-white);
    z-index: -1;
    transition: height 0.4s ease;
}

.duke-menu > li:hover > a { color: var(--duke-blue); }
.duke-menu > li:hover > a::after { height: 100%; }

/* 3. Mega Menu Dropdown */
.duke-mega-dropdown {
    position: absolute;
    top: 100%; left: 0; width: 100%;
    background: var(--duke-white);
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    z-index: 99;
}

.has-mega:hover .duke-mega-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.duke-mega-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    padding: 60px 0;
}

.mega-text-col {
    width: 400px;
    padding-right: 40px;
}

.mega-title { 
	font-size: 40px; color: var(--duke-blue); margin-bottom: 20px;  font-family: utopia-std, serif;
font-weight: 200;
font-style: normal;
text-align: right;
}
.mega-desc { font-size: 15px; color: #666; line-height: 1.6; margin-bottom: 20px; }
.mega-link { color: var(--duke-gold); font-weight: bold; text-decoration: none; }

/* 4. Grid Animatie (De Blokjes) */
.mega-grid-col { flex-grow: 1; padding-left: 50px; }
.grid-3-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 65px; }

.duke-grid-card {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    display: block;
	height: 250px;
}

.card-img {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}

.duke-grid-card:hover .card-img { transform: scale(1.1); }

/* Labels op de card: Wit naar blauw animatie */
.card-labels {
    position: absolute; top: 20px; left: 0;
    z-index: 10; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
}

.label-box {
    background: var(--duke-white);
    color: var(--duke-blue);
    padding: 7px 15px;
    font-size: 15px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease;
}

.label-box::before {
    content: "";
    position: absolute; top: 0; left: -101%;
    width: 100%; height: 100%;
    background: var(--duke-blue);
    transition: left 0.4s ease;
    z-index: 0;
}

.label-box span { position: relative; z-index: 1; font-family: 'Marcher', sans-serif; font-weight: 400;}

.duke-grid-card:hover .label-box { color: var(--duke-white); }
.duke-grid-card:hover .label-box::before { left: 0; }

/* 5. Rechts: Taal & Contact Knop */
.duke-header-actions { display: flex; align-items: center; height: 100%; }
.lang-label { color: var(--duke-white); margin: 0 20px; font-weight: bold; font-size: 13px; margin-right: 0px!important;}

.btn-contact-gold {
    background-color: #3D5C7B;
    color: var(--duke-white);
    text-decoration: none;
    height: 100%;
    padding: 0 17px;
    display: flex;
    align-items: center;
    font-weight: normal;
    font-size: 18px;
    font-family: 'Operetta', serif;
    
    /* Hover instellingen */
    position: relative;
    z-index: 1;
    background-image: linear-gradient(white, white); /* Veranderd van goud naar wit */
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: left;
    
    /* Beide transities samengevoegd zodat zowel kleur als achtergrond soepel overvloeien */
    transition: background-size 0.4s ease-in-out, color 0.4s ease;
}

.btn-contact-gold:hover {
    background-size: 100% 100%;
    color: #3D5C7B; /* TIP: Veranderd naar de blauwe kleur, anders zie je witte tekst niet op een witte achtergrond! */
}

/* Container styling */
.duke-link-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Lijn aan de rechterkant zoals screenshot */
    gap: 15px;
    margin-top: 30px;
}

/* De wrapper forceert dat alle kinderen (link + divider) even hoog zijn */
.duke-mega-link-wrapper {
    display: inline-flex;
    align-items: stretch; /* DIT IS DE KEY: trekt de divider naar de volledige hoogte */
    justify-content: flex-end;
    position: relative;
    cursor: pointer;
}

.mega-custom-link {
    text-decoration: none;
    position: relative;
    padding: 5px 5px; /* Iets meer ademruimte voor het blok */
    padding-right: 15px; 
	padding-left: 15px; 
    transition: color 0.4s ease;
    z-index: 1;
    display: flex;
    align-items: center; /* Zorgt dat tekst verticaal gecentreerd blijft */
}

/* De achtergrond-animatie */
.mega-custom-link::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0%;
    transition: width 0.4s ease;
    z-index: -1;
}

/* Kleuren */
.link-brown { color: #997c56 !important;     font-family: 'Operetta', serif; font-size: 23px; font-weight: 500;}
.link-brown::before { background-color: #997c56; }

.link-blue { color: #2c4e63 !important;     font-family: 'Marcher', sans-serif;}
.link-blue::before { background-color: #2c4e63; }

/* Hover */
.duke-mega-link-wrapper:hover .mega-custom-link { color: #ffffff !important; }
.duke-mega-link-wrapper:hover .mega-custom-link::before { width: 100%; }

/* De verticale divider (gefixte hoogte) */
.link-divider {
    display: inline-block;
    width: 2px;
    height: auto; /* Verwijder de vaste 30px */
    align-self: stretch; /* Zorgt dat de streep exact de hoogte van de link aanneemt */
    flex-shrink: 0;
}

.link-divider.link-brown { background-color: #997c56; }
.link-divider.link-blue { background-color: #2c4e63; }

/* 1. Bereid de Elementor knop voor (jouw .main-menu-item logica) */
.links-naar-rechts-hover .elementor-button {
    position: relative !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    cursor: pointer !important;
    z-index: 1 !important;
    overflow: hidden !important;
    background-image: none !important; /* Weg met gradients */
	    font-family: utopia-std, serif!important;
    
    /* Zorg voor een soepele overgang van tekst/iconen */
    transition: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 2. Bewaar de originele Elementor kleur voor de ruststand */
.links-naar-rechts-hover .elementor-button::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: inherit !important; /* Pakt je Elementor kleur */
    z-index: -2 !important;
}

/* 3. Jouw vloeibare hover-laag (exact volgens jouw logica) */
.links-naar-rechts-hover .elementor-button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important; /* Start op breedte 0 aan de linkerkant */
    height: 100% !important;
    background-color: white !important; /* Jouw goud/bruine kleur */
    z-index: -1 !important;
    
    /* Jouw smooth cubic-bezier transitie op de breedte */
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 4. Bij hover schiet de breedte naar 100% (van links naar rechts) */
.links-naar-rechts-hover .elementor-button:hover::before {
    width: 100% !important;
}

.links-naar-rechts-hover .elementor-button:hover .elementor-button-text {
		color: #614D32!important;
}

/* 5. Forceer Elementor om zijn eigen achtergrond te verbergen tijdens hover */
.links-naar-rechts-hover .elementor-button:hover {
    background-color: transparent !important;
}

/* 6. Houd de tekst en iconen strak op hun plek bovenop de laag */
.links-naar-rechts-hover .elementor-button .elementor-button-content-wrapper,
.links-naar-rechts-hover .elementor-button .elementor-button-text,
.links-naar-rechts-hover .elementor-button .elementor-button-icon {
    position: relative !important;
    z-index: 3 !important;
}



/*
 * RUIMTES SLIDER
 * 
 */

/* Slider container over volledige breedte */
.custom-slider-container {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    background-color: #ffffff;
    padding: 60px 0 140px 0;
    box-sizing: border-box;
}

.custom-slider-viewport {
    width: 100%;
    position: relative;
    overflow: visible;
}

.custom-slider-track {
    display: flex;
    align-items: flex-start;
    width: max-content;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* ==========================================================================
   DE SLIDES (Standaard inactief: foto's zijn even groot, maar grijs)
   ========================================================================== */
.custom-slide {
    width: 420px; 
    height: 440px;
    margin: 0 40px;
    flex-shrink: 0;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
}

.custom-card-inner {
    display: flex;
    width: 800px; 
    height: 100%;
    position: relative;
}

.custom-body-text p {
        font-family: 'Marcher', sans-serif !important;
}

/* Foto gedeelte (Inactief: 100% scherp grijs) */
.custom-image-part {
    width: 420px;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    filter: grayscale(100%);
    opacity: 1;
    transition: filter 0.6s ease;
}

.custom-image-part img {
    width: 100%;
    height: 100%!important;
    object-fit: cover;
}

/* OVERLAPPENDE BADGE (Standaard inactief: Beige) */
.custom-title-badge {
    position: absolute;
    bottom: -35px;
    left: -20px;
    width: 300px;
    padding: 30px 25px;
    background-color: #f6f3ee; 
    color: #8c7662;            
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
    z-index: 10;
    transition: background-color 0.4s ease, color 0.4s ease, left 0.6s ease;
}

.custom-sub-text {
    display: block;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    color: inherit;
    font-family: 'Operetta', serif !important;
}

.custom-main-title {
    font-size: 26px;
    line-height: 1.2;
    margin: 0;
    font-weight: 400;
    color: inherit;
        font-family: 'Operetta', serif !important;
}

/* HOVER EFFECT: Inactieve kaarten worden blauw bij mouse-over */
.custom-slide:not(.is-active):hover .custom-title-badge {
    background-color: #345371; 
    color: #ffffff;            
}

/* ==========================================================================
   TEKSTBLOK (Schuift rechts uit de afbeelding)
   ========================================================================== */
.custom-content-part {
    width: 0;
    height: 100%;
    background-color: #ffffff;
    overflow: hidden;
    opacity: 0;
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.custom-content-inner {
    width: 380px;
    padding: 20px 20px 40px 50px;
    box-sizing: border-box;
}

.custom-body-text {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin-bottom: 30px;
}

.custom-cta-link {
    display: inline-block;
    font-size: 16px;
    color: #1e375a;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    padding-bottom: 4px;
}

.custom-cta-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 1.5px;
    background-color: #8c7662;
}

/* ==========================================================================
   DE ACTIEVE SLIDE (Middelste slide: Kleur & Tekst uitgeklapt)
   ========================================================================== */

.custom-slide.is-active .custom-image-part {
    filter: grayscale(0%);
}

.custom-slide.is-active .custom-title-badge {
    background-color: #345371;
    color: #ffffff;
    left: -25px;
}

.custom-slide.is-active .custom-content-part {
    width: 380px;
    opacity: 1;
}

/* ==========================================================================
   STREEPJES NAVIGATIE
   ========================================================================== */
.custom-slider-pagination {
    text-align: center;
    margin-bottom: 50px;
}

.custom-bullet {
    display: inline-block;
    width: 35px;
    height: 2px;
    background: #d4c3b3;
    opacity: 0.4;
    margin: 0 6px;
    transition: all 0.4s ease;
    cursor: pointer;
}

.custom-bullet.is-active {
    background: #8c7662;
    opacity: 1;
    width: 55px;
}

.custom-content-inner {
    width: 380px;
    padding: 20px 20px 40px 50px;
    box-sizing: border-box;
    
    /* Toegevoegd voor uitlijning */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Dit duwt alles naar beneden */
    height: 100%;             /* Zorgt dat hij de container hoogte vult */
}

/* Optioneel: zorg dat de body-tekst niet de cta-link overlapt */
.custom-body-text {
    font-size: 15px;
    line-height: 1.6;
    color: black;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
    .custom-slide {
        width: 300px !important;
        margin: 0 15px;
        height: auto;
    }
    .custom-card-inner {
        flex-direction: column;
        width: 100%;
    }
    .custom-image-part {
        width: 100% !important;
        filter: grayscale(0%) !important;
    }
    .custom-title-badge {
        position: relative;
        left: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .custom-content-part {
        width: 100% !important;
        height: auto;
        opacity: 1;
    }
    .custom-content-inner {
        width: 100%;
        padding: 30px 15px;
    }
}

/* Standaard (bruin) logo, hier hoef je niks te doen */
.duke-logo-outer.logo-bruin img {
    filter: none;
}

/* Als 'wit' is geselecteerd, maken we de SVG via een filter wit */
.duke-logo-outer.logo-wit img {
    filter: brightness(0) invert(1); 
}

.the-duke-main-header-bar img.logo-duke {
	width: 200px;
}

.the-duke-burger-btn {
	border-radius: 0;
}

/* 1. Bereid de Elementor knop voor (jouw .main-menu-item logica) */
.links-naar-rechts-hover-bruin .elementor-button {
    position: relative !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    cursor: pointer !important;
    z-index: 1 !important;
    overflow: hidden !important;
    background-image: none !important; /* Weg met gradients */
	    font-family: utopia-std, serif!important;
    
    /* Zorg voor een soepele overgang van tekst/iconen */
    transition: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 2. Bewaar de originele Elementor kleur voor de ruststand */
.links-naar-rechts-hover-bruin .elementor-button::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: inherit !important; /* Pakt je Elementor kleur */
    z-index: -2 !important;
}

/* 3. Jouw vloeibare hover-laag (exact volgens jouw logica) */
.links-naar-rechts-hover-bruin .elementor-button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important; /* Start op breedte 0 aan de linkerkant */
    height: 100% !important;
    background-color: #8a724d !important; /* Jouw goud/bruine kleur */
    z-index: -1 !important;
    
    /* Jouw smooth cubic-bezier transitie op de breedte */
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 4. Bij hover schiet de breedte naar 100% (van links naar rechts) */
.links-naar-rechts-hover-bruin .elementor-button:hover::before {
    width: 100% !important;
}

.links-naar-rechts-hover-bruin .elementor-button:hover .elementor-button-text {
		color: white!important;
}

/* 5. Forceer Elementor om zijn eigen achtergrond te verbergen tijdens hover */
.links-naar-rechts-hover-bruin .elementor-button:hover {
    background-color: transparent !important;
}

/* 6. Houd de tekst en iconen strak op hun plek bovenop de laag */
.links-naar-rechts-hover-bruin .elementor-button .elementor-button-content-wrapper,
.links-naar-rechts-hover-bruin .elementor-button .elementor-button-text,
.links-naar-rechts-hover-bruin .elementor-button .elementor-button-icon {
    position: relative !important;
    z-index: 3 !important;
}

/* 1. Bereid de Elementor knop voor (jouw .main-menu-item logica) */
.links-naar-rechts-hover-blauw .elementor-button {
    position: relative !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    cursor: pointer !important;
    z-index: 1 !important;
    overflow: hidden !important;
    background-image: none !important; /* Weg met gradients */
	    font-family: utopia-std, serif!important;
    
    /* Zorg voor een soepele overgang van tekst/iconen */
    transition: color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 2. Bewaar de originele Elementor kleur voor de ruststand */
.links-naar-rechts-hover-blauw .elementor-button::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: inherit !important; /* Pakt je Elementor kleur */
    z-index: -2 !important;
}

/* 3. Jouw vloeibare hover-laag (exact volgens jouw logica) */
.links-naar-rechts-hover-blauw .elementor-button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important; /* Start op breedte 0 aan de linkerkant */
    height: 100% !important;
    background-color: #002D40 !important; /* Jouw goud/bruine kleur */
    z-index: -1 !important;
    
    /* Jouw smooth cubic-bezier transitie op de breedte */
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 4. Bij hover schiet de breedte naar 100% (van links naar rechts) */
.links-naar-rechts-hover-blauw .elementor-button:hover::before {
    width: 100% !important;
}

.links-naar-rechts-hover-blauw .elementor-button:hover .elementor-button-text {
		color: white!important;
}

/* 5. Forceer Elementor om zijn eigen achtergrond te verbergen tijdens hover */
.links-naar-rechts-hover-blauw .elementor-button:hover {
    background-color: transparent !important;
}

/* 6. Houd de tekst en iconen strak op hun plek bovenop de laag */
.links-naar-rechts-hover-blauw .elementor-button .elementor-button-content-wrapper,
.links-naar-rechts-hover-blauw .elementor-button .elementor-button-text,
.links-naar-rechts-hover-blauw .elementor-button .elementor-button-icon {
    position: relative !important;
    z-index: 3 !important;
}


/* 
/* FORMULIER STIJL
*/

.gform-body {

}

.gform-body .gform_fields {
    row-gap: 15px!important;
}

.gform-body input {
    border: unset!important;
    border-radius: 0!important;
    box-shadow: unset!important;
    background-color: #F4F0E9!important;
}

.gform-body textarea {
    border: unset!important;
    border-radius: 0!important;
    box-shadow: unset!important;
    background-color: #F4F0E9!important;
}

.gform-body select {
    border: unset!important;
    border-radius: 0!important;
    box-shadow: unset!important;
    background-color: #F4F0E9!important;
}

.gform_footer .gform_button {
    position: relative !important;
    cursor: pointer !important;
    z-index: 1 !important;
    font-family: utopia-std, serif !important;
    color: #173f68 !important;
    text-decoration: none !important;
    font-size: 1rem!important;
    box-shadow: unset!important;

    /* Jouw specifieke border styling */
    border-style: solid !important;
    border-width: 0px 0px 0px 2px !important;
    border-color: #8A724D !important;
    border-radius: 0px 0px 0px 0px !important;

    /* Startpositie: Achtergrond is transparant, de blauwe kleur staat 'klaar' buiten beeld */
    background-color: transparent !important;
    background-image: linear-gradient(to right, #8A724D 50%, transparent 50%) !important;
    background-size: 200% 100% !important;
    background-position: right bottom !important;

    /* De vloeiende transitie van de hover */
    transition: background-position 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Bij hover schuift de blauwe gradient van links naar rechts in beeld */
.gform_footer .gform_button:hover {
    background-position: left bottom !important;
    color: #FFFFFF !important;
}

/* 2. Bewaar de originele achtergrondkleur voor de ruststand */
.gform_footer .gform_button::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: inherit !important; /* Pakt de standaard Gravity Forms kleur */
    z-index: -2 !important;
}

/* 3. Vloeibare hover-laag (van links naar rechts) */
.gform_footer .gform_button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important; /* Start op breedte 0 aan de linkerkant */
    height: 100% !important;
    background-color: #002D40 !important; /* De donkerblauwe kleur uit je script */
    z-index: -1 !important;
    
    /* Smooth cubic-bezier transitie op de breedte */
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* 4. Bij hover schiet de breedte naar 100% */
.gform_footer .gform_button:hover::before {
    width: 100% !important;
}

.gform_footer .gform_button:hover {
    color: white !important;
}

/* 5. Forceer de knop om zijn eigen achtergrond te verbergen tijdens hover */
.gform_footer .gform_button:hover {
    background-color: transparent !important;
}

h3.bm-title {
	    font-family: 'Marcher', sans-serif !important;
	color: black!important;
}

.style-blauw ul li {
	    background: rgba(0, 0, 0, 0.2)!important;
}

.style-blauw ul li.slick-active {
	    background: #173F68!important;
}

.ruimte-slider-arrow:hover {
    background-color: #002D40;
}

.ruimte-slider-arrow:active {
    background-color: #002D40;
}

.ruimte-slider-arrow:focus {
    background-color: #002D40;
}

body .duke-hero h2 {
	font-family: 'Operetta', serif !important;
}

p a {
	color: #9a7d58!important;
	text-decoration: underline!important;
	font-weight: 400;
}

.duke-arrangement-intro {
    font-family: 'Marcher', sans-serif !important;
}

.duke-arrangement-subtitle {
	font-family: 'Marcher', sans-serif !important;
}

.duke-arrangement-type {
	font-family: 'Operetta', serif !important;
}

.duke-arrangement-price-label {
	font-family: 'Operetta', serif !important;
	color: #836b4d!important;
}

.duke-arrangement-price-prefix {
	font-family: 'Marcher', sans-serif !important;
}

.duke-arrangement-price-amount {
		font-family: 'Operetta', serif !important;
}

.duke-arrangement-price-unit {
	font-family: 'Marcher', sans-serif !important;
}

.duke-arrangement-availability {
	font-family: 'Marcher', sans-serif !important;
}

.arrangement-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.arrangement-card {
    position: relative;
    display: flex;
    min-height: 375px;
    overflow: hidden;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    color: #fff;
    text-decoration: none;
}

/* Achtergrond */
.arrangement-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    transform: scale(1);
    transition: transform 0.8s cubic-bezier(.2, .65, .3, 1);
}

/* Smooth zoom */
.arrangement-card:hover::before {
    transform: scale(1.08);
}

/* Donkere overlay */
.arrangement-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .68) 0%,
        rgba(0, 0, 0, .25) 55%,
        rgba(0, 0, 0, .05) 100%
    );
}

.arrangement-card__content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    width: 100%;
    padding: 30px;
}

/* Kleinere titel */
.arrangement-card__title {
    display: block;

    margin: 0 0 10px;

    font-family: Operetta, Georgia, serif;
    font-size: clamp(28px, 2.5vw, 38px);
    font-weight: 400;
    line-height: 1.05;

    color: #fff;
}

/* Knop */
.arrangement-card__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    font-family: 'Marcher', sans-serif !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;

    color: #fff;
}

/* Kleinere pijl */
.arrangement-card__arrow {
    font-family: Arial, sans-serif;
    font-size: 19px;
    line-height: 1;

    transition:
        transform 0.4s cubic-bezier(.2, .65, .3, 1);
}

/* Pijl beweegt subtiel mee */
.arrangement-card:hover .arrangement-card__arrow {
    transform: translate(3px, -3px);
}

.arrangement-card:hover {
    color: #fff;
}

@media (max-width: 900px) {
    .arrangement-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .arrangement-grid {
        grid-template-columns: 1fr;
    }

    .arrangement-card {
        min-height: 320px;
    }
}

.duke-ruimte-lightbox button:hover {
	background-color: black!important;
}

.duke-ruimte-lightbox button:active {
	background-color: black!important;
}

.duke-ruimte-lightbox button:focus {
	background-color: black!important;
}

body .gb-modal-paginering {
	display: none!important
}