@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap');

:root {
	--primary: #7965C1;
	--secondary: #E3D095;
	--dark: #0E2148;
	--dark-text: #1E295D;
	--light: #EBE8F6;

	--text-light: rgba(255, 255, 255, 0.8);
}

* {
	box-sizing: border-box;
	margin: 0px;
}

body {
	margin: 0px;
	padding: 0px;
	font-family: 'DM Sans', sans-serif;
}

.material-symbols-rounded,
.material-symbols-outlined,
.material-symbols-sharp {
	font-variation-settings: 
		'FILL' 0, 
		'wght' 300, 
		'GRAD' 0, 
		'opsz' 48;
}


#wrapper {
	max-width: 1100px;
	margin: 0px auto;
}

/* global elements styling */
h2 {
	font-size: 35px;
	line-height: 42px;
	margin-bottom: 10px;
	letter-spacing: -0.3px;
}
h4 {
	margin-bottom: 15px;
}
p {
	margin: 20px 0;
	line-height: 30px;
}
p,li {
	line-height: 27px;
	font-size: 17px;
	color: var(--text);
}
ul {
	padding-left: 0px;
}
li {
	list-style-type: none;
	position: relative;
	padding-left: 25px;
}
.content-section li:before,
.ul-list-items li:before {
	content: "\f192";
	font-family: "Font Awesome 6 Free";
	font-size: 14px;
	position: absolute;
	top: 2px;
	left: 0;
	color: var(--primary);
}

.btn {
	background-color: var(--primary);
	padding: 10px 20px;
	border-radius: 12px;
	text-decoration: none;
	font-weight: 500;
	border: 2px solid #483AA0;
	box-shadow: 0 2px 0 0 #483AA0;
	display: inline-flex;
	text-align: center;
	transition: 0.25s;
	overflow-clip-margin: unset;
	will-change: transform;
	color: white;
	font-family: 'DM Sans', sans-serif !important;
}
.btn:hover {
	box-shadow: unset;
	transform: translateY(2px);
}

.btn.sec {
	background-color: white;
	border-color: #DFE1E3;
	box-shadow: 0 2px 0 0 #DFE1E3;
	color: black !important;
}
.btn.sec:hover {
	box-shadow: unset;
	transform: translateY(2px);
}

.btn.flat {
	background-color: unset;
	color: var(--titles);
	padding-left: unset;
	padding-right: unset;
	border-color: transparent;
}
.btn.flat:hover {
	transform: unset;
}
.btn.flat:hover:after {
	margin-left: 15px;
	background-color: var(--titles);
	color: white;
}
.btn.flat:after {
	content: "\f061";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-left: 10px;
	font-size: 14px;
	min-width: 25px;
	min-height: 25px;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--titles);
	transition: 0.15s;
}

.sub-title {
	color: #BCA9FF;
	font-size: 15px;
	text-transform: uppercase;
}

/* --------------------------------- */


.header .logo {
	transition: all 0.3s ease;
	width: 155px;
}

.header .logo.logo-shrink {
	width: 115px; /* kleinere versie bij scroll */
}

header {
	padding: 30px 0;
	width: 100%;
	z-index: 99999;
	background-color: var(--dark);
	position: sticky;
	top: 0;
	box-shadow: 0 -14px 42px #7965c1;
}
header #wrapper {
	max-width: 80%;
	/* border: 1px solid red; */
}
header nav .content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
}
header .header-links {
	margin: 0px;
	padding: 0px;
	display: flex;
	align-items: center;
}
header .header-links li a {
	color: white;
	text-decoration: none;
}
header .left {
	position: relative;
}
header .logo-container {
	background-color: white;
	padding: 20px 20px 10px 20px;
	position: absolute;
	top: -60px;
	border-radius: 0 0 27px 27px;
}
header .float-right {
	justify-content: end;
	display: flex;
	gap: 15px;
}
header .logo {
	transition: 0.25s;
}
header .middle {
	width: 120%;
}

#hero {
	padding: 140px 0;
	background-color: var(--light);
	position: relative;
}
#hero .content {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 1fr;
}
#hero .image-float {
	position: absolute;
	width: 40%;
	height: 100%;
	top: 0;
	right: 0;
}
#hero .image-float img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 0 0 0 150px;
}
#hero .btn {
	margin-right: 13px;
}
#hero h1 {
	font-size: 50px;
	line-height: 55px;
	color: var(--dark-text);
}
#hero .intro,
#hero .intro p {
	color: var(--dark-text);
	margin: 30px 0;
}
#hero #myVideo {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 0 0 0 150px;
}

body.home {
	background-color: var(--dark);
}
#usps-hero .slick-slide,
#usp-blocks .slick-slide {
	margin: 0 10px !important; /* gap size */
}
#usps-hero .slick-list,
#usp-blocks .slick-list {
	margin: 0 -10px !important; /* fix left/right cut-off */
}
#usps-hero {
	position: relative;
	z-index: 999;
	margin-top: -45px;
}
#usps-hero .content {
	/* 	display: grid;
	grid-template-columns: repeat(2, 1fr); */
	width: 65%;
	gap: 25px;
}
#usps-hero .usp {
	border: 1px solid #70709C;
	background-color: #000F2F;
	border-radius: 15px;
	display: flex;
	align-items: center;
}
#usps-hero .usp .img {
	background-color: var(--primary);
	min-width: 70px;
	min-height: 70px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#usps-hero .usp .img i {
	color: white;
	font-size: 25px;
}

#usps-hero .usp h4 {
	color: white;
	margin: 0 0 0 15px;
}

#usps-hero .material-symbols-rounded,
#usps-hero .material-symbols-outlined,
#usps-hero .material-symbols-sharp {
	font-size: 40px;
	color: white;
}

video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 12px;
}

.play-pause {
	position: absolute;
	bottom: 40px;
	right: 40px;
	background-color: rgba(0,0,0,0.6);
	color: white;
	border: none;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	cursor: pointer;
	transition: 0.3s;
}
.play-pause i {
	font-size: 15px;
}

.play-pause:hover {
	background-color: rgba(255,255,255,0.8);
	color: black;
}



#diensten {
	padding: 130px 0;
	background-color: var(--dark);
}
#diensten #wrapper {
	max-width: 75%;
}
#diensten .top-content {
	text-align: center;
	max-width: 50%;
	margin: 0px auto;
}
#diensten .top-content h2 {
	color: white;
}
#diensten .top-content .intro {
	color: var(--text-light);
}
#diensten .content {
	margin-top: 60px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 30px;
	align-items:stretch;
}
#diensten .content > a.dienst{
	display:flex;                 /* equal-height cards */
	flex-direction:column;
	height:100%;                  /* fill grid track */
	text-decoration:none;
}
#diensten .content .card-bottom{
	flex:1;                       /* take remaining height */
	display:flex;
	flex-direction:column;
}
#diensten .content > a.dienst .card-bottom > :last-child {
	margin-top:auto;
}
#diensten .content .card-bottom .leesmeer{
	margin-top:auto;              /* stick CTA at bottom */
}

