:root{
	/* KLEUREN */
	--text-color: var(--quadra-color);
	
	--primary-color: #F0F0F0;
	--secondary-color: #1E1F21;
	--tertiary-color: #767676;
	--quadra-color: #0A0A0A;

	--bg-color: #A2C9A7;
	--white: #FFFFFF;
	--black: #000000;
	--grey: #AAAAAA;
	--light-grey: #EEEEEE;
	--warning: #d12929;

	/* FILTERS */
	--primary-filter: brightness(0) saturate(100%) invert(47%) sepia(12%) saturate(742%) hue-rotate(78deg) brightness(93%) contrast(91%);
	--secondary-filter: brightness(0) saturate(100%) invert(17%) sepia(0%) saturate(1%) hue-rotate(350deg) brightness(106%) contrast(82%);
	--tertiary-filter: brightness(0) saturate(100%) invert(53%) sepia(0%) saturate(399%) hue-rotate(150deg) brightness(87%) contrast(88%);
	--white-filter: brightness(0) saturate(100%) invert(95%) sepia(91%) saturate(38%) hue-rotate(277deg) brightness(111%) contrast(111%);

	/* FONTS */
	--primary-font: "Playfair Display", serif;
	--secondary-font: "Noto Sans", sans-serif;

	--font-awesome: 'Font Awesome 7 Pro';
	--arrow-up: '\f062'; 
	--arrow-right: '\f061';
	--arrow-down: '\f063';
	--arrow-left: '\f060';

	--angler-down: '\f107';
	--angler-right: '\f105';

	--phone: '\f095';
	--mail: '\f0e0';
	--location: '\f3c5';
	--wa: '\f232';

	--check: '\f00c';

	/* DETAILS */
	--border-radius: 50px;
	--box-shadow: 0 4px 20px rgba(0,0,0,0.08);

	--gradient: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.8) 100%);
	--gradient-banner: linear-gradient(0deg, rgba(10, 10, 10, 0.60) 0%, rgba(10, 10, 10, 0.60) 100%);

	--bg-parralax: var(--bg-light-img2);

	--bg-dark-img:  url('/media/2026-06/bg-dark.jpg');
	--bg-light-img: url('/media/2026-06/bg-light.jpg');
	--bg-light-img2: url('/media/2026-07/bg-light-v2.png');

	/* CONTAINER */
	--container-width: 1464px;
	--rest-space: calc(100vw - var(--container-width));
	--half-space: calc(var(--rest-space) / 2);

	/* Space */
	--row-space: 100px;
	--row-space-big: calc(var(--row-space) * 1.5);
}

*{ outline: 0 !important; }

body{ font-family: var(--secondary-font); font-size: clamp(1rem, 1.1vw, 1.125rem); font-weight: 400; font-style: normal; color: var(--text-color); line-height: 1.5; }
h1{ font-family: var(--primary-font); font-weight: 600; font-size: clamp(2.5rem, 4.5vw, 4.375rem); line-height: 1.1; color: var(--text-color); margin: 0; text-transform: uppercase; }
h2{ font-family: var(--primary-font); font-weight: 600; font-size: clamp(2rem, 4.5vw, 4.375rem); line-height: 1.1; color: var(--text-color); margin: 0; text-transform: unset; }
h3{ font-family: var(--secondary-font); font-weight: 300; font-size: clamp(1.25rem, 2.8vw, 1.875rem); line-height: 1.1; color: var(--text-color); margin: 0; }
h4{ font-family: var(--primary-font); font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.25; color: var(--text-color); margin: 0 0 16px; }
h5{ font-family: var(--primary-font); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.3; color: var(--text-color); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .08em; }
h6{ font-family: var(--primary-font); font-weight: 600; font-size: clamp(0.95rem, 1.4vw, 1rem); line-height: 1.3; color: var(--secondary-color); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .12em; }

/* FOOTER ALTIJD ONDERAAN DE PAGINA, OOK ALS DE PAGINA TE KORT IS */
body{ min-height: 100vh; display: flex; flex-direction: column; } 
main{ flex: 1; }

/* Buttons */
.btn {font-family:var(--secondary-font); font-weight:600; font-size:1rem; line-height:1.2; border-radius:var(--border-radius); padding: 10px 20px; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none !important; cursor:pointer; text-transform: uppercase; transition: all 0.5s;}
.btn[href*="whatsapp"]::after {content: var(--wa); font-family: "Font Awesome 7 Brands";}

