:root {
	--primary-very-dark: #1a2a35;
	--primary-dark: #213543;
	--primary-semi-dark: #273e4f;
	--primary: #314F63;
	--primary-light: #276580;
	--primary-very-light: #4A8AA1;
	--primary-bright: #49a7c9;
	--primary-very-bright: #8ae0ff;

	--teal: #0AA492;
	--teal-transparent: #0aa49274;

	--powder-orange: #ffca7f;

	--text-color: #B2FFF2;
	--text-color-bright: #71F4DE;

	--inset-contact-shadow:
		inset 0 -0.25rem 1rem rgba(74, 138, 161, 0.1),
		inset 0 -0.125rem .125rem rgba(74, 138, 161, 0.1),
		inset 0 .25rem .75rem rgba(0, 0, 0, 0.15),
		inset 0 .125rem .25rem rgba(0, 0, 0, 0.15);

	--text-shadow: 0 -.125rem .25rem rgba(0, 0, 0, 0.5);
}

body {
	font-family: 'Open Sans', sans-serif;
	background-color: var(--primary-very-dark);
	color: var(--text-color);
	margin: 0;
	padding: .25rem 0;
	line-height: 1.8;
	box-shadow: inset 0 0 30rem rgba(0, 0, 0, 0.75);
	button, input, select, textarea {
		font-family: 'Open Sans', sans-serif;
	}
	h2, h3 {
		color: var(--powder-orange);
		font-weight: 300;
	}
	p, li {
		text-wrap: pretty;
	}
	ul {
		list-style-type: "\2601";
		li {
			margin-bottom: 1rem;
			padding-left: .5rem;
			&::marker {
				color: var(--powder-orange);
				font-size: 2rem;
				line-height: 0;
			}
		}
	}
	* {
		box-sizing: border-box;
	}
}

.layout {
	box-sizing: border-box;
	max-width: 80rem;
	width: calc(100% - 4rem);
	padding: 3rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	background-color: var(--primary-dark);
	border-radius: 3rem;
	margin: 2rem auto;
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15), inset 0 0 0 .5rem var(--primary-semi-dark);
	position: relative;
	img {
		width: 100%;
		height: auto;
	}
	h2, h3 {
		text-wrap: balance;
		line-height: 1.2;
	}
	@media screen and (width < 1100px) {
		padding: 1rem;
		gap: 1rem;
		width: calc(100% - 2rem);
		margin: 1rem auto;
	}
	@media screen and (width < 850px) {
		max-width: calc(100% - 2rem);
		margin: 1.5rem auto 1rem;
		padding: 1rem;
		border-radius: 1.5rem;
		box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15), inset 0 0 0 .25rem var(--primary-semi-dark);
	}
	@media screen and (width < 500px) {
		grid-template-columns: 1fr;
	}
}

.introduction {
	perspective: 32rem;
	text-align: center;
	transform-origin: right center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	.logo {
		width: 100%;
		height: auto;
		margin: 0 auto;
		filter: drop-shadow(0 .5rem .75rem rgba(0, 0, 0, 0.4));
		transform: rotateY(7deg) rotateX(-12deg) rotateZ(-3deg) translateZ(4rem) translateY(0rem);
	}
	h1 {
		position: absolute;
		clip: rect(1px, 1px, 1px, 1px);
		visibility: hidden;
	}
	p {
		font-size: 1.25rem;
		padding: 1rem 2rem 0;
		margin: 2rem 0 1rem;
		color: var(--powder-orange);
	}
	.colourful_powders {
		width: 100%;
		height: auto;
		border-radius: 2rem;
		box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
		margin-top: 1rem;
	}
	@media screen and (width < 1100px) {
		width: 100%;
		.logo {
			transform: rotateY(5deg) rotateX(-10deg) rotateZ(-3deg) translateZ(0rem) translateY(0) translateX(.5rem);
		}
		p {
			padding: 0rem;
		}
		.colourful_powders {
			aspect-ratio: 16 / 8;
			object-fit: cover;
			border-radius: 1.75rem;
		}
	}
	@media screen and (width < 850px) {
		padding: 0;
		.logo {
			width: 100%;
			transform: rotateY(5deg) rotateX(-10deg) rotateZ(-2deg) translateZ(2rem) translateY(1rem);
		}
		.colourful_powders {
			aspect-ratio: 8 / 8;
			width: 100%;

		}
	}
	@media screen and (width < 500px) {
		.logo {
			width: 100%;
			transform: rotateY(5deg) rotateX(-10deg) rotateZ(-2deg) translateZ(0rem) translateY(0);
		}
		.colourful_powders {
			aspect-ratio: 4 / 1;
			width: 100%;
			border-radius: 1rem;
		}
	}
}

