/*
	Theme Name: MAC Papers
	Theme URI: https://macpapers.com
	Author: Dalton Agency
	Author URI: https://daltonagency.com
	Description: MAC Papers website theme.
	Version: 1.0.0
	Text Domain: mac-papers
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
	--site-pad: 2rem;
	--container: 75rem;
	--nav-offset: 8.5rem;
	--sec-pad: 5rem;

	--green: #94c13d;
	--gray-light: #d9d9d9;
	--gray-dark: #4b4b4b;
	--blue-primary: #244b96;
	--blue-mediterranean: #008fb2;
	--seafoam: #96ced3;
	--teal: #007b81;
	--purple-light: #dbddea;

	--color-focus-ring: #2563eb;
	--color-selection-bg: var(--green);
	--color-selection-text: #000;

	--font-primary:
		"Helvetica Neue", Helvetica, "Inter", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, Arial, sans-serif;

	@media (width < 601px) {
		--sec-pad: 3rem;
		--site-pad: 1.8rem;
	}
}

/*  Reset  */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-primary);
	min-height: 100svh;
	min-height: 100dvh;
	padding-top: var(--nav-offset);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
video {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}

svg {
	display: block;
}

button,
input,
textarea,
select {
	font: inherit;
	border: none;
	background: none;
}

button {
	cursor: pointer;
	touch-action: manipulation;
}

input,
textarea,
select {
	width: 100%;
	min-width: 0;
}

textarea {
	resize: vertical;
}

.alignright {
	width: unset;
	float: right;
	margin: 1rem;
}

.alignleft {
	width: unset;
	float: left;
	margin: 1rem;
}

.aligncenter {
	width: unset;
	display: block;
	margin: 0 auto;
	margin: 1rem;
}

.alignjustify {
	width: unset;
	display: block;
	margin: 1rem;
}

/*  Accessibility  */

:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--color-selection-bg);
	color: var(--color-selection-text);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/*  Typography  */
h1 {
	color: #fff;
	font-size: 4rem;
	font-weight: 400;
	letter-spacing: -1.28px;

	@media (width < 601px) {
		font-size: 2.8rem;
	}
}

p {
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 160%;
}

.headline1 {
	font-size: 3rem;
	font-weight: 400;
	margin: 0 0 3rem 0;

	@media (width < 601px) {
		font-size: 1.8rem;
		margin: 0 0 1rem 0;
	}
}

.headline2 {
	font-size: 3rem;
	font-weight: 700;
	margin: 0 0 2.5rem 0;

	@media (width < 601px) {
		font-size: 1.8rem;
		margin: 0 0 1rem 0;
	}
}

.headline3 {
	font-size: 1.25rem;
	font-weight: 700;
}

/*  Utilities  */

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--site-pad) * 2);
	margin: 0 auto;
	padding: 0 var(--site-pad);
}

.hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

ul.group {
	list-style: none;
}

.bar {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 1001;
	box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);

	& *:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}

	a {
		color: #fff;
		text-decoration: none;
		font-size: 1.125rem;

		@media (width < 1180px) {
			font-size: 1rem;
		}
	}

	.group {
		display: flex;
		justify-content: space-between;
		gap: 1rem;

		.logo {
			width: 100%;
			max-width: 175px;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				inset: 0 1rem 0 auto;
				width: 100vw;
				background: #fff;
				height: 100%;
				z-index: -1;
			}

			&::after {
				content: "";
				position: absolute;
				inset: 0 auto 0 calc(100% - 1rem);
				width: 100vw;
				background: var(--blue-primary);
				height: 100%;
				z-index: -1;
			}
		}

		.wrapper {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			gap: 2rem;
			width: 100%;
			padding: 0 0 1.6rem 0;

			nav.primary {
				padding: 0 0 0.35rem 0;

				ul {
					display: flex;

					li {
						list-style: none;

						a {
							padding: 0.5rem 1rem;
							display: block;

							&:hover,
							&:focus-visible {
								color: var(--green);
							}
						}

						&.dropdown {
							position: relative;

							& > a {
								position: relative;
								padding: 0.5rem 2rem 0.5rem 1rem;

								&::after {
									content: "";
									position: absolute;
									inset: 50% 0.8rem auto auto;
									translate: 0 -50%;
									background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 11 7" fill="none"><path d="M10.344 5.68817L5.34411 0.68805L0.343995 5.68817" stroke="white" stroke-width="0.973037"/></svg>')
										no-repeat center center / contain;
									width: 0.8rem;
									height: 0.8rem;

									rotate: 180deg;
								}
							}

							.sub {
								position: absolute;
								inset: 100% auto auto 0;
								display: none;
								padding: 0.5rem 0 0 0;
								box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.08);

								ul {
									flex-direction: column;
									background: var(--purple-light);
									border-radius: 0.375rem;
									padding: 1rem 0;

									li {
										a {
											display: block;
											text-wrap: nowrap;
											color: #000;
											font-weight: 600;

											&:hover,
											&:focus-visible {
												background: var(--green);
											}
										}
									}
								}
							}

							&:hover,
							&:focus-visible,
							&:has(:hover),
							&:has(:focus-visible),
							&:focus-within {
								& > a {
									color: #000;

									&::before {
										content: "";
										position: absolute;
										inset: 0;
										background: #dbddea;
										z-index: -1;
										border-radius: 0.375rem;
									}

									&::after {
										background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 11 7" fill="none"><path d="M10.344 5.68817L5.34411 0.68805L0.343995 5.68817" stroke="black" stroke-width="0.973037"/></svg>')
											no-repeat center center / contain;
									}
								}

								.sub {
									display: block;
								}
							}
						}
					}
				}
			}

			nav.secondary {
				display: flex;
				flex-direction: column;
				gap: 1rem;
				text-align: right;

				.btn1 {
					padding: 0.75rem 1.25rem;
				}

				a:not(.btn1) {
					font-size: 1rem;

					&:hover,
					&:focus-visible {
						color: var(--green);
					}
				}
			}
		}
	}

	.toggle-nav {
		display: none;
		width: 24px;
		height: 20px;
		gap: 33.333%;
		align-self: center;

		grid-template-columns: 1fr;

		span {
			background: #fff;

			width: 100%;
			border-radius: 50px;
			transform-origin: center;
			transition: all 0.1s ease;
		}
	}

	&[data-mobile-nav-open="true"] {
		.group {
			.toggle-nav {
				span {
					&:nth-child(1) {
						width: 100%;
						rotate: 45deg;
						translate: 0 8.75px;
					}

					&:nth-child(2) {
						opacity: 0;
					}

					&:nth-child(3) {
						width: 100%;
						rotate: -45deg;
						translate: 0 -8.75px;
					}
				}
			}

			.wrapper {
				translate: -100% 0;
			}
		}
	}

	@media (width < 1090px) {
		.group {
			.logo {
				max-width: 100px;
			}

			.wrapper {
				position: absolute;
				inset: var(--nav-offset) auto 0 100%;
				flex-direction: column;
				align-items: flex-start;
				background: var(--purple-light);
				height: calc(100svh - var(--nav-offset));
				padding: 2rem;
				width: unset;
				overflow-y: auto;
				scrollbar-width: thin;
				scrollbar-color: rgba(0, 0, 0, 0.2) var(--purple-light);
				transition: translate 0.15s ease;
				z-index: -3;
				box-shadow: 0 -4px 15px 0 rgba(0, 0, 0, 0.1);

				nav.primary {
					ul {
						flex-direction: column;
						gap: 1rem;
					}
				}

				& nav.primary {
					a {
						font-weight: 600;
						font-size: 1.125rem;
						color: #000;

						&:hover,
						&:focus-visible {
							color: var(--blue-primary);
						}
					}

					& ul {
						gap: unset;

						& li {
							padding: 0.3rem 0;

							a {
								padding: 0.5rem 0;

								&:hover,
								&:focus-visible {
									color: var(--blue-primary);
								}
							}

							&.dropdown {
								&:hover,
								&:focus-visible,
								&:has(:hover),
								&:has(:focus-visible),
								&:focus-within {
									& > a {
										color: #000;
									}
								}

								a {
									padding: 0.5rem 0;

									&::after,
									&::before {
										display: none;
									}

									&:hover,
									&:focus-visible {
										color: var(--blue-primary);
									}
								}

								.sub {
									display: flex;
									position: unset;
									padding: 0;
									box-shadow: none;

									ul {
										background: unset;
										padding: 0 0 0 1rem;

										li {
											a {
												color: #000;
												font-weight: 500;

												&:hover,
												&:focus-visible {
													color: var(--blue-primary);
													background: unset;
												}
											}
										}
									}
								}
							}
						}
					}
				}

				nav.secondary {
					flex-direction: column-reverse;
					text-align: center;
					width: 100%;

					.group {
						display: flex;
						flex-direction: column;
						gap: 1rem;
					}

					a {
						color: #000;
						font-weight: 500;

						&:not(.btn1) {
							&:hover,
							&:focus-visible {
								color: var(--blue-primary);
							}
						}
					}

					.btn1 {
						width: 100%;
						border-color: #000;

						&:hover,
						&:focus-visible {
							color: #fff;
							background: var(--blue-primary);
							border-color: var(--blue-primary);
						}
					}
				}
			}
		}

		.toggle-nav {
			display: grid;
		}
	}
}