p:has(.btn + .btn) { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px 24px; }

.btn.btn-primary { background-color: transparent; color: var(--text-color); border-color: var(--text-color); }
.btn.btn-primary:is(:hover, :focus-visible, :active) { background: rgb(from var(--text-color) r g b / 0.25); backdrop-filter: blur(5px); }

.btn.btn-secondary { background-color: var(--secondary-color); color: var(--white); border-color: var(--secondary-color); }
.btn.btn-secondary:is(:hover, :focus-visible, :active) { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--white); }

.btn.btn-tertiary { background-color: var(--tertiary-color); color: var(--primary-color); border-color: var(--tertiary-color); }
.btn.btn-tertiary:is(:hover, :focus-visible, :active) { background-color: var(--secondary-color); border-color: var(--secondary-color); color: var(--white); }

.btn.btn-info { background-color: transparent; color: var(--primary-color); border-color: var(--primary-color); }
.btn.btn-info:is(:hover, :focus-visible, :active) { background: rgb(from var(--primary-color) r g b / 0.25); backdrop-filter: blur(5px); }

.btn.btn-default { background-color: var(--primary-color); color: var(--white); border-color: var(--primary-color); }
.btn.btn-default:is(:hover, :focus-visible, :active) { background-color: var(--secondary-color); border-color: var(--secondary-color); }

.btn.back { flex-direction: row-reverse; &::after {content: var(--arrow-left);} }

figure{ margin-bottom: 0; }

/* STYLING LINKJES IN TEKST */
a:not(.btn):not(:has(img)):not( .item) { color: var(--text-color); text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
a:not(.btn):not(:has(img)):not( .item):is(:hover, :focus-visible) { color: var(--tertiary-color); text-decoration-color: var(--tertiary-color); }
a:not(.btn):not(:has(img)):not( .item):active { color: var(--secondary-color); }

.container-fluid.content ul { padding-left: 0; }
.container-fluid.content ul li { list-style: none; position: relative; padding-left: 24px; }
.container-fluid.content ul li::before { content: var(--angler-right); font-family: var(--font-awesome); font-weight: 400; font-style: normal; position: absolute; left: 0; top: 2px; }


.row > .container { width: 100%; margin-right: auto; margin-left: auto; }

/* ============================================
		MELDING
=============================================*/
.container-fluid.notification{ background: var(--warning); font-size: 1rem; color: var(--white); text-align: center; text-transform: uppercase; }
.container-fluid.notification a{ color: var(--white); text-decoration: none; }
.container-fluid.notification a:hover{ color: var(--white); text-decoration: underline; }
.container-fluid.notification p{ margin: 5px 0; }

/* ============================================
		TOP
=============================================*/
.container-fluid.top{ }

/* ============================================
		NAVIGATIE
=============================================*/
.container-fluid.navigation { background-color: var(--white); padding: 12px calc(var(--bs-gutter-x) * .5); position: sticky; top: 0; z-index: 99; }
.container-fluid.navigation .collapse { justify-content: flex-end; }
.container-fluid.navigation .navbar-brand { max-width: 150px; width: 100%; flex-shrink: 0; display: flex; align-items: center; transition: max-width 0.3s ease-in-out; }
.container-fluid.navigation .navbar-brand img{ width: 100%; }
.container-fluid.navigation .navbar-nav { gap: 28px; }
.container-fluid.navigation .navbar-nav .nav-item { position: relative; }
.container-fluid.navigation .navbar-nav .nav-item .nav-link { font-family: var(--secondary-font); font-weight: 600; font-size: 1rem; padding: 4px 0; color: var(--primary-color); position: relative; text-decoration: none; transition: color .2s ease; }
.container-fluid.navigation .navbar-nav .nav-item .nav-link::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0%; height: 2px; background-color: var(--tertiary-color); transition: width .25s ease; }
.container-fluid.navigation .navbar .navbar-collapse .navbar-nav .nav-item.dropdown:is(:hover, :focus, :focus-visible, :target, :focus-within, :active) .dropdown-menu { display: flex; }

.navbar-toggler:focus{ box-shadow: none !important; }
.container-fluid.navigation .navbar-toggler{ border: 0; border-radius: 0; padding-right: 0; }