#diensten .dienst {
	text-decoration: none;
}
#diensten .dienst:hover .card-bottom {
	border-color: var(--secondary);
}
#diensten .dienst:hover .lees-meer i {
	transform: rotate(-25deg);
}
#diensten .dienst-title {
	position: absolute;
	bottom: 25px;
	left: 25px;
	color: white;
	font-size: 23px;
	font-weight: 600;
}
#diensten .img-wrapper .img-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	pointer-events: none; /* Zodat klikbaar blijft */
	transition: opacity 0.3s ease;
}
#diensten .dienst:hover .img-wrapper .img-overlay {
	opacity: 0.7; /* optioneel voor hover effect */
}
#diensten .img-wrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 200px;
}
#diensten .img-wrapper img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	overflow-clip-margin: unset;
	border-radius: 20px 20px 0 0;
}
#diensten .dienst .card-bottom {
	background-color: #000F2F;
	border-left: 1px solid #70709C;
	border-bottom: 1px solid #70709C;
	border-right: 1px solid #70709C;
	border-radius: 0 0 20px 20px;
	padding: 20px 25px 25px 25px;
	transition: 0.25s;
}
#diensten .dienst .card-bottom p {
	margin: 0 0 20px 0;
	color: white;
}
#diensten .dienst .lees-meer {
	margin-top: 30px;
	color: var(--secondary);
	text-decoration: none;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}
#diensten .dienst .lees-meer i {
	transition: 0.25s;
}

.content-sec {
	padding: 130px 0;
	background-color: var(--light);
}
.content-sec .content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 90px;
	align-items: center;
}
.content-sec .content-bottom {
	margin-top: 70px;
}
.content-sec .content .img-wrapper {
	width: 100%;
	height: 500px;
	position: relative;
}
.content-sec .content .img-wrapper .logo-small {
	height: auto;
	width: 240px;
	object-fit: unset;
	border-radius: unset;
	position: absolute;
	bottom: 0;
	left: -70px;
}
.content-sec .content .img-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	overflow-clip-margin: unset;
	border-radius: 25px 25px 25px 125px;
}
.content-sec .sub-title {
	color: #7965C1;
}
.content-sec h2 {
	color: var(--dark-text);
}
.content-sec p {
	color: var(--dark-text);
}
.content-sec .btn {
	margin-right: 10px;
}
.content-sec .buttons {
	margin-top: 30px;
}

.content-sec .content-bottom .usp-blocks {
	grid-template-columns: repeat(4, 1fr);
	display: grid;
	grid-gap: 20px;
}
.content-sec .content-bottom .usp-blocks .block {
	text-align: left;
}
.content-sec #usp-blocks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20px;
}
.content-sec .usp-blocks .block,
.content-sec #usp-blocks .block {
	background-color: var(--primary);
	border-radius: 15px;
	text-align: center;
	padding: 25px;
	border: 1px solid #483AA0;
}
.content-sec .usp-blocks .block *,
.content-sec #usp-blocks .block * {
	color: white;
}
.content-sec .usp-blocks .block h3,
.content-sec #usp-blocks .block h3 {
	font-size: 25px;
	font-weight: 600;
	margin-top: 5px;
}
.content-sec .usp-blocks .block h4,
.content-sec #usp-blocks .block h4 {
	font-size: 17px;
	font-weight: 600;
	margin: 10px 0;
}
.content-sec .usp-blocks .block p,
.content-sec #usp-blocks .block p{
	margin: 0px;
}
.content-sec .usp-blocks .block .material-symbols-rounded,
.content-sec #usp-blocks .block .material-symbols-rounded,

.content-sec .usp-blocks .block .material-symbols-sharp,
.content-sec #usp-blocks .block .material-symbols-sharp,

.content-sec .usp-blocks .block .material-symbols-outlined,
.content-sec #usp-blocks .block .material-symbols-outlined {
	font-size: 40px;
	position: relative;
	left: -2px;
}

#usp-blocks.lp .block {
	display: unset !important;
}

/* content section met background */
.content-sec.bg {
	background-color: var(--dark);
}
.content-sec.bg h2 {
	color: white;
}
.content-sec.bg p,
.content-sec.bg ul li {
	color: var(--text-light);
}
.content-sec.bg ul li:before {
	content: "\f192";
	font-family: "Font Awesome 5 Free";
	font-size: 12px;
	position: absolute;
	top: 0px;
	left: 0;
	font-weight: bold;
	color: #BCA9FF;
}
.content-sec.bg .sub-title {
	color: #BCA9FF;
}

/* content section reversed */
.content-sec.rev .img-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	overflow-clip-margin: unset;
	border-radius: 25px 25px 125px 25px;
}


#klanten .content.slick-slider { --gap: 16px; }              
#klanten .content .slick-list   { margin: 0 calc(var(--gap) * -0.5); }
#klanten .content .slick-slide  { padding: 0 calc(var(--gap) * 0.5); box-sizing: border-box; }
#klanten .content .slick-slide img { display: block; width: 100%; height: auto; }

#klanten {
	padding: 100px 0;
	background-color: var(--light);
}
#klanten h2 {
	margin-bottom: 40px;
}
#klanten .content {
	/* 	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 15px;
	margin-top: 40px;
	align-items: stretch; */
	gap: 15px;

}
#klanten .sub-title {
	color: #7965C1;
}
#klanten .content article,
#klanten .content .logo-link {
	background-color: white;
	padding: 15px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
#klanten .content .logo-link img {
	width: 120px !important;
	height: 60px !important;
	object-fit: contain !important;
	overflow-clip-margin: unset !important;
}

#faq {
	padding: 130px 0;
	background-color: var(--dark);
}
#faq .content-top {
	max-width: 50%;
	margin: 0px auto;
	text-align: center;
}
#faq h2 {
	color: white;
}
#faq .intro {
	color: var(--text-light);
}
#faq .content {
	margin-top: 50px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 50px;
}
#faq .align {
	text-align: center;
	margin-top: 50px;
}

.faq-question {
	position: relative;
	cursor: pointer;
	padding: 15px 28px 15px 0;
	/* border-bottom: 1px solid #fff; */
	font-weight: 500;
	color: white;
	font-size: 17px;
}
.faq-item.active .faq-question {
	border-bottom: none;
}
.faq-item.active .faq-question {
	border-bottom: none;
}

.faq-question::after {
	content: '+';
	position: absolute;
	right: 0;
	top: -3px;
	font-size: 45px;
	transition: transform 0.3s ease;
	font-weight: 200;
}

.faq-item.active .faq-question::after {
	transform: rotate(45deg);
}

.faq-answer {
	overflow: hidden;
	height: 0;
	padding: 0px; /* keep left/right padding always */
	border-bottom: 1px solid #fff;
	transition: height 0.4s ease, padding-top 0.4s ease, padding-bottom 0.4s ease;
	color: var(--text-light);
	line-height: 30px;
}
.faq-item.active .faq-answer {
	padding: 0px;
}
/* FAQ LIGHT */
#faq.light .sub-title {
	color: #7965C1;
}
#faq.light {
	background-color: var(--light);
}
#faq.light h2 {
	color: var(--dark-text);
}
#faq.light .intro {
	color: var(--dark-text);
}
#faq.light .faq-question {
	/* border-bottom: 1px solid var(--dark-text); */
	color: var(--dark-text);
	font-weight: 600;
}
#faq.light .faq-answer {
	border-bottom: 1px solid var(--dark-text);
	color: var(--dark-text);
}