@media (width < 1090px) {
	body.admin-bar .bar .group .wrapper {
		height: calc(100svh - var(--nav-offset) - 32px);
	}
}

body.admin-bar .bar {
	inset: 32px 0 auto 0;
}

#wpadminbar {
	position: fixed;
}

@media screen and (max-width: 782px) {
	body.admin-bar .bar {
		inset: 46px 0 auto 0;
	}

	body.admin-bar .bar .group .wrapper {
		height: calc(100svh - var(--nav-offset) - 46px);
	}
}

/*  Univeral  */

.btn1 {
	border-radius: 0.375rem;
	border: 1px solid #fff;
	padding: 0.75rem 2.5rem;
	color: #fff;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1.125rem;
	text-wrap: nowrap;
	place-content: center;

	&:hover,
	&:focus-visible {
		background: var(--green);
		border-color: var(--green);
		color: #000;
	}

	@media (width < 601px) {
		width: 100%;
		padding: 1rem;
		font-size: 1.25rem;
	}
}

.btn2 {
	border-radius: 0.375rem;
	padding: 0.75rem 2.5rem;
	color: #fff;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	background: var(--blue-primary);
	font-size: 1.125rem;
	text-wrap: nowrap;
	place-content: center;

	&:hover,
	&:focus-visible {
		background: var(--green);
		color: #000;
	}

	@media (width < 601px) {
		width: 100%;
		padding: 1rem;
		font-size: 1.25rem;
	}
}

