/* 

YOR Dental styles

Copyright 2026 - Netfuel Ltd
www.netfuel.co.uk

*/


:root {
	--default-gutter-x: 15px;
	--default-gutter-y: 15px;
	--color-primary: #33325B;
	--color-secondary: #587977;
	--color-tertiary: #DEE7E6;
	--color-white: #ffffff;
	--color-error: #c0392b;
	--color-error-bg: #fdf0ef;
	--text-size-sm: 14px;
	--text-size: 16px;
	--text-size-md: 18px;
	--text-size-lg: 24px;
	--text-size-xl: 36px;
	--text-size-xxl: 56px;
	--border-radius: 3px;
	--transition: all 0.25s ease-in-out;
	--transition-background: background-color 0.25s ease-in-out;
	--transition-color: color 0.25s ease-in-out;
}


/* General Layout */

html,body {
	
	margin: 0;
	padding-right: 0 !important;
	background-color: var(--color-white);
	font-family: 'utile-display', sans-serif;
	font-size: var(--text-size);
	color: var(--color-primary);
	font-weight: 400;
	font-optical-sizing: auto;
	overflow-x: clip;
	scroll-behavior: smooth;
	scroll-padding-top: 80px;

}

body {

	&:has(.header .menu-wrapper nav > ul > li.parent:hover)::before {
		content: '';
		position: fixed;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.25);
		z-index: 8;
	}

}


.mt-1 {margin-top: calc(var(--default-gutter-y) * 1) !important;}
.mb-1 {margin-bottom: calc(var(--default-gutter-y) * 1) !important;}
.mt-2 {margin-top: calc(var(--default-gutter-y) * 2) !important;}
.mb-2 {margin-bottom: calc(var(--default-gutter-y) * 2) !important;}
.mt-4 {margin-top: calc(var(--default-gutter-y) * 4) !important;}
.mb-4 {margin-bottom: calc(var(--default-gutter-y) * 4) !important;}
.pt-1 {padding-top: calc(var(--default-gutter-y) * 1) !important;}
.pb-1 {padding-bottom: calc(var(--default-gutter-y) * 1) !important;}
.pt-2 {padding-top: calc(var(--default-gutter-y) * 2) !important;}
.pb-2 {padding-bottom: calc(var(--default-gutter-y) * 2) !important;}


.container, .container-fluid {

	&:is(.container-fluid) {

		max-width: 100%;
		padding-left: 0;
		padding-right: 0;

	}

	&.xl {

		max-width: 100%;
		padding-left: 0;
		padding-right: 0;			

	}

	&:not(.container-fluid,.xl) {

		max-width: 100%;
		padding-left: calc(var(--default-gutter-x) * 2);
		padding-right: calc(var(--default-gutter-x) * 2);

	}

}
.row {

	&:not(.row-gap-0,.row-gap-1,.row-gap-4) {

		row-gap: calc(var(--default-gutter-y) * 2) !important;

	}

	&.row-gap-1 {

		row-gap: calc(var(--default-gutter-y) * 1) !important;

	}

	&.row-gap-4 {

		row-gap: calc(var(--default-gutter-y) * 4) !important;

	}

	&:not(.col-gap-0,.col-gap-1,.col-gap-4) {

		margin-left: calc(var(--default-gutter-x) / -1);
		margin-right: calc(var(--default-gutter-x) / -1);

		>* {

			padding-left: var(--default-gutter-x);
			padding-right: var(--default-gutter-x);

		}

	}

	&.col-gap-0 {

		margin-left: 0;
		margin-right: 0;

		>* {

			padding-left: 0;
			padding-right: 0;

		}

	}

	&.col-gap-1 {

		margin-left: calc((var(--default-gutter-x) / 2) / -1);
		margin-right: calc((var(--default-gutter-x) / 2) / -1);

		>* {

			padding-left: calc(var(--default-gutter-x) / 2);
			padding-right: calc(var(--default-gutter-x) / 2);

		}

	}

	&.col-gap-4 {

		margin-left: calc((var(--default-gutter-x) * 2) / -1);
		margin-right: calc((var(--default-gutter-x) * 2) / -1);

		>* {

			padding-left: calc(var(--default-gutter-x) * 2);
			padding-right: calc(var(--default-gutter-x) * 2);

		}

	}

}

:focus, :focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

img {
	
	max-width: 100%;
	flex-shrink: 0;
	border: 0;
	vertical-align: middle;

}
span {
	
	display: block;

}
a {
	
	transition: var(--transition);

	&:not(.underlined-link) {

		text-decoration: none;

	}

}
ul.menu {
	
	padding: 0;
	list-style: none;

	&:not(.row) {

		margin: 0;

	}

	&.row {margin-bottom: 0;}
	
}
.title, h1, h2, h3, h4, h5, h6 {
	
	display: block;
	font-weight: 300;
	line-height: 112.5%;
	margin-bottom: 0;

	&.xl {

		font-size: var(--text-size-xl);

	}

	&.xxl {

		font-size: var(--text-size-xxl);

	}

	&.lg {

		font-size: var(--text-size-lg);

	}

	&.md {

		font-size: var(--text-size-md);

	}

	&.sm {

		font-size: var(--text-size-sm);

	}

	&.primary {

		color: var(--color-primary) !important;

	}

	&.bold {

		font-weight: 600;

	}

}

