:root {
    --primary: #57443d;
    --primary-highlight: #9a8383;
    --primary-deep: #3e2618;
    --ki-gold: #c9a87c;
    --ki-gold-light: #e8d4b0;
    --nav-animation-speed: 280ms;
    --animation-speed: 150ms;
    --standard-opacity: 1;
    /* Display: Fraunces — wonky high-contrast old-style serif (Multiwave-Oscillator-era character) */
    --ki-serif: 'Fraunces', Georgia, 'Palatino Linotype', Palatino, 'Times New Roman', serif;
    /* Body: Spectral — screen-native serif, legible for long-form Dutch copy */
    --ki-body: 'Spectral', Georgia, 'Times New Roman', serif;
    /* UI chrome: clean system sans (nav, buttons, forms, tables) */
    --ki-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ── Type foundation ───────────────────────────────────────────── */
body {
    font-family: var(--ki-body);
    font-size: 1.05rem;
    line-height: 1.72;
    letter-spacing: 0.003em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.ki-hero-text-on-video h1,
.ki-page-header-title {
    font-family: var(--ki-serif);
    font-optical-sizing: auto;
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.012em;
}

/* Keep UI chrome on the clean sans so admin/forms stay crisp */
.navbar, .navbar-nav, .nav-link, .btn,
input, select, textarea, .form-control, .form-select, label,
table, .grid-view, .kv-grid-table, .pagination, .breadcrumb {
    font-family: var(--ki-sans);
}

.bio {
    color: #757575;
    font-size:0.9rem;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.centerText {
    text-align: center;
    line-height: 40px;
}

.btn {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}


.door {
    color:darkgray;
}
.rond {
    border-radius: 200px !important;
    border: 1px solid black;
    width: 100px;
    float: left;
    padding: 3px;
    margin-top: 10px;
    margin-right: 10px;
}

.prijs {
    color: #400505;
    font-size:21px;
    font-weight: bold;
}

.whiteTrBg {
    background-color: rgba(97, 32, 32, 0.6);
    border:1px solid #2e0f0f;
    backdrop-filter: blur(7px);
    color:white !important;
}

.fullWidthNoBackground {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    box-sizing: border-box;
    width: 100%;
    background-color: #000;
    overflow: hidden;
    height: clamp(540px, 92vh, 720px);
}

#video-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}


.navbar {
    --bs-navbar-toggler-padding-y:0.625rem;
    --bs-navbar-brand-margin-end: 0rem;
}

.table-dark {
    --bs-table-striped-bg: #6c5445 !important;
}

.navbar-meisje {
    background-color: rgba(28, 12, 4, 0.93);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(201, 168, 124, 0.18);
    box-shadow: 0 4px 24px rgba(0,0,0,0.45);
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.navbar-meisje.scrolled {
    background-color: rgba(18, 7, 2, 0.98);
    box-shadow: 0 4px 32px rgba(0,0,0,0.65);
}


.myhover {
    cursor:pointer;
}

.helpIcon {
    float:right;
    cursor:pointer;
}
.form-check {
    margin-bottom: 0.625rem;
}
.bootstrap-dialog .btn-modal-close {
    border-radius: unset;
    box-shadow: unset;

}
.bootstrap-dialog-title  {
    width:400px;
}

.modal-header.bootstrap-dialog-header {
    padding-right:10px;
    padding-left:10px;
    padding-top:2px;
    padding-bottom:2px;
}

.bootstrap-dialog-close-button {
    width:-moz-available;
    width:-webkit-fill-available;
    text-align:end;
}
.alert {
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.25);
    backdrop-filter: blur(7px);
}

.fullWidthBackground {
    position: relative;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
    box-sizing: border-box;
    width: 100%;
    padding-top:10px;
    padding-bottom:20px;
    background-color: #27171a;
    background-image: url("../images/background1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment:fixed;
    overflow: hidden;
}

.fullWidthBackground2 {
    position: relative;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
    box-sizing: border-box;
    width: 100%;
    padding-top:10px;
    padding-bottom:20px;
    background-color: #e3d8d6;
    background-image: url("../images/background2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment:fixed;
    overflow: hidden;
}

.fullWidthBackground3 {
    position: relative;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
    box-sizing: border-box;
    width: 100%;
    padding-top:10px;
    padding-bottom:20px;
    background-color: #dbd5d7;
    background-image: url("../images/background3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment:fixed;
    overflow: hidden;
}



.carousel-plaatje {
    padding:3px;
    border-radius: 10px;
    margin:5px;
    border: 1px solid #878787;
    cursor:pointer;
    box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.25);
}

.keeptogether {
    display: flex;
}

.keeptogether a.btn.btn-dark {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.keeptogether a.btn.btn-light {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.switchButton {
    padding:5px;
    color:white;
    margin-right:10px;
}
.oleo-script swash caps-regular {
    font-family: "Oleo Script Swash Caps", system-ui;
    font-weight: 400;
    font-style: normal;
}

.oleo-script {
    font-family: "Oleo Script Swash Caps", system-ui;
    font-weight: 700;
    font-style: normal;
}

.margin-top-fix {
    margin-top:10px;
}

.dotransition {
    animation: blinker 1s linear infinite;
}
.help-block {
    color: red;
    font-weight:bold;
}
.control-label {
    margin-top:5px;
    color: #565656;
    font-weight:bold;
}
.table-bordered.table-striped {
    border:0 !important;
}
.table-bordered.table-striped th{
    border:0 !important;
}
.table-bordered.table-striped tr{
    border:0 !important;
}
.bold {
    font-weight: bold;
}

.table-bordered.table-striped td{
    border:0 !important;
}

div.empty div.alert.alert-light {
    margin-bottom:0px!important;
}

.footer {
    background-color: #f5f5f5;
    font-size: .9em;
    height: 60px;
}

.form-control.ro {
    background-color: #f1f1f1 !important;
    color:darkgray!important;
    border:1px solid black;
}
body {
    position:relative;
}
tr.green td {
    background-color: #deebde;
}
.headerfortable {
    white-space: nowrap;
    font-weight: bold;
    background-color: #d7d7d7;
}

.nowrap {
    white-space: nowrap;
}


.ui-autocomplete-input {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.table tbody tr.table-more-danger {
    background-color:red !important;
    color:white !important;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}

.navbar-nav {
    max-height:300px;
}
@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.form-group {
    margin-bottom: 1rem;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:9999;
    background: rgba(0, 0, 0, 0.7);
}

.overlay:target {
    visibility: visible;
    opacity: 1;
}

.popup {
    margin: 50px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 40%;
    position: relative;
    overflow: auto;
    max-height: 80%;
}

.popup h2 {
    margin-top: 0;
    color: #333;
    font-family: Tahoma, Arial, sans-serif;
}

.popup .close {
    position: absolute;
    top: 10px;
    border: 1px solid black;
    border-radius:5px;
    padding-left:10px;
    padding-right:10px;
    right: 20px;
    margin-bottom:5px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

.popup .close:hover {
    color: #06D85F;
}

.popup .content {
    max-height: 30%;
    overflow: auto;
}

@media screen and (max-width: 1200px){
    .popup{
        width: 90%;
    }
}


.table-bordered.table-striped tr {
    user-select: none;
}


.navbar-nav.nav li.nav-item a.nav-link {
    border-radius: 10px;
}
.site-index {
    margin-top:10px;
}
.fixed-top {
    z-index:10;
}
.navbar-nav.nav li.nav-item {
    border-radius: 10px;
    margin: 5px;
}
.helvetica {
    font-family: 'Helvetica', 'Arial', sans-serif;
}
.lightlink {
    font-weight:normal;
}
.row, .table, .btn {
    opacity: var(--standard-opacity);
}

.quote {
    font-size: 20px;
    padding:20px;
    font-family: Serif;
    font-weight:bold;
    color:var(--primary);
}
h1 {
    margin-top: 25px;
    margin-bottom: 28px;
    color: var(--primary-deep);
    font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem);
    text-shadow: none;
}

h2 {
    font-size: 1.55rem !important;
    color: var(--primary);
    padding-bottom: 18px;
    padding-top: 20px;
}

h3 {
    font-size: 1.3rem !important;
    padding-bottom: 15px;
    padding-top: 15px;
}

h4 {
    font-size: 1.2rem !important;
    padding-top: 10px;
}

h5 {
    font-size: 1.1rem !important;
}

.navbar-nav.nav li.nav-item {
    border-radius: 0;
    margin: 0 1px;
    transition: none;
}
.navbar-nav.nav li.nav-item:hover {
    background-color: transparent;
    color: inherit;
    border-radius: 0;
}
.smallTd {
    width: 10px;
}
.bg-body-secondary {
    background-color: #efefef;
}
#overlay {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 200%;
    display: none;
}


.highlight.nav-item {
    border:1px solid white;
}
.navbar-toggler:focus {
    box-shadow:none;
    border:none;
}
a.navbar-brand {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.38);
}
.filter-pink {
    filter:invert(14%) sepia(83%) saturate(7335%) hue-rotate(317deg) brightness(90%) contrast(113%);
}
.neus {
    color: #ec0083;
    background-color:white;
    border-radius:5px;
    padding:5px;
    font-weight:bold;
}

.no-wrap {
    white-space: nowrap;
}
.bg-body-tertiary {
    background-color: #e8fdff;
}
.lineHeightFix {
    line-height: 40px;
}
.call {
    padding:5px;
    background-color: white;
    color:darkblue;
    border-radius:5px;
    border:1px solid darkred;
}
.yellow {
    padding:5px;
    color: yellow;
    border-radius:5px;
    font-weight:bold;
    background-color: black;
}
.navbar-toggler {
    box-shadow:none;
    border:none;
}

.navbar .nav-item .nav-link {
    color:white;
}
/* ── Signature: the Multiwave divider ──────────────────────────────
   The institute is built around the Lakhovsky Multiwave Oscillator,
   so section breaks are drawn as an oscillation rather than a flat rule. */
.myrule {
    border: none;
    height: 16px;
    width: 100%;
    margin: 40px 0 !important;
    opacity: 0.85;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'%3E%3Cpath d='M0 8 Q6 2 12 8 T24 8 T36 8 T48 8' fill='none' stroke='%23c9a87c' stroke-width='1.25' stroke-opacity='0.6'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

#beck, #beckterug, #rife, #rifeterug, #straling, #stralingterug, #violet, #lakhovsky, #meerinfo {
    scroll-margin-top:40px;
    overflow: initial !important;
}

.startvak {
    background: linear-gradient(0deg, rgba(195,224,224,1) 0%, rgba(255,255,255,1) 100%);
    border: 1px solid #7c7c7c;
    border-radius:10px;
    padding-top:10px;
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25);
}

@keyframes blinker1 {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    37% {
        opacity: 1;
        transform: scale(1);
    }
    40% {
        opacity: 0.6;
        transform: scale(1.15);
    }
    43% {
        opacity: 1;
        transform: scale(1);
    }
    46% {
        opacity: 0.6;
        transform: scale(1.35);
    }
    49% {
        opacity: 1;
        transform: scale(1);
    }
    52% {
        opacity: 0.6;
        transform: scale(1.5);
    }
    55% {
        opacity: 1;
        transform: scale(1);
    }
    57% {
        opacity: 0.6;
        transform: scale(1.35);
    }
    60% {
        opacity: 1;
        transform: scale(1);
    }
    63% {
        opacity: 0.6;
        transform: scale(1.15);
    }
    66% {
        opacity: 1;
        transform: scale(1);
    }

}
@keyframes blinker {
    10% {
        opacity: 0.6;
    }
}

.successTransparant {
    background-color:rgba(209, 231, 221, 0.6);
}

.warningTransparant {
    background-color:rgba(255, 243, 205, 0.6);
}

.infoTransparant {
    background-color:rgba(207, 244, 252, 0.6);
}

.lightTransparant {
    background-color:rgba(252, 252, 253, 0.6);
}


.dofasttransition {

    animation: blinker 500ms linear infinite;
}
#actiefRow {
    font-weight: bold;
    font-size: calc(1.275rem + 0.3vw);
    line-height: 1.5;
    animation: blinker1 8s linear infinite;
}

#actiefRow td {
    background-color: #90ff90 !important;
}
html.h-100 body.d-flex.flex-column.h-100 main#main.flex-shrink-0 div.container div.nevo2023-index div#w0.grid-view.is-bs4.kv-grid-bs4.hide-resize div#w0-container.table-responsive.kv-grid-container table.kv-grid-table.table.table-hover.table-bordered.table-striped thead.kv-table-header.w0 tr#w0-filters.filters.skip-export td input#nevo2023search-voedingsmiddelnaam.form-control
.smallfont {
    font-size: 12px;
    float: right;
    margin-bottom: 0;
    margin-top: -10px;
}
form-check-input {
    clear: left;
}

.form-switch.form-switch-sm {
    margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-sm .form-check-input {
    height: 1rem;
    width: calc(1rem + 0.75rem);
    border-radius: 2rem;
}


.form-switch.form-switch-md .form-check-input {
    height: 1.5rem;
    width: calc(2rem + 0.75rem);
    border-radius: 3rem;
}
.nomargin {
    margin-bottom:0px;
}

.form-switch.form-switch-lg {
    margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-lg .form-check-input {
    height: 2rem;
    width: calc(3rem + 0.75rem);
    border-radius: 4rem;
}
.whiteBg {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius:10px;
    box-shadow: 3px 3px 5px 0 rgba(0,0,0,0.25);
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px;
}

.backgroundCarousel { z-index: -99; } /* keeps this behind all content */
.backgroundCarouselItem {
    position: fixed;
    width: 100%; height: 100%;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;

}
.backgroundOne {
    background: url(../images/background2.jpg);
    background-size: cover;
    background-position: center;
    -moz-background-size: cover;
}
.backgroundTwo {
    background: url(../images/background3.jpg);
    background-size: cover;
    background-position: center;
    -moz-background-size: cover;
}
.backgroundCarousel .active.left {
    left:0;
    opacity:0;
    z-index:2;
}
.whiteBgNoShadow {
    background-color:white;
    border-radius:10px;
    margin: -10px;
    padding: 10px;
}

.form-switch.form-switch-xl {
    margin-bottom: 2rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-xl .form-check-input {
    height: 2.5rem;
    width: calc(4rem + 0.75rem);
    border-radius: 5rem;
}
.nav-link {
    padding-left:10px;
    padding-right:10px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.38);
}
.nav-link.active {
    background-color: transparent !important;
    color: var(--ki-gold) !important;
    white-space: nowrap;
    border-radius: 0;
}
.opsomming li {
    padding:0.8em;
    font-size:1.2em;
}
.carousel-control-prev-icon {
    filter: drop-shadow(0px 0px 2px #000000);
}
.carousel-control-next-icon {
    filter: drop-shadow(0px 0px 2px #000000);
}

.mycarousel {
    box-shadow: 13px 13px 13px 0px rgba(0,0,0,0.25);
    border:5px solid grey;
    border-radius:10px;
}

.featurette-image {
    margin-top:27px;
    margin-bottom:27px;
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.25);
    border-radius: 10px;
    border:1px solid black;
}

.rounded-image {
    border-radius: 10px;
}
.featurette-divider {
    border-top: 1px solid #6987c9;
    width:80%;
    margin: 40px auto !important;
    margin-top:50px !important;

}
.whitelead {
    color: white;
    font-weight: bold;
}


.lead {
    color: var(--primary);
    font-weight: bold;
}

div a.btn {
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.50);
}

div a.btn.btn-success {
    border:none;
}
.selector {
    color: white;
}
.selector:hover {
    color: white;
    border:1px white;
}

.selector:focus {
    color:white;
}


.btn-primary {
    background-color: var(--primary);
    color: #ffffff;
    border:none;
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.50);
}


.btn-primary:active {
    background-color: var(--primary)!important;
    color: #ffffff;
}

.form-check-input:checked {
    background-color: var(--primary);
    border:1px solid var(--primary);
}

.btn-primary:hover {
    background-color: var(--primary-highlight);
    color: #ffffff;
}

.btn:hover {
    transform: scale(1.04);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    box-shadow: 0 8px 22px rgba(0,0,0,0.38) !important;
}
.btn:active {
    transform: scale(0.96) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
    transition: transform 0.08s ease !important;
}

ul > li.page-item.active > a {
    background-color: var(--primary);
    border:1px solid var(--primary);
}

ul > li.page-item > a {
    color: var(--primary);
    border:1px solid var(--primary);
}
.page-link:hover {
    background-color: var(--primary-highlight);
    color:white;
    border:1px solid var(--primary);
    transition: all var(--animation-speed);

}

a {
    color: #6f350b;
    text-decoration:none;
    font-weight:bold;
}
div a.btn.btn-success:hover {
    background-color: var(--primary-highlight);
    transition: all var(--animation-speed);
    transform: scale(0.93);
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.50);
}



.kv-grid-table {
    border-radius: 15px;
    border-collapse: collapse;
    width: 100%;
    overflow: hidden;
}
.table-rounded {
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
    border-collapse: collapse;
    width: 100%;
    border-radius: 15px;

    /* add this */
    overflow:hidden;
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.50);
}

div button.btn.btn-success {
    border:none;
    color: #ffffff;
}

div button.btn.btn-success:hover {
    background-color: var(--primary-highlight);
    color: #ffffff;
    transition: all var(--animation-speed);
    transform: scale(0.93);
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.50);
}

.btn-danger:hover {
    transition: all var(--animation-speed);
    transform: scale(0.93);
    box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.50);
}


