/*!
Theme Name: vacomair
Theme URI: http://underscores.me/
Author: ScoreDigital - Creatief webbureau
Author URI: https://scoredigital.nl
Description: Maatwerk thema voor VacomAir. 
Version: 23.05.2025
/*

/****************** LENIS SMOOTH SCROLL ****************/
html.lenis, html.lenis body {
   height: auto;
}
 
.lenis.lenis-smooth {
   scroll-behavior: auto !important;
}
 
.lenis.lenis-smooth [data-lenis-prevent] {
   overscroll-behavior: contain;
}
 
.lenis.lenis-stopped {
   overflow: hidden;
}
 
.lenis.lenis-smooth iframe {
   pointer-events: none;
}

/****************** ALGEMEEN ****************/
html, body {
  overflow-x: hidden;
}

body {
	-webkit-font-smoothing: antialiased;
  background: #fff;
}

h1, h2, h3, h4, h5, h6, p, a, span, ul, li  {
  font-family: 'Plus Jakarta Sans', sans-serif!important;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: 46px;
  line-height: 1;
  font-weight: 800;
}

h2 {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 800;
}

h3 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 800;
}

h4 {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
}

h5 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}

h6 {
  font-size: 14px;
  font-weight: 600;
}

p, ul, li {
  font-size: 14px!important;
  font-weight: 500;
}

a {
  text-decoration: none;
  font-weight: 500;
  font-size: 14px!important;
}