.btn3 {
	border-radius: 0.375rem;
	border: 2px solid var(--hero-blue, #244b96);
	padding: 0.75rem 2.5rem;
	color: var(--blue-primary);
	text-align: center;
	text-decoration: none;
	display: inline-block;
	background: #fff;
	font-size: 1.125rem;
	text-wrap: nowrap;
	place-content: center;

	&:hover,
	&:focus-visible {
		background: var(--blue-primary);
		color: #fff;
	}

	@media (width < 601px) {
		width: 100%;
		padding: 1rem;
		font-size: 1.25rem;
	}
}

.arrow {
	text-align: left;
	padding: 0.75rem 2rem 0.75rem 1rem;
	position: relative;

	&::after {
		content: "";
		position: absolute;
		inset: 50% 0.75rem auto auto;
		translate: 0 -50%;
		width: 7px;
		height: 14px;
		background: url("./images/arrow2.svg") center center / contain no-repeat;
	}

	&:hover,
	&:focus-visible {
		&::after {
			filter: brightness(0) invert(1);
		}
	}
}

.hero {
	position: relative;
	z-index: 1;
	padding: 7.5rem 0;

	.background {
		background: #000;
		position: absolute;
		inset: 0;

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

	.content {
		position: relative;
		z-index: 3;

		.txt {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 2.5rem;
			max-width: 50rem;

			p {
				color: #fff;
			}
		}
	}

	.swiper-pagination {
		position: absolute;
		inset: auto 0 2rem 50%;
		translate: -50% 0;
		z-index: 5;
		display: flex;
		justify-content: center;
		gap: 1rem;

		.swiper-pagination-bullet {
			width: 0.75rem;
			height: 0.75rem;
			background: rgba(255, 255, 255, 0.3);
			opacity: 1;
			border-radius: 50%;
			transition: background 0.3s ease;

			&.swiper-pagination-bullet-active {
				background: var(--green);
			}
		}
	}

	@media (width < 601px) {
		padding: 5rem 0;
	}
}

.hero2 {
	position: relative;
	z-index: 1;
	padding: 2.5rem 0;

	.background {
		background: var(--purple-light) url("./images/logo-mark_bg2.svg") center
			center / cover no-repeat;
		position: absolute;
		inset: 0;

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

	.content {
		position: relative;
		z-index: 3;

		.group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 2.5rem;

			.txt {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 2.5rem;
				transition: flex 0.3s ease;
				max-width: 36rem;

				h1 {
					color: #000;
				}
			}

			.img {
				flex: 1;
				align-self: stretch;
				transition: flex 0.3s ease;
				max-width: 36rem;

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

			@media (width < 800px) {
				.txt {
					flex: 3;
					max-width: unset;
				}

				.img {
					flex: 2;
					max-width: unset;
				}
			}

			@media (width < 700px) {
				flex-direction: column-reverse;

				.txt {
					flex: unset;
				}

				.img {
					flex: unset;
					height: 50vw;
				}
			}
		}
	}

	@media (width < 601px) {
		padding: var(--site-pad) 0 var(--sec-pad) 0;

		.content .group .txt {
			gap: 1rem;
		}
	}
}

.feed {
	display: grid;
	list-style: none;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	align-items: stretch;

	.item {
		height: 100%;
		display: flex;

		article {
			display: flex;
			flex-direction: column;

			.img {
				height: 18rem;
				position: relative;

				img {
					max-width: unset;
					height: 100%;
					object-fit: cover;
					object-position: center;
				}

				&::before {
					content: "";
					position: absolute;
					inset: auto 0 0 0;
					background: var(--teal);
					height: 0.5rem;
				}
			}

			.txt {
				flex: 1;
				padding: 1.5rem;
				background: rgba(31, 68, 138, 0.12);
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 1rem;

				p {
					margin: 0 0 1rem 0;
				}

				.btn3 {
					margin: auto 0 0 0;
				}
			}
		}

		&:nth-child(6n + 1) article .img::before {
			background: var(--teal);
		}

		&:nth-child(6n + 2) article .img::before {
			background: var(--blue-mediterranean);
		}

		&:nth-child(6n + 3) article .img::before {
			background: var(--green);
		}

		&:nth-child(6n + 4) article .img::before {
			background: var(--gray-dark);
		}

		&:nth-child(6n + 5) article .img::before {
			background: var(--seafoam);
		}

		&:nth-child(6n + 6) article .img::before {
			background: var(--blue-primary);
		}
	}

	@media (width < 900px) {
		grid-template-columns: repeat(2, 1fr);

		.item {
			article {
				.img {
					height: 15rem;
				}
			}
		}
	}

	@media (width < 601px) {
		grid-template-columns: repeat(1, 1fr);
	}
}

.cta {
	background: var(--purple-light);
	padding: calc(var(--sec-pad) / 2) 0;

	.group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;

		.txt {
			max-width: 40rem;
		}
	}

	@media (width < 700px) {
		.group {
			flex-direction: column;
			align-items: flex-start;
			gap: 1rem;

			.txt {
				max-width: unset;
			}

			div:has(.btn2) {
				align-self: stretch;
			}
		}
	}
}

footer.primary {
	background: var(--blue-primary) url("./images/logo-mark_bg.svg") center
		center / cover no-repeat;
	padding: 3rem 0 0 0;

	.group {
		display: flex;
		gap: 2rem;
		justify-content: space-between;
		align-items: center;
		padding: 0 0 3rem 0;

		.logo {
			width: 100%;
			max-width: 10.9375rem;
			align-self: flex-start;
		}

		.nav {
			display: flex;
			flex-direction: column;
			gap: 1rem;
			justify-content: flex-end;
			text-align: right;

			nav.primary {
				display: flex;
				justify-content: flex-end;
				text-align: right;
				gap: 1.5rem;
				flex-wrap: wrap;

				a {
					color: #fff;
					text-decoration: none;
					font-size: 1rem;
					font-weight: 700;

					&:hover,
					&:focus-visible {
						color: var(--green);
					}
				}
			}

			nav.secondary {
				display: flex;
				justify-content: flex-end;
				gap: 1rem;
				text-align: right;

				a {
					color: #fff;
					text-decoration: none;
					font-size: 0.875rem;

					&:hover,
					&:focus-visible {
						color: var(--green);
					}
				}
			}

			span {
				color: #fff;
				font-size: 0.875rem;
				font-weight: 400;
				margin: 2rem 0 0 0;
			}
		}

		@media (width < 601px) {
			flex-direction: column;
			align-items: center;
			gap: 3rem;

			.logo {
				align-self: center;
			}

			.nav {
				align-items: center;
				gap: 2rem;

				nav.primary {
					justify-content: center;
				}

				span {
					margin: 1rem 0 0 0;
				}
			}
		}
	}

	.footer-bar {
		background: var(--blue-mediterranean);
		padding: 1rem 0;

		.wrapper {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 2rem;

			.brands {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				gap: 1.5rem;
				list-style: none;

				a {
					position: relative;
					z-index: 3;

					img {
						object-fit: contain;
						object-position: center;
						height: 100%;
						width: 100%;
						max-height: 1.375rem;
					}

					&::before {
						content: "";
						position: absolute;
						inset: -5px;
						background: rgba(0, 0, 0, 0.1);
						z-index: -1;
						opacity: 0;
						transform: skew(-25deg);
					}

					&:hover,
					&:focus-visible {
						&::before {
							opacity: 1;
						}
					}
				}
			}

			.social {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 1rem;

				li {
					list-style: none;
					height: 1rem;
					position: relative;
					z-index: 3;
				}

				a {
					img {
						object-fit: contain;
						object-position: center;
						height: 100%;
						width: 100%;
					}

					&::before {
						content: "";
						position: absolute;
						inset: 50% auto auto 50%;
						translate: -50% -50%;
						width: 1.8rem;
						height: 1.8rem;
						background: rgba(0, 0, 0, 0.1);
						z-index: -1;
						border-radius: 200px;
						opacity: 0;
					}

					&:hover,
					&:focus-visible {
						&::before {
							opacity: 1;
						}
					}
				}
			}
		}

		@media (width < 601px) {
			padding: 3rem 0;

			.wrapper {
				flex-direction: column;
				align-items: center;
				gap: 2rem;

				.brands {
					flex-wrap: wrap;
				}

				.social {
					justify-content: center;
					gap: 2rem;
					flex-wrap: wrap;

					a {
						height: 1.5rem;
						width: 1.5rem;

						&::before {
							width: 2.5rem;
							height: 2.5rem;
						}
					}
				}
			}
		}
	}
}

.people {
	background: url("./images/bg_light-purple-stripes.png") center right / cover
		no-repeat;
	padding: var(--sec-pad) 0;

	.group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2.5rem;

		.txt {
			flex: 1 3 auto;
			max-width: 35rem;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 2.5rem;

			.headline2 {
				margin: 0;
			}

			p {
				text-wrap: pretty;
			}
		}

		.img {
			flex: 1 2 auto;
			align-self: stretch;
			max-width: 35rem;

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

	@media (width < 850px) {
		.group {
			flex-direction: column-reverse;

			.txt {
				flex: unset;
				max-width: unset;
			}

			.img {
				flex: unset;
				max-width: unset;
				height: 45vw;
			}
		}
	}
}

.tabs {
	width: 100%;

	a {
		line-break: anywhere;
	}

	.tablist {
		display: flex;
		gap: 0.25rem;
		text-align: center;
		text-wrap: balance;
		cursor: grab;

		&.is-dragging {
			cursor: grabbing;
			user-select: none;
		}

		button {
			flex: 1;
			padding: 0.625rem 0.625rem 0.875rem 0.625rem;
			font-size: 1rem;
			font-weight: 700;
			position: relative;
			background: #f9f9f9;

			&::after {
				content: "";
				position: absolute;
				inset: auto 0 0 0;
				background: var(--blue-primary);
				height: 0.125rem;
				transition:
					height 0.1s ease,
					background 0.1s ease;
			}

			&[data-active="true"] {
				background: var(--purple-light);
				pointer-events: none;

				&::after {
					background: var(--blue-primary);
					height: 0.375rem;
				}
			}

			&:hover,
			&:focus-visible {
				&::after {
					background: var(--green);
					height: 0.375rem;
				}
			}
		}

		@media (width < 800px) {
			padding: 0 var(--site-pad) 1rem var(--site-pad);
			overflow-x: auto;
			margin: 0 calc(-1 * var(--site-pad));

			&::-webkit-scrollbar {
				height: 0.5rem;
			}

			&::-webkit-scrollbar-thumb {
				background: #c7cada;
				border-radius: 100px;
				border: 1px solid #9a9fba;
			}

			&::-webkit-scrollbar-track {
				background: #e6e8f1;
				border-radius: 100px;
				padding: 0.25rem;
				margin: 0 var(--site-pad);
			}

			mask-image: linear-gradient(
				to right,
				transparent 0%,
				black var(--site-pad),
				black calc(100% - var(--site-pad)),
				transparent 100%
			);

			button {
				min-width: 10rem;
			}
		}
	}

	.tabpanels {
		padding: 1.5rem 0 0 0;

		.panel {
			display: none;

			&[data-active="true"] {
				display: block;
			}

			.group {
				display: flex;
				gap: 2.5rem;
				justify-content: space-between;

				.txt {
					flex: 1;
					padding: 3.5rem 0 0 0;
				}

				.imgs {
					flex: 1;
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 1rem;
				}

				a {
					color: inherit;

					&:hover,
					&:focus-visible {
						color: var(--blue-primary);
					}
				}

				h3 {
					margin: 0 0 1.5rem 0;
				}

				p:not(:last-child) {
					margin: 0 0 1rem 0;
				}

				.img {
					flex: 1;

					&:nth-child(3n + 1) {
						grid-column: 1 / -1;
					}

					&:nth-child(3n + 2) {
						grid-column: span 2;
					}

					&:nth-child(3n) {
						grid-column: span 1;
					}

					&:last-child:nth-child(3n + 2) {
						grid-column: 1 / -1;
					}

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

				@media (width < 650px) {
					flex-direction: column;
					gap: 2rem;

					.txt {
						flex: unset;
					}

					.imgs {
						flex: unset;
					}
				}
			}
		}
	}
}

.accent-box {
	position: relative;
	z-index: 2;

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

	&::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--blue-mediterranean);
		z-index: -1;
		translate: -0.5rem -0.5rem;
	}
}

.contact {
	display: flex;
	gap: 1rem 2.5rem;
	padding: 0 0 1.5rem 0;
	margin: 0 0 1.5rem 0;
	border-bottom: 2px solid #000;
	flex-wrap: wrap;

	a {
		font-size: 1.25rem;
		color: #000;
		text-decoration: none;
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		text-wrap: nowrap;

		&::before {
			content: "";
			width: 2.25rem;
			height: 2.25rem;
			display: inline-block;
		}

		&.phone::before {
			background: url("./images/icon_phone.svg") center center / contain
				no-repeat;
		}

		&.email::before {
			background: url("./images/icon_mail.svg") center center / contain
				no-repeat;
		}

		&:hover,
		&:focus-visible {
			text-decoration: underline;
		}
	}
}

.accordion {
	details {
		position: relative;
		margin: 0 0 1.25rem 0;

		summary {
			font-size: 1.125rem;
			font-weight: 700;
			line-height: 160%;
			color: #000;
			text-decoration: none;
			padding: 0 0 1.25rem 0;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 1rem;
			cursor: pointer;

			span {
				width: 2.75rem;
				height: 2.75rem;
				flex-shrink: 0;
				background: var(--gray-light);
				z-index: -1;
				position: relative;

				&::after {
					content: "";
					position: absolute;
					inset: 0;
					background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="11" height="7" viewBox="0 0 11 7" fill="none"><path d="M10.344 5.68817L5.34411 0.68805L0.343995 5.68817" stroke="black" stroke-width="0.973037"/></svg>')
						no-repeat center center / 40%;
					z-index: -1;
					width: 100%;
					height: 100%;
					transform-origin: center;
					transition: rotate 0.1s ease;
				}
			}
		}

		&[open] {
			summary {
				span {
					&::after {
						rotate: 180deg;
					}
				}
			}
		}

		.panel {
			padding: 0 0 1.25rem 0;

			p {
				font-size: 1.125rem;
				line-height: 160%;
			}
		}

		&::after {
			content: "";
			position: absolute;
			inset: auto 0 0 0;
			width: 100%;
			height: 1px;
			background: var(--gray-light);
			z-index: -1;
		}

		&:last-child::after {
			display: none;
		}
	}
}

.solutions_cta {
	padding: 7.5rem 0;
	background-image: url("./images/cta_bg_industry-solutions.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	.txt {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2.5rem;
		color: #fff;
		max-width: 49.5rem;

		.headline2 {
			margin: 0;
		}
	}

	@media (width < 601px) {
		padding: 3rem 0;

		.txt {
			max-width: unset;
		}
	}
}

.contact_form {
	padding: 0 0 var(--sec-pad) 0;
	background: url("./images/lines_color.webp") bottom right -50% / 50% no-repeat;

	.card {
		background: var(--purple-light);
		padding: 2.5rem;

		.headline2 {
			margin: 0 0 1rem 0;
		}

		p {
			margin: 0 0 2.5rem 0;
		}

		/* .form {
			form {
				display: flex;
				flex-direction: column;
				gap: 1rem;

				input,
				textarea {
					padding: 1rem;
					background: #fff;
					font-size: 1.125rem;
					color: #000;

					&::placeholder {
						color: var(--gray-dark);
					}
				}

				button {
					align-self: flex-start;
					margin: 2.5rem 0 0 0;
				}
				label:has(input[type="checkbox"]) {
					display: flex;
					align-items: center;
					gap: 0.5rem;
					input {
						width: unset;
						display: inline;
						flex-shrink: 0;
						flex-grow: 0;
					}
				}
			}
		} */

		.form {
			form {
				.forminator-label {
					display: none;
				}

				.forminator-input,
				.forminator-textarea {
					padding: 1rem;
					background: #fff;
					font-size: 1.125rem;
					color: #000;
					border: none;

					&::placeholder {
						color: var(--gray-dark);
					}
				}

				.forminator-button-submit {
					border-radius: 0.375rem;
					padding: 0.75rem 2.5rem;
					color: #fff;
					text-align: center;
					text-decoration: none;
					display: inline-block;
					background: var(--blue-primary);
					font-size: 1.125rem !important;
					text-wrap: nowrap;
					place-content: center;
					margin: 2rem 0 0 0;

					&:hover,
					&:focus-visible {
						background: var(--green);
						color: #000;
						box-shadow: none;
					}

					@media (width < 601px) {
						width: 100%;
						padding: 1rem;
						font-size: 1.25rem;
					}
				}
			}
		}
	}
}

#home {
	.hero {
		padding: 9rem 0;
	}

	.value_prop {
		padding: var(--sec-pad) 0;

		.group {
			margin: 3rem 0 5rem 0;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 2rem;

			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				gap: 1rem;

				strong {
					font-size: 1.25rem;
					font-weight: 700;
					display: block;
					margin: 0 0 0.5rem 0;
				}

				span {
					font-size: 1rem;
					font-weight: 400;
					line-height: 140%;
				}
			}

			@media (width < 601px) {
				margin: var(--sec-pad) 0;
			}
		}

		div:has(.btn2) {
			text-align: center;
		}

		@media (width < 780px) {
			.group {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (width < 601px) {
			.group {
				grid-template-columns: repeat(1, 1fr);
			}
		}
	}

	.locations {
		padding: var(--sec-pad) 0 3rem 0;

		.group {
			display: flex;
			align-items: center;
			justify-content: space-between;
			align-items: stretch;
			gap: 2rem;

			.map {
				flex: 1;
				max-width: 35rem;

				#home-locations-map {
					width: 100%;
					height: 100%;
				}
			}

			.txt {
				flex: 1;
				max-width: 35rem;

				p {
					margin: 0 0 2.5rem 0;

					@media (width < 601px) {
						margin: 0 0 1.5rem 0;
					}
				}
			}
		}

		@media (width < 850px) {
			.group {
				flex-direction: column;

				.map {
					flex: unset;
					height: 50vw;
					max-width: unset;

					@media (width < 601px) {
						height: 75vw;
					}
				}

				.txt {
					flex: unset;
					max-width: unset;
				}
			}
		}
	}

	.products {
		padding: 0 0 var(--sec-pad) 0;
	}
}

#about {
	.opening {
		padding: var(--sec-pad) 0;
		background: url("./images/lines_color.webp") bottom right -50% / 50%
			no-repeat;

		.group {
			display: flex;
			justify-content: space-between;
			gap: 2rem;

			.txt {
				flex: 1;
				max-width: 35rem;
			}

			div:has(.video) {
				flex: 1;
				max-width: 35rem;

				.video {
					width: 100%;

					iframe {
						width: 100%;
						height: 100%;
						aspect-ratio: 16/9;
					}
				}

				.social {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					gap: 2rem;
					margin: 1rem 0 0 0;

					span {
						font-size: 1.25rem;
						font-weight: 700;
					}

					ul {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						gap: 1rem;

						li {
							list-style: none;
							height: 1rem;
							position: relative;
							z-index: 3;
							display: inline-block;
						}
					}

					a {
						img {
							object-fit: contain;
							object-position: center;
							height: 100%;
							width: 100%;
							filter: invert(1);
						}

						&::before {
							content: "";
							position: absolute;
							inset: 50% auto auto 50%;
							translate: -50% -50%;
							width: 1.8rem;
							height: 1.8rem;
							background: rgba(0, 0, 0, 0.1);
							z-index: -1;
							border-radius: 200px;
							opacity: 0;
						}

						&:hover,
						&:focus-visible {
							&::before {
								opacity: 1;
							}
						}
					}
				}
			}
		}

		@media (width < 850px) {
			.group {
				flex-direction: column;

				.txt {
					flex: unset;
					max-width: unset;
				}

				div:has(.video) {
					flex: unset;
					max-width: unset;
				}
			}
		}
	}

	.news {
		background: var(--blue-primary);

		.swiper {
			padding: 3rem 0 var(--sec-pad) 0;
		}

		.group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 3rem;

			.txt {
				flex: 1;
				max-width: 35rem;
				color: #fff;
				padding: 4rem 0;

				p {
					margin: 0 0 2.5rem 0;
				}

				.btn3:hover,
				.btn3:focus-visible {
					background: var(--green);
					color: var(--blue-primary);
				}
			}

			.img {
				flex: 1;
				max-width: 35rem;
				align-self: stretch;

				&.accent-box::before {
					background: var(--green);
				}
			}
		}

		.swiper-pagination {
			position: absolute;
			inset: auto 0 2rem 50%;
			translate: -50% 0;
			z-index: 5;
			display: flex;
			justify-content: center;
			gap: 1rem;

			.swiper-pagination-bullet {
				width: 0.75rem;
				height: 0.75rem;
				background: rgba(255, 255, 255, 0.3);
				opacity: 1;
				border-radius: 50%;
				transition: background 0.3s ease;

				&.swiper-pagination-bullet-active {
					background: var(--green);
				}
			}
		}

		@media (width < 800px) {
			.swiper {
				padding: 3rem 0 4.5rem 0;
			}

			.group {
				flex-direction: column-reverse;

				.txt {
					flex: unset;
					max-width: unset;
					padding: 0;
				}

				.img {
					flex: unset;
					max-width: unset;
					height: 45vw;
					width: 100%;
				}
			}
		}
	}

	.history {
		padding: var(--sec-pad) 0;

		.group {
			display: flex;
			flex-direction: column;
			gap: 2.5rem;
			margin: 0 0 2rem 0;

			.headline2 {
				margin: 0;
			}

			.img {
				overflow: hidden;

				.swiper-slide {
					height: 500px;
				}

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center;
					max-width: unset;
				}

				@media (width < 900px) {
					.swiper-slide {
						height: 40vw;
					}
				}
			}
		}

		.timeline {
			display: flex;
			gap: 1rem;
			justify-content: space-between;
			padding: 2.5rem 0 0 0;
			position: relative;
			overflow: hidden;

			.item {
				flex: 1;
				max-width: 10rem;
				cursor: pointer;

				h3 {
					font-size: 1.25rem;
					font-weight: 400;
					margin: 0 0 0.5rem 0;
					color: var(--gray-dark);
					display: inline-block;
					position: relative;

					&::before {
						content: "";
						position: absolute;
						inset: -2.5rem auto auto 0;
						background: var(--gray-light);
						width: 1.5rem;
						height: 1.5rem;
						border-radius: 12.5rem;
						z-index: 2;
						transition: scale 0.1s ease;
					}
				}

				&:hover,
				&:focus-visible {
					h3,
					p {
						color: var(--blue-mediterranean);
					}
				}

				&:active {
					h3::before {
						scale: 0.8;
					}
				}

				&.is-active h3::before {
					background: var(--blue-mediterranean);
				}

				/* &:last-child h3::after {
					content: "";
					position: absolute;
					inset: -1.6rem auto auto 0;
					width: 500px;
					height: 4px;
					background: #fff;
				} */

				p {
					font-size: 1rem;
					font-weight: 700;
					color: var(--gray-dark);
					line-height: normal;
				}
			}

			/* &::before {
				content: "";
				position: absolute;
				inset: 0.5rem 0 auto 0;
				background: var(--gray-light);
				width: 100%;
				height: 1px;
			} */

			@media (width < 900px) {
				flex-direction: column;
				padding: 0 0 0 2rem;
				gap: 2rem;

				.item {
					flex: unset;
					max-width: unset;

					h3::before {
						inset: 0.1rem auto auto -2rem;
					}

					p {
						font-size: 1.2rem;
					}

					/* &:last-child h3::after {
						inset: 0.5rem auto auto -1.25rem;
						width: 4px;
						height: 400px;
						background: #fff;
					} */
				}

				/* &::before {
					inset: 0.5rem 0 auto 0.85rem;
					width: 1px;
					height: 100%;
				} */
			}
		}
	}

	.shop_cta {
		padding: var(--sec-pad) 0;

		.group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 2.5rem;
		}

		.img {
			flex: 1;
			max-width: 35rem;
			align-self: stretch;

			&.accent-box::before {
				background: #96ced3;
				translate: 0.5rem 0.5rem;
			}
		}

		.txt {
			flex: 1;
			max-width: 35rem;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 2.5rem;
			padding: 2rem 0;

			.headline2 {
				margin: 0;
			}
		}

		@media (width < 950px) {
			.group {
				flex-direction: column;
				gap: 3rem;

				.img {
					flex: unset;
					max-width: unset;
					height: 40vw;
					width: 100%;
				}

				.txt {
					flex: unset;
					max-width: unset;
					padding: 0;
				}
			}
		}
	}
}

