@import url("reset.less");

/*------------------------------------------------------------------------ Global ------------------------------------------------------------------------*/

header {
	display: flex;
	padding: 1rem 0px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	.transition;
	
	&.scrolled {
		background: @dark;
		padding: 1.5rem 0px;
		.shadow_style;
	}
	
	.logo {
		width: 225px;
	}
	
	#mega-menu-primary {
		
		a {
			font-family: 'semi_bold' !important;
			text-transform: uppercase !important;
		}
	}
	
	.phone {
		background: @purple;
		color: @light;
		padding: 8px 12px;
	}
}

.button_box {
	display: flex;
	gap: 1rem;
}

.primaire_button { 
	background: @pink;
	color: @light;
	padding: 8px 30px;
	.shadow_style;
	.transition;

	&:hover {
		background-color: #b80b37;
		color: @light;
		text-decoration: none;
	}
}

.secundaire_button {
	background: @purple;
	color: @light;
	padding: 8px 30px;
	.shadow_style;
	.transition;

	&:hover {
		background-color: #805695;
		color: @light;
		text-decoration: none;
	}
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='date'],
select,
textarea {
	width: 100%;
	border: .5px solid @light;
	background: #2C2C2C;
	padding: 1rem;
	color: @light;
}

input[type='submit'] {
	display: inline-block;
	background: @pink;
	color: @light;
	padding: 8px 30px;
	.shadow_style;
	border: none;
	width: auto;
	float: inline-end;
}