#cta-bar {
	padding: 100px 0;
	background-color: var(--primary);
	background-image: url("/wp-content/uploads/2025/08/background-pattern.svg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
#cta-bar article {
	max-width: 50%;
	margin: 0px auto;
	text-align: center;
}
#cta-bar .btn {
	margin-top: 15px;
}
#cta-bar * {
	color: white;
}
#cta-bar .btn.sec font {
	color: black !important;
}

footer {
	background-color: var(--dark);
}
footer .content-top {
	padding: 100px 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 30px;
}
footer article * {
	color: white;
	text-decoration: none;
}
footer article i {
	font-size: 30px;
	transition: 0.25s;
}
footer article i:hover {
	color: #BCA9FF;
}
footer h4 {
	font-size: 20px;
	font-weight: 600;
	color: white;
	margin-bottom: 30px;
}
footer ul {
	padding: 0px;
	margin: 0px;
}
footer ul li {
	padding: 0px;
	margin: 30px 0;
}
footer ul li .gegevens span {
	transition: 0.25s;
	opacity: 1 !important;
}
footer ul li .gegevens:hover span {
	color: #BCA9FF;
}

footer ul p a {
	transition: 0.25s;
}
footer ul p a:hover,
footer ul p a font font:hover {
	color: #BCA9FF;
}

footer ul li a,
footer ul li a .material-symbols-rounded {
	color: white;   
}
footer ul li a .material-symbols-rounded {
	margin-right: 8px;
	font-size: 30px;
	color: #BCA9FF;
}
footer ul li a {
	display: flex;
	align-items: center;
	text-decoration: none;
	transition: 0.25s;
}
footer ul li a:hover {
	color: #BCA9FF;
}
footer .content-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40px 0;
	border-top: 1px solid #dbe1ff5b;
}
footer .content-bottom .syntro {
	color: #BCA9FF;
	font-weight: 600;
}
footer .content-bottom p {
	margin: 0px;
}
footer .content-bottom .to-top {
	color: white;
	text-decoration: none;
	display: flex;
	align-items: center;
}
footer .content-bottom .to-top i {
	font-size: 13px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--primary);
	margin-left: 10px;
	z-index: 999;
}


/* GLOBAL SECTIONS STYLING */
#hero-lp {
	padding: 140px 0 100px 0;
	background-color: var(--light);
	position: relative;
}
#hero-lp .content {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 1fr;
}
#hero-lp .image-float {
	position: absolute;
	width: 40%;
	height: 100%;
	top: 0;
	right: 0;
}
#hero-lp .image-float img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 0 0 0 150px;
}
#hero-lp .btn {
	margin-right: 13px;
}
#hero-lp h1 {
	font-size: 50px;
	line-height: 55px;
	color: var(--dark-text);
}
#hero-lp .intro {
	color: var(--dark-text);
	margin: 30px 0;
}
#hero-lp #myVideo {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 0 0 0 150px;
}

#hero-lp.center .content {
	grid-template-columns: 1fr;
}
#hero-lp.center .content article {
	max-width: 55%;
	margin: 0px auto;
	text-align: center;
}

#usp-bar-blocks {
	padding: 130px 0;
	background-color: var(--dark);
}
#usp-bar-blocks .content-top {
	max-width: 50%;
	margin: 0px auto;
	text-align: center;
	margin-bottom: 50px;
}
#usp-bar-blocks .content-top h2 {
	color: white;
}
#usp-bar-blocks .content-top p {
	color: var(--text-light);
}
#usp-bar-blocks .content {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 20px;
}
#usp-bar-blocks .block {
	background-color: var(--primary);
	border-radius: 15px;
	padding: 25px;
	border: 1px solid #483AA0;
}
#usp-bar-blocks .block * {
	color: white;
}
#usp-bar-blocks .block .material-symbols-rounded {
	font-size: 40px;
}
#usp-bar-blocks .block h4 {
	margin: 10px 0;
	font-size: 17px;
	font-weight: 600;
}
#usp-bar-blocks .block p {
	margin: 0px;
}
#usp-bar-blocks .slick-dots li button:before {
	color: var(--primary) !important;
}
#usp-bar-blocks .slick-dots {
	bottom: -33px !important;
}

#usp-bar-lg {
	padding: 110px 0;
}

#werkwijze {
	padding: 130px 0;
	background-color: var(--dark);
}
#werkwijze .content-top {
	max-width: 50%;
	margin: 0px auto;
	text-align: center;
	margin-bottom: 50px;
}
#werkwijze .content-top h2 {
	color: white;
}
#werkwijze .content-top p {
	color: var(--text-light);
}
#werkwijze .content {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 20px;
}
#werkwijze .block {
	background-color: var(--primary);
	border-radius: 15px;
	padding: 25px;
	border: 1px solid #483AA0;
	position: relative;
}
#werkwijze .block .number {
	border-radius: 10px 14px 10px 10px;
	background-color: #483AA0;
	font-family: 'Familjen Grotesk', sans-serif;
	font-weight: 600;
	position: absolute;
	top: 0;
	right: 0;
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 5px;
}
#werkwijze .block * {
	color: white;
}
#werkwijze .block .material-symbols-rounded {
	font-size: 40px;
}
#werkwijze .block h4 {
	margin: 10px 0;
	font-size: 17px;
	font-weight: 600;
}
#werkwijze .block p {
	margin: 0px;
}

#reviews .slick-slide {
	margin: 0 10px !important; /* gap size */
}
#reviews .slick-list {
	margin: 0 -10px !important; /* fix left/right cut-off */
}
#reviews .sub-title {
	color: #7965C1;
}
#reviews {
	padding: 130px 0;
	background-color: var(--light);
	position: relative;
	overflow: hidden;
}
#reviews .fade-left {
	background: linear-gradient(
		to right,
		rgba(235, 232, 246, 1) 5%,
		rgba(235, 232, 246, 0.4) 50%,
		rgba(235, 232, 246, 0) 100%
	);


	display: block;
	position: absolute;
	top: 0;
	height: 100%;
	width: 150px;
	z-index: 999;
}
#reviews .fade-right {
	background: linear-gradient(
		to left,
		rgba(235, 232, 246, 1) 5%,
		rgba(235, 232, 246, 0.4) 50%,
		rgba(235, 232, 246, 0) 100%
	);


	display: block;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 150px;
	z-index: 999;
}
#reviews .content-top {
	max-width: 50%;
	margin: 0px auto;
	text-align: center;
	margin-bottom: 50px;
}
#reviews .content {
	/* 	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 25px; */
}
#reviews .content-top h2,
#reviews .content-top p {
	color: var(--dark-text);
}
#reviews .review {
	padding: 25px;
	border-radius: 15px;
	border: 1px solid #483AA0;
	background-color: var(--primary);
}
#reviews .review .quote-mark {
	font-family: 'Familjen Grotesk', sans-serif;
	font-size: 100px;
	color: #483AA0;
	margin: 10px 0 0 0;
}
#reviews .review * {
	color: white;
}
#reviews .review p {
	margin-top: 3px;
	font-style: italic;
}
#reviews .review .customer {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 25px;
}
#reviews .review .customer img {
	border: 2px solid #483AA0;
	width: 60px;
	height: 60px;
	border-radius: 10px;
	object-fit: cover;
	overflow-clip-margin: unset;
	background-color: white;
}
#reviews .review .customer .name h4 {
	margin: 0 0 5px 0;
}
#reviews .review .customer .name h5 {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.5px;
	opacity: 0.6;
}

