@import "@{parenturl}/less/mixins.less";
@import "@{themeurl}/less/vars.less";

.entry-content {
	h2 {
		font-size:64px;
		margin-bottom:50px;
		text-align:center;
	}
}

.hero {
	background-image:url('/wp-content/uploads/2025/10/poster.jpg');
	background-position: 50% 35%;
	.overlay {
	/*	background-color:fade(@blue, 70); */
		width:100%;
		height:100%;
		.vertAlign;
		flex-direction:column;
		font-size:100px;
	}
	h1 {
		color:#80b0ce;
		.font(Raleway, 400, 1em);
		margin-bottom:.75em;
		small {
			color:#dfe0e1;
			display:block;
			.font(Raleway, 700, .34em);
			margin-bottom:.75em;
			letter-spacing:.05em;
			text-align:center;
			text-transform:uppercase;
		}
		b {
			.inherit(#fff);
			.bold();
		}
	}
	svg {
		.blue, .blue-gradient { fill:#fff; }
		margin-bottom:.25em;
	}
	.play {
		margin-top:.5em;
		clip-path: circle(50% at 50% 50%);
		.blur(5px);
	}
}

#welcome {
	position:relative;
	&:before {
		content:' ';
		display:block;
		position:absolute;
		width:100%;
		height:110px;
		left:0;
		bottom:100%;
		.translateY(1px);
		background-image:url('/wp-content/uploads/2021/09/hero-curve.svg');
		background-position:center;
		background-position:top center;
		pointer-events: none;
	}
	.dcmo_block > div {
		display:grid;
		grid-gap:25px;
		grid-template-columns:1fr auto;
		overflow:visible;
		.npoo {
			position:relative;
			z-index:10;
			margin-top:-150px;
		}
	}
	h2 {
		color:#737373;
		.font(Raleway, 700, 28px);
		margin-bottom:50px;
		body:not(.home) & {
			margin-top:50px;
			margin-bottom:10px
		}
		text-align:left;
		text-transform:uppercase;
		img {
			display:block;
			width:25em;
			height:auto;
		}
	}
}

#testimonials {
	.padding-ends(25px);
	.margin-ends(5vw);
	h2 {
		padding:0 25px;
	}
	.testimonial:first-child {
		grid-row:1 / span 2;
	}
	.testimonial:nth-child(1) { background-color:@light_blue; }
	.testimonial:nth-child(2) { background-color:@blue; }
	.testimonial:nth-child(3) { background-color:#C4C4C4; }
	.testimonial:nth-child(4) { background-color:#C4C4C4; }
	.testimonial:nth-child(5) { background-color:#595B5C; }
	
	.testimonial {
		display:grid;
		grid-gap:25px;
		grid-template-rows:1fr auto;
		align-items:center;
		justify-items:center;
		padding:50px 25px;
		p {
			color:#fff;
			.font(Raleway, 400, 18px, 1.5);
			margin:0;
			.max-width(540px);
			text-align:center;
		}
		> b {
			color:#fff;
			.font(Raleway, 500, 28px, 1.5);
			&:before { content: '—'; }
		}
	}
}

section#SVC {
	display:block;
	.margin-ends(5vw);
	padding:25px;
	> div {
		max-width:1600px;
	}
	h2 {
		font-size:54px;
		letter-spacing:0;
		margin-bottom:.1em;
	}
	h3 {
		color:@light_blue;
		.font(Raleway, 500, 38px);
		letter-spacing:0;
		margin-top:0;
		margin-bottom:75px;
		text-align:center;
		text-transform:uppercase;
	}
	svg {
		overflow:visible;
		display:block;
		margin:0 auto 20px;
		width:auto;
		height:92px;
		.fill { fill:@light_blue; }
		.stroke { stroke:@light_blue; }
	}
	.grid {
		margin-bottom:75px;
	}
	p {
		color:#595b5c;
		.font(Raleway, 400, 20px, 1.25);
		text-align:center;
	}
}

#reviews {
	margin-top:5vw;
	position:relative;
	&:after {
		content:' ';
		display:block;
		position:absolute;
		width:100vw;
		height:65px;
		left:0;
		top:0;
		background-image:url('/wp-content/uploads/2021/09/cruve.svg');
		background-position:bottom center;
		.rotate(180deg);
	}
	.dcmo_block {
		background-color:#edeeee;
		margin-bottom:0;
		.padding-ends(5vw);
		> div { padding-top:50px }
	}
	#ourReviews {
		display:grid;
		align-items:center;
		grid-template-columns:auto 1fr auto;
		grid-gap:25px;
	}
	.testimonial {
		.max-width(540px);
		background-color:#fff;
		border:1px solid #c4c4c4;
		cite {
			background-color:@blue;
			color:#fff;
			display:block;
			.font(Raleway, 500, 18px);
			padding:.5em;
			text-align:center;
		}
		blockquote {
			padding:25px;
			p {
				line-height:1.5;
			}
		}
		.stars {
			.vertAlign;
			margin-bottom:10px;
			i {
				display:block;
				background-color:#b89345;
				.clip(@star);
				width:1em;
				height:1em;
				font-size:28px;
			}
		}
	}
	.cycle {
		.grid-one();
		align-items:center;
		p {
			font-size:16px;
			text-align:center;
		}
		.testimonial {
			opacity:0;
			pointer-events:none;
			.transition();
		}
		.testimonial.active {
			opacity:1;
			pointer-events:auto;
		}
	}
	.prev, .next {
		width:35px;
		height:70px;
		background-color:#fff;
		cursor:pointer;
	}
	.prev {
		.clip(@arrow_left);
	} .next {
		.clip(@arrow_right);
	}
	.button {
		font-weight:400;
		text-transform:none;
		word-spacing:0;
	}
}