tbody tr.w0 td.w0 table.table.table-hover {
    margin-bottom: 0 !important;
    transition: all var(--animation-speed);

}


.navbar-toggler span {
    display: block;
    background-color: #ffffff;
    height: 3px;
    width: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: all 0.35s ease-out;
    transform-origin: center left;
}



.navbar-toggler span:nth-child(1) {
    transform: translate(0%, 0%) rotate(0deg);
}

.navbar-toggler span:nth-child(2) {
    opacity: 1;
}

.navbar-toggler span:nth-child(3) {
    transform: translate(0%, 0%) rotate(0deg);
}

.navbar-toggler span:nth-child(1) {
    margin-top: 0.3em;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: translate(15%, -33%) rotate(45deg);
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
    transform: translate(15%, 33%) rotate(-45deg);
}

/* =====================================================
   DESIGN REFRESH
   ===================================================== */

html { scroll-behavior: smooth; }

/* ── Navbar: glass morphism + underline link animations ── */
.navbar .nav-item .nav-link {
    position: relative;
    color: rgba(255, 248, 240, 0.82) !important;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.25px;
    padding: 8px 13px !important;
    transition: color var(--nav-animation-speed);
}

.navbar .nav-item .nav-link::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 13px;
    right: 13px;
    height: 1px;
    background: var(--ki-gold);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--nav-animation-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar .nav-item .nav-link:hover {
    color: var(--ki-gold-light) !important;
}