/* Blog pagina */
#hero-lp.blog {
	padding: 140px 0 100px 0;
}
#blog-archive {
	padding: 130px 0;
	background-color: var(--dark);
}
#blog-archive .content {
	display: grid;
	grid-gap: 25px;
	grid-template-columns: repeat(3, 1fr);
}
#blog-archive .blog:hover .lees-meer i {
	transform: rotate(-25deg);
}
#blog-archive .blog {
	text-decoration: none;
	background-color: var(--light);
	border-radius: 15px;
}
#blog-archive .blog .card {
	padding: 20px;
}
#blog-archive .blog .card .lees-meer {
	color: var(--primary);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}
#blog-archive .blog .card .lees-meer i {
	font-size: 13px;
	position: relative;
	top: 1px;
	transition: 0.25s;
}
#blog-archive .blog .img-wrapper {
	width: 100%;
	height: 180px;
	border-bottom: 1px solid #70709C;
}
#blog-archive .blog .img-wrapper img {
	width: 100%;
	height: 100%;
	border-radius: 14px 14px 0 0;
	object-fit: cover;
	overflow-clip-margin: unset;
	display: block;
}
#blog-archive h4 {
	color: #000F2F;
	font-size: 18.5px;
	letter-spacing: -0.5px;
}
#blog-archive .excerpt p {
	color: #2E4066;
	font-size: 15.5px;
} 
.post-category {
	margin: 0px;
	color: #7965C1;
	font-size: 16px;
	font-weight: 500;
}
.post-category i {
	font-size: 14px;
}
.post-date {
	color: #2E4066;
	font-weight: 500;
	font-size: 16px;
}
#blog-archive .blog .card .stats {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 13px;
}
/* first blog post */
#blog-archive .blog:first-child {
	grid-column: 1 / -1;
}
#blog-archive .blog:first-child {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
}
#blog-archive .blog:first-child .img-wrapper {
	height: 100% !important;
	border: unset;
}
#blog-archive .blog:first-child .img-wrapper img {
	border-right: 1px solid #70709C;
	border-radius: 14px;
}
#blog-archive .blog:first-child h4 {
	font-size: 30.5px;
}
.load-more-wrap .btn {
	font-size: 16px !important;
	cursor: pointer !important;
	font-weight: 500 !important;
}


/* FAQ */
#faqs-tabs {
	padding: 130px 0;
	background-color: var(--dark);
}
#faqs-tabs .tabs { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

#faqs-tabs .tab {
	appearance:none; border:0; cursor:pointer;
	padding:10px 18px; border-radius:999px;
	background:#eef0f6; color:#1b2240; font-weight:600;
	transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
}
#faqs-tabs .tab:hover { transform: translateY(-1px); }
#faqs-tabs .tabs .tab.is-active { background: var(--primary); color:#fff; }

#faqs-tabs .tab-panel { display:none; margin-top:28px; }
#faqs-tabs .tab-panel.is-visible { display:block; }
#faqs-tabs .tab-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 50px;
}

/* SINGLE POST */
/* HERO */
.post-hero{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000; 
	color: #fff;
	background-image: var(--hero); 
	background-size: cover; 
	background-position: center;
	padding: 130px 0 100px 0;
}
.post-hero__overlay{
	position: absolute;
	inset :0;
	background: linear-gradient(180deg,rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.65) 100%);
}
.post-hero .btn.sec:hover {
	transform: unset !important;
	box-shadow: 0 2px 0 0 #DFE1E3
}
.post-hero .container{
	position:relative;
	max-width: 90%;
	text-align: center;
	margin: 0px auto;
}
.badge{
	display:inline-block;background:#fff;color:#111;padding:6px 12px;border-radius:999px;font-weight:600;font-size:.9rem;
}
.post-hero__title{
	margin: 20px 0;
	font-weight:700;
	font-size: 50px;
	line-height: 55px;
}
.post-hero__meta{
	display: flex;
	justify-content: center;
	gap: 12px;
	color: #eaeaea;
	margin-top :8px;
	font-size: .95rem;
	opacity: .95
}

/* GRID */
.post-grid{
	background:var(--dark);
	color:var(--text-light);
	padding: 100px 0
}
.post-grid .container{
	display:grid;
	grid-template-columns:1fr 340px;
	gap: 60px;
}

.post-main .the-content h2,h3{color:#fff}
.post-main .the-content p{
	font-weight: 400;
	color: var(--text-light);
	line-height: 27px;
	font-size: 17px;
}
.post-main .the-content ul li:before {
	content: "\f192";
	font-family: "Font Awesome 5 Free";
	font-size: 12px;
	position: absolute;
	top: 0px;
	left: 0;
	font-weight: bold;
	color: #BCA9FF;
}
.post-main .the-content ul li {
	margin: 7px 0;
}
.post-main .the-content ol li {
	list-style: unset;
	padding: 0 0 0 5px;
}
.post-main .the-content ol {
	padding: 0 0 0 20px;
}
.post-main .the-content ol li::marker {
	color: #BCA9FF;
}
.post-main .the-content li a {
	color: var(--secondary);
	font-weight: 600;
	text-decoration: none;
	transition: 0.25s;
}
.post-main .the-content li a:hover {
	opacity: 0.8;
}
.post-main .the-content img {
	border-radius: 15px;
	width: 80%;
}

/* .post-main .the-content ul {
padding-left: 18px;
} */

.post-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 18px;
}

.post-meta .img-wrapper img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.post-meta .pm-right {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: #cdd8f8;
}

/* SIDEBAR */
.post-sidebar .sticky {
	position: sticky;
	top: 160px;
	display: grid;
	gap: 20px;
}
.sidebar-block {
	display: grid;
	grid-gap: 20px;
}
.sidebar-block h3 {
	margin: 0 0 12px 0;
	font-size: 23px;
}

.card-related:hover .cta i {
	transform: rotate(-25deg);
}
.card-related {
	display: grid;
	grid-template-columns: 96px 1fr;
	background: #000F2F;
	border-radius: 14px;
	color: #fff;
	text-decoration: none;
	border: 1px solid #70709C;
}