#docs {
	margin-bottom:5vw;
	position:relative;
	&:after {
		content:' ';
		display:block;
		position:absolute;
		width:100vw;
		height:65px;
		left:0;
		bottom:0;
		background-image:url('/wp-content/uploads/2021/09/cruve.svg');
		background-position:bottom center;
	}
	.dcmo_block {
		background-color:#edeeee;
		margin-bottom:0;
		.padding-ends(5vw);
		> div {
			padding-bottom:50px;
			> .grid {	
				grid-gap:4px;
			}
		}
	}
	.copy {
		align-self:center;
		margin:0;
		padding:25px;
		h3 {
			margin-bottom:25px;
		}
		p {
			color:#fff;
			text-align:center;
			line-height:1.75;
		}
	}
	h3 {
		color:#fff;
		.font(Raleway, 600, 28px);
		text-align:center;
		text-transform:uppercase;
	}
	
	#phil {
		background-color:@light_blue;
		img {
			object-fit:cover;
			object-position:center;
		}
	}
	.docs {
		display:grid;
		grid-gap:4px;
		grid-template-rows:repeat(4, 1fr);
		> a {
			display:grid;
			grid-template-columns:140px 1fr;
			&:nth-child(1) { background-color:#595b5c; }
			&:nth-child(2) { background-color:#c7c7c7; }
			&:nth-child(3) { background-color:@light_blue; }
			&:nth-child(4) { background-color:@blue; }
			&:nth-child(5) { background-color:#595b5c; }
		}
		img {
			height:100%;
			object-fit:cover;
			object-position:center;
		}
	}
	.meetTheDoctors {
		display: flex;
		justify-content: center;
		gap: 4px;
		#phil {
			display: flex;
			width: 60%;
			img {
				width: 60%;
				height: 100%;
			}
		}
		@media all and (max-width: 1023px) {
			flex-wrap: wrap;
			#phil {
				flex-wrap: wrap;
				width: 100%;
				img {
					width: 100%;
					height: auto;
				}
			}
		}
	}
	@media (min-width: 769px) and (max-width: 1079px) {
		.grid[columns="5"]>*[grid="2"] {
			grid-column: span min(3,3);
		}
	}
}