img {
  max-width: 100%;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.text {
  -webkit-text-rendering: optimizeSpeed; 
  text-rendering: optimizeSpeed;
  -webkit-transform: translateZ(0); 
  font-kerning: none;
}

@media (min-width: 992px){
	.container {
		width: 80%;
	}
}

/* VOORTGANG BALK */
.progress-bar-wrap {
  z-index: 9999999;
  cursor: pointer;
  width: 100%;
  height: 2px;
  transition: background-color .2s;
  position: fixed;
  inset: 0% 0% auto;
}

.progress-bar-wrap:hover {
  background-color: #0000000d;
}

.progress-bar {
  transform-origin: 0%;
  transform-style: preserve-3d;
  background-color: #2b93cc;
  width: 100%;
  height: 100%;
  transform: scale3d(0, 1, 1);
}

/****************** HOME ****************/
.vacomair {
	position: relative;
	height: 80vh;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 100px 30px 30px 30px;
}

.vacomair:before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(35deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}


.vacomair-tekst {
	position: relative;
	color: white;
	max-width: 400px;
	margin-top: 50px;
}

.vacomair-tekst h1 {
	color: #fff;
}

.vacomair-tekst p {
	color: white;
	padding-top: 10px;
	color: #fff;;
}

/* USPS */
.usp {
	position: relative;
	padding: 0px 0px 33px;
	text-align: center;
}

.usp img {
	position: relative;
	height: 22px;
	top: -1px;
}

.usp span {
	font-size: 14px;
}

/* DIENSTEN */
.diensten {
	position: relative;
	padding: 50px 0px 100px;
}

.diensten h6 {
	color: #f75d1c;
	text-align: center;
}

.diensten h2 {
	color: #333;
	text-align: center;
	padding-bottom: 30px;
	max-width: 500px;
	display: block;
	margin: auto;
}

.dienst-blok-foto {
	position: relative;
	background-size: cover;
	background-position: center;
	padding-top: 66%;
}

.dienst-blok-foto span {
	position: absolute;
	top: 30px;
	right: 30px;
	background: rgba(255, 255, 255, 0.5);
	color: #274079;
	padding: 10px 20px;
	font-size: 12px;
	border-radius: 100px;
}

.dienst-blok-tekst {
	padding: 50px;
}

/* PROJECTEN */
.projecten {
	position: relative;
	padding: 100px 0px;
	background: rgba(43, 147, 204, 0.1);
}

.projecten h2 {
	padding-bottom: 35px;
	color: #333;
}

.flickity-slider-group {
  width: 100%;
  position: relative;
}

.flickity-viewport {
  overflow: visible;
  width: 100%;
}

.flickity-list {
  width: 100%;
  display: flex;
}

.flickity-item {
  width: calc((99.99% / var(--flick-col))  - (var(--flick-gap) * ((var(--flick-col)  - 1) / var(--flick-col))));
  margin-right: var(--flick-gap);
  flex-shrink: 0;
}

.flickity-viewport {
  overflow: visible;
  width: 100%;
}

.flickity-controls {
  pointer-events: none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.flickity-arrows {
  pointer-events: none;
  justify-content: space-between;
  align-items: center;
  width: calc(100% + 3em);
  display: flex;
  position: relative;
}

.flickity-arrow {
  pointer-events: auto;
  color: #efeeec;
  cursor: pointer;
  background-color: #f75d1c;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  padding-left: .75em;
  padding-right: .75em;
  display: flex;
}

.flickity-arrow.is--flipped {
  transform: scaleX(-1);
}

[data-flickity-control][disabled] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.flickity-dots {
  width: 100%;
  padding-top: 4em;
  position: absolute;
  top: 100%;
  left: 0;
}

.flickity-dots-list {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  justify-content: center;
  align-items: center;
  display: flex;
}

.flickity-dot {
  pointer-events: auto;
  background-color: #d0cfcd;
  border-radius: 50%;
  width: .75em;
  height: .75em;
  cursor: pointer;
}

[data-flickity-dot="active"] {
  background-color: #131313;
}

/* Turn Flickity on */
[data-flickity-status="active"] [data-flickity-list]::after {
  content: "flickity";
  display: none;
}

[data-flickity-status="active"] [data-flickity-list] {
  display: block;
}

/* ------------ Flickity Slider - Cards  ------------ */

/* Desktop */
@media screen and (min-width: 992px) {
  [data-flickity-type="cards"] {
    --flick-col: 3;
    --flick-gap: 1.5em;
  }
  /* Turn Flickity OFF & Hide Controls */
  [data-flickity-type="cards"]:is([data-flickity-count="1"], [data-flickity-count="2"], [data-flickity-count="3"]) [data-flickity-list]::after {content:""; display: block;}
  [data-flickity-type="cards"]:is([data-flickity-count="1"], [data-flickity-count="2"], [data-flickity-count="3"]) [data-flickity-list] {display: flex;}
  [data-flickity-type="cards"]:is([data-flickity-count="1"], [data-flickity-count="2"], [data-flickity-count="3"]) [data-flickity-controls] {display: none;}
  [data-flickity-type="cards"] [data-flickity-dot]:nth-last-child(-n+2) {display: none;} /* Hide last two dots */
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
  [data-flickity-type="cards"] {
    --flick-col: 2;
    --flick-gap: 1.5em;
  }
  /* Turn Flickity OFF & Hide Controls */
  [data-flickity-type="cards"]:is([data-flickity-count="1"], [data-flickity-count="2"]) [data-flickity-list]::after {content:""; display: block;}
  [data-flickity-type="cards"]:is([data-flickity-count="1"], [data-flickity-count="2"]) [data-flickity-list] {display: flex;}
  [data-flickity-type="cards"]:is([data-flickity-count="1"], [data-flickity-count="2"]) [data-flickity-controls] {display: none;}
  [data-flickity-type="cards"] [data-flickity-dot]:nth-last-child(1) {display: none;} /* Hide last dot */
}

/* Mobile */
@media screen and (max-width: 767px) {
  [data-flickity-type="cards"] {
    --flick-col: 1.1;
    --flick-gap: 0.5em;
  }
  /* Turn Flickity OFF & Hide Controls */
  [data-flickity-type="cards"]:is([data-flickity-count="1"]) [data-flickity-list]::after {content:""; display: block;}
  [data-flickity-type="cards"]:is([data-flickity-count="1"]) [data-flickity-list] {display: flex;}
  [data-flickity-type="cards"]:is([data-flickity-count="1"]) [data-flickity-controls] {display: none;}
}

/* Demo Card */
.demo-card {
  position: relative;
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  background-color: #efeeec;
  background-size: cover;
  background-position: center;
  flex-flow: column;
  width: 100%;
  height: 450px;
  display: flex;
}

.demo-card:before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(35deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}

.demo-card__h2 {
	position: absolute;
	left: 30px;
	bottom: 30px;
	color: white;
}

.projecten .link-group {
	float: right;
	margin-right: 20px;
}

.projecten .link-group .underline-link {
	position: relative;
	top: 10px;
	right: 0px;
}

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

.btn-wit {
	position: absolute;
	background: white;
	padding: 12px 24px;
	border-radius: 100px;
	color: #222222;
	font-weight: 500;
}

.projecten-titel {
	position: relative;
	width: 100%;
	text-align: center;   
}

.aantal-projecten {
	position: relative;
	background: #2b93cc;
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100px;
	font-size: 16px;
	font-weight: 700;
	color: white;
	top: -56px;
	left: 228px;
}


/* TOTAALLEVERANCIER (OVER ONS) */
.totaal-leverancier {
	position: relative;
	padding-top: 50px;
}

.full-height {
	height: 100%;
}

.totaal-leverancier-tekst {
	padding: 75px;
}

.totaal-leverancier-tekst h2 {
	color: #333;
}

.totaal-leverancier-tekst img {
	height: 20px;
	margin-right: 12px;
}

.totaal-leverancier h6 {
	color: #f75d1c;
}

.link-group {
  gap: 1em;
  font-size: 3em;
  display: flex;
}

.underline-link {
  color: #222222;
  font-size: 1em;
  line-height: 1.5;
  font-weight: 700;
  text-decoration: none;
  position: relative;
}

.underline-link::before,
.underline-link.is--alt::before,
.underline-link.is--alt::after{
  content: "";
  position: absolute;
  bottom: 0em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: #2b93cc;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

.underline-link:hover::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
}

/* Alt */
.underline-link.is--alt::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

.underline-link.is--alt:hover::before {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

.underline-link.is--alt::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

.underline-link.is--alt:hover::after {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}


/* CTA */
.cta {
	position: relative;
	padding: 50px 0px;
}

.cta-contact {
	position: relative;
	padding: 60px;
	background: #2b93cc;
	color: white;
	min-height: 100%;
}

.cta-offerte {
	position: relative;
	padding: 60px;
	background: #f75d1c;
	color: white;
	min-height: 100%;
}

.cta-contact h3 {
	max-width: 250px;
}

.cta-offerte h3 {
	max-width: 250px;
}

.cta p {
	padding: 5px 0px 10px;
}

.contact-btn, .offerte-btn {
	position: relative;
	background: white;
	padding: 12px 24px;
	border-radius: 100px;
}

.contact-btn {
	color: #2b93cc;
}

.offerte-btn {
	color: #f75d1c;
}

.contact-foto {
	background-size: cover;
	background-position: center;
}

/****************** PROJECTEN PAGINA ****************/
.projecten-pagina {
	position: relative;
	padding: 200px 0px 100px;
	background: rgba(43, 147, 204, 0.1);
}

.projecten-pagina h1 {
	text-align: center;
	padding-bottom: 75px;
	max-width: 400px;
	display: block;
	margin: auto;
	color: #333;
}


/****************** OVER ONS PAGINA ****************/
.vacomair-sub {
	position: relative;
	height: 70vh;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vacomair-sub:before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}

.vacomair-sub h1 {
	position: relative;
	text-align: center;
	color: white;
	padding-top: 80px;
}

@media (min-width: 992px){
	.over-ons .container {
		width: 50%;
	}
}
.over-ons {
	padding: 100px 0px;
}

.over-ons h2 {
	color: #333;
	padding-bottom: 15px;
}


/****************** CONTACT ****************/
.contact {
	padding: 150px 0px 75px;
}

.contact h1 {
	text-align: center;
	padding-bottom: 75px;
	color: #333;
}

.contact .col-lg-6 {
	padding: 0px;
}

.contact-blauw {
	position: relative;
	background: #2b93cc;
	padding: 75px;
	min-height: 100%;
	color: white;
}

.contact-blauw a {
	color: white;
}

.contact-blauw ul {
	list-style: none;
	margin-left: -31px;
	line-height: 1.8;
}

.contact .row:nth-child(2) {
	display: flex;
	flex-wrap: wrap;
}

.contact .contact-blauw,
.contact .maps {
    height: 100%;
}

.maps {
	position: relative;
	padding-bottom: 50px;
}

.foto {
	position: relative;
	height: 500px;
	background-size: cover;
	background-position: center;
}

#input_2_3, #input_2_5, #input_2_6{
	height: 44px;
	outline: none;
	background: #f9f9f9;
	border: none;
	font-family: 'Plus Jakarta Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
}

#input_2_7 {
	height: 150px;
	outline: none;
	background: #f9f9f9;
	border: none;
	font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

#gform_submit_button_2 {
	position: relative;
	background: #131313;
	padding: 12px 24px;
	color: white;
	border: none;
	border-radius: 100px;
	font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  font-weight: 700;
}









/****************** OFFERTE AANVRAGEN ****************/
.offerte {
	position: relative;
	background: rgb(238, 116, 27, 0.1);
	padding: 150px 0px 75px;
}

@media (min-width: 992px){
	.offerte .container {
		width: 50%;
	}
}

.offerte h1 {
	text-align: center;
	padding-bottom: 50px;
}

.offerte-aanvragen {
	position: relative;
	background: white;
	padding: 50px 60px;
	border-top: 8px solid #f75d1c;
}

.gform_required_legend {
	display: none;
}
.maps {
	height: 500px;
}

#input_1_1, #input_1_3, #input_1_4, #input_1_5 {
	height: 44px;
	outline: none;
	background: #f9f9f9;
	border: none;
	font-family: 'Plus Jakarta Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
}