.contact {
	background-color: var(--primary-semi-dark);
	border-radius: 2rem;
	padding: 1.25rem;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15), inset 0 0 0 .25rem var(--primary-light);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	position: relative;
	h2 {
		margin: 0 0 2rem 0;
		font-weight: 300;
		text-transform: sentence-case;
		color: var(--text-color-bright);
	}
	h3 {
		font-weight: normal;
		color: var(--text-color-bright);
		margin-top: 0;
		font-size: 1.5rem;
	}
	.contact_phone {
		border-radius: 1rem;
		box-shadow: var(--inset-contact-shadow);
		padding: 1.25rem;
		border: thin solid var(--primary);
		& > div {
			perspective: 32rem;
			isolation: isolate;
			position: relative;
			border-radius: .75rem;
			box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, 0.1);
			background: var(--primary);
			border: .125rem solid var(--teal);
			transition: all .3s ease;
			&::after{
				content: "";
				position: absolute;
				width: 5rem;
				height: 5rem;
				background-image: url('images/phone.png');
				background-size: contain;
				background-repeat: no-repeat;
				left: .5rem;
				top: -1.25rem;
				filter: drop-shadow(0 .5rem 1rem rgba(0,0,0,.5));
				transition: all .3s ease;
				transform: rotateZ(4deg) translateX(0) translateZ(0);
				pointer-events: none;
				@media screen and (width < 850px) {
					left: 0.25rem;
					top: 0;
					width: 4rem;
					height: 4rem;
					transform: rotateZ(4deg) translateX(0) translateZ(0);
				}
			}
			&:hover {
				box-shadow: 0 0 2rem var(--text-color);
				border-color: var(--text-color-bright);
				&::after {
					filter: drop-shadow(0 .5rem 1rem var(--primary-very-dark));
					transform: rotateZ(6deg) translateX(5rem) translateZ(8rem);
				}
			}
			&:has(a:focus) {
				box-shadow: 0 0 2rem var(--text-color);
				border-color: var(--text-color-bright);
				outline: thin solid #fff;
				outline-offset: .125rem;
				box-shadow: inset 0 .25rem .5rem rgba(0, 0, 0, 0.15), 0 0 1.5rem var(--text-color);
			}
			a {
				display: block;
				position: relative;
				color: #fff;
				font-size: 1.25rem;
				text-decoration: none;
				border-radius: .75rem;
				padding: 1rem 0;
				text-align: center;
				text-shadow: var(--text-shadow);
				transition: all .3s ease;
				overflow: hidden;
				&:focus {
					outline: none;
					&::before {
						background: linear-gradient(var(--primary-very-bright) 0%, var(--primary-bright) 50%, var(--primary-light) 100%);
					}
				}
				@media screen and (width < 475px) {
					padding: 1rem 2rem;
				}
				span {
					white-space: nowrap;
				}
				&::before {
					content: "";
					display: block;
					position: absolute;
					transition: all .3s ease;
					height: 200%;
					width: 100%;
					background-image: linear-gradient(var(--primary-bright) 0%, var(--primary-light) 50%, var(--primary) 100%);
					top: -100%;
					left: 0;
					z-index: -1;
				}
				&:hover {
					&::before {
						background-image: linear-gradient(var(--primary-bright) 0%, var(--primary-light) 50%, var(--primary) 100%);
						top: 0;
						left: 0;
						z-index: -1;
					}
				}
			}
		}

	}
	.email_form {
		border-radius: 1rem;
		box-shadow: var(--inset-contact-shadow);
		padding: 1.25rem;
		border: thin solid var(--primary);
		form {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: .5rem;
			@media screen and (width < 850px) {
				grid-template-columns: 1fr;
			}
			div {
				display: flex;
				flex-direction: column;
				&.email_message, &.submit {
					grid-column: span 2;
					@media screen and (width < 850px) {
						grid-column: span 1;
						width: 100%;
						align-self: stretch;

					}
				}
			}
			label {
				margin-bottom: .25rem;
				color: var(--text-color);
				font-size: .75rem;
			}
			input[type="text"],
			input[type="email"],
			textarea {
				font-size: 1rem;
				color:  var(--primary-dark);
				padding: .75rem .5rem;
				margin-bottom: .5rem;
				border: .125rem solid var(--teal);
				border-radius: .5rem;
				background-color: var(--primary-light);
				box-shadow: inset 0 .25rem .5rem rgba(0, 0, 0, 0.15);
				transition: all .3s ease;
				&:focus {
					outline: thin solid #fff;
					outline-offset: .125rem;
					border-color: var(--text-color-bright);
					box-shadow: inset 0 .25rem .5rem rgba(0, 0, 0, 0.15), 0 0 1.5rem var(--text-color);
					background-color: var(--primary-bright);
				}
			}
			textarea {
				min-height: 6rem;
				align-content: stretch;
			}
			.submit {
				position: relative;
				perspective: 32rem;
				&::before {
					content: "";
					position: absolute;
					z-index: 1;
					width: 7rem;
					height: 5rem;
					background-image: url('images/lappy.png');
					background-size: contain;
					background-repeat: no-repeat;
					left: .5rem;
					top: -1.25rem;
					filter: drop-shadow(0 .5rem 1rem rgba(0,0,0,.5));
					transition: all .3s ease;
					transform: rotateZ(-0deg) translateX(0) translateZ(0);
					pointer-events: none;
				}
				&:hover {
					&::before {
						filter: drop-shadow(0 1rem 2rem var(--primary-very-dark));
						transform: rotateZ(2deg) translateX(5rem) translateZ(8rem);
					}
				}
				& > div {
					position: relative;
					overflow: hidden;
					border-radius: .75rem;
					border: .125rem solid var(--teal);
					transition: all .3s ease;
					box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.1);
					&:hover {
						border-color: var(--text-color-bright);
						box-shadow: 0 0 2rem var(--text-color);
					}
					&:has(button:focus) {
						border-color: var(--text-color-bright);
						box-shadow: 0 0 2rem var(--text-color);
						outline: thin solid #fff;
						outline-offset: .125rem;
						box-shadow: inset 0 .25rem .5rem rgba(0, 0, 0, 0.15), 0 0 1.5rem var(--text-color);
					}
					button[type="submit"] {
						color: #fff;
						font-size: 1.25rem;
						text-shadow: var(--text-shadow);
						border-radius: .75rem;
						padding: 1rem 0;
						background: var(--primary);
						display: block;
						cursor: pointer;
						transition: all .3s ease;
						isolation: isolate;
						&:focus {
							&::before {
							background: linear-gradient(var(--primary-very-bright) 0%, var(--primary-bright) 50%, var(--primary-light) 100%);
							}
						}
						&::before {
							transition: all .3s ease;
							height: 200%;
							content: "";
							position: absolute;
							width: 100%;
							background: linear-gradient(var(--primary-bright) 0%, var(--primary-light) 50%, var(--primary) 100%);
							top: -100%;
							left: 0;
							z-index: -1;
						}
						&:hover {
							box-shadow: 0 0 2rem var(--text-color);
							border-color: var(--text-color-bright);
							&::before {
								top: 0;
								left: 0;
								z-index: -1;
							}
						}
					}
					@media screen and (width < 850px) {
						form {
							grid-template-columns: 1fr;
							div {
								&.email_message, &.submit {
									grid-column: span 1;
								}
							}
						}
					}
				}
			}
		}
	}
	.contact_location {
		border-radius: 1rem;
		box-shadow: var(--inset-contact-shadow);
		padding: 1.25rem;
		border: thin solid var(--primary);
		& > div {
			perspective: 32rem;
			position: relative;
			border-radius: .75rem;
			background: var(--primary);
			border: .125rem solid var(--teal);
			box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
			transition: all .3s ease;
			isolation: isolate;
			&:has(a:focus) {
				border-color: var(--text-color-bright);
				box-shadow: 0 0 2rem var(--text-color);
				outline: thin solid #fff;
				outline-offset: .125rem;
				box-shadow: inset 0 .25rem .5rem rgba(0, 0, 0, 0.15), 0 0 1.5rem var(--text-color);
			}
			&::after {
				content: "";
				position: absolute;
				width: 4.5rem;
				height: 4rem;
				background-image: url('images/location.png');
				background-size: contain;
				background-repeat: no-repeat;
				left: .5rem;
				top: -.75rem;
				filter: drop-shadow(0 .5rem 1rem rgba(0,0,0,.5));
				transition: all .3s ease;
				transform: rotateZ(-4deg) translateX(0) translateZ(0) translateY(0);
				pointer-events: none;
				@media screen and (width < 850px) {
					top:.25rem;
					width: 6rem;
				}
			}
			&:hover {
				border-color: var(--text-color-bright);
				box-shadow: 0 0 2rem var(--text-color);
				&::after {
					filter: drop-shadow(0 .5rem 1rem var(--primary-very-dark));
					transform: rotateZ(-2deg) translateX(6rem) translateZ(12rem) translateY(-1rem);
				}
			}
			a {
				position: relative;
				display: block;
				text-align: center;
				color: #fff;
				text-shadow: var(--text-shadow);
				text-decoration: none;
				font-size: 1rem;
				padding: 1rem 0;
				border-radius: .75rem;
				transition: all .3s ease;
				overflow: hidden;
				&:focus {
					outline: none;
					&::before {
						background: linear-gradient(var(--primary-very-bright) 0%, var(--primary-bright) 50%, var(--primary-light) 100%);
					}
				}
				@media screen and (width < 850px) {
					padding: 1rem 2rem 1rem 4rem;
				}
				span {
					white-space: nowrap;
				}
				&::before {
					transition: all .3s ease;
					height: 200%;
					content: "";
					position: absolute;
					width: 100%;
					background: linear-gradient(var(--primary-bright) 0%, var(--primary-light) 50%, var(--primary) 100%);
					top: -100%;
					left: 0;
					z-index: -1;
				}
				&:hover {
					&::before {
						top: 0;
						left: 0;
						z-index: -1;
					}
				}
			}
		}
	}
	@media screen and (width < 1100px) {
		width: 100%;
		padding: .75rem;
		border-radius: 1.75rem;
		h3 {
			margin-bottom: .5rem;
		}
		& > div {
			&.contact_phone, &.email_form, &.contact_location {
				padding: .75rem;
			}
		}
	}
	@media screen and (width < 850px) {
		border-radius: 1rem;
	}
	@media screen and (width < 500px) {
		& > div {
			&.contact_phone, &.email_form, &.contact_location {
				padding: .5rem;
				border-radius: .75rem;
				h3 {
					font-size: 1.25rem;
					margin-bottom: .5rem;
				}
			}
		}
	}
}