a.back-to {

	color: inherit;

	&:before {

		content: '\2190';
		margin-right: 10px;

	}

	&:hover {

		color: var(--color-secondary);

	}

}

.button, .facetwp-facet-load_more button {
	
	display: flex;
	justify-content: center;
	align-items: center;
	padding: calc(var(--default-gutter-y) * 0.75) var(--default-gutter-x);
	background-color: var(--color-primary);
	border: 0;
	border-radius: var(--border-radius);
	font-size: var(--text-size);
	color: var(--color-white);
	font-weight: 500;
	transition: var(--transition);

	&.sm {

		padding: calc(var(--default-gutter-y) * 0.25) var(--default-gutter-x);
		font-size: var(--text-size-sm);

	}

	&.secondary {

		background-color: var(--color-secondary);

		&.outlined {

			background-color: transparent;
			border: 1px solid var(--color-secondary);
			color: var(--color-secondary);

			&:is(a):hover,&.active {

				background-color: var(--color-secondary);
				border-color: var(--color-secondary);
				color: var(--color-white);

			}

		}

		&:is(a):not(.outlined):hover {

			background-color: var(--color-primary);

		}

	}

	&.white {

		background-color: var(--color-white);
		color: var(--color-primary);

	}

	&.label {

		background: rgba(0,0,0,0.15);
		color: var(--color-primary);

	}

	&.outlined {

		background-color: transparent;
		border: 1px solid var(--color-primary);
		color: var(--color-primary);

		&:is(a):hover,&.active {

			background-color: var(--color-primary);
			border-color: var(--color-primary);
			color: var(--color-white);

		}

	}

	&:is(a):hover, &.gform_button:hover {

		background-color: var(--color-secondary);
		color: var(--color-white);

	}

	&:is(.facetwp-checkbox, .nf-facet-all) {

		padding: calc(var(--default-gutter-y) * 0.75) var(--default-gutter-x);

		&:hover, &.checked {

			background-color: var(--color-primary);
			color: var(--color-white);

		}

	}

	&.gform_button {

		margin-bottom: 0 !important;

	}

}
.boxen {
		
	p {
	
		margin-bottom: var(--default-gutter-y);
		line-height: 150%;

		&:last-of-type {

			margin-bottom: 0;

		}
	
	}

	p, li {

		a {

			color: inherit;
			text-decoration: underline;

			&:hover {

				color: var(--color-secondary);

			}

		}

	}

	&.sm {

		p, li {

			font-size: var(--text-size-sm);

		}

	}

	&.md {

		p, li {

			font-size: var(--text-size-md);

		}

	}

	&.lg {

		p, li {

			font-size: var(--text-size-lg);

		}

	}

	&.reversed {

		.title, p, li {

			color: var(--color-white);

		}

	}

	figure {

		margin-bottom: 0;
		
		.blockquote {

			display: flex;
			position: relative;
			margin-bottom: 0;

			p {

				display: inline;				
				line-height: 125%;

			}

			&.lg {

				p {

					font-size: var(--text-size-lg);

				}

			}

		}

		.blockquote-footer {

			margin-top: calc(var(--default-gutter-y) * 2);
			margin-bottom: 0;

			&:before {

				display: none;

			}

			.image-wrapper {

				width: 72px;
				border-radius: 100%;
				overflow: hidden;

			}

			.title {

				font-size: var(--text-size);
				color: var(--color-primary);

			}

		}

	}

}

.rounded {

	border-radius: var(--border-radius) !important;
	overflow: hidden;

}

.ratio {

	&.ratio-3x1 {

		--bs-aspect-ratio: 33.33333%;

	}

}

[class^="min-ratio"] {

	width: 100%;
	height: 100%;

	&[class*="16x9"] {

		aspect-ratio: 16/9;

	}

	img {

		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;

	}

}

.ratio >*, .object-fit >* {

	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;	

}

.image-cutout {

	display: flex;
	position: relative;
	width: 100%;
	height: 100%;
	padding-left: calc(var(--default-gutter-x) * 2);
	padding-right: calc(var(--default-gutter-x) * 2);

	&.fill {

		height: calc(100% + calc(var(--default-gutter-y) * 2));
		top: calc((var(--default-gutter-y) * 2) / -1);

	}

}

strong {

	font-weight: 600;

}

.numbered-icon {

	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	background-color: var(--color-white);
	border-radius: 100%;

	.title {
		
		color: var(--color-primary);

	}

}

.social-icons {

	a {

		&:hover {

			opacity: 0.5;

		}

	}

}