.container-fluid.navigation .navbar-nav .dropdown.nav-item:hover .dropdown-menu{ display: flex; flex-direction: column; gap: 6px; }
.container-fluid.navigation .navbar-nav .nav-item.dropdown > .nav-link span::after {content: var(--angler-down); font-family: var(--font-awesome); display: inline-block; transition: all 0.5s ease-in-out;}
.container-fluid.navigation .navbar-nav .nav-item.dropdown:is(:hover, :focus-visible) > .nav-link span::after {transform: rotate(180deg);}

/* ============================================
		SLIDER/BANNER
=============================================*/
.container-fluid.mainbanner .col-md-12{ padding: 0; }
.container-fluid.mainbanner img{ width: 100%; }

.container-fluid.banner{ padding: 0; position: relative; }
.container-fluid.banner img{ width: 100%; }
.container-fluid.banner .content{ position: absolute; bottom: 0px; left: 0; width: 100%; z-index: 2; }
.container-fluid.banner .content .text{ }
.container-fluid.banner .content .text h1{ color: var(--white); }

/* ============================================
		CONTENT
=============================================*/
.container-fluid.content{  }

/* ============================================
		MODULES
=============================================*/
.block:is(.product, .list, .calendar):has(.item){ row-gap: 24px}

/* BREADCRUMBS */
.container-fluid.breadcrumb{  }
.block.breadcrumb{ padding: 0; margin-bottom: 0; }
.block.breadcrumb ul{ padding-left: 0; margin-bottom: 0; }
.block.breadcrumb ul li{ list-style: none; display: inline; color: var(--grey); }
.block.breadcrumb ul li.breadcrumarrow:after{ content: "\f105"; font-family: var(--font-awesome); font-weight: 400; font-style: normal; margin: 0 10px; }
.block.breadcrumb ul li a{ font-weight: 300; color: var(--grey); }
.block.breadcrumb ul li:last-child a{ font-weight: 500; color: var(--grey); }