#markets {
	.locations {
		padding: var(--sec-pad) 0;

		.map {
			height: 40vw;
			width: 100%;
			position: relative;

			#markets-map {
				height: 40vw;
			}

			.map-overlay {
				position: absolute;
				inset: 0;
				background: rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
				cursor: pointer;

				.map-activate {
					padding: 1rem 2rem;
					background: var(--blue-primary);
					color: #fff;
					border-radius: 0.375rem;
					font-size: 1.125rem;
					cursor: pointer;
					border: none;
					transition: background 0.3s ease;

					&:hover,
					&:focus-visible {
						background: var(--green);
						color: #000;
					}
				}
			}

			iframe {
				display: block;
			}
		}
	}

	.location_details {
		padding: 0 0 var(--sec-pad) 0;

		.group {
			display: flex;
			gap: 2.5rem;
			align-items: center;

			.txt {
				flex: 8;

				h3 {
					font-size: 2rem;
					margin: 0 0 0.5rem 0;
				}

				p {
					font-size: 1.25rem;
				}

				.details {
					margin: 1.5rem 0;

					p {
						font-size: 1.125rem;
					}

					a {
						text-decoration: none;
						color: #000;

						&:hover,
						&:focus-visible {
							text-decoration: underline;
						}
					}
				}

				.wrapper {
					display: flex;
					gap: 2.5rem;

					.btn3:hover,
					.btn3:focus-visible {
						background: var(--green);
						border-color: var(--green);
						color: #000;
					}
				}
			}

			.img {
				flex: 3;
				align-self: flex-start;

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

			@media (width < 700px) {
				flex-direction: column;
				gap: 2rem;

				.txt {
					flex: unset;
				}

				.img {
					flex: unset;
					height: 30vw;
					width: 100%;
				}
			}

			@media (width < 601px) {
				.txt .wrapper {
					flex-direction: column;
					gap: 1rem;
				}
			}
		}
	}
}