.navbar .nav-item .nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.navbar .nav-item .nav-link.active::after {
    transform: scaleX(1);
    opacity: 0.65;
}

/* CTA link in nav (last item) */
.navbar .nav-item:last-child .nav-link {
    color: var(--ki-gold) !important;
    font-weight: 600;
}

/* Brand logo */
a.navbar-brand {
    font-family: var(--ki-serif);
    font-variation-settings: 'SOFT' 0, 'WONK' 0;
    font-weight: 600;
    font-size: 1.45rem;
    letter-spacing: 0.01em;
    transition: color 0.25s;
}

a.navbar-brand:hover {
    color: var(--ki-gold) !important;
}

a.navbar-brand i {
    color: var(--ki-gold);
}

/* Toggler border */
.navbar-toggler {
    border: 1px solid rgba(201, 168, 124, 0.35) !important;
    border-radius: 6px !important;
    padding: 5px 9px;
    transition: border-color 0.25s, background-color 0.25s;
}

.navbar-toggler:hover {
    border-color: rgba(201, 168, 124, 0.75) !important;
    background-color: rgba(201, 168, 124, 0.08) !important;
}

/* Mobile stagger-slide-in for nav items */
@keyframes ki-nav-slide-in {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1199px) {
    .navbar-meisje .navbar-collapse {
        border-top: 1px solid rgba(201, 168, 124, 0.12);
        margin-top: 6px;
        padding-top: 4px;
    }
    .navbar-meisje .navbar-collapse.show .nav-item {
        animation: ki-nav-slide-in 0.28s ease both;
    }
    .navbar-meisje .navbar-collapse.show .nav-item:nth-child(1) { animation-delay: 0.03s; }
    .navbar-meisje .navbar-collapse.show .nav-item:nth-child(2) { animation-delay: 0.06s; }
    .navbar-meisje .navbar-collapse.show .nav-item:nth-child(3) { animation-delay: 0.09s; }
    .navbar-meisje .navbar-collapse.show .nav-item:nth-child(4) { animation-delay: 0.12s; }
    .navbar-meisje .navbar-collapse.show .nav-item:nth-child(5) { animation-delay: 0.15s; }
    .navbar-meisje .navbar-collapse.show .nav-item:nth-child(6) { animation-delay: 0.18s; }

    .navbar .nav-item .nav-link {
        padding: 10px 14px !important;
        border-bottom: 1px solid rgba(201, 168, 124, 0.09);
    }
    .navbar .nav-item:last-child .nav-link {
        border-bottom: none;
    }
    .navbar .nav-item .nav-link::after {
        display: none;
    }
}