.page_content {
	background: @dark;

	.page_div {
		background: @dark;
		color: @light;

		// In het intro blok
		&.activiteiten_options {
			background: transparent;
			transform: translateY(-4rem);

			.activiteiten_option {
				color: @light;

				.post_image {
					min-height: 300px;
					border: 1px solid @light;
					position: relative;
					.background_style;
					.shadow_style;

					h3 {
						position: absolute;
						bottom: 0;
						width: 100%;
						background: @dark;
						padding: 1rem;
						margin: 0;
						text-align: center;
					}
				}
			}
		}
		// end
		
		&.intro {
			padding: 16rem 0;
			position: relative;
			overflow: hidden;

			&.tekst {
				padding: 6rem 0 10rem 0;
				background-image: none;

				.logo {
					position: absolute;
					top: 50%;
					left: 100%;
					transform: translate(-80%, -50%);
					width: 500px;
					opacity: .05;
				}

				&:before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-image: linear-gradient(to left, @purple, @pink);
					opacity: .3;
				}
				
				&:after {
					content: '';
					width: 100%;
					height: .5rem;
					position: absolute;
					top: 0;
					left: 0;
					background-image: linear-gradient(to right, @pink, @purple);
				}
			}
			
			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-image: linear-gradient(to top, @dark, transparent);
				opacity: .5;
			}
			
			&:after {
				content: '';
				width: 100%;
				height: .5rem;
				position: absolute;
				bottom: 0;
				left: 0;
				background-image: linear-gradient(to right, @pink, @purple);
			}
			
			.row {
				position: relative;
				z-index: 10;
			}
			
			video {
				height: 56.25vw;
				min-height: 100vh;
				min-width: 0vh;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				transition: all .3s;
			}
			
			#myBtn {
				position: absolute;
				bottom: 2rem;
				left: 10rem;
				z-index: 10;
				background: none;
				border: none;
				border-bottom: 1px solid @light;
				color: @light;
			}
			
			.socials {
				position: absolute;
				bottom: 2rem;
				right: 10rem;
				z-index: 10;
				display: flex;
				gap: 1rem;
				
				i {
					color: @light;
				}
			}
		}
		
		&.divider {
			.background_style;
		}
		
		&.kolom_2 {
			
			img {
				margin-top: 1.5rem;
				width: 100%;
				aspect-ratio: 2/1;
				object-fit: cover;
			}
		}
		
		&.text_image {

			&.in_container {

				.image {
					min-height: 600px;
				}
			}
			
			.image {
				height: 100%;
				min-height: 400px;
				.background_style;
			}
			
			h6 {
				color: @purple;
			}

			.text {

				ul {
					list-style-type: none;
					padding: 0;

					li {
						padding: .5rem 0;
						margin-left: 2rem;
						position: relative;

						&:after {
							content: '';
							position: absolute;
							top: 50%;
							left: 0;
							width: 20px;
							height: 20px;
							transform: translate(-2rem, -50%);
							background-image: url('../images/check.svg');
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
						}
					}
				}
			}
		}
		
		&.text_image_2 {

			&.versie_2_0 {

				.image {
					height: 100%;
					min-height: 600px;
					.background_style;
					position: relative;
					
					.strong_left {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						background: @pink;
						position: absolute;
						top: 90%;
						left: unset;
						right: 0;
						transform: translate(25%, -100%) rotate(10deg);
						width: max-content;
						aspect-ratio: 1;
						border-radius: 200px;
						padding: 2rem;
					}
					
					.strong_right {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						background: @pink;
						position: absolute;
						top: 90%;
						left: 0;
						transform: translate(-25%, -100%) rotate(-10deg);
						width: max-content;
						aspect-ratio: 1;
						border-radius: 200px;
						padding: 2rem;
					}
				}
			}
			
			.image {
				height: 100%;
				min-height: 500px;
				.background_style;
				// position: relative;
				
				.strong_left {
					background: @pink;
					position: absolute;
					left: 0;
					width: 400px;
					padding: 1rem 2rem 1rem 4rem;
					text-transform: unset;
				}
				
				.strong_right {
					background: @pink;
					position: absolute;
					right: 0;
					width: 400px;
					padding: 1rem 4rem 1rem 2rem;
					text-transform: unset;
				}
			}
			
			h6 {
				color: @purple;
			}

			.text {

				ul {
					list-style-type: none;
					padding: 0;

					li {
						padding: .5rem 0;
						margin-left: 2rem;
						position: relative;

						&:after {
							content: '';
							position: absolute;
							top: 50%;
							left: 0;
							width: 20px;
							height: 20px;
							transform: translate(-2rem, -50%);
							background-image: url('../images/check.svg');
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
						}
					}
				}
			}
		}

		&.text_image_3 {

			h6 {
				color: @purple;
			}
			
			.image_1,
			.image_4,
			.image_5 {
				width: 100%;
				height: 220px;
				object-fit: cover;
			}
			.image_2,
			.image_3 {
				width: 100%;
				height: 350px;
				object-fit: cover;
			}

			.inner_box {
				background: @purple;
				padding: 2rem;
				height: 350px;

				strong {
					text-transform: none;
				}

				.secundaire_button {
					background: transparent;
					border: 1px solid @light;
					color: @light;
				}
			}
		}

		&.summary_price {

			.price {

				.price {
					position: relative;

					&:after {
						content: '';
						position: absolute;
						top: 100%;
						left: 50%;
						width: 100%;
						height: 3px;
						transform: translate(-50%, -100%);
						background: @purple;
					}
				}

				.sale {
					opacity: .3;
					position: relative;

					&:after {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						width: 110%;
						height: 3px;
						transform: translate(-50%, -50%);
						background: @pink;
						opacity: .9;
					}
				}
			}
		}
		
		&.contact_maps {
			position: relative;
			
			.contact_details_box {
				background: @dark;
				position: absolute;
				top: 50%;
				left: 80%;
				transform: translate(-50%, -50%);
				padding: 2rem 4rem;
				
				h5, p {
					margin-bottom: 0;
				}
				
				a {
					color: @light;
				}
			}
		}
		
		&.contact_form {
			
			.contact_details_box {
				padding: 4rem 2rem;
				
				h5, p {
					margin-bottom: 0;
				}
				
				a {
					color: @light;
				}
			}
		}

		&.offerte {
			.background_style;
			position: relative;
			margin: 2rem 0;

			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-image: linear-gradient(to right, @dark, transparent);
				opacity: .75;
			}

			.row {
				position: relative;
				z-index: 10;
			}
			
			.form_box {
				background: @dark;
				border: 1px solid @light;
				transform: scale(1.1);
				
				h3 {
					padding: 2rem 3rem;
					background-image: linear-gradient(to right, @pink, @purple);
				}

				.form {
					padding: 2rem 3rem;
				}
			}
		}
		
		&.reviews {
			position: relative;
			
			.review_icon_left {
				position: absolute;
				top: 0;
				left: 4rem;
				width: 250px;
			}
			
			.review_icon_right {
				position: absolute;
				bottom: 0;
				right: 4rem;
				width: 250px;
			}
			
			strong {
				text-transform: unset;
			}

			.google_logo {
				height: 24px;
			}
		}
		
		&.usps {
			padding: 4rem 0;
			background: linear-gradient(100deg,rgba(234, 14, 69, 1) 0%,rgba(16, 16, 16, 1) 50%,rgba(16, 16, 16, 1) 50%,rgba(16, 16, 16, 1) 50%,rgba(172, 112, 203, 1) 100%),radial-gradient(circle, rgba(16, 16, 16, 1) 20%, transparent 100%);
			background-blend-mode: overlay;

			&.v_2 {
				background-blend-mode: overlay;
				background-image: linear-gradient(to right, rgba(234, 14, 69, 0.5), rgba(173, 112, 203, 0.5));
				position: relative;

				.logo {
					position: absolute;
					z-index: -1;
					top: 50%;
					left: 0;
					width: 400px;
					transform: translate(0%, -50%);
					opacity: .05;
				}

				.row {
					position: relative;
					z-index: 2;
				}

				.item {
					background: @dark;
					border: 1px solid @light;
					padding: 1rem 1.5rem;

					.image_box {
						width: 20%;

						img {
							width: 60px;
							aspect-ratio: 1;
							object-fit: contain;
						}
					}

					h6 {
						text-transform: none;
						width: 25%;
					}

					.text {
						width: 55%;

						p {
							margin: 0;
						}
					}
				}
			}
			
			.icon {
				width: 50px;
				height: 100%;
				.background_style;
				background-size: contain !important;
			}
		}
		
		&.faq {
			
			.accordion-item {
				border-top: 1px solid @light;
				border-bottom: 1px solid @light;
				
				.accordion-button {
					background: @dark;
					color: @light;
					padding: 1rem 0;
					box-shadow: none;
					text-transform: uppercase !important;
					
					&:after {
						color: @light;
						background: url('../images/down_arrow.png');
						.background_style;
						background-size: 50% !important;
					}
				}
				
				.accordion-collapse {
					background: @dark;
					
					.accordion-body {
						padding: 1rem 0 2rem 0;
					}
					
					p {
						color: @light;
						margin: 0;
					}
				}
				
				&:last-child,
				&:first-child {
					border-top: none;
					border-bottom: none;
				}
			}
		}
		
		&.activiteiten {
			overflow: hidden;
			padding-bottom: 25px;
			
			.slick-list {
				overflow: visible;
			}
			
			.post_image {
				position: relative;
				padding: 1rem 2rem;
				width: 100%;
				aspect-ratio: 3/4;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;
				.background_style;
				.transition;
				position: relative;
				
				&:after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-image: linear-gradient(to top, @dark, transparent);
					opacity: .5;
				}
				
				* {
					position: relative;
					z-index: 10;
				}
				
				h3 {
					transform: translateY(40px);
					.transition;
				}
				
				.primaire_button {
					opacity: 0;
					transform: translateY(10px);
				}
				
				.coming_soon {
					background: @purple;
					color: @light;
					padding: .5rem .5rem .4rem 0.5rem;
					margin: 0;
					border-radius: .5rem 0 .5rem 0;
					font-size: .75rem !important;
					position: absolute;
					top: 0;
					right: 0;
					transform: translate(.5rem, -.5rem);
				}
				
				&:hover {
					transform: scale(1.05);
					
					h3 {
						transform: translateY(0px);
					}
					
					.primaire_button {
						opacity: 1;
						transform: translateY(0px);
					}
				}
			}
		}
		
		&.timeline {
			
			.slick-prev, .slick-next {
				transform: translateY(-42px);
			}
			
			.timeline_item {
				
				.element_circle_1 {
					width: 50px;
					height: 50px;
					border-radius: 50px;
					background: #ea0e4578;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					
					.line {
						position: absolute;
						height: 2px;
						width: 1000%;
						background: @light;
						z-index: -1;
					}
					
					.element_circle_2 {
						width: 30px;
						height: 30px;
						border-radius: 30px;
						background: @pink;
						display: flex;
						align-items: center;
						justify-content: center;
						
						.element_circle_3 {
							width: 15px;
							height: 15px;
							border-radius: 15px;
							background: @light;
						}
					}
				}
			}
		}
		
		&.planning {
			
			h6 {
				color: @purple;
			}
			
			.planning_item {
				
				border: 1px solid @light;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				.transition;
				
				.afbeelding {
					position: relative;
					width: 100%;
					aspect-ratio: 12/5;
					.background_style;
					.transition;
				}
				
				.post_content {
					padding: 2rem;
				}
				
				&:hover {
					transform: translateY(-10px);
					-webkit-box-shadow: 0px 10px 25px 0px rgba(172, 112, 203, 0.25);
					-moz-box-shadow: 0px 10px 25px 0px rgba(172, 112, 203, 0.25);
					box-shadow: 0px 10px 25px 0px rgba(172, 112, 203, 0.25);
				}
			}
		}
		
		&.menu {
			
			.primaire_button,
			.secundaire_button {
				display: flex;
				gap: .5rem;
				align-items: center;
			}
			
			.menu_image {
				width: 100%;
			}
		}

		&.bedrijven {

			.box {
				border: 1px solid @light;
				padding: 1rem 1rem 2rem 1rem;
				position: relative;

				&:after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					height: .5rem;
					width: 100%;
					background-image: linear-gradient(to right, @pink, @purple);
				}

				.menu_image {
					width: 80%;
					margin: auto;
				}
			}
		}
		
		&.error_page {
			display: flex;
			align-items: center;
			background: @dark;
			min-height: 75vh;
		}
	}
}