.card-related__thumb img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 10px;
	overflow-clip-margin: unset;
	display: block;
}
.card-related__body {
	padding: 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.card-related__body .mini-cat {
	font-size: 0.85rem;
	color: #b9c7ea;
}

.card-related__body .title {
	margin: 0 0 8px 0;
	font-weight: 700;
	line-height: 1.25;
	font-size: 15.5px;
	font-weight: 600;
}

.card-related__body .cta {
	font-size: 15px;
	color: var(--secondary);
	font-weight: 600;
}
.card-related__body .cta i {
	font-size: 12.5px;
	margin-left: 6px;
	transition: 0.25s;
}

.newsletter {
	background: #000F2F;
	border-radius: 14px;
	padding: 16px;
	border: 1px solid #70709C;
	grid-gap: 5px;
}
.newsletter .form-container {
	position: relative;
}
.newsletter .form-container i {
	position: absolute;
	color: var(--primary);
	z-index: 99;
	left: 10px;
	top: 11px;
	font-size: 21px;
	font-weight: bold;
}
.newsletter .wpforms-container,
.newsletter .wpforms-field {
	padding: 0px !important;
	margin: 0px !important;
}
.newsletter button[type="submit"] {
	background-color: var(--primary) !important;
	padding: 10px 20px !important;
	border-radius: 12px !important;
	text-decoration: none !important;
	font-weight: 500 !important;
	border: 2px solid #483AA0 !important;
	box-shadow: 0 2px 0 0 #483AA0 !important;
	display: inline-flex !important;
	text-align: center !important;
	transition: 0.25s !important;
	overflow-clip-margin: unset !important;
	will-change: transform !important;
	color: white !important;
	width: 100% !important;
	justify-content: center !important;
}
.newsletter input[type="email"] {
	background-color: var(--light);
	border-radius: 12px !important;
	padding-left: 45px !important;
}
.newsletter button[type="submit"]:hover {
	background: var(--primary) !important;
	box-shadow: unset !important;
	transform: translateY(2px) !important;
}
.newsletter input[type="email"]:focus {
	border-color: var(--primary) !important;
}
.newsletter em.wpforms-error {
	background-color: #d63637 !important;
	color: white !important;
	display: inline-flex !important;
	border-radius: 7px !important;
	padding: 5px 10px !important;
	text-align: center !important;
}
.newsletter em.wpforms-error:before {
	background-color: white !important;
}
div.wpforms-container-full input[type=submit]:focus:after, div.wpforms-container-full button[type=submit]:focus:after, div.wpforms-container-full .wpforms-page-button:focus:after, .wp-core-ui div.wpforms-container-full input[type=submit]:focus:after, .wp-core-ui div.wpforms-container-full button[type=submit]:focus:after, .wp-core-ui div.wpforms-container-full .wpforms-page-button:focus:after {
	border: unset !important;
}

.newsletter__form .field {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #0b1f3c;
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 10px 12px;
	border-radius: 10px;
}

.newsletter__form input {
	background: transparent;
	border: 0;
	outline: 0;
	color: #fff;
	width: 100%;
}

.newsletter .btn {
	margin-top: 10px;
	width: 100%;
	background: var(--btn);
	color: var(--btnText);
	border: 0;
	padding: 10px 14px;
	border-radius: 10px;
	font-weight: 700;
	cursor: pointer;
}

#contact {
	padding: 130px 0;
	background-color: var(--dark);
}
#contact .content {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 90px;
}
#contact .content .block {
	display: flex;
	align-items: start;
	gap: 20px;
	margin-bottom: 30px;
}
#contact .content .block h4 {
	color: white;
	font-weight: 500;
	font-size: 18px;
	margin: 0px;
}
#contact .content .block p {
	color: #8A95CC;
	margin: 10px 0;
	font-size: 15.5px;
}
#contact .content .block a {
	color: white;
	text-decoration: none;
	font-weight: 600;
	transition: 0.25s;
}
#contact .content .block a:hover {
	color: #BCA9FF;
}
#contact .content .block .material-symbols-rounded,
#contact .content .block .material-symbols-outlined,
#contact .content .block .material-symbols-sharp {
	width: 40px;
	height: 40px;
	border-radius: 7px;
	color: white;
	background-color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	top: -10px;
	font-size: 29px;
}
#contact .wpforms-field-label {
	color: white;
}
#contact input,
#contact textarea,
#contact select {
	background-color: #EBE8F6 !important;
}
#contact input::placeholder,
#contact textarea::placeholder,
#contact select::placeholder,
select option[selected],
#contact select {
	color: #677391 !important;
	opacity: 1 !important;
}
select {
	color: black; /* normal */
}

select:has(option.placeholder:checked) {
	color: gray; /* when placeholder is selected */
}

/* custom CSS for forms */
/* add class contact-offerte-forms to desired form */

/* change to website primary color */
.wpforms-error {
	position: absolute;
}
span.wpforms-required-label {
	color: var(--primary) !important;
}

.contact-offerte-forms {
	position: relative !important;
}

/* global styling all inputs */
.contact-offerte-forms input,
.contact-offerte-forms textarea {
	font-size: 15px !important;
	border-radius: 7px !important;
}

/* input focus */
.contact-offerte-forms input:focus,
.contact-offerte-forms textarea:focus {
	border-color: var(--primary) !important;
	box-shadow: unset !important;
}

.contact-offerte-forms [role="alert"]:before {
	background-color: white !important;
}
.contact-offerte-forms [role="alert"] {
	background-color: #d63637;
	color: #fff !important;
	border-radius: 7px;
	padding: 4px 12px !important;
	text-align: center;
	font-size: 12px !important;
}



/* checkbox and radiobox */
.contact-offerte-forms input[type=checkbox]:checked:before, 
.contact-offerte-forms input[type=radio]:checked:before {
	box-shadow: unset !important;
	border-color: var(--primary) !important;
}
.contact-offerte-forms input[type=radio]:checked:after {
	background-color: var(--primary) !important;
}
/* .contact-offerte-forms .wpforms-submit-container {
position: absolute !important;
bottom: 15px;
left: 120px;
} */
#wpforms-form-321 .wpforms-submit-container {
	position: unset !important;
}

.contact-offerte-forms input[type=checkbox]:checked:after {
	border-color: var(--primary) !important;
}

.contact-offerte-forms input[type=checkbox]:focus:before {
	box-shadow: unset !important;
	border-color: var(--primary) !important;
}

/* submit + next/prev button */
.contact-offerte-forms .wpforms-submit,
.contact-offerte-forms .wpforms-page-button {
	background-color: var(--primary) !important;
	height: unset !important;
	line-height: 20px !important;
	transition: 0.25s !important;
	padding: 13px 22px !important;
	font-weight: 600 !important;
	/* 	font-family: 'Familjen Grotesk' !important; */
	border-radius: 15px !important;
	border: 2px solid #483AA0 !important;
	box-shadow: 0 2px 0 0 #483AA0 !important;
}
.contact-offerte-forms .wpforms-submit:active,
.contact-offerte-forms .wpforms-page-button:active {
	background: var(--primary) !important;
}
.contact-offerte-forms .wpforms-submit:hover,
.contact-offerte-forms .wpforms-page-button:hover {
	background: var(--primary) !important;
	opacity: 1 !important;
	box-shadow: unset !important;
	transform: translateY(2px) !important;
}
.contact-offerte-forms .wpforms-submit:focus:after {
	outline: unset !important;
	border: unset !important;
	box-shadow: unset !important;
}

/* phone number country select */
.contact-offerte-forms .iti__selected-country:hover {
	background: none !important;
	background-color: unset !important;
}

/* phone number country select focus */
.contact-offerte-forms .iti__selected-country:focus {
	box-shadow: unset !important;
	border: none !important;
}

/* dropdown */
.contact-offerte-forms select {
	font-size: 15px !important;
	border-radius: 7px !important;
}
.contact-offerte-forms select:focus {
	box-shadow: unset !important;
}