/* ── Video hero overlay ── */
.ki-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(50, 22, 6, 0.38) 0%,
        rgba(18, 6, 1, 0.55) 45%,
        rgba(8, 2, 0, 0.72) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.ki-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 68px;    /* push visual centre up from fixed navbar */
    padding-left: 15px;
    padding-right: 15px;
}

/* Centre rows inside the hero */
.ki-hero-content .row {
    align-items: center;
}

/* Mobile: hide carousel, show only text centred */
@media (max-width: 767px) {
    .ki-hero-content {
        padding-top: 56px;
        text-align: center;
    }
    .ki-hero-content .col-md-6:first-child {
        display: none;
    }
    .ki-hero-content .col-md-6:last-child {
        width: 100%;
    }
    .ki-hero-lead-text {
        max-width: 100%;
    }
}

/* Hero text directly on video */
.ki-hero-text-on-video {
    text-align: center;
}

.ki-hero-text-on-video h1 {
    color: #fff !important;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.75) !important;
    font-family: var(--ki-serif);
    font-variation-settings: 'SOFT' 0, 'WONK' 1;
    font-weight: 600;
    font-size: clamp(2.4rem, 5.4vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin-top: 0;
}

.ki-hero-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.ki-hero-ornament-line {
    flex: 1;
    max-width: 50px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ki-gold));
}