/* BESCHIKBAARHEID */
.block.availability{ position: relative; float: right; }
.block.availability .availa_column .available:before{ content: '\f111'; font-family: var(--font-awesome); font-size: 8px; font-weight: 900; color: #41ab34; display: block; position: absolute; left: 5px; top: 0; }
.block.availability .availa_column .not_available:before{ content: '\f111'; font-family: var(--font-awesome); font-size: 8px; font-weight: 900; color: var(--warning); display: block; position: absolute; left: 5px; top: 0; }
.block.availability .availa_column .available,
.block.availability .availa_column .not_available{ padding-left: 25px; }

/* INPUT */
.block.list.input{}
.block.list.input .col-md-6.col-lg-4{ margin-bottom: 30px; }
.block.list.input a{ color: var(--text-color); }
.block.list.input a:hover{ color: var(--text-color); text-decoration: none; }
.block.list.input .item{ position: relative; height: 100%; border: 1px solid var--(light-grey); }
.block.list.input .item .image{ position: relative; }
.block.list.input .item .image img{ }
.block.list.input .item .content{ padding: 20px 20px 70px 20px; }
.block.list.input .item .content h3{ margin-top: 0px; }
.block.list.input .item .content .text{ }
.block.list.input .item .content .btn.btn-primary{ position: absolute; bottom: 20px; right: 20px; }

/* NEWS */
.block.list.news{}
.block.list.news a{ color: var(--text-color); }
.block.list.news a:hover{ color: var(--text-color); text-decoration: none; }
.block.list.news .item{ position: relative; height: 100%; border: 1px solid var--(light-grey); }
.block.list.news .item .image{ position: relative; }
.block.list.news .item .image img{ }
.block.list.news .item .image .overlay{ position: absolute; bottom: 10px; right: 10px; }
.block.list.news .item .image .overlay span{ background: var(--black); color: var(--white); padding: 5px; }
.block.list.news .item .content{ padding: 20px 20px 70px 20px; }
.block.list.news .item .content h3{ margin-top: 0px; }
.block.list.news .item .content .text{ }
.block.list.news .item .content .btn.btn-primary{ position: absolute; bottom: 20px; right: 20px; }

/* LOGO SLIDER */
.block.list.logoslider{}
.block.list.logoslider .item{ padding: 0; }

/* VACATURES */
.block.list.vacatures{}
.block.list.vacatures a{ color: var(--text-color); }
.block.list.vacatures a:hover{ color: var(--text-color); text-decoration: none; }
.block.list.vacatures .item{ position: relative; height: 100%; border: 1px solid var--(light-grey); }
.block.list.vacatures .item .image{ position: relative; }
.block.list.vacatures .item .image img{}
.block.list.vacatures .item .image .overlay{ position: absolute; bottom: 10px; right: 10px; }
.block.list.vacatures .item .image .overlay span{ background: var(--black); color: var(--white); padding: 5px; }
.block.list.vacatures .item .content{ padding: 20px 20px 70px 20px; }
.block.list.vacatures .item .content h3{ margin-top: 0px; }
.block.list.vacatures .item .content .text{}
.block.list.vacatures .item .content .btn.btn-primary{ position: absolute; bottom: 20px; right: 20px; }

/* FAQ */
details{ overflow: hidden; padding: 10px 20px; background: var(--white); margin-bottom: 10px; }
details summary span{ margin-left: 5px; }
details .content{ overflow: hidden; height: 0; transition: height 0.5s ease; margin-top: 10px; }

/* TEAM */
.block.list.team{}
.block.list.team a{ color: var(--text-color); }
.block.list.team a:hover{ color: var(--text-color); text-decoration: none; }
.block.list.team .item{ position: relative; height: 100%; border: 1px solid var--(light-grey); }
.block.list.team .item .image{ position: relative; }
.block.list.team .item .image img{}
.block.list.team .item .image .overlay{ position: absolute; bottom: 10px; right: 10px; }
.block.list.team .item .image .overlay span{ background: var(--black); color: var(--white); padding: 5px; }
.block.list.team .item .content{ padding: 20px; }
.block.list.team .item .content h3{ margin-top: 0px; }
.block.list.team .item .content h4{ margin-top: 0px; }
.block.list.team .item .content .functie{}

/* CONTACTPAGINA */
.row.maps .col-lg-12{ padding: 0; }
.row.maps .block.html.map{ margin-top: 25px; margin-bottom: -59px; }
.block.html.contact-details a { color: var(--text-color); text-decoration: none; }
.block.html.contact-details a:hover { color: var(--primary-color); text-decoration: underline; }
.block.html.contact-details table tbody { display: flex; flex-direction: row; flex-wrap: wrap; }
.block.html.contact-details table tbody tr { width: 50%; }
.block.html.contact-details table tbody tr td { padding: 10px 0; }
.block.html.contact-details table tbody tr i { font-size: 1.5rem; vertical-align: top; margin-right: 15px; color: var(--primary-color); }

/* FORMULIER */
.block.form .form-group { margin-bottom: 15px; }
.block.form .form-group:has(select){ position: relative; }
.block.form .form-group:has(select)::after{ content: '\f078'; font-family: var(--font-awesome); font-size: 1rem; position: absolute; top: calc(50% - 12px); right: 20px; pointer-events: none; }
.block.form .form-group textarea{ field-sizing: content; min-height: 100px; } 
.block.form .form-group :is(input:not(.btn), textarea) { width: 100%; padding: 10px; border: 1px solid var(--primary-color); border-radius: 5px; color: var(--primary-color); }
.block.form .form-group :is(input, textarea)::placeholder { color: var(--primary-color); }

/* GALLERIJ */
.block.gallery .item{ position: relative; margin-bottom: 30px; }
.block.gallery .item .text{ position: absolute; bottom: 0; left: 20px; width: 100%; }
.block.gallery .item .text .title{  }
.block.gallery .item .text .title h2{ font-size: 26px; font-weight: 500; color: var(--white); text-shadow: 2px 2px 5px rgba(0,0,0,0.8); }
.block.gallery .item .overlay{ visibility: hidden; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(66,66,66,0.5); transition: all 0.2s ease-in-out; }
.block.gallery .item .overlay span{ position: absolute; top: calc(50% - 15px); left: 0; width: 100%; text-align: center; font-size: 30px; color: var(--white); }
.block.gallery .item:hover .overlay{ visibility: visible; opacity: 1; }

.block.gallery .gallery_top{ margin-bottom: 20px; } 

/* KALENDER */
.block.calendar{}
.block.calendar a{ color: var(--text-color); }
.block.calendar a:hover{ color: var(--text-color); text-decoration: none; }
.block.calendar .item{ position: relative; height: 100%; border: 1px solid var(--light-grey); }
.block.calendar .item .image{ position: relative; }
.block.calendar .item .image img{}
.block.calendar .item .image .date{ position: absolute; bottom: 10px; right: 10px; }
.block.calendar .item .image .date span{ background: var(--black); color: var(--white); padding: 5px; }
.block.calendar .item .content{ padding: 20px 20px 70px 20px; }
.block.calendar .item .content h3{ margin-top: 0px; }
.block.calendar .item .content .text{}
.block.calendar .item .content .btn.btn-primary{ position: absolute; bottom: 20px; right: 20px; }

/* PRODUCTEN */
.block.product{}
.block.product a{ color: var(--text-color); }
.block.product a:hover{ color: var(--text-color); text-decoration: none; }
.block.product .item{ position: relative; height: 100%; border: 1px solid var(--light-grey); }
.block.product .item .image{ position: relative; }
.block.product .item .image img{}
.block.product .item .image .overlay{ position: absolute; bottom: 10px; right: 10px; }
.block.product .item .image .overlay span{ background: #000000; color: var(--white); padding: 5px; }
.block.product .item .content{ padding: 20px 20px 70px 20px; }
.block.product .item .content h3{ margin-top: 0px; } 
.block.product .item .content .text{}
.block.product .item .content .btn.btn-primary{ position: absolute; bottom: 20px; right: 20px; }

/* POP-UP */
.modal .modal-dialog{ max-width: 650px; }
.modal .modal-dialog .modal-content .modal-header{ padding: 1rem 1.5rem; }
.modal .modal-dialog .modal-content .modal-header h3{ margin-top: 0; }
.modal .modal-dialog .modal-content .modal-body{ padding: 1.5rem; }

/* SITEMAP */
.block.sitemap .sitemap_ul .sitemap_ul{ margin: 5px 0; }
.block.sitemap .sitemap_ul .sitemap_li:before{ font-size: 1rem; top: 1px; }
.block.sitemap a{ text-decoration: none; color: var(--text-color); }
/* .block.sitemap a:hover{ color: var(--primary-color); } */

/* ============================================
		FOOTER
=============================================*/
.container-fluid.footer-endpage { background: #2B2B2B; }
.container-fluid.footer-endpage .footer { color: var(--white); padding-top: 50px; padding-bottom: 50px; }
.container-fluid.footer-endpage .footer h2 { font-size: 22px; color: var(--white); line-height: 30px; margin-top: 0; margin-bottom: 15px; }
.container-fluid.footer-endpage .footer a { text-decoration: none; }
.container-fluid.footer-endpage .footer i { color: var(--primary-color); font-size: 25px; margin-right: 10px; }
.container-fluid.footer-endpage .footer ul li { list-style: none; position: relative; }
.container-fluid.footer-endpage .footer ul li:before { content: '\f105'; font-family: var(--font-awesome); position: absolute; left: -25px; }
.container-fluid.footer-endpage .footer table tr:first-child { height: 75px; }
.container-fluid.footer-endpage .footer table tr { height: 50px; }
.container-fluid.footer-endpage .footer table tr td { vertical-align: top; }
.container-fluid.footer-endpage .footer table tr td:nth-child(1) { width: 30px !important; vertical-align: top; }
.container-fluid.footer-endpage .footer .logo img { filter: invert(1); }
.container-fluid.footer-endpage .footer .block.menuitem .navbar-nav { padding: 0; }
.container-fluid.footer-endpage .footer .block.menuitem .navbar-nav .nav-item::before { display: none; }
.container-fluid.footer-endpage .footer .block.menuitem .navbar-nav .nav-item .nav-link { padding: 0; }
.container-fluid.footer-endpage .footer .socials { display: flex; justify-content: end; }

/* ============================================
		ENDPAGE
=============================================*/
.container-fluid.footer-endpage .endpage { color: var(--white); padding-top: 3px; padding-bottom: 1.5rem; }
.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(1) {}
.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(2) { text-align: center; }
.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(3) { text-align: right; }
.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(3) img { max-width: 30px; }
.container-fluid.footer-endpage .endpage ul { margin-bottom: 0; padding-left: 0; }
.container-fluid.footer-endpage .endpage ul li { list-style: none; display: inline; }
.container-fluid.footer-endpage .endpage ul li:after { content: "|"; margin: 0 5px; }
.container-fluid.footer-endpage .endpage ul li:last-child:after { content: ""; margin: 0; }
.container-fluid.footer-endpage .endpage a { text-decoration: none; color: var(--white); }

/* Hover */
.container-fluid.footer-endpage .footer a:is(:hover, :focus-visible) { text-decoration: underline; color: var(--primary-color); }
.container-fluid.footer-endpage .footer .socials a:is(:hover, :focus-visible) i { color: var(--white); }
.container-fluid.footer-endpage .endpage a:is(:hover, :focus-visible) { text-decoration: underline; color: var(--primary-color); }
.container-fluid.footer-endpage .endpage a:is(:hover, :focus-visible) img { filter: invert(54%) sepia(97%) saturate(3788%) hue-rotate(1deg) brightness(101%) contrast(106%); }

/* ============================================
		MOBIEL MENU
=============================================*/
.modal.fixed-left {  }
.modal.fixed-left .modal-dialog-vertical { height: 100%; width: 100vw; max-width: none; margin: 0; transition: transform 0.3s; transform: translateX(-100%); }
.modal.fixed-left.show .modal-dialog-vertical { transform: translateX(0); }
.modal.fixed-left .modal-content { border-radius: 0; border: none; min-height: 100%; justify-content: space-between; overflow: hidden; background: var(--primary-color); background: var(--primary-color-75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Title bar */
.modal.fixed-left .title-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; }
.modal.fixed-left .title-bar h5 { margin: 0; }
.modal.fixed-left .title-bar h5 img { max-width: 130px; filter: invert(1); display: block; }
.modal.fixed-left .title-bar .close-btn-wrap { display: flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--white); font-size: 0.9rem; cursor: pointer; padding: 6px 0; }
.modal.fixed-left .title-bar .close-btn-wrap .close-label { font-size: 0.875rem; font-weight: 500; }
.modal.fixed-left .title-bar .close-btn-wrap i { font-size: 1rem; }

/* Section title MENU */
.modal.fixed-left .menu-content .main-menu .section-title { padding: 20px 15px 6px; margin: 0; color: var(--white); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

/* Nav items */
.modal.fixed-left .menu-content .main-menu .navbar-nav { padding: 0; margin: 0; list-style: none; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li { position: relative; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 500; color: var(--white); font-size: 1rem; transition: transform 0.4s, opacity 0.4s; transform: translateX(-30px); opacity: 0; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li::before { content: ''; position: absolute; bottom: 0; left: 15px; right: 15px; height: 1px; background: rgb(255 255 255 / 20%); }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li { transform: none; opacity: 1; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(1) { transition-delay: 0.1s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(2) { transition-delay: 0.2s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(3) { transition-delay: 0.3s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(4) { transition-delay: 0.4s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(5) { transition-delay: 0.5s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(6) { transition-delay: 0.6s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(7) { transition-delay: 0.7s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(8) { transition-delay: 0.8s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(9) { transition-delay: 0.9s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(10) { transition-delay: 1s; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li a { padding: 14px 15px; font-weight: 500; flex-grow: 1; text-decoration: none; color: var(--white); display: flex; align-items: center; font-size: 1rem; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li.active a { opacity: 0.7; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li a i { margin-right: 10px; width: 20px; display: inline-flex; justify-content: flex-end; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li::after { font-family: var(--font-awesome); font-weight: 900; padding-right: 15px; color: var(--white); font-size: 0.85rem; flex-shrink: 0; }
/* .modal.fixed-left .menu-content .main-menu .navbar-nav li:not(.dropdown)::after { content: '\e09f'; } */
.modal.fixed-left .menu-content .main-menu .navbar-nav li.dropdown::after { content: '\f061'; transition: transform 0.3s; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li.dropdown .dropdown-menu.show { display: none; }

/* Submenu / first-sub */
.modal.fixed-left .menu-content { overflow: hidden; }
.modal.fixed-left .menu-content nav { width: 200%; display: flex; transition: transform 0.3s; }
.modal.fixed-left .menu-content nav > * { width: 50%; flex-shrink: 0; }
.modal.fixed-left .menu-content nav.open { transform: translateX(-50%); }
.modal.fixed-left .menu-content nav .sub-menu { display: none; }
.modal.fixed-left .menu-content .first-sub .sub-header { display: flex; align-items: center; cursor: pointer; padding: 12px 15px; gap: 8px; position: relative; }
.modal.fixed-left .menu-content .first-sub .sub-header::after { content: ''; position: absolute; bottom: 0; left: 15px; right: 15px; height: 1px; background: rgb(255 255 255 / 20%); }
.modal.fixed-left .menu-content .first-sub .sub-header .back-btn { color: var(--white); display: flex; align-items: center; font-size: 0.9rem; }
.modal.fixed-left .menu-content .first-sub .sub-header h5 { margin-bottom: 0; line-height: 1; color: var(--white); font-family: var(--secondary-font); text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 500; flex-grow: 1; }
.modal.fixed-left .menu-content .first-sub .sub-header .button-filler { width: 20px; flex-shrink: 0; }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu { display: block; padding: 0; width: 100%; margin: 0; list-style: none; position: relative!important; transform: none!important; border: none; background: none; }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li { position: relative; }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li::before { content: ''; position: absolute; bottom: 0; left: 15px; right: 15px; height: 1px; background: rgb(255 255 255 / 20%); }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li a { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 14px 15px; color: var(--white); font-size: 1rem; font-weight: 500; text-decoration: none; }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li a::after { content: '\e09f'; font-family: var(--font-awesome); font-weight: 900; font-size: 0.85rem; flex-shrink: 0; }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li a i { margin-right: 10px; font-size: 1rem; width: 20px; display: flex; align-items: center; }

/* Footer */
.modal.fixed-left .menu-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 0; padding: 15px; margin-top: auto; color: var(--white); transform: translateY(20px); opacity: 0; transition: transform 0.5s, opacity 0.5s; transition-delay: 0.3s; }
.modal.fixed-left .menu-footer .footer-links { flex: 0 0 auto; }
.modal.fixed-left .menu-footer .footer-links ul {list-style: none; display: flex; gap: 15px; padding: 0; margin: 0;}
.modal.fixed-left .menu-footer .footer-links ul li { width: fit-content;}
.modal.fixed-left .menu-footer .footer-links ul li a { font-size: 1.125rem; color: var(--white); text-decoration: none; }
.modal.fixed-left .menu-footer .socials { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; }
.modal.fixed-left .menu-footer .socials a { text-decoration: none; }
.modal.fixed-left .menu-footer .socials a .item { }
.modal.fixed-left .menu-footer .socials a .item i { font-size: 1.5rem; color: var(--white); }
.modal.fixed-left .menu-footer .lr-logo {flex: 0 0 100%; display: flex; justify-content: flex-end; margin-bottom: 10px; border-top: 1px solid rgb(from var(--white) r g b / 0.8); padding-top: 24px;}
.modal.fixed-left .menu-footer .lr-logo a { display: flex; }
.modal.fixed-left .menu-footer .lr-logo a img {opacity: 0.5;}
.modal.fixed-left.show .menu-footer { transform: translateY(0); opacity: 1; }

.modal.fixed-left .menu-footer {gap: 12px 0;}
.modal.fixed-left .menu-footer .socials {order: 1; flex: 0 0 100%; padding-bottom: 12px; justify-content: flex-start; border-bottom: 1px solid rgb(from var(--white) r g b / 0.8);}
.modal.fixed-left .menu-footer .footer-links {order: 2;}
.modal.fixed-left .menu-footer .footer-links ul li a {font-size: 0.875rem;}
.modal.fixed-left .menu-footer .lr-logo {order: 3; flex: 0 0 auto; border-top: unset; padding: 0; margin-bottom: 0;}
	

/* Hover */
.modal.fixed-left .title-bar .close-btn-wrap:is(:hover, :focus-visible) { opacity: 0.8; }
.modal.fixed-left .title-bar .close-btn-wrap:focus-visible { box-shadow: 0 0px 0px 2px rgb(255 255 255 / 25%); border: 2px solid rgb(255 255 255 / 50%); }
.modal.fixed-left .menu-content .main-menu .navbar-nav li:is(:hover, :focus-visible) a { opacity: 0.75; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li.dropdown:is(:hover, :focus-visible)::after { transform: translateX(3px); }
.modal.fixed-left .menu-content .first-sub .sub-header:is(:hover, :focus-visible) { background: rgb(0 0 0 / 5%); }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li a:is(:hover, :focus-visible) { opacity: 0.75; }



/* ============================================
        MARGIN
=============================================*/
.mt-6{ margin-top: 4rem !important; }
.mt-7{ margin-top: 5rem !important; }
.mt-8{ margin-top: 6rem !important; }
.mt-9{ margin-top: 7rem !important; }
.mt-10{ margin-top: 8rem !important; }
 
.me-6{ margin-right: 4rem !important; }
.me-7{ margin-right: 5rem !important; }
.me-8{ margin-right: 6rem !important; }
.me-9{ margin-right: 7rem !important; }
.me-10{ margin-right: 8rem !important; }
 
.mb-6{ margin-bottom: 4rem !important; }
.mb-7{ margin-bottom: 5rem !important; }
.mb-8{ margin-bottom: 6rem !important; }
.mb-9{ margin-bottom: 7rem !important; }
.mb-10{ margin-bottom: 8rem !important; }
 
.ms-6{ margin-left: 4rem !important; }
.ms-7{ margin-left: 5rem !important; }
.ms-8{ margin-left: 6rem !important; }
.ms-9{ margin-left: 7rem !important; }
.ms-10{ margin-left: 8rem !important; }
 
.my-6{ margin-top: 4rem !important; margin-bottom: 4rem !important; }
.my-7{ margin-top: 5rem !important; margin-bottom: 5rem !important; }
.my-8{ margin-top: 6rem !important; margin-bottom: 6rem !important; }
.my-9{ margin-top: 7rem !important; margin-bottom: 7rem !important; }
.my-10{ margin-top: 8rem !important; margin-bottom: 8rem !important; }
 
.mx-6{ margin-left: 4rem !important; margin-right: 4rem !important; }
.mx-7{ margin-left: 5rem !important; margin-right: 5rem !important; }
.mx-8{ margin-left: 6rem !important; margin-right: 6rem !important; }
.mx-9{ margin-left: 7rem !important; margin-right: 7rem !important; }
.mx-10{ margin-left: 8rem !important; margin-right: 8rem !important; }
 
/* ============================================
        PADDING
=============================================*/
.pt-6{ padding-top: 4rem !important; }
.pt-7{ padding-top: 5rem !important; }
.pt-8{ padding-top: 6rem !important; }
.pt-9{ padding-top: 7rem !important; }
.pt-10{ padding-top: 8rem !important; }
 
.pe-6{ padding-right: 4rem !important; }
.pe-7{ padding-right: 5rem !important; }
.pe-8{ padding-right: 6rem !important; }
.pe-9{ padding-right: 7rem !important; }
.pe-10{ padding-right: 8rem !important; }
 
.pb-6{ padding-bottom: 4rem !important; }
.pb-7{ padding-bottom: 5rem !important; }
.pb-8{ padding-bottom: 6rem !important; }
.pb-9{ padding-bottom: 7rem !important; }
.pb-10{ padding-bottom: 8rem !important; }
 
.ps-6{ padding-left: 4rem !important; }
.ps-7{ padding-left: 5rem !important; }
.ps-8{ padding-left: 6rem !important; }
.ps-9{ padding-left: 7rem !important; }
.ps-10{ padding-left: 8rem !important; }
 
.py-6{ padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-7{ padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-8{ padding-top: 6rem !important; padding-bottom: 6rem !important; }
.py-9{ padding-top: 7rem !important; padding-bottom: 7rem !important; }
.py-10{ padding-top: 8rem !important; padding-bottom: 8rem !important; }
 
.px-6{ padding-left: 4rem !important; padding-right: 4rem !important; }
.px-7{ padding-left: 5rem !important; padding-right: 5rem !important; }
.px-8{ padding-left: 6rem !important; padding-right: 6rem !important; }
.px-9{ padding-left: 7rem !important; padding-right: 7rem !important; }
.px-10{ padding-left: 8rem !important; padding-right: 8rem !important; }

/* ============================================
		MOBIEL
=============================================*/

.row > .container{ max-width: var(--container-width); }

@media only screen and (max-width: 1599px) {
	:root{ --container-width: 1320px; }
}

@media only screen and (max-width: 1399px) {
	:root{ --container-width: 1140px; }
}

/* ================================================== */
@media only screen and (max-width: 1199px) {
	:root{ --container-width: 960px; }
}
/* ================================================== */
@media only screen and (max-width: 991px) {
	:root{ --container-width: 720px; }
}
/* ================================================== */
@media only screen and (max-width: 767px) {
	:root{ --container-width: 540px; }
	
	.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(1){ text-align: center; }
	.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(3){ text-align: center; }
	.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(3) img{ max-width: 30px; }
}
/* ================================================== */
@media only screen and (max-width: 575px) {
	:root{ --container-width: 100%; }
	.container { max-width: none; }
	.btn{ font-size: 1rem; }

	.modal.fixed-left .menu-footer .footer-links ul li a {font-size: 1rem;}
}

/* ================================================== */
@media only screen and (max-width: 479px) {
	.btn{ width: 100%; font-size: 0.95rem; }

	.modal.fixed-left .menu-footer .footer-links ul li a {font-size: 0.875rem;}

	
}