/* =============================================
   1. Mijn Eigen Stijlen
   =============================================
*/

/* --- Algemene Stijlen --- */
body { 
    font-family: 'Poppins', sans-serif; 
}
.font-playfair { 
    font-family: 'Playfair Display', serif; 
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

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

.justify-center {
  justify-content: center;
}

.footer-sticky {
    position: sticky;
    top: 100vh;
}

/* --- Mobiele Navigatie Animatie --- */
#mobile-menu {
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
#mobile-menu.menu-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* --- Lightbox Animatie --- */
#lightbox-overlay { 
    transition: opacity 500ms ease-in-out; 
}
#lightbox-img { 
    transition: transform 500ms ease-in-out; 
}

/* --- Extra's --- */
.background-video { 
    transition: opacity 1s ease-in-out; 
}
.hide-scrollbar::-webkit-scrollbar { 
    display: none; 
}
.hide-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}


/* =================================================================
   2. Tailwind CSS Utilities 
   =================================================================
*/

*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}
:after,:before{--tw-content:""}
html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}
html{
--tw-blur:blur(0);
--tw-brightness:brightness(1);
--tw-contrast:contrast(1);
--tw-grayscale:grayscale(0);
--tw-hue-rotate:hue-rotate(0deg);
--tw-invert:invert(0);
--tw-saturate:saturate(1);
--tw-sepia:sepia(0);
--tw-drop-shadow:drop-shadow(0 0 #0000);
--tw-backdrop-blur:blur(0);
--tw-backdrop-brightness:brightness(1);
--tw-backdrop-contrast:contrast(1);
--tw-backdrop-grayscale:grayscale(0);
--tw-backdrop-hue-rotate:hue-rotate(0deg);
--tw-backdrop-invert:invert(0);
--tw-backdrop-opacity:opacity(1);
--tw-backdrop-saturate:saturate(1);
--tw-backdrop-sepia:sepia(0);
}
body{margin:0;line-height:inherit}
h1,h2,p{margin:0}
img,video{max-width:100%;height:auto}
button,input,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}
button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}
svg{display:block;vertical-align:middle}
a{color:inherit;text-decoration:inherit}
.absolute{position:absolute}
.relative{position:relative}
.fixed{position:fixed}
.sticky{position:sticky}
.inset-0{inset:0}
.left-0{left:0}
.right-0{right:0}
.top-0{top:0}
.top-1\/2{top:50%}
.z-0{z-index:0}
.z-10{z-index:10}
.z-20{z-index:20}
.z-30{z-index:30}
.z-50{z-index:50}
.-z-10{z-index:-10}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-12{margin-top:3rem}
.mt-16{margin-top:4rem}
.mt-2{margin-top:.5rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mb-12{margin-bottom:3rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.block{display:block}
.inline-block{display:inline-block}
.flex{display:flex}
.hidden{display:none}
.h-10{height:2.5rem}
.h-6{height:1.5rem}
.h-96{height:24rem}
.h-auto{height:auto}
.h-full{height:100%}
.h-screen{height:100vh}
.w-32{width:8rem}
.w-6{width:1.5rem}
.w-80{width:20rem}
.w-auto{width:auto}
.w-full{width:100%}
.max-w-2xl{max-width:42rem}
.max-h-\[90\%\]{max-height:90%}
.max-w-\[90\%\]{max-width:90%}
.flex-shrink-0{flex-shrink:0}
.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.scale-95{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.cursor-pointer{cursor:pointer}
.list-disc{list-style-type:disc}
.list-inside{list-style-position:inside}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} /* GECORRIGEERD: Deze regel was afwezig */
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-12{gap:3rem}
.gap-4{gap:1rem}
.gap-8{gap:2rem}
.gap-x-3{column-gap:.75rem}
.space-x-6{--tw-space-x-reverse:0;margin-right:calc(1.5rem * var(--tw-space-x-reverse));margin-left:calc(1.5rem * (1 - var(--tw-space-x-reverse)))}
.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem * var(--tw-space-x-reverse));margin-left:calc(1.5rem * (1 - var(--tw-space-x-reverse)))}
.space-x-8{--tw-space-x-reverse:0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * (1 - var(--tw-space-x-reverse)))}
.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * (1 - var(--tw-space-x-reverse)))}
.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem * (1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}
.space-y-4{--tw-space-y-reverse:0;margin-top:calc(1rem * (1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}
.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * (1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}
.whitespace-nowrap{white-space:nowrap}
.overflow-x-auto{overflow-x:auto}
.break-inside-avoid{break-inside:avoid}
.columns-2{columns:2}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:.5rem}
.border{border-width:1px}
.border-pink-100{--tw-border-opacity:1;border-color:rgb(255 228 238 / var(--tw-border-opacity))}
.bg-black\/70{background-color:rgb(0 0 0 / .7)}
.bg-pink-50{--tw-bg-opacity:1;background-color:rgb(253 234 241 / var(--tw-bg-opacity))}
.bg-pink-500{--tw-bg-opacity:1;background-color:rgb(236 72 153 / var(--tw-bg-opacity))}
.bg-pink-800{--tw-bg-opacity:1;background-color:rgb(157 23 77 / var(--tw-bg-opacity))}
.bg-white\/50{background-color:rgb(255 255 255 / .5)}
.bg-white\/80{background-color:rgb(255 255 255 / .8)}
.bg-white\/70{background-color:rgb(255 255 255 / .7)}
.object-cover{object-fit:cover}
.p-2{padding:.5rem}
.p-6{padding:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.pb-4{padding-bottom:1rem}
.pb-16{padding-bottom:4rem}
.pt-8{padding-top:2rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-10{padding-left:2.5rem;padding-right:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.text-center{text-align:center}
.font-playfair{font-family:"Playfair Display",serif}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.font-bold{font-weight:700}
.font-light{font-weight:300}
.text-pink-100{--tw-text-opacity:1;color:rgb(255 228 238 / var(--tw-text-opacity))}
.text-pink-700{--tw-text-opacity:1;color:rgb(190 24 93 / var(--tw-text-opacity))}
.text-pink-800{--tw-text-opacity:1;color:rgb(157 23 77 / var(--tw-text-opacity))}
.text-pink-800\/80{color:rgb(157 23 77 / .8)}
.text-pink-800\/90{color:rgb(157 23 77 / .9)}
.text-pink-900{--tw-text-opacity:1;color:rgb(131 24 67 / var(--tw-text-opacity))}
.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}
.opacity-0{opacity:0}
.opacity-100{opacity:1}
.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.brightness-\[\.6\]{--tw-brightness:brightness(.6);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)}
.pointer-events-none{pointer-events:none}
.grow { flex-grow: 1; }
.backdrop-blur-md{--tw-backdrop-blur:blur(12px);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)}
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.duration-300{transition-duration:.3s}
.duration-500{transition-duration:.5s}
.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}
.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}
.scroll-smooth{scroll-behavior:smooth}
.snap-center{scroll-snap-align:center}
.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}
.snap-mandatory{--tw-scroll-snap-strictness:mandatory}
.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
.hover\:bg-pink-600:hover{--tw-bg-opacity:1;background-color:rgb(219 39 119 / var(--tw-bg-opacity))}
.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}
.hover\:text-pink-900:hover{--tw-text-opacity:1;color:rgb(131 24 67 / var(--tw-text-opacity))}
.hover\:opacity-90:hover{opacity:.9}
@media (min-width: 768px) {
    .md\:hidden { display: none; }
    .md\:block { display: block; }
    .md\:flex { display: flex; }
    .md\:grid { display: grid; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md\:columns-3 { columns: 3; }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:gap-8 { gap: 2rem; }
    .md\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
    .md\:text-5xl { font-size: 3rem; line-height: 1; }
    .md\:text-7xl { font-size: 4.5rem; line-height: 1; }
    .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
}
@media (min-width:1024px){
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lg\:columns-4{columns:4}
}
.container{width:100%}
@media (min-width:640px){
.container{max-width:640px}
}
@media (min-width:768px){
.container{max-width:768px}
}
@media (min-width:1024px){
.container{max-width:1024px}
}
@media (min-width:1280px){
.container{max-width:1280px}
}
@media (min-width:1536px){
.container{max-width:1536px}
}