.ki-hero-ornament-line:last-child {
    background: linear-gradient(90deg, var(--ki-gold), transparent);
}

.ki-hero-ornament-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ki-gold);
    flex-shrink: 0;
}

.ki-hero-lead-text {
    color: rgba(255, 248, 240, 0.88);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.75;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
    margin-bottom: 24px;
}

/* ── Background sections: darker overlay + light text ── */
.fullWidthBackground::before,
.fullWidthBackground2::before,
.fullWidthBackground3::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.fullWidthBackground::before {
    background: linear-gradient(
        135deg,
        rgba(10, 4, 1, 0.55) 0%,
        rgba(20, 8, 2, 0.48) 50%,
        rgba(10, 4, 1, 0.58) 100%
    );
}

.fullWidthBackground2::before {
    background: linear-gradient(
        135deg,
        rgba(18, 7, 2, 0.68) 0%,
        rgba(28, 11, 4, 0.62) 50%,
        rgba(18, 7, 2, 0.72) 100%
    );
}

.fullWidthBackground3::before {
    background: linear-gradient(
        to bottom right,
        rgba(14, 5, 1, 0.65) 0%,
        rgba(22, 9, 3, 0.58) 45%,
        rgba(16, 6, 1, 0.70) 100%
    );
}

.fullWidthBackground > .container,
.fullWidthBackground2 > .container,
.fullWidthBackground3 > .container {
    position: relative;
    z-index: 1;
}