#input_1_6 {
	height: 150px;
	outline: none;
	background: #f9f9f9;
	border: none;
	font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

#gform_submit_button_1 {
	position: relative;
	background: #131313;
	padding: 12px 24px;
	color: white;
	border: none;
	border-radius: 100px;
	font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  font-weight: 700;
}

.placeholder {
	font-style: italic!important;
	font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}


/****************** FOOTER ****************/
footer {
	position: relative;
	font-family: 'Plus Jakarta Sans', sans-serif;
	padding: 50px 0px 75px;
}

footer p {
	font-size: 15px;
	font-weight: 400;
}

footer a {
	color: #000;
	font-size: 15px;
	font-weight: 400;
}

.footer-logo {
	width: 175px;

}

footer h3 {
	font-size: 17px;
	color: #333;
}

footer h6 {
	font-weight: 300!important;
}

footer td {
	font-weight: 700;
	font-size: 14px;
}

footer .tijd {
	position: relative;
	left: 30px;
	font-weight: 400;
	font-size: 14px;
}

footer .mail {
	margin-bottom: 30px;
}

footer hr {
	border: 0.1px solid lightgray!important;
}

footer table {
	margin-bottom: 20px!important;
	line-height: 1.8!important;
}

.telefonisch {
	font-size: 12px;
	color: #333;
	line-height: 1.2;
}