.header-wrapper {

	.header {

		position: relative;
		z-index: 9;
		background-color: var(--color-primary);

		.container > .row >*:not(.menu-wrapper) {

			padding-top: var(--default-gutter-y);
			padding-bottom: var(--default-gutter-y);

		}

		.menu-wrapper {

			nav {

				> ul > li {

					display: flex;
					align-items: center;

					> a {

						color: var(--color-white);

						&:hover {

							text-decoration: underline;

						}

					}

					&.parent {

						position: relative;

						.dropdown, .dropdown .secondary-dropdown {

							display: none;
							position: absolute;
							top: 100%;
							left: calc(var(--default-gutter-x) * 2);
							background-color: var(--color-white);

							.menu {

								li {

									a {

										display: block;
										padding: calc(var(--default-gutter-y) * 1) calc(var(--default-gutter-x) * 2);
										color: var(--color-primary);

										>* {

											transition: var(--transition);

										}

										&:hover {

											>* {

												transform: translateX(3px);

											}

										}

									}

									&:not(:last-of-type) {
										
										&:after {

											content: '';
											display: block;
											position: relative;
											left: calc(var(--default-gutter-x) * 2);
											width: calc(100% - var(--default-gutter-x) * 4);
											height: 0.5px;
											background-color: var(--color-secondary);

										}

									}

									&.parent {

										> a {

											display: flex;
											justify-content: space-between;
											align-items: center;
											column-gap: calc(var(--default-gutter-x) * 2);

											&:after {

												content: '';
												width: 14px;
												height: 8px;
												background-image: url('../images/menu-arrow-icon.svg');
												background-size: cover;

											}

										}

									}

								}

							}

						}

						.dropdown {

							.menu {

								li {

									white-space: nowrap;
									color: var(--color-primary);

									&.parent {

										&:hover {

											.secondary-dropdown {

												display: block;

											}

										}

									}

								}

							}

							.secondary-dropdown {

								position: absolute;
								top: 0;
								left: 100%;
								min-height: 100%;
								background-color: var(--color-tertiary);

							}

						}

						&:hover {

							.dropdown {

								display: block;

							}

						}

					}

				}

			}

		}

		.header-elements-wrapper {

			.row.col-gap-1 {

				>.col-auto:first-of-type {

					display: none;

				}

			}

			.mobile-menu-button {
				
				display: block;
				position: relative;
				z-index: 3;
				width: 25px;
				height: 22px;
				cursor: pointer;
			
				span {
					
					position: relative;
					top: 10px;
				
				}

				span, span:before, span:after {
					
					display: block;
					content: '';
					width: 25px;
					height: 2px;
					background-color: var(--color-white);
					transition: all 0.5s ease-in;
				
				}
				
				span:before, span:after {
					
					position: absolute;
					top: -10px;
				
				}

				span:after {
					
					top: 10px;
				
				}

			}

			.button {

				padding: calc(var(--default-gutter-y) * 0.5) var(--default-gutter-x);
				font-size: var(--text-size);

				span {

					display:none;

				}
				
				&.outlined {

					background-color: transparent;
					border: 1px solid var(--color-white);
					color: var(--color-white);

					&:hover {

						background-color: var(--color-secondary);
						border-color: var(--color-secondary);

					}

				}

			}

		}

	}

	.mobile-menu {

		display: none;
		min-height: 0;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		padding-top: calc(var(--default-gutter-y) * 2);
		padding-bottom: calc(var(--default-gutter-y) * 2);

		.mobile-menu-content {

			.accordion {

				background-color: transparent;

				.accordion-item {

					background-color: transparent;
					border: 0;

					.accordion-header {

						display: flex;
						justify-content: space-between;
						font-size: var(--text-size-lg);
						color: var(--color-white);
						font-weight: 600;

						a {

							display: block;
							padding: var(--default-gutter-y) 0;
							color: inherit;

							&:hover {

								color: var(--color-secondary);

							}

						}

						.accordion-button {

							flex: 1 0 0;
							width: auto;
							padding: var(--default-gutter-y) 0;
							padding-left: var(--default-gutter-x);
							background-color: transparent;
							
							&:after {

								color: var(--color-white);
								filter: brightness(0) invert(1);

							}

							&:not(.collapsed) {

								box-shadow: none;

							}

						}

					}

					.accordion-collapse {

						.accordion-body {

							margin-top: calc((var(--default-gutter-y) / 2) / -1);
							margin-bottom: calc(var(--default-gutter-y) / 2);
							padding: 0;
							padding-left: var(--default-gutter-x);

							#accordionFlushMobileMenu-depth-2 {

								.accordion-header {

									font-size: var(--text-size-md);
									
									a {

										display: block;
										padding-top: calc(var(--default-gutter-y) / 2);
										padding-bottom: calc(var(--default-gutter-y) / 2);
										color: var(--color-white);

										&:hover {

											color: var(--color-secondary);

										}

									}

								}

							}

						}

					}

				}

				&#accordionFlushMobileMenu-depth-1 {

					> .accordion-item {

						border-bottom: 1px solid var(--color-white);
						border-color: var(--color-white);

					}

				}

			}

		}

	}

}