.fullWidthBackground h1,
.fullWidthBackground h2,
.fullWidthBackground h3,
.fullWidthBackground h4,
.fullWidthBackground p,
.fullWidthBackground .lead,
.fullWidthBackground ul,
.fullWidthBackground li,
.fullWidthBackground2 h1,
.fullWidthBackground2 h2,
.fullWidthBackground2 h3,
.fullWidthBackground2 h4,
.fullWidthBackground2 p,
.fullWidthBackground2 .lead,
.fullWidthBackground2 ul,
.fullWidthBackground2 li,
.fullWidthBackground3 h1,
.fullWidthBackground3 h2,
.fullWidthBackground3 h3,
.fullWidthBackground3 h4,
.fullWidthBackground3 p,
.fullWidthBackground3 .lead,
.fullWidthBackground3 ul,
.fullWidthBackground3 li {
    color: rgba(255, 248, 240, 0.92) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Links inside dark sections */
.fullWidthBackground a:not(.btn),
.fullWidthBackground2 a:not(.btn),
.fullWidthBackground3 a:not(.btn) {
    color: var(--ki-gold) !important;
    border-bottom: 1px solid rgba(201, 168, 124, 0.35);
}

.fullWidthBackground a:not(.btn):hover,
.fullWidthBackground2 a:not(.btn):hover,
.fullWidthBackground3 a:not(.btn):hover {
    color: var(--ki-gold-light) !important;
    border-color: rgba(201, 168, 124, 0.7);
}

/* Keep card elements unaffected */
.fullWidthBackground2 .ki-card-lead,
.fullWidthBackground3 .ki-card-lead {
    text-shadow: none;
}

/* ── FA icons: gold accent in headings ── */
h1 i[class*="fa-"],
h2 i[class*="fa-"],
h3 i[class*="fa-"],
h4 i[class*="fa-"] {
    color: var(--ki-gold);
}

/* Keep icons in dark-bg sections gold */
.fullWidthBackground h1 i[class*="fa-"],
.fullWidthBackground2 h1 i[class*="fa-"],
.fullWidthBackground3 h1 i[class*="fa-"] {
    color: var(--ki-gold) !important;
}

/* ── Back to top: subtle ghost pill ── */
.ki-back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 124, 0.30);
    color: rgba(201, 168, 124, 0.50) !important;
    background: rgba(18, 6, 1, 0.18);
    backdrop-filter: blur(6px);
    font-size: 12px;
    text-decoration: none !important;
    float: right;
    transition: border-color 0.3s, color 0.3s, background 0.3s, transform 0.3s;
    box-shadow: none !important;
}