#services {
	background-image:url('/wp-content/uploads/2021/09/services.jpg');
	display:flex;
	//gap:4px;
	.margin-ends(5vw);
	//padding:25px 0;
	.service {
		//background-image:url('/wp-content/uploads/2021/09/photo-coming-soon.svg');
		//background-size:cover;
		//background-position:center;
		padding:25px;
		.grid-one();
		align-items:center;
		justify-items:center;
		overflow:hidden;
		.pseudoBefore();
		border-left:2px solid #fff;
		border-right:2px solid #fff;
		&:first-child { border-left:0; }
		&:last-child { border-right:0; }
		h2 {
			font-size:42px;
			text-orientation: mixed;
			writing-mode: vertical-rl;
			margin:0;
		}
		h3 {
			color:#fff;
			text-align:center;
		}
		.copy {
			margin-top:50px;
			.max-width(640px);
		}
		p {
			color:#fff;
			text-align:center;
			line-height:1.75;
		}
	}
	.service {
		flex:1;
		.transition();
		&:before {
			background-color:fade(#fff, 80);
			.transition();
		}
		h2 {
			color:@blue;
			.rotate(-180deg);
			.transition();
		}
		.copy {
			opacity:0;
			.transition();
		}
	}
	&:not(:hover) .service.active,
	.service:hover {
		flex:3;
		&:before {
			background-color:fade(@light_blue, 75);
		}
		h2 {
			color:#fff;
			.translateY(~"calc(-50% - -50px)");
			.rotate(-90deg);
		}
		.copy {
			opacity:1;
		}
	}
}

#video-testimonials {
	margin-top:5vw;
	padding-top:25px;
	position:relative;
	&:before {
		content:' ';
		display:block;
		position:absolute;
		width:100vw;
		height:65px;
		left:0;
		top:25px;
		background-image:url('/wp-content/uploads/2021/09/cruve.svg');
		background-position:bottom center;
		.rotate(180deg);
	}
	&:after {
		content:' ';
		display:block;
		position:absolute;
		width:100vw;
		height:65px;
		left:0;
		top:100%;
		background-image:url('/wp-content/uploads/2021/09/cruve-gray.svg');
		background-position:bottom center;
		.rotate(180deg);
	}
	> div {
		background-color:#edeeee;
		.padding-ends(~"calc(50px - -5vw)");
	}
	#videos {
		.flex;
		gap:1px;
		> div {
			overflow:hidden;
		}
		.mollie { background-image:url('/wp-content/uploads/2021/09/Molly.jpeg'); }
		.jay { background-image:url('/wp-content/uploads/2021/09/Jay.jpeg'); }
		.navi { background-image:url('/wp-content/uploads/2021/09/Navi.jpeg'); }
		.larae { background-image:url('/wp-content/uploads/2021/09/Larae.jpeg'); }
		.jeffrey { background-image:url('/wp-content/uploads/2021/09/Jeffrey.jpeg'); }
		.dee { background-image:url('/wp-content/uploads/2021/09/Dee.jpeg'); }
		.su-lightbox {
			background-size:cover;
			background-position:center;
			padding:25px;
			.vertAlign(flex-end);
			height:100vw;
			max-height:20vw;
			img { cursor:pointer; }
		}
		blockquote {
			position:relative;
			left:50%;
			.translateX(-50%);
			width:25vw;
			padding:20px;
			p {
				line-height:1.5;
				margin-bottom:10px;
			}
		}
		> div {
			background-color:fade(#fff, 0);
			flex:1;
			opacity:.3;
			.transition();
			blockquote {
				opacity:0;
				.transition();
			}
		}
		&:not(:hover) > div.active,
		> div:hover {
			background-color:#fff;
			flex:3;
			opacity:1;
			blockquote {
				opacity:1;
			}
		}
	}
}

#experience {
	.dcmo_block {
		background-image:url('/wp-content/uploads/2021/09/experiences.jpg');
		margin:0;
		> div {
			.padding-ends(5vw);
		}
	}
	h2, p {
		color:#fff;
		text-align:center;
	}
}