.content-section {

	position: relative;
	padding-top: calc(var(--default-gutter-y) * 4);
	padding-bottom: calc(var(--default-gutter-y) * 4);
	overflow: hidden;

	&.secondary {

		background-color: var(--color-secondary);

		.boxen {

			.title, p, li {

				color: var(--color-white);

			}

		}

		.button {

			&:is(a):hover {

				background-color: var(--color-white);
				color: var(--color-secondary);

			}

			&.outlined {

				border-color: var(--color-white);
				color: var(--color-white);

				&:hover {

					background-color: var(--color-white);
					color: var(--color-secondary);

				}

			}

		}

	}

	&.tertiary {

		background-color: var(--color-tertiary);

		:not(.panel) {

			.boxen-wrapper {

				&:not(.primary,.secondary,.tertiary) {

					background-color: var(--color-white);

				}

			}

		}

	}

	&.white {

		.boxen-wrapper:not(.panel *, .video-swiper *) {

			&:not(.primary,.secondary,.tertiary) {

				background-color: var(--color-tertiary);

			}

		}

		.numbered-icon:not(.panel *, .video-swiper *) {

			background-color: var(--color-primary);

			.title, p, li {

				color: var(--color-white);

			}

		}

	}

	&.footer {

		background-color: var(--color-primary);

		.boxen {

			.title, p, li {

				color: var(--color-white);

			}

			p, li {

				a {

					color: inherit;
					text-decoration: none;

					&:hover {

						text-decoration: underline;

					}

				}

			}

			p {

				a {

					text-decoration: underline;

					&:hover {

						color: var(--color-secondary);

					}

				}

			}

		}

		.social-icons {

			a {

				img {

					filter: brightness(0) invert(1);

				}

			}

		}

	}

	.container.xl {

		.boxen-wrapper {

			padding-left: calc(var(--default-gutter-x) * 2);
			padding-right: calc(var(--default-gutter-x) * 2);

		}

	}

	.container {

		.padding-wrapper {

			padding: calc(var(--default-gutter-y) * 2) calc(var(--default-gutter-x) * 2);

			&.xs {

				padding: calc(var(--default-gutter-y) * 1) calc(var(--default-gutter-x) * 1);

			}

		}

	}

	.container-fluid {

		.row {
		
			>[class*="col"] {

				&.contained {

					&:first-of-type {

						padding-left: calc(var(--default-gutter-x) * 2);
						padding-right: calc(var(--default-gutter-x) * 2);

					}

					&:not(:first-of-type):last-of-type {

						padding-left: calc(var(--default-gutter-x) * 2);
						padding-right: calc(var(--default-gutter-x) * 2);

					}

				}

			}

			>[class*="col"] {

				> .padding-wrapper {

					padding-top: calc(var(--default-gutter-y) * 4);
					padding-bottom: calc(var(--default-gutter-y) * 4);

				}

			}

		}

	}

	.column-bg {

		position: absolute;
		z-index: 1;

		&.sm {

			width: 50%;

		}

		&.top {

			top: 0;

		}

		&.middle {

			top: 0;
			bottom: 0;
			margin-block: auto;
			height: fit-content;

		}

		&.bottom {

			bottom: 0;

		}

		&.left {

			left: calc((var(--default-gutter-y) * 4) / -1);

			&.contained {

				left: max(calc(var(--default-gutter-x) * 2), calc((100% - 1520px) / 2 + var(--default-gutter-x) * 2));

			}

		}

		&.center {

			left: 0;
			right: 0;
			margin-inline: auto;
			width: fit-content;

		}

		&.right {

			right: 0;

			&.contained {

				right: max(calc(var(--default-gutter-x) * 2), calc((100% - 1520px) / 2 + var(--default-gutter-x) * 2));

			}

		}

	}

	[class^="col"]:not(.column-bg,.panel) {

		position: relative;
		z-index: 3;

		>*:not(.column-bg,.panel) {

			position: relative;
			z-index: 3;

		}

		.column-bg {

			z-index: 2;

		}

	}

	.table-responsive {

		&.transparent {

			.table {

				tr {

					td {

						padding: 0;
						border: 0;
						box-shadow: none;
						color: inherit;
						background: transparent;

						&:not(:last-of-type) {

							padding-right: var(--default-gutter-x);

						}

					}

				}

			}

		}

		.table {

			margin-bottom: 0;

		}

		.table:not(.transparent) {

			tr {

				&:not(:first-of-type) {

					td {
						
						padding-top: calc(var(--default-gutter-y) / 1);

					}

				}

				&:not(:last-of-type) {

					td {
						
						padding-bottom: calc(var(--default-gutter-y) / 1);
						border-bottom: 1px solid var(--color-primary);

					}

				}

				td {

					&.price {

						width: 1%;
						white-space: nowrap;
						text-align: left;
						font-weight: bold;

					}

				}

			}

		}

	}

}