.ki-back-to-top:hover {
    border-color: rgba(201, 168, 124, 0.7);
    color: var(--ki-gold) !important;
    background: rgba(18, 6, 1, 0.45);
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

/* ── Button: ripple shimmer on hover ── */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    pointer-events: none;
}

.btn:hover::before {
    transform: translateX(100%);
}

/* ── Footer: warm dark gradient ── */
#footer {
    background: linear-gradient(135deg, #1e0b03 0%, #2e1408 50%, #1e0b03 100%) !important;
    border-top: 1px solid rgba(201, 168, 124, 0.18);
    color: rgba(255, 248, 240, 0.55) !important;
    padding: 22px 0 !important;
}

#footer .col-md-12 {
    color: rgba(255, 248, 240, 0.55);
}

#footer a {
    color: var(--ki-gold) !important;
    font-weight: 400;
    transition: color 0.2s;
}

#footer a:hover {
    color: var(--ki-gold-light) !important;
}

/* ── Carousel: richer borders ── */
.mycarousel {
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42);
    border: 3px solid rgba(201, 168, 124, 0.28);
    border-radius: 12px;
}

/* ── H1 general: slightly richer ── */
h1 {
    letter-spacing: -0.3px;
}

/* ── Lead links fix ── */
a {
    transition: color 0.2s;
}