footer {
	border-top: .5px solid @light;
	padding: 4rem 0;
	background: @dark;
	color: @light;
	position: relative;
	
	&:after {
		content: '';
		width: 100%;
		height: .5rem;
		position: absolute;
		bottom: 0;
		left: 0;
		background-image: linear-gradient(to right, @pink, @purple);
	}
	
	.sticky_button {
		position: fixed;
		bottom: 0rem;
		right: 100px;
		z-index: 999;
		opacity: 0;
		font-family: 'semi_bold' !important;
		text-transform: uppercase;
		font-size: 1rem;
		width: max-content;
		
		&.visible {
			position: fixed;
			bottom: 1rem;
			right: 100px;
			z-index: 2147483002;
			opacity: 1;
		}
	}
	
	.logo {
		width: 150px;
	}
	
	p {
		font-size: .8rem;
		margin: 0;
	}
	
	.socials {
		display: flex;
		gap: 1rem;
		
		i {
			color: @light;
		}
	}
	
	h3 {
		font-size: 1rem !important;
	}
	
	strong {
		text-transform: unset;
		font-size: .8rem;
	}
	
	span, a {
		font-size: .8rem;
		font-family: 'regular' !important;
		text-transform: unset;
		color: @light;
	}
	
	.menu {
		padding: 0;
		margin: 0;
		list-style-type: none;
		columns: 2;
		-webkit-columns: 2;
		-moz-columns: 2;
		
		a {
			color: @light;
		}
	}
	
	input[type='email'] {
		padding: .5rem 1rem;
	}
	
	input[type='submit'] {
		margin-top: 1rem;
		float: unset !important;
		font-family: 'semi_bold' !important;
		text-transform: uppercase;
	}
	
	.footer_buttons {
		
		a {
			display: inline-block;
			font-family: 'semi_bold' !important;
			text-transform: uppercase;
		}
		
		#scrollToTop {
			background: transparent;
			color: @light;
			border: 1px solid @light;
			padding: 8px 30px;
			cursor: pointer;
			.shadow_style;
		}
	}
}