.panel {

	position: relative;
	height: 100%;
	padding: calc(var(--default-gutter-y) * 2) calc(var(--default-gutter-x) * 2);
	border-radius: var(--border-radius);
	overflow: hidden;

	&.sm {

		padding: calc(var(--default-gutter-y) * 1) calc(var(--default-gutter-x) * 2);

	}

	&.primary {

		background-color: var(--color-primary);

		.button {

			&.outlined {

				border-color: var(--color-white);
				color: var(--color-white);

				&:hover {

					background-color: var(--color-white);
					border-color: var(--color-white);
					color: var(--color-primary);

				}

			}

		}

	}

	&.secondary {

		background-color: var(--color-secondary);

		.button {

			&.primary {

				&:hover {

					background-color: var(--color-white);
					color: var(--color-secondary);

				}

			}
		
			&.outlined {

				border-color: var(--color-white);
				color: var(--color-white);

				&:hover {

					background-color: var(--color-white);
					color: var(--color-secondary);

				}

			}

			&.white {

				&:hover {

					background-color: var(--color-primary);
					color: var(--color-white);

				}

			}

		}

		.boxen {

			p, li {

				a {

					&:hover {

						color: var(--color-primary);

					}

				}

			}

		}

	}

	&.white {

		background-color: var(--color-white);

	}

	&:is(.primary,.secondary) {

		.title, p, li {

			color: var(--color-white);

		}

		.numbered-icon {

			.title, p, li {

				color: var(--color-primary);

			}

		}

	}

	&.tertiary {

		background-color: var(--color-tertiary);

		.rating {

			img {

				max-width: var(--default-gutter-x);
				filter: brightness(0) saturate(100%) invert(83%) sepia(18%) saturate(252%) hue-rotate(119deg) brightness(86%) contrast(85%);

			}

		}

	}

	&.bordered {

		border: 1px solid var(--color-primary);

		.panel {

			&:not(.primary,.secondary,.tertiary) {

				border: 1px solid var(--color-primary);

			}

		}

	}

}

[class*="col"]:has(> .mono-card) {

	display: flex;
	flex-direction: column;

	>.mono-card {

		flex: 1 1 auto;

	}

}

.mono-card {

	&.bordered {

		padding: var(--default-gutter-y) var(--default-gutter-x);
		border: 1px solid var(--color-primary);
		border-radius: var(--border-radius);

	}

	>.col-auto {

		position: relative;
		overflow: hidden;

		.ratio {

			img {

				transition: var(--transition);

			}

		}

	}

	.boxen-wrapper {

		height: 100%;

		&.primary {

			background-color: var(--color-primary);

			.button {

				&.label {

					color: var(--color-white);

				}

			}

		}

		&.tertiary {

			background-color: var(--color-tertiary);

		}

		&:is(.primary) {			
			
			.boxen {

				.title, p, li {

					color: var(--color-white);

				}

			}

		}
		
		&.primary {

			.button {

				&.outlined {

					border-color: var(--color-white);
					color: var(--color-white);

					&:hover {

						background-color: var(--color-white);
						color: var(--color-primary);

					}
					

				}

			}

		}

		&:not(.primary,.tertiary) .boxen {

			.title, p, li {

				color: var(--color-primary);

			}

		}

	}

	&:not(.bordered) {

		.boxen-wrapper {

			padding: calc(var(--default-gutter-y) * 2) calc(var(--default-gutter-x) * 2);
		
		}

	}
	
	&.bordered {

		.boxen-wrapper {

			padding: calc(var(--default-gutter-y) * 2) calc(var(--default-gutter-x) * 1);
		
		}

	}

	&:is(a):hover {

		.ratio {

			img {

				transform: scale(1.125);

			}

		}

		.boxen-wrapper {

			&:not(.primary,.tertiary) {

				.button:not(.label) {

					background-color: var(--color-secondary);
					color: var(--color-white);

				}

			}

			&:is(.primary,.tertiary) {

				.button {

					&:not(.label) {

						background-color: var(--color-white);
						color: var(--color-primary);

					}

				}

			}

		}

	}

}

.swiper-container {

	.swiper {

		align-items: stretch;

		.swiper-wrapper {

			align-items: stretch;

			.swiper-slide {

				height: auto;

				&:has(> .mono-card) {

					display: flex;
					flex-direction: column;

					>.mono-card {

						flex: 1 1 auto;

					}

				}

				>.row {

					height: 100%;

				}
			}

		}

		&.testimonial-swiper {

			.swiper-slide {

				.panel {

					.image-wrapper {

						padding-top: calc(var(--default-gutter-y) * 2);

					}

				}

			}

		}

	}

	.swiper-controls {

		display:flex;
		justify-content:space-between;
		align-items: center;

		.swiper-arrows {

			display: flex;
			align-items: center;
			column-gap: calc(var(--default-gutter-y) / 2);

			.swiper-button {

				/*display: none;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: calc(var(--default-gutter-x) * 2);*/

				display: flex;
				align-items: center;
				justify-content: center;
				width:calc(var(--default-gutter-x) * 3);
				height:calc(var(--default-gutter-x) * 3);
				margin-top: calc(var(--default-gutter-y) * 2);
				border:1px solid var(--color-primary);
				border-radius:var(--border-radius);
				transition: var(--transition);

				img {

					height: 20px;

				}

				&.prev {

					/*right: calc(100% + calc(var(--default-gutter-x) * 2));*/

				}

				&.next {

					/*left: calc(100% + calc(var(--default-gutter-x) * 2));*/

					img {

						transform: rotate(180deg);

					}

				}

				img {

					transition: var(--transition);

				}

				&:hover {

					background-color: var(--color-primary);
					border-color: var(--color-primary);

					img {

						filter: brightness(0) invert(1);

					}

				}

			}

		}

		.swiper-pagination {

			display: none;
			justify-content: center;
			position: relative;
			top: auto;
			bottom: auto;
			left: auto !important;
			transform: none !important;

			/*&:not(.swiper-pagination-lock) {

				display: flex;

			}*/

			&.swiper-pagination-clickable {

				display:block;
				margin-top: calc(var(--default-gutter-y) * 2);

			}

			.swiper-pagination-bullet {

				width: 10px;
				height: 10px;
				background-color: var(--color-primary);

			}

		}

	}

}