/* ── Scrollspy active nav ── */
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-item > .nav-link.active {
    color: var(--ki-gold) !important;
}

/* ── Full-width page header (title pages: contact, admin views) ── */
.ki-page-header {
    position: relative;
    width: 100%;
    padding-top: 100px;
    padding-bottom: 52px;
    background:
        linear-gradient(135deg, #160703 0%, #2a1009 40%, #200c06 70%, #160703 100%);
    border-bottom: 1px solid rgba(201, 168, 124, 0.2);
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* Ambient glow accents */
.ki-page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 15% 50%, rgba(201, 168, 124, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 85% 50%, rgba(201, 168, 124, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 80% 40% at 50% 100%, rgba(201, 168, 124, 0.04) 0%, transparent 60%);
    pointer-events: none;
}

/* Subtle diagonal grain lines */
.ki-page-header-overlay {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        105deg,
        transparent 0,
        transparent 3px,
        rgba(255, 255, 255, 0.012) 3px,
        rgba(255, 255, 255, 0.012) 4px
    );
    pointer-events: none;
}

.ki-page-header-inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Ornament */
.ki-page-header-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ki-page-header-orn-line {
    height: 1px;
    width: 52px;
    background: linear-gradient(90deg, transparent, var(--ki-gold));
}

.ki-page-header-orn-line:last-child {
    background: linear-gradient(90deg, var(--ki-gold), transparent);
}

.ki-page-header-orn-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ki-gold);
    box-shadow: 0 0 8px rgba(201, 168, 124, 0.6);
}

/* Title */
.ki-page-header-title {
    font-family: var(--ki-serif);
    font-size: clamp(2rem, 5vw, 3.2rem) !important;
    font-weight: 700;
    color: #fff !important;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.8);
    margin: 0 0 6px !important;
    letter-spacing: -0.4px;
    line-height: 1.2;
}

.ki-page-header-title i[class*="fa-"] {
    color: var(--ki-gold) !important;
    text-shadow: 0 0 20px rgba(201, 168, 124, 0.4);
}

/* Buttons row */
.ki-page-header-btns {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

/* Flash alerts inside header */
.ki-page-header .alert {
    max-width: 560px;
    margin: 20px auto 0;
    text-align: left;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(201, 168, 124, 0.3);
    color: rgba(255, 248, 240, 0.9);
    backdrop-filter: blur(8px);
}

/* Mobile */
@media (max-width: 768px) {
    .ki-page-header {
        padding-top: 80px;
        padding-bottom: 38px;
    }
    .ki-page-header-title {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    }
    .ki-page-header-btns {
        gap: 8px;
    }
}

/* ── Button ripple click animation ── */
.ki-btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    transform: scale(0);
    animation: ki-ripple 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
    z-index: 10;
}

@keyframes ki-ripple {
    0%   { transform: scale(0); opacity: 1; }
    70%  { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(1.1); opacity: 0; }
}

/* ── Language switcher (navbar segmented pill) ── */
.ki-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 6px 0 6px 14px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    vertical-align: middle;
}
.ki-lang-switch .ki-lang-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.ki-lang-switch .ki-lang-opt:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
}
.ki-lang-switch .ki-lang-opt.active {
    color: #1f5130;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.ki-lang-switch .ki-lang-opt.active:hover {
    background: #fff;
    color: #1f5130;
}

@media (max-width: 1199px) {
    /* In the collapsed mobile menu, align with the nav links */
    .ki-lang-switch {
        margin: 12px 0 6px;
    }
}