.services {
	ul > li {
		margin-bottom: .75rem;
		strong {
			color: var(--powder-orange);
		}
	}
}

.powder_mixing_machine_images {
	perspective: 32rem;
	border-radius: 2rem;
	.carousel {
		position: relative;
		width: 100%;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		border-radius: 2rem;
		box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
		pointer-events: none;
		margin-bottom: 2rem;
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background: transparent;
			border-radius: 2rem;
			outline: .25rem solid var(--primary-very-light);
			outline-offset: -.25rem;
			z-index: 2;
		}
		img {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			opacity: 0;
			animation: ken-burns 24s infinite;
			transform-origin: center;
		}
		img:nth-child(1) {
			animation-delay: 0s;
		}
		img:nth-child(2) {
			animation-delay: 6s;
		}
		img:nth-child(3) {
			animation-delay: 12s;
		}
		img:nth-child(4) {
			animation-delay: 18s;
		}
	}
}

@keyframes ken-burns {
	0% {
		opacity: 0;
		transform: scale(1.05) translate(0, 0);
	}
	5% {
		opacity: 1;
	}
	25% {
		opacity: 1;
		transform: scale(1.2) translate(-2%, -2%);
	}
	30% {
		opacity: 0;
	}
	100% {
		opacity: 0;
		transform: scale(1.2) translate(-2%, -2%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.powder_mixing_machine_images .carousel img {
		animation: none;
		opacity: 0;
		transform: none;
	}
	.powder_mixing_machine_images .carousel img:first-child {
		opacity: 1;
		position: relative;
	}
}

.footer_ben {
	text-align: center;
	place-content: end center;
	img {
		width: 100%;
		height: auto;
		max-width: 90%;
		margin: 0 auto;
		filter: drop-shadow(0 0 3rem var(--teal-transparent));
	}
}