.accordion {

	&.faq {

		.accordion-item {

			border: 1px solid var(--color-primary);
			border-radius: var(--border-radius);
			
			&:not(:last-of-type) {

				margin-bottom: var(--default-gutter-y);

			}

			.accordion-header {

				.accordion-button {

					padding: var(--default-gutter-y) calc(var(--default-gutter-x) * 2);
					background-color: inherit;
					box-shadow: none;

					&:focus {

						background-color: inherit;

					}

				}

			}

			.accordion-body {

				padding: var(--default-gutter-y) calc(var(--default-gutter-x) * 2) calc(var(--default-gutter-y) * 2);

			}
			
		}

	}

}

.facetwp-facet {

	margin-bottom: 0 !important;

	.button {

		&.secondary {

			&.outlined {

				cursor: pointer;

				&:hover {

					background-color: var(--color-secondary);
					border-color: var(--color-secondary);
					color: var(--color-white);

				}

			}

		}

	}

	&.facetwp-facet-categories {

		.facetwp-checkbox {

			background: transparent;

		}

	}

	&.facetwp-facet-load_more { 
		
		button {

			margin-top: calc(var(--default-gutter-y) * 2);
			cursor: pointer;

			&:hover {

				background-color: var(--color-secondary);

			}

		}

	}

}

.filters {

	span.button {

		cursor: pointer;

		&.secondary {

			&:hover {

				background-color: var(--color-secondary);
				color: var(--color-white);

			}

		}

		&.primary {

			&:hover {

				background-color: var(--color-primary);
				color: var(--color-white);

			}

		}

	}
	
}

img-comparison-slider {

	display: block;
	cursor: ew-resize;

	&:focus {
		outline: none;
	}

	.ba-figure {

		margin: 0;

		img {

			width: 100%;
			aspect-ratio: 16/9;

		}
		
	}

	.ba-label {

		position: absolute;
		bottom: var(--default-gutter-y);
		left: var(--default-gutter-x);
		padding: calc(var(--default-gutter-y) / 2) var(--default-gutter-x);
		border: 1px solid var(--color-white);
		color: var(--color-white);
		font-size: var(--text-size-sm);
		line-height: 100%;
		border-radius: 50vh;
		pointer-events: none;

		&.ba-label--after {
			left: auto;
			right: var(--default-gutter-x);
		}

	}
	
}

.gform_wrapper {

	.gform_heading {

		p.gform_required_legend {

			display: none;

		}

	}

	.gform_body {

		.gform_fields {

			row-gap: calc(var(--default-gutter-y) * 2) !important;
			column-gap: calc(var(--default-gutter-x) * 1) !important;

			.gfield {

				&:not(.gfield--width-full) {

					grid-column: 1/-1 !important;

				}

				.gfield_label {

					margin-bottom: calc(var(--default-gutter-y) / 2);
					font-weight: 600;

					.gfield_required {

						padding-left: 0;
						font-size: var(--text-size);
						color: inherit;

					}

				}

				&.gfield_error label {

					color: var(--color-error);

				}

				&.gfield--type-html {

					p {

						margin-bottom: 0;

						a {

							color: inherit;
							text-decoration: underline;

							&:hover {

								color: var(--color-secondary);

							}

						}

					}

				}

				input:is([type="text"],[type="email"],[type="tel"],[type="url"],[type="date"],[type="number"]), textarea, select {

					width: 100%;
					min-height: 48px !important;
					padding: 0 var(--default-gutter-x);
					background-color: transparent;
					border: 1px solid var(--color-primary);
					border-radius: 3px;
					-webkit-appearance: none;
					appearance: none;
					
					&:is(textarea) {

						padding: var(--default-gutter-y) var(--default-gutter-x);

					}

				}

				textarea {

					display: block;

				}
				
				&::placeholder {

					opacity: 0.5;
					color: inherit;

				}

				select {

					padding-right: 2.25rem;
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23333' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
					background-repeat: no-repeat;
					background-position: right 0.75rem center;
					background-size: 12px 8px;

				}

				.gfield_radio, .gfield_checkbox {

					display: flex;
					flex-direction: column;
					row-gap: calc(var(--default-gutter-x) / 2);

					.gchoice {

						display: flex;
						column-gap: 10px;
						row-gap: var(--default-gutter-y);

						input {

							appearance: none;
							width: 20px;
							height: 20px;
							background-color: var(--color-white);
							border: 1px solid var(--color-primary);
							padding: 1px;

							&:is([type="radio"]) {

								border-radius: 100%;
								box-shadow: inset 0 0 0 2px var(--color-white);

								&:focus, &:focus-visible {

									outline: none !important;
									box-shadow: inset 0 0 0 2px var(--color-white) !important;

								} 

							}

							&:checked {

								background-color: var(--color-primary) !important;
								border-color: var(--color-primary);							

							}

							&:is([type="checkbox"]):checked {

								background-image: url("data: image/svg+xml,%3csvg xmlns='http: //www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");

							}

						}

						label {

							font-size: var(--text-size-sm);

						}

					}

				}

				&.gfield--type-time {

					[class*="gfield_time_"] {
						
						width: 100%;
						max-width: none;
						min-width: 0;

					}

				}

				&.gfield--datepicker-default-icon {

					.ginput_container_date button {

						position: absolute;
						right:calc(var(--default-gutter-x) + 1px);

					}

				}

				.gfield_description:not(.validation_message) {

					margin-top: calc(var(--default-gutter-y) / 2) !important;
					padding-top: 0 !important;
					font-size: var(--text-size-sm) !important;

				}

			}

		}

	}

	.newsletter-signup {

		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		width: 100%;

		.gform_body {

			position: relative;
			flex: 1 1 auto;
			width: 1%;
			min-width: 0;

			input[type="email"] {

				min-height: 48px;

			}

		}

		.gform_footer {

			display: block !important;
			position: relative;
    		z-index: 2;
			margin-top: 0 !important;
			margin-left: var(--default-gutter-x) !important;

			.button {

				min-height: 48px;

			}

		}

	}

	.gform_footer {

		margin: 0 !important;
		margin-top: calc(var(--default-gutter-y) * 2) !important;
		padding: 0 !important;

	}

	.gform_validation_errors, .validation_message {		
			
		background: var(--color-error-bg) !important;
		border: 0 !important;
		border-radius: 3px !important;
		box-shadow: none !important;
		color: var(--color-error) !important;

		&:is(.gform_validation_errors) {

			margin-top: 0 !important;
			margin-bottom: calc(var(--default-gutter-y) * 2) !important;
			padding: calc(var(--default-gutter-y) * 1) calc(var(--default-gutter-x) * 2) !important;
			font-size: var(--text-size);

			span {

				display: inline-block;

				.gform-icon {

					margin-right: 5px;

				}

			}

		}

		&:is(.validation_message) {

			margin-top: 3px !important;
			margin-bottom: 0 !important;
			padding: 10px var(--default-gutter-x) !important;
			font-size: var(--text-size-sm) !important;

		}

	}	

}