div.wpforms-container-full input[type=submit]:focus:after, div.wpforms-container-full button[type=submit]:focus:after, div.wpforms-container-full .wpforms-page-button:focus:after, .wp-core-ui div.wpforms-container-full input[type=submit]:focus:after, .wp-core-ui div.wpforms-container-full button[type=submit]:focus:after, .wp-core-ui div.wpforms-container-full .wpforms-page-button:focus:after {
	border: unset !important;
}


#contact .wpforms-container {
	margin: 0px !important;
}
#contact .content .left {
	margin-top: -25px;
}

#customer {
	padding: 100px 0;
	background-color: #0e2148;
}
#customer #wrapper {
	max-width: 650px;
}
#customer article :where(h2, h3, h4) {
	color: #fff;
}
#customer article h3 {
	font-size: 27px;
	letter-spacing: -0.5px;
}
#customer article p {
	color: var(--text-light);
}
#customer article ul li {
	color: var(--text-light) !important;
	line-height: 27px;
	font-size: 17px;
}
#customer .ai-bullets {
	padding-left: 20px !important;
}
#customer article a {
	color: #BCA9FF;
	text-decoration: none;
	font-weight: 600;
}
#customer article a:hover {
	text-decoration: underline;
}
#customer article img {
	width: 100%;
	border-radius: 15px;
	display: block;
	margin: 13px 0;
}
#customer-blogs {
	padding: 130px 0;
	background-color: var(--light);
}
#customer-blogs h2 {
	margin-bottom: 40px;
}
#customer-blogs .blogs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 20px;
}

/* Interactie-pijl */
#customer-blogs .customer-blog:hover .lees-meer i {
	transform: rotate(-25deg);
}

/* Card basis */
#customer-blogs .customer-blog {
	text-decoration: none;
	background-color: var(--dark);
	border-radius: 15px;
	display: block;
	overflow: hidden; /* zorgt dat border-radius ook op image werkt */
}

#customer-blogs .customer-blog .card {
	padding: 20px;
}

#customer-blogs .customer-blog .card .lees-meer {
	color: #BCA9FF;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}

#customer-blogs .customer-blog .card .lees-meer i {
	font-size: 13px;
	position: relative;
	top: 1px;
	transition: 0.25s;
}

/* Image wrapper */
#customer-blogs .customer-blog .img-wrapper {
	width: 100%;
	height: 180px;
	border-bottom: 1px solid #70709C;
}

#customer-blogs .customer-blog .img-wrapper img {
	width: 100%;
	height: 100%;
	border-radius: 14px 14px 0 0;
	object-fit: cover;
	overflow-clip-margin: unset;
	display: block;
}

/* Teksten */
#customer-blogs h4 {
	color: #fff;
	font-size: 18.5px;
	letter-spacing: -0.5px;
	margin: 10px 0 8px;
}

#customer-blogs .excerpt p {
	color: var(--text-light);
	font-size: 15.5px;
}

#customer-blogs .post-category {
	margin: 0;
	color: #BCA9FF;
	font-size: 16px;
	font-weight: 500;
}

#customer-blogs .post-category i {
	font-size: 14px;
}

#customer-blogs .post-date {
	color: #fff;
	font-weight: 500;
	font-size: 16px;
}

#customer-blogs .customer-blog .card .stats {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 13px;
}

.page-template-diensten-overzicht #diensten .sub-title,
.page-template-diensten-overzicht #diensten h2,
.page-template-diensten-overzicht #diensten .intro {
	display: none;
}
.page-template-diensten-overzicht #diensten .content {
	margin-top: 0px;
}

/* RESPONSIVENESS */
@media screen and (max-width: 400px) {
	.header .logo {
		/* 		border: 1px solid red; */
		width: 90px !important;
	}
}

@media screen and (max-width: 600px) {

	h2 {
		font-size: 26px;
		line-height: 29px;
	}

	#wrapper {
		max-width: 90%;
	}


	/* arrows */
	.slick-prev {
		left: -15px !important;
	}
	.slick-next {
		right: -15px !important;
	}


	/* --------------- */

	/* 	header {
	display: none;
} */

	header {
		padding: 20px 0;
	}
	header #wrapper {
		max-width: 90%;
	}
	.header .logo {
		width: 115px;
	}
	.header .logo.logo-shrink {
		width: 100px;
	}
	header .btn.sec {
		display: none;
	}
	header nav .content {
		display: flex;
		align-items: center;
		justify-content: end;
		flex-direction: row;
	}
	header .left {
		order: 1;
		position: absolute;
		left: 5%;
	}
	header .middle {
		order: 3;
		width: 40px;
	}
	header .float-right {
		order: 2;
		margin-right: 10px;
	}

	#hero {
		padding: 80px 0;
	}
	#hero h1 {
		font-size: 35px;
		line-height: 38px;
	}
	#hero .content {
		grid-template-columns: 1fr;
	}
	#hero .image-float {
		display: none;
	}
	#usps-hero .content {
		width: 100%;
	}

	#diensten {
		padding: 60px 0;
	}
	#diensten #wrapper {
		max-width: 90%;
	}
	#diensten .content {
		grid-template-columns: 1fr;
	}
	#diensten .top-content {
		max-width: unset;
	}

	.content-sec {
		padding: 60px 0;
	}
	.content-sec .content {
		grid-template-columns: 1fr;
		grid-gap: 50px;
	}
	.content-sec .content .img-wrapper {
		height: 285px;
	}
	.content-sec .content .img-wrapper img {
		border-radius: 25px 25px 75px 75px;
	}
	.content-sec .content .img-wrapper .logo-small {
		left: 0;
		right: 0;
		margin-inline: auto;
		width: 150px;
		bottom: -40px;
	}
	/* reversed */
	.content-sec.rev .content {
		display: flex;
		flex-direction: column-reverse;
	}
	.content-sec.rev .content article {
		width: 100%;
	}
	.content-sec .content-bottom #usp-blocks {
		display: unset;
	}
	.content-sec #usp-blocks {
		grid-template-columns: 1fr;
	}


	#klanten {
		padding: 60px 0;
	}
	#klanten h2 {
		margin-bottom: 40px;
	}
	#klanten .content {
		display: unset;
	}

	#faq {
		padding: 60px 0;
	}
	#faq .content-top {
		max-width: unset;
	}
	#faq .content {
		grid-template-columns: 1fr;
		grid-gap: 0px;
	}
	#faq .align {
		margin-top: 30px;
	}

	#cta-bar {
		padding: 60px 0;
	}
	#cta-bar article {
		max-width: unset;
	}

	/* Global elements styling */
	#hero-lp {
		padding: 60px 0;
	}
	#hero-lp h1 {
		font-size: 35px;
		line-height: 38px;
	}
	#hero-lp .content {
		grid-template-columns: 1fr;
	}
	#hero-lp .image-float {
		display: none;
	}
	#hero-lp .intro {
		margin-bottom: 0px;
	}

	#usp-bar-blocks .content {
		display: unset;
	}
	.content-sec .content-bottom .usp-blocks {
		display: unset;
	}
	.content-sec #usp-blocks .block {
		display: flex;
		align-items: center;
		gap: 20px;
	}
	.content-sec #usp-blocks .block div:last-child {
		text-align: left;
	}

	#usp-bar-blocks {
		padding: 60px 0;
	}
	#usp-bar-blocks .content-top {
		max-width: unset;
	}

	#werkwijze {
		padding: 60px 0;
	}
	#werkwijze .content-top {
		max-width: unset;
	}
	#werkwijze .content {
		grid-template-columns: 1fr;
	}

	#hero-lp.blog {
		padding: 60px 0;
	}
	#blog-archive {
		padding: 60px 0;
	}
	#blog-archive .content {
		grid-template-columns: 1fr;
	}
	#blog-archive .blog:first-child {
		grid-template-columns: unset;
		grid-column: unset;
	}
	#blog-archive .blog:first-child h4 {
		font-size: 18.5px;
	}
	#blog-archive .blog:first-child .img-wrapper {
		height: 180px !important;
		border-bottom: 1px solid #70709C;
	}
	#blog-archive .blog:first-child .img-wrapper img {
		border: unset;
		border-radius: 14px 14px 0 0;
	}
	#hero-lp.center .content article {
		max-width: unset;
	}

	#reviews {
		padding: 60px 0 100px 0;
	}
	#reviews .content-top {
		max-width: unset;
	}
	#reviews .content .marquee-toggle {
		bottom: -70px;
	}
	#reviews .fade-left {
		width: 50px;
		background: linear-gradient(to right, rgba(235, 232, 246, 1) -5%, rgba(235, 232, 246, 0.4) 53%, rgba(235, 232, 246, 0) 100%);
	}
	#reviews .fade-right {
		width: 50px;
		background: linear-gradient(to left, rgba(235, 232, 246, 1) -5%, rgba(235, 232, 246, 0.4) 53%, rgba(235, 232, 246, 0) 100%);
	}

	#contact {
		padding: 60px 0;
	}
	#contact .content {
		grid-template-columns: 1fr;
	}
	#contact .content .left {
		margin-top: -10px;
	}

	footer .content-top {
		padding: 60px 0;
	}
	footer .content-top {
		grid-template-columns: 1fr;
	}
	footer .content-bottom {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 15px;
	}
	footer .content-bottom .to-top {
		justify-content: end;
	}
	footer .content-bottom .to-top span {
		display: none;
	}
	footer .content-bottom .to-top i {
		position: fixed;
		bottom: 20px;
		right: 20px;
		border: 2px solid #483AA0;
		width: 40px;
		height: 40px;
	}

	#faqs-tabs {
		padding: 60px 0;
	}
	#faqs-tabs .tab-group {
		grid-template-columns: 1fr;
		grid-gap: 0px;
	}

	.post-hero {
		padding: 60px 0;
	}

	.post-hero__title {
		font-size: 35px;
		line-height: 38px;
	}
	.post-grid {
		padding: 50px 0;
	}
	.post-grid .container {
		grid-template-columns: 1fr;
	}

	#customer {
		padding: 60px 0;
	}
	#customer #wrapper {
		max-width: 90%;
	}
	
	#customer-blogs {
		padding: 60px 0;
	}
	#customer-blogs .blogs {
		grid-template-columns: 1fr;
	}

}