#location {
	.location_info {
		padding: var(--sec-pad) 0;

		.group {
			display: flex;
			gap: 2.5rem;
			align-items: flex-start;

			.txt {
				flex: 1;

				.headline2 {
					color: #000;
					margin: 0 0 1rem 0;
				}

				.details {
					display: flex;
					flex-direction: column;
					gap: 0.5rem;
					margin: 0 0 1rem 0;

					p {
						font-size: 1rem;
					}

					.address {
						font-size: 1.125rem;
						text-decoration: none;
						color: #000;

						&:hover,
						&:focus-visible {
							text-decoration: underline;
						}
					}
				}

				.summary {
					h2 {
						font-size: 2rem;
						margin: 0 0 1rem 0;
						font-weight: 400;
					}

					p {
						margin: 0 0 1.5rem 0;
					}
				}
			}

			.img {
				flex: 1;

				img {
					width: 100%;
					height: 100%;
					max-width: unset;
					object-fit: cover;
					object-position: center;
				}
			}

			@media (width < 900px) {
				flex-direction: column-reverse;
				gap: 2rem;

				.txt {
					flex: unset;
				}

				.img {
					flex: unset;
					max-width: unset;
					height: 30vw;
					width: 100%;
				}
			}

			@media (width < 601px) {
				.txt .summary h2 {
					font-size: 1.5rem;
				}
			}
		}
	}
}