.gform_confirmation_wrapper {

	.gform_confirmation_message {

		padding: calc(var(--default-gutter-y) * 2) calc(var(--default-gutter-x) * 2);
		background-color: var(--color-primary);
		border-radius: 3px;
		font-size: var(--text-size);
		color: var(--color-white);
		line-height: 150%;

	}

}

#ui-datepicker-div {

	display: none;
	
}

@media (max-width: 1639px) {

	.swiper {

		&.card-swiper {

			overflow: visible;

		}

		&.before-after-swiper {

			overflow: visible;

		}

		&.team-swiper {

			overflow: visible;

		}

		&.video-swiper {

			overflow: visible;

		}

	}

}

@media (max-width: 1199px) {

	body {

		&.mobile-menu-active {

			height: 100dvh;
			overflow: hidden;
			background-color: var(--color-primary);

			.header-wrapper {

				height: 100%;

				.header-elements-wrapper {
				
					.mobile-menu-button {

						span {
								
							height: 0;

							&:before {
								
								top: 0;
								transform: rotate(-45deg);
							
							}

							&:after {
								
								top: 0;
								transform: rotate(45deg);
							
							}

						}

					}

				}

				.mobile-menu {

					display: block;

				}

			}

		}

	}

	.swiper {

		&.testimonial-swiper {

			overflow: visible;

		}

	}

}

@media (min-width: 576px) {

	.header-wrapper {

		.header {

			.header-elements-wrapper {

				.row.col-gap-1 {

					>.col-auto:first-of-type {

						display: block;

					}

				}

			}

		}

	}

}

@media (min-width: 768px) {

	.container {

		.padding-wrapper {

			&.xl {

				padding: calc(var(--default-gutter-y) * 4) calc(var(--default-gutter-x) * 4);

			}

		}

	}

	.header-wrapper {

		.header {

			.header-elements-wrapper {

				.button {

					span {

						display:inline;

					}

				}

			}

		}

	}

	.gform_wrapper {

		.gform_body {

			.gform_fields {

				.gfield {

					&.gfield--width-half {

						grid-column: span 6 !important;

					}

				}

			}

		}

	}

}

@media (min-width: 992px) {

	:root {
		--text-size-sm: 15px;
		--text-size: 18px;
		--text-size-md: 22px;
		--text-size-lg: 36px;
		--text-size-xl: 46px;
		--text-size-xxl: 64px;
	}

	.container {

		&.xl {

			padding-left: calc(var(--default-gutter-x) * 2);
			padding-right: calc(var(--default-gutter-x) * 2);

		}

	}

	.content-section {

		&.pt-8 {

			padding-top: calc(var(--default-gutter-y) * 8);

		}

		&.pb-8 {

			padding-bottom: calc(var(--default-gutter-y) * 8);

		}
		
		.container {

			&.xl {

				.boxen-wrapper {

					padding-left: 0;
					padding-right: 0;

				}

			}

		}

	}

	.panel {

		&:is(.xl,.lg) {

			padding: calc(var(--default-gutter-y) * 4) calc(var(--default-gutter-x) * 4);

		}

		&.xl-y {

			padding-top: calc(var(--default-gutter-y) * 4);
			padding-bottom: calc(var(--default-gutter-y) * 4);

		}

		&.xl-x {

			padding-left: calc(var(--default-gutter-x) * 4);
			padding-right: calc(var(--default-gutter-x) * 4);

		}

	}

	.image-cutout {

		justify-content: center;
		
		img {

			position: absolute;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: top left;

		}

	}

}