@media screen and (min-width: 601px) and (max-width: 900px) {

	h2 {
		font-size: 30px;
		line-height: 35px;
	}

	#wrapper {
		max-width: 85%;
	}

	/* --------------- */

	header #wrapper {
		max-width: 85%;
	}
	header .logo {
		width: 100px !important;
	}
	header nav .content {
		display: flex;
		align-items: center;
		justify-content: end;
		flex-direction: row;
	}
	header .left {
		order: 1;
		position: absolute;
		left: 7.5%;
	}
	header .middle {
		order: 3;
		width: 65px;
	}
	header .float-right {
		order: 2;
		margin-right: 20px;
	}

	#hero {
		padding: 80px 0;
	}
	#hero h1 {
		font-size: 37px;
		line-height: 41px;
	}
	#hero .content {
		grid-template-columns: 65% 1fr;
	}
	#hero .image-float {
		width: 30%;
	}

	#diensten {
		padding: 65px 0;
	}
	#diensten .content {
		grid-template-columns: 1fr;
		max-width: 75%;
		margin: 60px auto 0 auto;
	}
	#diensten .top-content {
		max-width: unset;
	}

	.content-sec {
		padding: 65px 0;
	}
	.content-sec .content {
		grid-template-columns: 1fr;
		grid-gap: 50px;
	}
	.content-sec .content .img-wrapper {
		height: 320px;
	}
	.content-sec .content .img-wrapper img {
		border-radius: 25px 25px 75px 75px;
	}
	.content-sec .content .img-wrapper .logo-small {
		left: 0;
		right: 0;
		margin-inline: auto;
		width: 150px;
		bottom: -40px;
	}
	/* reversed */
	.content-sec.rev .content {
		display: flex;
		flex-direction: column-reverse;
	}
	.content-sec.rev .content article {
		width: 100%;
	}

	.content-sec .content-bottom #usp-blocks {
		display: unset;
	}
	.content-sec .content-bottom .usp-blocks {
		display: unset;
	}

	#klanten {
		padding: 65px 0;
	}
	#klanten h2 {
		margin-bottom: 40px;
	}
	#klanten .content {
		display: unset;
	}

	#faq {
		padding: 65px 0;
	}
	#faq .content-top {
		max-width: unset;
	}
	#faq .content {
		grid-template-columns: 1fr;
		grid-gap: 0px;
		max-width: 75%;
		margin: 50px auto 0 auto;
	}
	#faq .align {
		margin-top: 50px;
	}

	#cta-bar {
		padding: 65px 0;
	}
	#cta-bar article {
		max-width: unset;
	}


	/* Global elements styling */
	#hero-lp {
		padding: 65px 0;
	}
	#hero-lp h1 {
		font-size: 37px;
		line-height: 41px;
	}
	#hero-lp .content {
		grid-template-columns: 65% 1fr;
	}
	#hero-lp .image-float {
		width: 30%;
	}
	#hero-lp .intro {
		margin-bottom: 0px;
	}

	#usp-bar-blocks .content {
		display: unset;
	}
	.content-sec #usp-blocks {
		grid-template-columns: 1fr 1fr;
	}

	#usp-bar-blocks {
		padding: 65px 0;
	}
	#usp-bar-blocks .content-top {
		max-width: unset;
	}


	#werkwijze {
		padding: 65px 0;
	}
	#werkwijze .content-top {
		max-width: unset;
	}
	#werkwijze .content {
		grid-template-columns: 1fr;
	}


	#hero-lp.blog {
		padding: 65px 0;
	}
	#blog-archive {
		padding: 65px 0;
	}
	#blog-archive .content {
		grid-template-columns: 1fr 1fr;
	}
	#blog-archive .blog:first-child {
		grid-template-columns: unset;
		grid-column: unset;
	}
	#blog-archive .blog:first-child h4 {
		font-size: 18.5px;
	}
	#blog-archive .blog:first-child .img-wrapper {
		height: 180px !important;
		border-bottom: 1px solid #70709C;
	}
	#blog-archive .blog:first-child .img-wrapper img {
		border: unset;
		border-radius: 14px 14px 0 0;
	}
	#hero-lp.center .content article {
		max-width: unset;
	}

	#reviews {
		padding: 65px 0 100px 0;
	}
	#reviews .content-top {
		max-width: unset;
	}
	#reviews .content .marquee-toggle {
		bottom: -70px;
	}
	#reviews .fade-left {
		width: 50px;
		background: linear-gradient(to right, rgba(235, 232, 246, 1) -5%, rgba(235, 232, 246, 0.4) 53%, rgba(235, 232, 246, 0) 100%);
	}
	#reviews .fade-right {
		width: 50px;
		background: linear-gradient(to left, rgba(235, 232, 246, 1) -5%, rgba(235, 232, 246, 0.4) 53%, rgba(235, 232, 246, 0) 100%);
	}

	#contact {
		padding: 65px 0;
	}
	#contact .content {
		grid-template-columns: 1fr;
	}
	#contact .content .left {
		margin-top: -10px;
	}


	footer .content-top {
		padding: 65px 0;
	}
	footer .content-top {
		grid-template-columns: 1fr 1fr;
	}
	footer .content-bottom {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 15px;
	}
	footer .content-bottom .to-top {
		justify-content: end;
	}
	footer .content-bottom .to-top span {
		display: none;
	}
	footer .content-bottom .to-top i {
		position: fixed;
		bottom: 20px;
		right: 20px;
		border: 2px solid #483AA0;
		width: 40px;
		height: 40px;
	}

	#faqs-tabs {
		padding: 65px 0;
	}
	#faqs-tabs .tab-group {
		grid-template-columns: 1fr;
		grid-gap: 0px;
	}

	.post-hero {
		padding: 65px 0;
	}

	.post-hero__title {
		font-size: 37px;
		line-height: 41px;
	}
	.post-grid {
		padding: 50px 0;
	}
	.post-grid .container {
		grid-template-columns: 1fr;
	}
	
	#customer {
		padding: 65px 0;
	}
	#customer #wrapper {
		max-width: 85%;
	}
	
	#customer-blogs {
		padding: 65px 0;
	}
	#customer-blogs .blogs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media screen and (min-width: 901px) and (max-width: 1200px) {

	h2 {
		font-size: 34px;
		line-height: 40px;
	}

	#wrapper {
		max-width: 83%;
	}

	/* --------------- */

	header #wrapper {
		max-width: 83%;
	}
	header .logo {
		width: 100px;
	}
	header nav .content {
		display: flex;
		align-items: center;
		justify-content: end;
		flex-direction: row;
	}
	header .left {
		order: 1;
		position: absolute;
		left: 8.5%;
	}
	header .middle {
		order: 3;
		width: 65px;
	}
	header .float-right {
		order: 2;
		margin-right: 20px;
	}

	#hero {
		padding: 100px 0;
	}
	#hero h1 {
		font-size: 47px;
		line-height: 55px;
	}
	#hero .content {
		grid-template-columns: 65% 1fr;
	}
	#hero .image-float {
		width: 37%;
	}

	#diensten {
		padding: 90px 0;
	}
	#diensten .top-content {
		max-width: 90%;
	}
	#diensten .content {
		grid-template-columns: repeat(2, 1fr);
	}

	.content-sec {
		padding: 90px 0;
	}
	.content-sec .content {
		grid-gap: 45px;	
	}
	.content-sec .content .img-wrapper .logo-small {
		width: 150px;
		left: -30px;
	}

	.content-sec .content-bottom .usp-blocks {
		display: unset;
	}

	#klanten {
		padding: 90px 0;
	}
	/* 	#klanten h2 {
	margin-bottom: 40px;
}
	#klanten .content {
	display: unset;
} */

	#faq {
		padding: 90px 0;
	}

	#cta-bar {
		padding: 90px 0;
	}

	/* Global elements styling */
	#hero-lp {
		padding: 100px 0;
	}
	#hero-lp h1 {
		font-size: 47px;
		line-height: 55px;
	}
	#hero-lp .content {
		grid-template-columns: 1fr 1fr;
	}
	#hero-lp .image-float {
		width: 45%;
	}
	#hero-lp .intro {
		margin-bottom: 0px;
	}

	#usp-bar-blocks .content {
		display: unset;
	}
	.content-sec #usp-blocks {
		grid-template-columns: 1fr;
	}
	.content-sec .content-bottom #usp-blocks {
		display: unset;
	}

	#usp-bar-blocks {
		padding: 65px 0;
	}
	#usp-bar-blocks .content-top {
		max-width: unset;
	}

	#werkwijze {
		padding: 65px 0;
	}
	#werkwijze .content-top {
		max-width: unset;
	}
	#werkwijze .content {
		grid-template-columns: 1fr;
	}


	#hero-lp.blog {
		padding: 100px 0;
	}
	#blog-archive {
		padding: 90px 0;
	}
	#blog-archive .content {
		grid-template-columns: 1fr 1fr;
	}
	#blog-archive .blog:first-child {
		grid-template-columns: unset;
		grid-column: unset;
	}
	#blog-archive .blog:first-child h4 {
		font-size: 18.5px;
	}
	#blog-archive .blog:first-child .img-wrapper {
		height: 180px !important;
		border-bottom: 1px solid #70709C;
	}
	#blog-archive .blog:first-child .img-wrapper img {
		border: unset;
		border-radius: 14px 14px 0 0;
	}

	#contact {
		padding: 100px 0;
	}
	#contact .content {
		grid-gap: 40px;
	}


	#reviews {
		padding: 100px 0 130px 0;
	}
	#reviews .content-top {
		max-width: unset;
	}
	#reviews .content .marquee-toggle {
		bottom: -80px;
	}
	#reviews .fade-left {
		width: 70px;
		background: linear-gradient(to right, rgba(235, 232, 246, 1) -5%, rgba(235, 232, 246, 0.4) 53%, rgba(235, 232, 246, 0) 100%);
	}
	#reviews .fade-right {
		width: 70px;
		background: linear-gradient(to left, rgba(235, 232, 246, 1) -5%, rgba(235, 232, 246, 0.4) 53%, rgba(235, 232, 246, 0) 100%);
	}


	footer .content-top {
		padding: 90px 0;
		grid-template-columns: repeat(2, 1fr);
	}
	footer .content-bottom .to-top {
		justify-content: end;
	}
	footer .content-bottom .to-top span {
		display: none;
	}
	footer .content-bottom .to-top i {
		position: fixed;
		bottom: 20px;
		right: 20px;
		border: 2px solid #483AA0;
		width: 40px;
		height: 40px;
	}

	#faqs-tabs {
		padding: 90px 0;
	}

	.post-hero {
		padding: 100px 0;
	}

	.post-hero__title {
		font-size: 47px;
		line-height: 55px;
	}
	
	#cta-bar article {
		max-width: 70%;
	}
	
	#customer,
	#customer-blogs {
		padding: 80px 0;
	}

}



@media screen and (min-width: 1201px) and (max-width: 1600px) {

	header #wrapper {
		max-width: 1100px;
	}
	header nav .content {
		grid-template-columns: 1fr 500px 1fr;
	}

	#diensten #wrapper {
		max-width: 90%;
	}

	/* 	.content-sec #usp-blocks {
	grid-template-columns: unset;
} */

}
@media screen and (min-width: 1201px) {
	#mega-menu-item-62 {
		display: none !important;
	}
	header nav .content {
		grid-template-columns: 1fr 500px 1fr;
	}
}

@media screen and (min-width: 1001px) {

	#reviews .content .marquee-toggle {
		display: none !important;
	}

}










/*  */