#solutions {
	.details {
		padding: var(--sec-pad) 0;
	}
}

#products {
	.listing {
		padding: var(--sec-pad) 0;
	}

	.catalog {
		padding: 0 0 var(--sec-pad) 0;

		.group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 3rem;

			.txt {
				flex: 1;
				max-width: 35rem;
				display: flex;
				flex-direction: column;
				gap: 2.5rem;

				& > * {
					margin: 0;
				}

				.btns {
					display: flex;
					gap: 2.5rem;

					a {
						&:hover,
						&:focus-visible {
							background: var(--green);
							border-color: var(--green);
							color: #000;
						}
					}
				}
			}

			.img {
				align-self: stretch;
				flex: 1;
				max-width: 35rem;

				&.accent-box {
					&::before {
						background: var(--teal);
					}
				}
			}

			@media (width < 800px) {
				flex-direction: column-reverse;
				gap: 2rem;

				.txt {
					flex: unset;
					max-width: unset;
				}

				.img {
					flex: unset;
					max-width: unset;
					height: 30vw;
					width: 100%;
				}
			}

			@media (width < 601px) {
				.txt {
					gap: 1.5rem;

					.btns {
						flex-direction: column;
						gap: 1rem;
					}
				}
			}
		}
	}
}

#product {
	.product_details {
		padding: var(--sec-pad) 0;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 2.5rem;
			margin: 0 0 2.5rem 0;

			.headline2,
			.btn2 {
				margin: 0;
			}

			@media (width < 700px) {
				flex-direction: column;
				align-items: flex-start;
				gap: 2rem;
				margin: 0 0 3rem 0;
			}
		}

		.tabs .tabpanels .panel .group {
			flex-direction: row-reverse;

			.imgs .img:nth-child(3n + 1) {
				aspect-ratio: 1;
			}

			@media (width < 650px) {
				flex-direction: column;
				gap: 2rem;

				.txt {
					flex: unset;
				}

				.imgs {
					flex: unset;
				}
			}
		}
	}

	.brand-logos {
		padding: var(--sec-pad) 0;

		.group {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			gap: 2.5rem;
			flex-wrap: wrap;

			.logo {
				align-self: stretch;
				max-width: 150px;
				max-height: 62px;

				img {
					object-fit: contain;
					object-position: center;
					height: 100%;
					width: 100%;
				}
			}
		}
	}

	.featured_brand {
		background: var(--blue-primary);
		overflow: hidden;

		.group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 2.5rem;

			.txt {
				flex: 3;
				padding: var(--sec-pad) 0;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 2.5rem;
				color: #fff;

				.logo {
					max-width: 21rem;
					height: 3.125rem;
					align-self: stretch;

					img {
						object-fit: contain;
						object-position: center left;
						height: 100%;
					}
				}
			}

			.wrapper {
				flex: 2;
				align-self: stretch;
				position: relative;

				.img {
					position: absolute;
					inset: 0 auto 0 0;
					z-index: 2;
					min-width: 50vw;
					height: 100%;

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

			@media (width < 800px) {
				flex-direction: column-reverse;
				gap: 0;

				.txt {
					flex: unset;
				}

				.wrapper {
					flex: unset;

					.img {
						inset: 0 auto 0 calc(-1 * var(--site-pad));
						height: 40vw;
						width: 100vw;
						min-width: unset;
						position: relative;
					}
				}

				@media (width < 601px) {
					.txt {
						gap: 1.5rem;

						.logo {
							max-width: 15rem;
						}
					}
				}
			}
		}
	}

	.additional_details {
		padding: var(--sec-pad) 0;

		.group {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			gap: 2.5rem;
			position: relative;
		}

		.faqs {
			flex: 1;
			/* TODO: Uncomment this for contact card */
			/* max-width: 35rem; */

			h2 {
				margin: 0 0 1.5rem 0;
			}
		}

		.contact_card {
			flex: 1;
			background: rgba(31, 68, 138, 0.12);
			padding: 2.5rem;
			max-width: 35rem;
			position: sticky;
			inset: 13rem 0 auto auto;

			.headline2 {
				font-size: 2rem;
				margin: 0 0 1rem 0;
			}

			p {
				margin: 0;
				font-size: 1.125rem;
				line-height: 160%;
			}

			.contact {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 1rem;
				border-bottom: none;
				padding: 0;
				margin: 1rem 0 0 0;
				width: 100%;

				a {
					&.phone::before {
						background: url("./images/icon_phone2.svg") center center / contain
							no-repeat;
					}

					&.email::before {
						background: url("./images/icon_mail2.svg") center center / contain
							no-repeat;
					}
				}
			}
		}

		@media (width < 900px) {
			.group {
				flex-direction: column;
				gap: 2rem;

				.contact_card {
					flex: unset;
					max-width: unset;

					.contact {
						justify-content: flex-start;
					}
				}

				.faqs {
					flex: unset;
					max-width: unset;
					width: 100%;
				}
			}
		}

		@media (width < 601px) {
			.group {
				.contact_card {
					padding: 1.5rem;
				}
			}
		}
	}
}