@media (min-width: 1200px) {

	:root {
		--text-size-xxl: 74px;
	}

	.header-wrapper {

		.header {

			.container > .row >*:not(.menu-wrapper) {

				padding-top: calc(var(--default-gutter-y) * 2);
				padding-bottom: calc(var(--default-gutter-y) * 2);

			}

		}

	}
	
	.panel {

		&.xl {

			padding: calc(var(--default-gutter-y) * 8) calc(var(--default-gutter-x) * 8);

		}

		&.xl-y {

			padding-top: calc(var(--default-gutter-y) * 8);
			padding-bottom: calc(var(--default-gutter-y) * 8);

		}

		&.xl-x {

			padding-left: calc(var(--default-gutter-x) * 8);
			padding-right: calc(var(--default-gutter-x) * 8);

		}

	}

	.swiper-container {

		.swiper {

			&.testimonial-swiper {

				.swiper-wrapper {

					display: flex;
					flex-wrap: wrap;
					column-gap: calc(var(--default-gutter-x) * 2);

					.swiper-slide {

						flex: 1 0 0;

					}

				}

			}

		}

	}

}

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

	.header-wrapper {

		.header {

			.header-elements-wrapper {

				.button {

					span {

						display:none;

					}

				}

			}

		}

	}

}

@media (min-width: 1400px) {

	.row {

		&.col-gap-xxl-4 {

			margin-left: calc(var(--default-gutter-x) * 2);
			margin-right: calc(var(--default-gutter-x) * 2);

			>* {

				padding-left: calc(var(--default-gutter-x)* 2);
				padding-right: calc(var(--default-gutter-x)* 2);

			}

		}

	}

}

@media (min-width: 1521px) {

	.container, .container.xl {

		max-width: 1520px !important;

	}

	.content-section {

		.container-fluid {

			.row {
			
				&:not(.flex-row-reverse) {

					>[class*="col"] {

						&.contained {

							&:first-of-type {

								padding-left: max(calc(var(--default-gutter-x) * 2), calc((100vw - 1520px) / 2 + var(--default-gutter-x) * 2));
								padding-right: calc(var(--default-gutter-x) * 4);

							}

							&:not(:first-of-type):last-of-type {

								padding-left: calc(var(--default-gutter-x) * 4);
								padding-right: max(calc(var(--default-gutter-x) * 2), calc((100vw - 1520px) / 2 + var(--default-gutter-x) * 2));

							}

						}

					}

				}

				&.flex-row-reverse {

					>[class*="col"] {

						&.contained {

							&:first-of-type {

								padding-left: calc(var(--default-gutter-x) * 4);
								padding-right: max(calc(var(--default-gutter-x) * 2), calc((100vw - 1520px) / 2 + var(--default-gutter-x) * 2));

							}

							&:not(:first-of-type):last-of-type {
								
								padding-left: max(calc(var(--default-gutter-x) * 2), calc((100vw - 1520px) / 2 + var(--default-gutter-x) * 2));
								padding-right: calc(var(--default-gutter-x) * 4);

							}

						}

					}

				}

				>[class*="col"] {

					> .padding-wrapper {

						padding-top: calc(var(--default-gutter-y) * 4);
						padding-bottom: calc(var(--default-gutter-y) * 4);

					}

				}

			}

		}

	}

}

@media (min-width: 1541px) {

	.header-wrapper {

		.header {

			.menu-wrapper {

				.menu {

					&.row {

						margin-left: calc(var(--default-gutter-x) * 2);
            			margin-right: calc(var(--default-gutter-x) * 2);

						>* {

							padding-left: calc(var(--default-gutter-x) * 2);
							padding-right: calc(var(--default-gutter-x) * 2);

						}

					}

				}

			}

		}

	}

}

@media (min-width: 1640px) {

	.swiper-container {

		.swiper-controls {

			display: block;			

			.swiper-arrows {

				display: block;

				.swiper-button {

					display: inline;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					width: calc(var(--default-gutter-x) * 2);
					height: auto;
					margin-top: 0;
					border: 0;

					img {

						height: auto;

					}

					&.prev {

						right: calc(100% + calc(var(--default-gutter-x) * 2));

					}

					&.next {

						left: calc(100% + calc(var(--default-gutter-x) * 2));

					}

					&:hover {

						background: transparent;

						img {

							filter: none;
							opacity: 0.5;

						}

					}

				}

			}

			.swiper-pagination {

				left: 50% !important;
				transform: translateX(-50%) !important;

				&:not(.swiper-pagination-lock) {

					display: block;

				}

			}

		}

	}

}