footer ul {
	list-style: none;
	line-height: 1.8!important;
	margin-left: -31px;
}

footer .scoredigital {
	position: relative;
	top: 60px;
}

.scoredigital a {
	font-size: 12px!important;
	color: #274079;
}


footer span {
	font-size: 12px!important;
}

footer .logos {
	display: flex;
	padding-top: 40px;
}

footer .partner {
	display: block;
	margin: auto;
	width: 50px;
}



.copy {
	position: relative;
	top: 50px;
}



/******************** SINGLE PROJECTEN ********************/
.single-projecten-top {
	position: relative;
	padding: 150px 0px 0px;
	background: rgba(43, 147, 204, 0.1);
}

.single-projecten-top .container {
	position: relative;
	height: 500px;
	background-size: cover;
	background-position: center;
}

.single-projecten-top .container:before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg,rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0) 100%);
}


.single-projecten-top h1 {
	position: absolute;
	left: 100px;
	bottom: 75px;
	color: white;
	max-width: 300px;
}

.single-projecten-inhoud {
	position: relative;
	background: rgba(43, 147, 204, 0.1);
	padding-bottom: 100px;
}

.single-projecten-inhoud .container {
	background: white;
	position: relative;
	padding: 75px 100px;
}

.single-project-foto {
	position: relative;
	height: 300px;
	background-size: cover;
	background-position: center;
}