#careers {
	.offers {
		padding: var(--sec-pad) 0;
		background: var(--blue-primary);
		color: #fff;

		.headline2 {
			text-wrap: balance;
		}

		ul {
			column-count: 3;
			column-gap: 2.5rem;
			padding: 0 0 0 1.25rem;
			max-width: 60rem;

			li {
				break-inside: avoid;
				margin: 0 0 0.5rem 0;
			}

			@media (width < 700px) {
				column-count: 2;
			}

			@media (width < 501px) {
				column-count: 1;
			}
		}
	}

	.careers {
		padding: var(--sec-pad) 0;
		background: #fff;
		/* TODO: Uncomment this for people highlight */
		/* background: var(--purple-light); */

		.group {
			display: flex;
			justify-content: space-between;
			gap: 3rem;

			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 2.5rem;

				.headline2 {
					margin: 0;
				}

				p:not(:last-child) {
					margin: 0 0 1rem 0;
				}

				.img {
					height: 18.75rem;
					align-self: stretch;

					img {
						width: 100%;
						height: 100%;
						max-width: unset;
						object-fit: cover;
						object-position: center;
					}
				}
			}

			@media (width < 800px) {
				flex-direction: column;

				.item {
					flex: unset;

					.img {
						height: 30vw;
						width: 100%;
					}
				}
			}

			@media (width < 601px) {
				.item {
					gap: 1rem;
				}
			}
		}
	}

	.people_highlight {
		padding: var(--sec-pad) 0;

		.group {
			display: flex;
			justify-content: space-between;
			gap: 3rem;

			.txt {
				flex: 1;
				max-width: 35rem;
			}

			.slider {
				flex: 1;
				max-width: 35rem;
				align-self: flex-start;
				padding: 0 0 4rem 0;

				.wrapper {
					display: flex;
					align-items: center;
					gap: 2rem;

					.img {
						max-width: 13.25rem;
						max-height: 14.6875rem;
						flex: 1;
					}

					.info {
						flex: 1;

						p {
							color: var(--gray-dark);
						}

						blockquote p {
							color: var(--blue-primary);
							font-weight: 700;
							margin: 0 0 1rem 0;
						}
					}
				}

				.swiper-pagination-bullet {
					margin: 0 6px;
				}

				.swiper-pagination-bullet-active {
					background: var(--green);
				}
			}

			@media (width < 900px) {
				flex-direction: column;
				gap: 2rem;

				.txt {
					flex: unset;
					max-width: unset;
				}

				.slider {
					flex: unset;
					max-width: unset;
					width: 100%;
				}
			}

			@media (width < 601px) {
				.slider .wrapper {
					flex-direction: column;
					text-align: center;
					gap: 3rem;

					.img {
						max-width: 12rem;
						max-height: 12rem;
						flex: 1;
					}
				}
			}
		}
	}

	.resources {
		padding: var(--sec-pad) 0;
		background: var(--purple-light);

		.tabs {
			.tablist {
				button {
					background: var(--purple-light);

					&[data-active="true"] {
						background: rgba(31, 68, 138, 0.12);
					}
				}
			}
		}

		.tabpanels {
			.panel {
				.group {
					display: block;

					.headline2 {
						margin: 0;
					}

					.btns {
						display: flex;
						gap: 1.5rem;

						@media (width < 601px) {
							flex-direction: column;
							gap: 1rem;
						}
					}
				}
			}
		}
	}
}