.modal {
	
	.close {
		position: absolute;
		top: 10px;
		right: 10px;
		
		i {
			color: @light;
			cursor: pointer;
		}
	}
	
	.modal-content {
		background: @dark;
		border-radius: 0px;
		color: @light;
		padding: 50px;
		
		.image {
			width: 100%;
			max-height: 250px;
			object-fit: cover;
			object-position: center;
		}
		
		.color_div {
			width: 100%;
			height: .5rem;
			background-image: linear-gradient(to right, @pink, @purple);
		}
	}
}

/*---------------------------------------------------------------------- Responsive ----------------------------------------------------------------------*/

@media only screen and (min-width: 960px) and (max-width: 1199px) {


}


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

	.page_content {
		
		.button_box {
			flex-wrap: wrap;
		}
		
		.page_div {
			
			&.intro {
				background-image: url('/wp-content/uploads/2025/03/Bowlen-2-scaled-e1742471955566.jpg');
				.background_style;
				padding: 14rem 0rem;
				
				#myBtn {
					display: none;
				}
				
				.socials {
					right: 50%;
					transform: translateX(50%);
				}
			}
			
			&.text_image {
				
				.image {
					min-height: 250px;
				}
				
				h6 {
					margin-top: 2.5rem;
				}
			}
			
			&.text_image_2 {

				&.versie_2_0 {

					.image {
						min-height: 300px;
						
						.strong_left {
							top: 100%;
							left: unset;
							right: 0;
							transform: translate(-10%, -90%) rotate(10deg);
							width: max-content;
							aspect-ratio: 1;
							border-radius: 200px;
							padding: 1rem;
						}
						
						.strong_right {
							top: 100%;
							left: unset;
							right: 0;
							transform: translate(-10%, -90%) rotate(10deg);
							width: max-content;
							aspect-ratio: 1;
							border-radius: 200px;
							padding: 1rem;
						}
					}
				}
				
				.image {
					min-height: 300px;
					
					.strong_left {
						width: 250px;
						padding: 1rem;
					}
					
					.strong_right {
						width: 250px;
						padding: 1rem;
					}
				}
			}

			&.text_image_3 {
				
				.image_2,
				.image_3 {
					height: 220px;
				}
	
				.inner_box {
					height: unset;
				}
			}
			
			&.contact_maps {
				
				.contact_details_box {
					left: 50%;
					
					.button_box {
						flex-wrap: unset;
					}
				}
			}

			&.offerte {
				padding: 4rem 0;
				margin: 0;
	
				&:after {
					background-image: linear-gradient(to right, @dark, @dark);
				}
				
				.form_box {
					transform: unset;
					
					h3 {
						padding: 1rem 1rem;
					}
	
					.form {
						padding: 1rem 1rem;

						.name_group {

							p {
								flex-direction: column;

								label {
									width: 100%;
								}

								br {
									display: none;
								}
							}
						}
					}
				}
			}
			
			&.reviews {
				
				.review_icon_left {
					top: -4rem;
					left: 1rem;
					width: 200px;
				}
				
				.review_icon_right {
					bottom: -4rem;
					right: 1rem;
					width: 200px;
				}
				
				.slick-prev {
					-webkit-transform: translate(50%, -50%);
					-ms-transform: translate(50%, -50%);
					transform: translate(50%, -50%);
				}
				
				.slick-next {
					-webkit-transform: translate(-50%, -50%);
					-ms-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
				}
			}
			
			&.usps {

				&.v_2 {
	
					.item {
	
						.image_box {
							width: 100%;
	
							img {
								margin-left: 50%;
								transform: translateX(-50%);
							}
						}
	
						h6 {
							width: 100%;
							text-align: center;
						}
	
						.text {
							width: 100%;
						}
					}
				}
				
				strong {
					font-size: .7rem !important;
				}
			}
		}
	}
	
	footer {
		
		.socials {
			position: absolute;
			top: 4rem;
			right: 12px;
			transform: translateY(-50%);
			
			i {
				font-size: 1.5rem;
			}
		}
		
		.sticky_button {
			position: fixed;
			bottom: 0rem;
			left: 50%;
			transform: translateX(-50%);
			
			&.visible {
				bottom: 1rem;
				left: 50%;
				transform: translateX(-50%);
				z-index: 214748300;
			}
		}
		
		.footer_buttons {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
	}
}


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


}	 


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


}