/******************** SINGLE AANBOD ********************/
.luchtbehandelingskasten {
	position: relative;
	background: rgba(43, 147, 204, 0.1);
	
}

.luchtbehandelingskasten .col-md-6 {
	display: flex;
	justify-content: center;  
	align-items: center;     
	height: 90vh;            
	min-height: 90vh;
	background-size: cover;
	background-position: center;
}

.luchtbehandelingskasten-tekst {
	padding: 100px;
}

.luchtbehandelingskasten-tekst h1 {
	padding-bottom: 15px;
	padding-top: 80px;
	color: #333;
}
 
.foto-aanbod {
	position: relative;
	height: 90vh;
}



.aanbod-overzicht {
	position: relative;
	padding: 100px 0px 0px;
}

.aanbod-overzicht h2 {
	padding-bottom: 30px;
}

.aanbod-overzicht-lijst {
	position: relative;
	float: right;
	top: 10px;
}

.aanbod-overzicht-lijst li {
	display: inline-block;
	margin: 0px 15px;
}

.aanbod-overzicht-lijst ul li a.active {
	color: white;          /* tekstkleur wit, als je wilt */
	background-color: #274079; /* mooie blauwe achtergrond */
	padding: 10px 20px;
	border-radius: 100px;
	text-decoration: none;
	transition: background-color 0.3s ease;
}

.aanbod-overzicht-lijst ul li a.active:hover {
	background-color: #274079; /* donkerder blauw bij hover */
}


.single-aanbod-item {
	position: relative;
	height: 500px;
	background-size: cover;
	background-position: center;
	margin-bottom: 30px;
}

.single-aanbod-item-titel {
	position: absolute;
	top: 0px;
	background: #2b93cc;
	left: 0;
	right: 0;
	height: 75px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.single-aanbod-item h3 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #333;
	font-size: 20px;
	color: white;
}

.single-aanbod-item span {
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 15px;
}



/********************** SINGLE AANBOD PAGINA **********************/
.single-aanbod {
	position: relative;
	padding: 100px 0px;
}

.single-aanbod-foto {
	position: relative;
	height: 80vh;
	background-size: cover;
	background-position: center;
}

.single-aanbod-info {
	padding: 50px;
	color: #333;
}

/* SINGLE PRODUCT PAGINA ACCORDEON */
.accordion {
   margin-top: 20px;
}

#product-faq .accordion {
   padding: 0px!important;
}

#product-faq .accordion-button:not(.collapsed) {
   border: none!important;
   outline: none!important;
}
  
#product-faq .collapsed {
   color: white;
  }
  
#product-faq .accordion-item {
   border: none!important;
   outline: none!important;
   padding: 15px 0px!important;
   background: transparent;
   color: #0d274a;
   font-family: 'Plus Jakarta Sans', sans-serif;
	border-bottom: 1px solid lightgray!important;
	border-radius: 0px;
}
  
#product-faq .collapsing {
     outline: none!important;
}
  
#product-faq .accordion-button:focus {
   outline: none!important;
   box-shadow: none!important;
}
  
#product-faq .accordion-button {
   color: black;
   outline: none;
   background: transparent;
   line-height: 1.6;
   font-size: 15px;
   font-weight: 700;
   font-family: 'Plus Jakarta Sans', sans-serif;
   padding: 5px 0px!important;
}
  
#product-faq .accordion-body {
   color: #222;
   font-size: 13px;
   line-height: 1.8;
   font-family: 'Plus Jakarta Sans', sans-serif;
   padding: 10px 0px!important;
}
  
#product-faq .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.download-link {
	color: #007bff;
	text-decoration: underline;
	cursor: pointer;
 }
 
.download-link:hover {
	color: #0056b3;
}


/***************************** SERVICE EN ONDERHOUD PAGINA **************************/
.service {
	position: relative;
}

@media (min-width: 992px){
	.service .container {
		width: 60%;
	}
}

.service img {
	height: 20px;
	margin-right: 12px;
}
 

.service h6 {
	font-weight: 800;
}