#contact {
	h1 {
		color: #000;
	}

	.contact_form {
		padding: var(--sec-pad) 0;
		background: var(--blue-primary);

		.card {
			background: var(--purple-light);
			padding: 2.5rem;
		}
	}

	.info {
		padding: var(--sec-pad) 0;

		p {
			line-height: normal;
			margin: 0 0 0.5rem 0;
		}

		h3 {
			margin: 0 0 0.5rem 0;
		}

		.group {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			max-width: 60rem;
			gap: 3rem;
			margin: 2rem 0 0 0;

			.item {
				flex: 1;
				max-width: 25rem;

				div {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					gap: 1rem;

					p {
						a {
							text-decoration: none;
							color: #000;

							&:hover,
							&:focus-visible {
								text-decoration: underline;
							}
						}
					}

					&:has(h3):not(:first-child) {
						margin: 2rem 0 0 0;
					}
				}
			}

			@media (width < 750px) {
				flex-direction: column;
				gap: 3rem;
				max-width: 25rem;

				.item {
					max-width: unset;
					flex: unset;
					width: 100%;
				}
			}
		}
	}
}

#page {
	.content {
		padding: var(--sec-pad) 0;

		h1 {
			font-size: 2.5rem;
			margin: 0 0 2rem 0;
			font-weight: 600;
			color: #000;
		}

		h2 {
			font-weight: 600;
			margin: 0 0 0.5rem 0;
			font-size: 1.5rem;
		}

		p {
			margin: 0 0 1rem 0;
			font-size: 1.25rem;
		}
	}
}

#sub_brand {
	.hero2 {
		.logo {
			height: 3rem;

			img {
				height: 100%;
				object-fit: contain;
				object-position: center left;
			}
		}
	}
	.additional_info {
		padding: var(--sec-pad) 0;

		.group {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 2.5rem;
		}

		.img {
			flex: 1;
			max-width: 35rem;
			align-self: stretch;

			&.accent-box::before {
				background: #96ced3;
				translate: 0.5rem 0.5rem;
			}
		}

		.txt {
			flex: 1;
			max-width: 35rem;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 2.5rem;
			padding: 2rem 0;

			.headline2 {
				margin: 0;
			}
		}

		@media (width < 950px) {
			.group {
				flex-direction: column;
				gap: 3rem;

				.img {
					flex: unset;
					max-width: unset;
					height: 40vw;
					width: 100%;
				}

				.txt {
					flex: unset;
					max-width: unset;
					padding: 0;
				}
			}
		}
	}
}