:root {
	/* Colours */
	--dark-blue: #1c244b;
	--dark-blue-2: #0086c2;
	--darkish-blue: #008ab0;
	--light-blue: #cde9f8;
	--aqua: #1ba6c6;
	--aqua-trans: rgba(0, 139, 176, 0.6);
	--aqua-rgb: 27, 166, 198;
	--black-trans: rgba(0, 0, 0, 0.7);
	--grey-5a6167: rgb(90, 97, 103);
	--orange: #e19226;
	--grey: #e0e0e0;
	--medium-blue: #b9e6ff;
	--black: #383b3f;
	--off-white: #f8f8f8;

	/* Fonts */
	--tstar-light: "T-Star Pro Light", sans-serif;
	--tstar-reg: "T-Star Pro Light", sans-serif;
	--tstar-med: "T-Star Pro Medium", sans-serif;
	--tstar-bold: "T-Star Pro Bold", sans-serif;
	--tstar-heavy: "T-Star Pro Heavy", sans-serif;

	/* Font Sizes */
	--font-xxs: 0.625rem; /* 10px */
	--font-xs: 0.75rem; /* 12px */
	--font-sm: 0.875rem; /* 14px */
	--font-base: 1rem; /* 16px */
	--font-lg: 1.125rem; /* 18px */
	--font-med: 1.2rem; /* 19.2px */
	--font-xl: 1.25rem; /* 20px */
	--font-2xl: 1.375rem; /* 22px */
	--font-3xl: 1.5rem; /* 24px */
	--font-4xl: 1.6875rem; /* 27px */
	--font-5xl: 2.025rem; /* 32px */
	--font-6xl: 2.25rem; /* 36px */
	--font-6xl-2: 2.5rem; /* 40px */
	--font-7xl: 2.8125rem; /* 45px */
	--font-8xl: 2.9375rem; /* 47px */
	--font-9xl: 3.25rem; /* 52px */
	--font-10xl: 6.75rem; /* 108px */
	--font-11xl: 7.3125rem; /* 117px */
	--font-12xl: 10rem;

	/* --font-4xl: 1.875rem;
	--font-5xl: 2.25rem;
	--font-6xl: 2.5rem;
	--font-7xl: 3.125rem;
	--font-8xl: 3.25rem;
	--font-9xl: 3.625rem;
	--font-10xl: 7.5rem;
	--font-11xl: 8.125rem; */

	/* Font Size Clamps */

	--font-base-clamp: clamp(0.9rem, 3vw, 1rem);
	--font-lg-clamp: clamp(1rem, 3vw, 1.125rem);
	--font-med-clamp: clamp(1.1rem, 3vw, 1.2rem);
	--font-xl-clamp: clamp(1.2rem, 3vw, 1.25rem);
	--font-2xl-clamp: clamp(1.3rem, 3vw, 1.375rem);
	--font-3xl-clamp: clamp(1.4rem, 4vw, 1.5rem);
	--font-4xl-clamp: clamp(1.5rem, 5vw, 1.6875rem);
	--font-5xl-clamp: clamp(1.5rem, 5vw, 2.025rem);
	--font-6xl-clamp: clamp(1.5rem, 5vw, 2.25rem);
	--font-6xl-clamp-2: clamp(1.5rem, 5vw, 2.5rem);
	--font-6xl-clamp-2: clamp(1.5rem, 4vw, 2.25rem);
	--font-6xl-clamp-3: clamp(2rem, 8vw, 2.25rem);
	--font-7xl-clamp: clamp(2rem, 5vw, 2.8125rem);
	--font-8xl-clamp: clamp(2rem, 5vw, 2.9375rem);
	--font-9xl-clamp: clamp(2rem, 6vw, 3.25rem);
	--font-10xl-clamp: clamp(4.5rem, 11vw, 6.75rem);
	--font-11xl-clamp: clamp(4rem, 14vw, 7.3125rem);
	--font-12xl-clamp: clamp(4.5rem, 18vw, 10rem);
	/* Layout */
	--gap: 20px;
	--content-width: 1260px;
	--radius: 5px;
}

@font-face {
	font-family: "Font Awesome 6 Free";
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("../fa/webfonts/fa-solid-900.woff2");
	font-display: block;
}

@font-face {
	font-family: "Font Awesome 6 Free Reg";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src:
		url("../fa/webfonts/fa-regular-400.woff2") format("woff2"),
		url("../fa/webfonts/fa-regular-400.woff") format("woff");
	font-display: block;
}

@font-face {
	font-family: "Font Awesome 6 Brands";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("../fa/webfonts/fa-brands-400.woff2");
	font-display: block;
}

@font-face {
	font-family: "T-Star Pro Light";
	src:
		url("../t-star/T-Star-WOFF2/T-Star-Light.woff2") format("woff2"),
		url("../t-star/T-Star-WOFF/T-Star-Light.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: "T-Star Pro Medium";
	src:
		url("../t-star/T-Star-WOFF2/T-Star-Medium.woff2") format("woff2"),
		url("../t-star/T-Star-WOFF/T-Star-Medium.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: "T-Star Pro Bold";
	src:
		url("../t-star/T-Star-WOFF2/T-Star-Bold.woff2") format("woff2"),
		url("../t-star/T-Star-WOFF/T-Star-Bold.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

@font-face {
	font-family: "T-Star Pro Heavy";
	src:
		url("../t-star/T-Star-WOFF2/T-Star-Heavy.woff2") format("woff2"),
		url("../t-star/T-Star-WOFF/T-Star-Heavy.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

body {
	font-family: var(--tstar-reg);
	font-size: var(--font-base);
	color: var(--black);
	letter-spacing: 0.0625rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--tstar-reg);
	color: var(--black);
	font-weight: 300;
	font-size: var(--font-8xl);
	margin: 0 0 1rem 0;
	padding: 0;
	line-height: 1;
}

h2 {
	margin-bottom: 2rem;
	font-size: var(--font-8xl);
}

P {
	margin-top: 0;
	margin-bottom: 1rem;
	color: var(--black);
	line-height: 1.2;
}

ul {
	margin-bottom: 1em;
	margin-top: 0;
	color: var(--black);
}

li {
	line-height: 1.2;
	color: var(--black);
}

a {
	color: var(--aqua);
	text-decoration: underline;
	transition:
		color 0.2s ease,
		text-decoration-color 0.2s ease;
}

a:visited {
	color: var(--aqua);
}

a:hover,
a:focus,
a:active {
	color: var(--dark-blue);
}

a:focus:not(:focus-visible) {
	outline: none;
}

.button {
	background-color: black;
	font-size: var(--font-sm);
	border-radius: 9999px;
	padding: 7px 20px 4px 20px;
	line-height: 1.5;
}

section {
	position: relative;
}

.section-inner {
	max-width: var(--content-width);
	padding: 0 20px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.col-container {
	display: flex;
	gap: 20px;
	max-width: var(--content-width);
	padding: 0 20px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	> .col-1 {
		flex: 1 1 auto;
		min-width: 0;
	}
	> .col-2 {
		flex: 0 0 300px;
		max-width: 300px;
	}
	.section-inner {
		max-width: var(--content-width);
		padding: 0 0px;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}
}

@media (max-width: 1200px) {
	.col-container {
		flex-direction: column;
		> .col-1 {
			flex: 1 1 100%;
		}
		> .col-2 {
			flex: 1 1 100%;
			max-width: 100%;
		}
	}
}

section.ht4-dashboard-image {
	margin-bottom: 80px;
}

section.ht4-selector {
	margin-bottom: 60px;
	visibility: hidden;

	.section-inner {
		/* background-color: #00b0ea; */
	}

	.ht4-selector-mob-bottles {
		display: grid;
		display: none;
		grid-template-columns: repeat(7, 1fr);
		gap: 10px;
		align-items: end;
		/* justify-content: end; */
		img {
			width: 100%;
			height: auto;
			margin: 0 auto;
		}
		:nth-child(1) {
			width: 80%;
		}
		:nth-child(2) {
			width: 80%;
		}
		:nth-child(3) {
			width: 100%;
		}
		:nth-child(4) {
			width: 80%;
		}
		:nth-child(5) {
			width: 65%;
		}
		:nth-child(6) {
			width: 80%;
		}
		:nth-child(7) {
			width: 80%;
		}
		z-index: 1;
		padding-bottom: 10px;
	}

	.ht4-selector-bottles-wrapper {
		height: 500px;
		width: 850px;
		margin: 0 auto;
		overflow: hidden;
		position: relative;
		padding-bottom: 40px;
		overflow: hidden;

		.pointer {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border: 2px solid var(--pointer-color, transparent);
			height: 35px;
			width: 35px;
			z-index: 2;
			transition:
				border-color 0.3s ease,
				top 0.3s ease,
				left 0.3s ease;
		}

		/* horizontal line */
		.pointer::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 100%;
			transform: translateY(-50%);
			height: 2px;
			width: 20px;
			background-color: var(--pointer-color, transparent);
			transition: background-color 0.3s ease;
		}

		/* diagonal line */
		.pointer::before {
			content: "";
			position: absolute;
			top: calc(50% - 1px);
			left: calc(100% + 20px);
			width: 30px;
			height: 2px;
			background-color: var(--pointer-color, transparent);
			transform-origin: left center;
			transform: rotate(45deg);
			transition: background-color 0.3s ease;
		}

		/* vertical line */
		.pointer .line-extension {
			position: absolute;
			top: calc(50% + 20px);
			left: calc(100% + 40px);
			width: 2px;
			height: 400px;
			background-color: var(--pointer-color, transparent);
			transition: background-color 0.3s ease;
		}
	}

	.ht4-selector-bottles {
		display: flex;
		gap: 10px;
		height: 100%;
		justify-content: center;
		align-items: end;
		position: relative;
		background-color: white;
		margin: 0 auto;
	}

	.bottle {
		width: 100px;
		transition: all 0.3s;
		cursor: pointer;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		bottom: 0;

		> span {
			display: none;
		}

		&:nth-child(1) {
			background-image: url(../images/bottles/balance.png);
			aspect-ratio: 650/1953;
			width: 104px;
		}
		&:nth-child(2) {
			background-image: url(/wp-content/uploads/2025/10/cleanse-2.png);
			aspect-ratio: 706/2460;
			width: 110px;
		}
		&:nth-child(3) {
			background-image: url(../images/bottles/hydrate.png);
			aspect-ratio: 790/2460;
			width: 120px;
		}
		&:nth-child(4) {
			background-image: url(../images/bottles/bathe.png);
			aspect-ratio: 603/2066;
			width: 95px;
		}
		&:nth-child(5) {
			background-image: url(../images/bottles/comfort.png);
			aspect-ratio: 492/1995;
			width: 80px;
		}
		&:nth-child(6) {
			background-image: url(../images/bottles/protect.png);
			aspect-ratio: 620/1940;
		}
		&:nth-child(7) {
			background-image: url(../images/bottles/nourish.png);
			aspect-ratio: 608/1930;
		}
	}

	.bottle.active {
		transform: scale(1.3);
		margin: 0 20px 0 20px;
		bottom: 30px;
	}

	.bottle1,
	.bottle2,
	.bottle3,
	.bottle4,
	.bottle5,
	.bottle6,
	.bottle7 {
		background-color: white;
	}

	.ht4-selector-info {
		background-color: var(--light-purple);
		display: grid;
		grid-template-columns: 1fr;
	}

	.panel {
		grid-column: 1;
		grid-row: 1;
		background-color: white; /* keep as neutral fallback */
		height: 100%;
		width: 100%;
		opacity: 0; /* JS sets one to 1 */
		display: none;
		position: relative;
		padding: 60px;
		display: flex;
		gap: 80px;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			width: 40px;
			height: 40px;
			border-top: 20px solid white;
			border-right: 20px solid white;
			border-bottom: 20px solid transparent;
			border-left: 20px solid transparent;
			box-sizing: inherit;
		}

		.col-1 {
			flex: 1;
			display: flex;
			flex-direction: column;
			h2 {
				margin: 0px 0 0 0;
				font-size: var(--font-10xl);
				display: flex;
				gap: 20px;
				flex-direction: row;
				border-bottom: 1px solid #ffffff;
				padding-bottom: 0px;
				text-indent: -0.07em;
				line-height: 1;

				* {
					text-indent: 0;
				}

				.days {
					color: white;
					display: flex;
					font-size: var(--font-9xl);
					gap: 5px;
					/* padding-top: 20px;
					margin-top: -6px; */
					position: relative;
				}
				.small {
					font-size: var(--font-lg);
					/* padding-top: 8px; */
					&:nth-of-type(2) {
						padding-left: 10px;
					}
				}
				.when {
					font-size: var(--font-lg);
					position: absolute;
					bottom: 30px;
					left: 0;
					white-space: nowrap;
				}
			}
			h3 {
				margin: 15px 0 10px 0;
				font-size: var(--font-10xl);
				text-indent: -0.07em;

				* {
					text-indent: 0;
				}
			}
			h4 {
				margin: 0 0 20px 0;
				font-size: var(--font-8xl);
			}
			p.text-link {
				margin-top: auto;
				margin-bottom: 0;
			}
			p.text-link a {
				color: var(--black);
				font-size: var(--font-base);
				font-family: var(--tstar-reg);
				background-color: var(--black);
				color: white;
				display: block;
				padding: 8px 25px 5px 25px;
				width: fit-content;
				border-radius: 9999px;
				text-decoration: none;
				line-height: 1;
				transition: all 0.3s ease;
			}
			p.text-link a:hover {
				color: white;
				background-color: var(--aqua);
			}
		}
		.col-2 {
			flex: 1.5;
			/* padding-top: 7px; */

			:last-child {
				margin-bottom: 0px;
			}
			p {
				font-family: var(--tstar-reg);
				font-size: var(--font-3xl);
			}

			p.large,
			p .large-text {
				font-size: var(--font-6xl);
				line-height: 1.2;
				font-family: var(--tstar-light);
			}
			p:has(.small-text) {
				font-size: var(--font-sm);
				line-height: 1.2;
				font-family: var(--tstar-light);
			}

			h5 {
				font-family: var(--tstar-heavy);
				text-transform: uppercase;
				color: white;
				margin: 40px 0 10px 0;
				font-size: var(--font-sm);
				letter-spacing: 2px;
			}
			ul {
				margin: 0 0 20px 0;
				padding: 0;
				font-size: var(--font-3xl);
				font-family: var(--tstar-reg);
				li {
					position: relative;
					list-style: none;
					padding-left: 1rem;
					margin-bottom: 5px;
				}
				li::before {
					content: "•"; /* smaller solid bullet using Unicode */
					font-family: "Font Awesome 6 Free Reg";
					font-weight: 400;
					position: absolute;
					left: 0;
					top: 0px;
					/* width: 1.5rem;
					height: 1.5rem; */

					color: var(--black);
					font-size: var(--font-3xl);
					line-height: 1;
					border: none;
				}
			}
		}

		&.panel6,
		&.panel7 {
			.col-1 {
				h2 {
					color: white;
				}
				h3 {
					color: white;
				}
				h4 {
					color: white;
				}
			}
			.col-2 {
				h5 {
					color: white;
				}
				ul {
					li::before {
						color: white;
					}
				}
				p {
					color: white;
				}
			}
		}
	}
	.panel .clinic-role,
	.panel .partner-role,
	.panel .administrator-role,
	.panel .normal-role {
		display: none;
	}
	main.clinic-role & .panel .clinic-role,
	main.partner-role & .panel .partner-role,
	main.normal-role & .panel .normal-role,
	main.administrator-role & .panel .clinic-role,
	main.administrator-role & .panel .partner-role,
	main.administrator-role & .panel .normal-role {
		display: block;
	}
	@media (max-width: 1200px) {
		.panel {
			padding: 40px;
			/* display: block;
			&::before {
				display: none;
			}
			.col-1 {
				padding-bottom: 20px;
			} */
		}
	}
	@media (max-width: 992px) {
		.ht4-selector-mob-bottles {
			display: grid;
		}
		.ht4-selector-bottles-wrapper {
			height: 50px;
			padding-bottom: 0;
			width: 100%;

			.pointer {
				display: none;
			}
		}
		.ht4-selector-bottles {
			gap: 1px;
		}

		.bottle {
			aspect-ratio: auto !important;
			background-image: none !important;
			padding: 5px 10px;
			flex: 1;
			box-shadow: inset 0 -6px 10px -6px rgba(0, 0, 0, 0.3);

			> span {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: var(--font-sm);
				font-weight: 700;
				text-transform: uppercase;
				color: var(--black);
			}

			&:nth-child(1) {
				background-color: var(--light-blue);
			}
			&:nth-child(2) {
				background-color: var(--orange);
			}
			&:nth-child(3) {
				background-color: var(--grey);
			}
			&:nth-child(4) {
				background-color: var(--grey);
			}
			&:nth-child(5) {
				background-color: var(--grey);
			}
			&:nth-child(6) {
				background-color: rgb(0, 138, 176);
				span {
					color: white;
				}
			}
			&:nth-child(7) {
				background-color: rgb(0, 138, 176);
				span {
					color: white;
				}
			}
		}

		.bottle.active {
			transform: scale(1);
			bottom: 0;
			margin: 0 0 0 0;
			box-shadow: none;
		}

		.panel {
			padding: 20px;
			display: block;
			&::before {
				display: none;
			}
			.col-1 {
				padding-bottom: 20px;
				h2 {
					font-size: var(--font-10xl-clamp);
					.days {
						font-size: var(--font-9xl-clamp);
						.small {
							font-size: var(--font-lg-clamp);
							padding-top: clamp(0rem, 0.5vw, 0.5rem);
						}
						.when {
							font-size: var(--font-lg-clamp);
							position: absolute;
							bottom: 20px;
							left: 0;
						}
					}
				}
				h3 {
					font-size: var(--font-10xl-clamp);
					/* padding-top: 0.5rem; */
					margin-top: 10px;
				}
				h4 {
					font-size: var(--font-9xl-clamp);
				}
			}
			.col-2 {
				p {
					font-size: var(--font-3xl-clamp);
				}
				p.large {
					font-size: var(--font-6xl-clamp);
					font-family: var(--tstar-reg);
				}
				ul {
					font-size: var(--font-base-clamp);
					li {
						font-size: var(--font-base-clamp);
					}
					li::before {
						font-size: var(--font-2xl);
						font-size: var(--font-base-clamp);
					}
				}
			}
		}
	}
	@media (max-width: 700px) {
		.ht4-selector-bottles-wrapper {
			/* height: 500px;
			width: 850px;
			margin: 0 auto;
			overflow: hidden;
			position: relative;
			padding-bottom: 40px;
			overflow: hidden */
			height: 120px;
			padding-bottom: 0;
			width: 100%;

			.pointer {
				display: none;
			}
		}
		.ht4-selector-bottles {
			/* display: flex;
			gap: 10px;
			height: 100%;
			justify-content: center;
			align-items: end;
			position: relative;
			background-color: white;
			margin: 0 auto; */
			gap: 1px;
			height: 100%;
		}

		.bottle {
			/* width: 100px;
			transition: all 0.3s;
			cursor: pointer;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			position: relative;
			bottom: 0; */
			aspect-ratio: auto !important;
			background-image: none !important;
			padding: 5px 10px 10px 10px;
			flex: 1;
			box-shadow: inset 0 -6px 10px -6px rgba(0, 0, 0, 0.3);
			height: 100%;

			> span {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: var(--font-sm);
				font-weight: 700;
				text-transform: uppercase;
				color: var(--black);
				justify-content: space-between;
				height: 100%;

				> span {
					writing-mode: vertical-rl;
					transform: rotate(180deg);
				}
			}
		}

		.bottle.active {
			/* transform: scale(1.3);
			margin: 0 20px 0 20px;
			bottom: 30px; */
			transform: scale(1);
			bottom: 0;
			margin: 0 0 0 0;
			box-shadow: none;
		}

		.panel {
			&::before {
				display: none;
			}
			.col-1 {
				h2 {
					.days {
						.when {
							/* bottom: 0px; */
						}
					}
				}
			}
		}
	}
}

section.landing-choices {
	margin-bottom: 100px;
	.section-inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		max-width: 100%;
		padding: 0;
	}
	h2 {
		color: white;
		font-size: var(--font-7xl);
		font-family: var(--tstar-reg);
		line-height: 1.1;
		padding: 0px;
		text-transform: uppercase;
	}
	.col-1 {
		text-decoration: none;
		aspect-ratio: 4/3;
		display: block;
		background-color: var(--light-blue);
		background: url(/wp-content/uploads/2025/09/Group-1078-1.png) center /
			cover no-repeat;
		padding: 100px 80px 0px 100px;

		img {
			width: 70%;
			height: auto;
			max-width: 500px;
			object-fit: contain;
		}
	}
	.col-2 {
		aspect-ratio: 4/3;
		background-color: var(--orange);
		background: url(/wp-content/uploads/2025/09/Group-1077-1.png) center /
			cover no-repeat;
		padding: 100px 40px 0 100px;
		.header {
			display: flex;
			gap: 20px;
			width: 60%;
			justify-content: space-between;

			img {
				position: relative;
				top: 10px;
				width: 100px;
				height: auto;
			}
		}
		.partner-login-form {
			display: flex;
			flex-direction: column;
			gap: 10px;
			width: 60%;
			margin-bottom: 10px;

			label {
				font-size: var(--font-sm);
				font-family: var(--tstar-med);
				color: white;
				text-transform: uppercase;
			}
			input {
				font-size: var(--font-sm);
				font-family: var(--tstar-med);
				color: white;
				text-transform: uppercase;
				background-color: white !important;
				border-radius: 5px;
				padding: 0.9em 0.9em;
				height: 3em;
			}
			button {
				font-size: var(--font-sm);
				font-family: var(--tstar-med);
				color: white;
				text-transform: uppercase;
				width: fit-content;
				background-color: var(--aqua);
				padding: 0.5em 0.9em 0.3em;
			}
		}
		p {
			font-size: var(--font-xl);
			font-family: var(--tstar-med);
			color: white;
			text-transform: uppercase;
			margin-bottom: 0;
		}
	}
	@media (max-width: 1500px) {
		.col-1 {
			padding: 40px 40px 0px 40px;
		}
		.col-2 {
			padding: 40px;
			.header {
				display: block;
				gap: 20px;
				width: 100%;
				max-width: 500px;

				img {
					position: relative;
					top: 0px;
					width: 60px;
				}
			}
			.partner-login-form {
				width: 100%;
				max-width: 300px;

				input {
					height: 2.1em;
					padding: 0.3em 0.6em;
				}
			}
		}
		h2 {
			font-size: var(--font-7xl);
			margin: 0 0 20px 0;
		}
	}
	@media (max-width: 1200px) {
		.col-1 {
			padding: 20px 20px 0px 20px;
		}
		.col-2 {
			padding: 20px 20px 0px 20px;
		}
	}
	@media (max-width: 992px) {
		.section-inner {
			grid-template-columns: 1fr;
			gap: 20px;
			max-width: 500px;
		}
		.col-1 {
			padding: 20px 20px 0px 20px;
		}
		.col-2 {
			padding: 20px 20px 0px 20px;
		}
	}
	@media (max-width: 768px) {
		.section-inner {
			grid-template-columns: 1fr;
			gap: 20px;
			max-width: 500px;
		}
		.col-1 {
			img {
				width: 55%;
			}
			aspect-ratio: auto;
		}
		.col-2 {
			aspect-ratio: auto;
			padding-bottom: 20px;
		}
	}
}

section.client-access {
	margin-bottom: 100px;
	padding: 100px 0px 100px 0px;
	background-color: gray;
	background-image: url("/wp-content/uploads/2025/10/Mask-Group-142f.png");
	background-size: cover;
	background-position: center;
	.section-inner {
		max-width: 1000px;
	}
	h2 {
		color: white;
		font-size: var(--font-9xl);
		font-family: var(--tstar-bold);
		line-height: 1.1;
		padding: 0px;
	}

	.client-access-form {
		/* aspect-ratio: 4/3; */
		background:
			linear-gradient(
				to right,
				rgba(0, 0, 0, 0.3),
				rgba(255, 255, 255, 0)
			),
			url(/wp-content/uploads/2025/10/Group-507.png) center / cover
				no-repeat;
		padding: 160px 40px 140px 100px;
		.header {
			display: flex;
			gap: 20px;
			width: 60%;
			justify-content: space-between;

			img {
				position: relative;
				top: 0px;
				width: 100px;
				height: auto;
			}
		}
		#partner-login-form {
			display: flex;
			flex-direction: column;
			gap: 10px;
			width: 60%;
			margin-bottom: 20px;

			label {
				font-size: var(--font-base);
				font-family: var(--tstar-bold);
				color: white;
				text-transform: uppercase;
			}
			input:not([type="submit"]) {
				font-size: var(--font-sm);
				font-family: var(--tstar-med);
				color: var(--black);
				text-transform: uppercase;
				background-color: white !important;
				border-radius: 5px;
				padding: 0.9em 0.9em;
				height: 3em;
			}
			input#wp-submit {
				font-size: var(--font-base);
				font-family: var(--tstar-med);
				color: var(--black);
				text-transform: uppercase;
				width: fit-content;
				background-color: var(--light-blue);
				padding: 0.5em 0.9em 0.3em;
				border-radius: 5px;
				margin: 0 auto;
				display: block;
				width: fit-content;
			}
			p.login-remember {
				display: flex;
				align-items: center;
				font-size: var(--font-base);

				input[type="checkbox"] {
					opacity: 0;
					width: 0;
					height: 0;
					position: absolute;
				}
				.login-remember {
					display: flex;
					align-items: center;
					font-size: var(--font-base);
				}
				label {
					position: relative;
					padding-left: 28px;
					cursor: pointer;
					display: inline-block;
					line-height: 20px;
				}

				label::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0px;
					width: 18px;
					height: 18px;
					border: 1px solid #aaa;
					border-radius: 4px;
					background: #fff;
					box-sizing: border-box;
					transition: border-color 0.2s;
				}

				input[type="checkbox"]:checked + label::before,
				label:has(input[type="checkbox"]:checked)::before {
					border-color: var(--aqua);
					background: var(--aqua);
				}

				input[type="checkbox"]:checked + label::after,
				label:has(input[type="checkbox"]:checked)::after {
					content: "\f00c";
					font-family: "Font Awesome 6 Free";
					font-weight: 900;
					position: absolute;
					left: 4px;
					top: 0px;
					font-size: var(--font-xs);
					pointer-events: none;
				}
			}
		}
		p {
			font-size: var(--font-xl);
			font-family: var(--tstar-med);
			color: white;
			text-transform: uppercase;
			margin-bottom: 0;
		}
	}
	p.not-a-partner {
		width: 60%;
		a.button {
			font-size: var(--font-xl);
			font-family: var(--tstar-bold);
			color: white;
			text-transform: uppercase;
			width: fit-content;
			background-color: var(--orange);
			padding: 0.5em 0.9em 0.3em;
			border-radius: 5px;
			margin: 0 auto;
			display: block;
			width: fit-content;
			text-decoration: none;
		}
		a:hover,
		a:active,
		a:focus {
			box-shadow: none;
		}
	}

	@media (max-width: 1500px) {
		.client-access-form {
			padding: 40px;
			.header {
				display: block;
				gap: 20px;
				width: 100%;
				max-width: 500px;

				img {
					position: relative;
					top: 0px;
					width: 60px;
				}
			}
			.partner-login-form {
				width: 100%;
				max-width: 300px;

				input {
					height: 2.1em;
					padding: 0.3em 0.6em;
				}
			}
		}
		h2 {
			font-size: var(--font-7xl);
			margin: 0 0 20px 0;
		}
	}
	@media (max-width: 1200px) {
		.client-access-form {
			padding: 20px 20px 20px 20px;
		}
	}
	@media (max-width: 992px) {
		.client-access-form {
			padding: 20px 20px 20px 20px;
		}
	}
	@media (max-width: 768px) {
		.client-access-form {
			aspect-ratio: auto;
			padding-bottom: 20px;
			#partner-login-form {
				width: 70%;
			}
		}
		p.not-a-partner {
			width: 70%;
		}
	}
}

section.large-info-text {
	margin-bottom: 60px;
	.large-info-row {
		padding: 0 80px 0 80px;
		:last-child {
			margin-bottom: 0;
		}
	}
	p {
		font-size: var(--font-6xl);
	}
	@media (max-width: 992px) {
		.large-info-row {
			padding: 0 40px 0 40px;
			p {
				font-size: var(--font-6xl-clamp);
			}
		}
	}
	@media (max-width: 768px) {
		.large-info-row {
			padding: 0;
		}
	}
}

section.basic-text-card {
	margin-bottom: 80px;
	.section-inner {
	}
	.content {
		padding: 40px 80px 50px 80px;
		background-color: var(--off-white);
		position: relative;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			width: 40px;
			height: 40px;
			border-top: 20px solid white;
			border-right: 20px solid white;
			border-bottom: 20px solid transparent;
			border-left: 20px solid transparent;
			box-sizing: inherit;
		}

		:last-child {
			margin-bottom: 0;
		}
	}
	p {
		font-size: var(--font-8xl);
	}
	@media (max-width: 992px) {
		.content {
			padding: 20px 40px 20px 40px;
		}
		P {
			font-size: var(--font-6xl-clamp);
		}
	}
	@media (max-width: 768px) {
		.content {
			padding: 20px;
		}
	}
}

section.landing-highlight {
	margin-bottom: 100px;
	.section-inner {
	}
	.content {
		padding: 20px 30px 20px 60px;
		background-color: var(--aqua);
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 20px;
		--cut: 40px;
		clip-path: polygon(
			0 0,
			calc(100% - var(--cut)) 0,
			100% var(--cut),
			100% 100%,
			0 100%
		);

		/* :last-child {
			margin-bottom: 0;
		} */
	}
	.col-1 {
		flex: 3;
		p {
			font-size: var(--font-5xl);
			color: white;
			font-family: var(--tstar-light);
			line-height: 1.1;
			margin: 0;
			/* padding-bottom: 10px; */
		}
	}
	.col-2 {
		flex: 1;
		font-size: var(--font-12xl);
		color: white;
		font-family: var(--tstar-med);
		line-height: 1.2;
		text-transform: uppercase;
		text-align: center;
		/* margin-top: -40px; */
		margin-bottom: -30px;
	}

	@media (max-width: 992px) {
		.content {
			padding: 20px 40px 20px 40px;
		}
		.col-1 {
			P {
				font-size: var(--font-6xl-clamp-2);
			}
		}
		.col-2 {
			font-size: var(--font-10xl-clamp);
			/* margin-top: -20px;*/
			margin-bottom: -10px;
		}
	}
	@media (max-width: 768px) {
		.content {
			padding: 20px;
			display: block;
			clip-path: none;
		}
		.col-2 {
			/* margin-top: -10px; */
			margin-bottom: -20px;
			margin-top: 10px;
		}
	}
}

section.landing-cta {
	background: url(/wp-content/uploads/2025/09/Group-125.png) center / cover
		no-repeat;

	padding: 200px 0px 60px 0px;
	.content {
		padding: 50px 60px 60px 60px;
		background-color: var(--aqua-trans);
		position: relative;
		--cut: 60px;
		max-width: 700px;

		clip-path: polygon(
			0 0,
			calc(100% - var(--cut)) 0,
			100% var(--cut),
			100% 100%,
			0 100%
		);

		:last-child {
			margin-bottom: 0;
		}
	}
	p {
		font-size: var(--font-8xl);
		color: white;
		line-height: 1.1;
		font-family: var(--tstar-light);
		margin-bottom: 30px;
	}
	p.text-link {
		margin-top: 20px;
	}
	p.text-link a {
		font-size: var(--font-base);
		font-family: var(--tstar-reg);
		background-color: white;
		color: black;
		display: block;
		padding: 8px 25px 5px 25px;
		width: fit-content;
		border-radius: 9999px;
		text-decoration: none;
		font-weight: bold;
		line-height: 1;
	}
	p.text-link a:visited,
	p.text-link a:active,
	p.text-link a:focus {
		color: black;
	}
	p.text-link a:hover {
		color: var(--orange);
	}
	@media (max-width: 992px) {
		.content {
			padding: 20px 40px 20px 40px;
		}
		P {
			font-size: var(--font-6xl-clamp);
		}
	}
	@media (max-width: 768px) {
		margin-bottom: 80px;
		.content {
			padding: 20px;
			clip-path: none;
		}
	}
}

section.ht4-title {
	margin-bottom: 0px;
	.section-inner {
		max-width: calc(var(--content-width) - 200px);
	}
	.content {
		position: relative;
		display: flex;
		flex-direction: row;
		/* align-items: center; */
		gap: 20px;

		/* :last-child {
			margin-bottom: 0;
		} */
	}
	.col-1 {
		flex: 1 1 0%;
		font-size: var(--font-12xl);
		color: var(--black);
		font-family: var(--tstar-med);
		line-height: 1;
		text-transform: uppercase;
		text-align: center;
		margin-bottom: -20px;
	}
	.col-2 {
		flex: 3 1 0%;
		p {
			font-size: var(--font-6xl);
			color: var(--aqua);
			font-family: var(--tstar-reg);
			line-height: 1.1;
			margin: 0;
			padding-bottom: 10px;
			padding-top: 10px;
			/* max-width: 600px; */
		}
	}

	@media (max-width: 992px) {
		.content {
		}
		.col-1 {
			font-size: var(--font-10xl-clamp);
			text-align: left;
		}
		.col-2 {
			P {
				font-size: var(--font-6xl-clamp-2);
				padding-top: 0px;
				text-align: left;
			}
		}
	}
	@media (max-width: 768px) {
		.content {
			display: block;
			clip-path: none;
		}
		.col-1 {
			margin-bottom: 0px;
		}
		.col-2 {
			text-align: center;

			P {
				max-width: 100%;
			}
		}
	}
}

section.ht4-title-2 {
	margin-bottom: 0px;
	.section-inner {
		/* max-width: calc(var(--content-width) - 400px); */
	}
	.content {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* gap: 20px; */

		/* :last-child {
			margin-bottom: 0;
		} */
	}
	.col-1 {
		flex: 1;

		margin-top: 20px;
		margin-bottom: 0px;

		p {
			font-size: var(--font-5xl);
			color: var(--black);
			font-family: var(--tstar-reg);
			line-height: 1.1;
		}

		img {
			max-width: 100%;
			height: auto;
			margin-left: -40px;
			margin-right: -40px;
		}
	}
	.col-2 {
		flex: 1.2;
		p {
			font-size: var(--font-6xl);
			color: var(--aqua);
			font-family: var(--tstar-reg);
			line-height: 1.1;
			margin: 0;
			padding-bottom: 0px;
			max-width: 600px;
		}
		img {
			max-width: 100%;
			height: auto;
			margin-left: -40px;
		}
	}

	@media (max-width: 1280px) {
		.content {
		}
		.col-2 {
			img {
				margin-left: 0px;
			}
		}
	}

	@media (max-width: 992px) {
		.content {
		}
		.col-2 {
			P {
				font-size: var(--font-6xl-clamp-2);
			}
		}
		.col-1 {
			p {
				font-size: var(--font-6xl-clamp);
			}
		}
	}
	@media (max-width: 768px) {
		.content {
			display: block;
			clip-path: none;
		}
		.col-1 {
		}
		.col-2 {
			text-align: center;
			P {
				max-width: 100%;
			}
		}
	}
}

section.text-box {
	margin-bottom: 80px;
	.section-inner {
		max-width: var(--content-width);
	}
	P {
		line-height: 1.5;
		font-size: var(--font-base);
		font-family: var(--tstar-light);
		color: var(--black);

		strong {
			font-weight: normal;
			font-family: var(--tstar-bold);
		}
	}
	h3 {
		line-height: 1.5;
		font-size: var(--font-base);
		font-family: var(--tstar-bold);
		color: var(--black);
		margin-bottom: 5px;
		margin-top: 20px;
	}
	table {
		margin-bottom: 30px;

		th {
			background-color: white;
			color: var(--black);
			font-family: var(--tstar-bold);
		}
		tr:nth-child(even) {
			background-color: transparent;
		}
		td,
		th {
			padding: 0;
		}
	}
}

section.ht4-boxes {
	margin-bottom: 80px;
	.section-inner {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 10px;

		> div.col {
			display: flex;
			flex-direction: column;
			gap: 10px;
			opacity: 0.5;
		}
		.row-1 {
			display: flex;
			flex-direction: row;
			gap: 5px;
			background-color: transparent;
			span {
				height: 50px;
				width: 50px;
				display: block;
				cursor: pointer;
			}
		}
		.row-2,
		.row-4 {
			background-size: cover;
		}
		.col-1 {
			.row-1 span {
				background-color: var(--light-blue);
			}
		}
		.col-2 {
			.row-1 span {
				background-color: var(--orange);
			}
		}
		.col-3 {
			.row-1 span {
				background-color: var(--grey);
			}
		}
		.col-4 {
			.row-1 span {
				background-color: var(--medium-blue);
			}
		}
		.row-2 {
			aspect-ratio: 1/1;
			background-color: gray;
			img {
				display: none;
			}
		}
		.row-3 {
			display: grid;
			grid-template-columns: 1fr;
			justify-content: center;
			align-items: center;

			.arrow-right {
				position: relative;
				width: 100%;
				height: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				grid-column: 1;
				grid-row: 1;
			}
			.arrow-right .arrow-line {
				width: 100%;
				height: 2px;
				background: #222;
				border-radius: 2px;
				position: absolute;
				top: calc(50% + 0px);
				left: 0;
				transform: translateY(-50%);
			}
			.arrow-right .arrow-head {
				position: absolute;
				right: 0;
				top: calc(50% + 0px);
				transform: translateY(-50%);
				width: 0;
				height: 0;
				border-top: 5px solid transparent;
				border-bottom: 5px solid transparent;
				border-left: 8px solid #222;
			}
			.text {
				font-size: var(--font-5xl);
				color: var(--purple);
				grid-column: 1;
				grid-row: 1;
				background-color: white;
				width: fit-content;
				padding: 0 10px 0 10px;
				z-index: 2;
				/* margin-top: -5px; */
			}
		}
		.row-4 {
			aspect-ratio: 1/1;
			border: 1px solid var(--grey);
			/* background-color: gray;*/
		}
	}

	@media (max-width: 992px) {
		.section-inner {
			grid-template-columns: 1fr;
			max-width: 500px;

			> div.col {
				display: grid;
				grid-template-columns: 1fr 1fr;
			}

			.row-1 {
				grid-column: 1;
				grid-row: 1;
			}

			.row-2 {
				grid-column: 1;
				grid-row: 2;
			}

			.row-3 {
				grid-column: 1;
				grid-row: 3;
				.arrow-right {
					display: none;
				}
				.text {
					padding: 0 0 20px 0;
				}
			}

			.row-4 {
				grid-column: 2;
				grid-row: 2;
				border: 1px solid var(--grey);
			}
		}
	}
	@media (max-width: 768px) {
		/* .section-inner {
			grid-template-columns: 1fr;
			max-width: 300px;
		} */
	}
}

section.ht4-tabs {
	margin-bottom: 80px;

	.section-inner {
		max-width: var(--content-width);
		margin: 0 auto;
		padding: 0 20px;
		position: relative;
	}

	/* Hide all tab wrappers by default */
	[class^="tabs-wrapper-"] {
		display: none;
		opacity: 0;
		transition: opacity 0.3s ease;

		&.active {
			display: block;
			opacity: 1;
		}
	}

	.tabs {
		margin-bottom: 0px;
		overflow: visible;

		ul {
			display: flex;
			flex-wrap: wrap;
			list-style: none;
			margin: 0;
			padding: 0;
			border-bottom: 1px solid gray;
			gap: 20px;
		}

		li {
			background: none;
			border: 1px solid gray;
			padding: 10px 30px 8px;
			margin: 0 0px 0 0;
			cursor: pointer;
			text-transform: uppercase;
			font-size: var(--font-sm);
			font-family: var(--tstar-heavy);
			color: var(--black);
			transition: all 0.3s ease;
			position: relative;
			top: 1px;
			font-weight: bold;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				right: -14px;
				width: 20px;
				height: 20px;
				background: white;
				transform: rotate(45deg);
				transform-origin: top right;
				background-color: white;
				box-sizing: inherit;
				border-bottom: 1px solid gray;
			}

			&:hover {
				background-color: gray;
			}

			&.active {
				border-bottom-color: var(--purple);
				background-color: gray;
			}
		}
	}
	.tabs-wrapper-1 .tabs {
		ul {
			border-bottom: 1px solid var(--light-blue);
		}
		li {
			border: 1px solid var(--light-blue);

			&:before {
				border-bottom: 1px solid var(--light-blue);
			}

			&:hover {
				background-color: var(--light-blue);
			}

			&.active {
				border-bottom-color: var(--light-blue);
				background-color: var(--light-blue);
			}
		}
	}

	.tabs-wrapper-2 .tabs {
		ul {
			border-bottom: 1px solid var(--orange);
		}
		li {
			border: 1px solid var(--orange);

			&:before {
				border-bottom: 1px solid var(--orange);
			}

			&:hover {
				color: white;
				background-color: var(--orange);
			}

			&.active {
				color: white;
				border-bottom-color: var(--orange);
				background-color: var(--orange);
			}
		}
	}

	.tabs-wrapper-3 .tabs {
		ul {
			border-bottom: 1px solid var(--grey);
		}
		li {
			border: 1px solid var(--grey);

			&:before {
				border-bottom: 1px solid var(--grey);
			}

			&:hover {
				background-color: var(--grey);
			}

			&.active {
				border-bottom-color: var(--grey);
				background-color: var(--grey);
			}
		}
	}

	.tabs-wrapper-4 .tabs {
		ul {
			border-bottom: 1px solid var(--grey);
		}
		li {
			border: 1px solid var(--grey);

			&:before {
				border-bottom: 1px solid var(--grey);
			}

			&:hover {
				background-color: var(--grey);
			}

			&.active {
				border-bottom-color: var(--grey);
				background-color: var(--grey);
			}
		}
	}

	.tabs-wrapper-5 .tabs {
		ul {
			border-bottom: 1px solid var(--grey);
		}
		li {
			border: 1px solid var(--grey);

			&:before {
				border-bottom: 1px solid var(--grey);
			}

			&:hover {
				background-color: var(--grey);
			}

			&.active {
				border-bottom-color: var(--grey);
				background-color: var(--grey);
			}
		}
	}

	.tabs-wrapper-6 .tabs {
		ul {
			border-bottom: 1px solid var(--medium-blue);
		}
		li {
			border: 1px solid var(--medium-blue);

			&:before {
				border-bottom: 1px solid var(--medium-blue);
			}

			&:hover {
				background-color: var(--medium-blue);
			}

			&.active {
				border-bottom-color: var(--medium-blue);
				background-color: var(--medium-blue);
			}
		}
	}

	.tabs-wrapper-7 .tabs {
		ul {
			border-bottom: 1px solid var(--medium-blue);
		}
		li {
			border: 1px solid var(--medium-blue);

			&:before {
				border-bottom: 1px solid var(--medium-blue);
			}

			&:hover {
				background-color: var(--medium-blue);
			}

			&.active {
				border-bottom-color: var(--medium-blue);
				background-color: var(--medium-blue);
			}
		}
	}

	/* Tab content styling */
	[class^="tab-content-"] {
		background: #fff;
		padding: 40px;
		min-height: 300px;
		overflow: hidden;
		display: none;
		grid-template-columns: 2fr 1fr;
		gap: 40px;
		align-items: start;

		&.active {
			display: grid;
			animation: fadeIn 0.3s ease;
		}

		.col-1 {
			p {
				font-size: var(--font-lg);
				line-height: 1.3;
				color: #444;
				margin: 0 0 20px 0;
			}

			h3 {
				color: var(--purple);
				margin: 0 0 15px 0;
				font-size: var(--font-xl);
			}

			ul,
			ol {
				margin: 0 0 20px 0;
				padding-left: 20px;
				font-size: var(--font-lg);

				li {
					margin: 0px 0;
					line-height: 1.3;
					font-size: var(--font-lg);

					&::marker {
						font-weight: bold;
					}
				}
			}
		}

		.col-2 {
			text-align: center;

			img {
				max-width: 100%;
				height: auto;
				max-height: 250px;
				object-fit: contain;
			}
		}
	}

	/* Animation for smooth transitions */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@media (max-width: 1200px) {
		[class^="tab-content-"] {
			.col-1 {
				p {
					font-size: var(--font-med-clamp);
				}
			}
		}
	}

	@media (max-width: 900px) {
		margin-bottom: 0px;
		.tabs {
			gap: 5px;

			ul {
				flex-direction: column;
				border-bottom: none;
				gap: 5px;
			}

			li {
				&:before {
					display: none;
				}
			}
		}

		/* .tabs li {
			border-bottom: 1px solid #e0e0e0;
			border-left: 3px solid transparent;

			&.active {
				border-bottom-color: #e0e0e0;
				border-left-color: var(--purple);
			}
		} */

		[class^="tab-content-"].active {
			grid-template-columns: 1fr;
			gap: 30px;
		}

		[class^="tab-content-"] .col-2 {
			order: -1;
		}
	}

	@media (max-width: 600px) {
		.section-inner {
			padding: 0 15px;
		}

		.tabs li {
			padding: 12px 20px 8px;
			font-size: var(--font-base);
		}

		[class^="tab-content-"] {
			padding: 25px;
		}
	}
}

section.text-image-block {
	&.add-bottom-margin {
		margin-bottom: 100px;
	}
	.section-inner {
		display: grid;
		grid-template-columns:
			1fr calc(var(--content-width) / 2) calc(var(--content-width) / 2)
			1fr;
		margin: 0 auto 0 auto;
		padding: 0;
		max-width: 100%;
		align-items: center;
	}
	div.text {
		grid-column: 2;
		grid-row: 1 / 3;
		padding: 20px 80px 20px 20px;

		h2 {
			font-size: var(--font-6xl);
			font-weight: 300;
			margin-top: 0px;
			margin-bottom: 20px;
		}
		h3 {
			font-size: var(--font-6xl);
			font-weight: 300;
			margin-top: -10px;
			margin-bottom: 20px;
		}
		p {
			font-size: var(--font-med);
			line-height: 1.1;
			font-family: var(--tstar-reg);

			span.large-text {
				font-size: var(--font-6xl);
				font-family: var(--tstar-med);
			}
		}
		.large-text {
			font-size: var(--font-6xl);
			font-family: var(--tstar-med);
		}
		p:has(+ .text-link) {
			margin-bottom: 40px;
		}

		ul {
			font-size: var(--font-med);
		}
		p.text-link {
			margin-top: 20px;
		}
		p.text-link a {
			color: var(--black);
			font-size: var(--font-base);
			font-family: var(--tstar-reg);
			background-color: var(--black);
			color: white;
			display: block;
			padding: 8px 25px 5px 25px;
			width: fit-content;
			border-radius: 9999px;
			text-decoration: none;
			line-height: 1;
			transition: all 0.3s ease;
		}
		p.text-link a:hover {
			color: white;
			background-color: var(--aqua);
		}
		span.read-more {
			font-weight: 700;
			position: relative;
			padding-right: 25px;
			font-size: 0.875rem;
			display: block;
			cursor: pointer;
			user-select: none;
			width: fit-content;
		}
		span.read-more::before {
			content: "\f067";
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			position: absolute;
			right: 0;
			padding: 0px 0 0 1px;
			top: 1px;
			/* transform: translateY(-50%); */
			width: 15px;
			height: 15px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: white;
			color: var(--aqua);
			border-radius: 50%;
			font-size: 0.625rem;
			border: 1px solid var(--aqua);
		}
		span.read-more.open::before {
			content: "\f068";
			padding: 1px 0 0 1px;
		}
	}
	div.image {
		background: center/cover no-repeat;
		aspect-ratio: 960/400;
		display: block;
		grid-column: 3 / 5;
		grid-row: 1 / 3;
	}
	&.taller-version {
		div.image {
			aspect-ratio: 960/600;
		}
	}
	.image-left {
		div.image {
			grid-column: 1 / 3;
		}
		div.text {
			grid-column: 3 / 4;
			padding: 40px 20px 20px 80px;
		}
	}
	@media (max-width: 1800px) {
		div.text {
			padding: 40px 20px 20px 20px;
		}
	}
	@media (max-width: 1500px) {
		.section-inner {
			display: flex;
			align-items: start;
		}
		div.text {
			flex: 1;
			padding: 40px 20px 20px 20px;
			align-self: center;
			h2 {
				font-size: var(--font-6xl-clamp);
			}
			h3 {
				font-size: var(--font-6xl-clamp);
			}
			.large-text {
				font-size: var(--font-6xl-clamp);
			}
		}
		div.image {
			flex: 1;
			align-self: center;
		}
		.image-left {
			div.image {
			}
			div.text {
				padding: 40px 20px 20px 20px;
			}
		}
	}
	@media (max-width: 1200px) {
		div.text {
			p {
				font-size: var(--font-med-clamp);
			}
			ul {
				font-size: var(--font-med-clamp);
			}
		}
	}
	@media (max-width: 992px) {
		.section-inner {
			flex-wrap: wrap;
		}
		div.text {
			padding: 40px 20px 20px 20px;
		}
		div.image {
			flex: 1;

			margin: 0;
		}
	}
	@media (max-width: 768px) {
		&.add-bottom-margin {
			margin-bottom: 40px;
		}
		div.text {
			flex: 1 1 100%;
			order: 2;
			padding: 20px 20px 20px 20px;
			p:has(+ .text-link) {
				margin-bottom: 20px;
			}
		}
		div.image {
			flex: 1 1 100%;
			max-width: 100%;
			order: 1;
		}
		.image-left {
			div.text {
				padding: 20px 20px 20px 20px;
			}
		}
	}
}

section.text-image-block-2 {
	&.add-bottom-margin {
		margin-bottom: 100px;
	}
	.section-inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		background-color: var(--light-blue);
		padding: 0;
		max-width: calc(var(--content-width) - 40px);
	}
	div.text {
		grid-column: 1;
		padding: 20px 80px 20px 80px;

		h2 {
			font-size: var(--font-6xl);
			font-weight: 300;
			margin-top: 0px;
			margin-bottom: 20px;
		}
		h3 {
			font-size: var(--font-6xl);
			font-weight: 300;
			margin-top: -10px;
			margin-bottom: 20px;
		}
		p {
			font-size: var(--font-2xl);
			line-height: 1.1;
			font-family: var(--tstar-reg);

			span.large-text {
				font-size: var(--font-6xl);
				font-family: var(--tstar-med);
			}
		}
		p:has(+ .text-link) {
			margin-bottom: 40px;
		}

		ul {
			font-size: var(--font-3xl);
		}
		p.text-link {
			margin-top: 20px;
		}
		p.text-link a {
			color: white;
			font-size: var(--font-base);
			font-family: var(--tstar-reg);
			background-color: var(--aqua);
			display: block;
			padding: 8px 25px 5px 25px;
			width: fit-content;
			border-radius: 9999px;
			text-decoration: none;
			line-height: 1;
			transition: all 0.3s ease;
		}
		p.text-link a:hover {
			background-color: var(--black);
		}
		span.read-more {
			font-weight: 700;
			position: relative;
			padding-right: 25px;
			font-size: 0.875rem;
			display: block;
			cursor: pointer;
			user-select: none;
			width: fit-content;
		}
		span.read-more::before {
			content: "\f067";
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			position: absolute;
			right: 0;
			padding: 0px 0 0 1px;
			top: 1px;
			/* transform: translateY(-50%); */
			width: 15px;
			height: 15px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: white;
			color: var(--aqua);
			border-radius: 50%;
			font-size: 0.625rem;
			border: 1px solid var(--aqua);
		}
		span.read-more.open::before {
			content: "\f068";
			padding: 1px 0 0 1px;
		}
	}
	div.image {
		background: center/cover no-repeat;
		aspect-ratio: 960/400;
		display: block;
		margin: 20px 20px 20px 20px;
	}
	&.taller-version {
		div.image {
			aspect-ratio: 960/600;
			margin: 20px 20px 20px 20px;
		}
	}
	.image-left {
		div.image {
			grid-column: 1 / 2;
		}
		div.text {
			grid-column: 2 / 3;
			padding: 40px 20px 20px 80px;
		}
	}
	@media (max-width: 1800px) {
		div.text {
			/* padding: 40px 20px 20px 20px; */
		}
	}
	@media (max-width: 1500px) {
		.section-inner {
			display: flex;
			align-items: start;
		}
		div.text {
			flex: 1;
			/* padding: 40px 20px 20px 20px; */
			align-self: center;
			h2 {
				font-size: var(--font-6xl-clamp);
			}
			h3 {
				font-size: var(--font-6xl-clamp);
			}
		}
		div.image {
			flex: 1;
			align-self: center;
		}
		.image-left {
			div.image {
			}
			div.text {
				padding: 40px 20px 20px 20px;
			}
		}
	}
	@media (max-width: 1200px) {
		div.text {
			padding: 20px 20px 20px 20px;
			align-self: flex-start;
			p {
				font-size: var(--font-2xl-clamp);
			}
		}
	}
	@media (max-width: 992px) {
		.section-inner {
			flex-wrap: wrap;
		}
		div.text {
			padding: 40px 20px 20px 20px;
		}
		div.image {
			flex: 1;

			max-width: 400px;
			margin: 0 20px 0 20px;
		}
	}
	@media (max-width: 768px) {
		&.add-bottom-margin {
			margin-bottom: 40px;
		}
		div.text {
			flex: 1 1 100%;
			order: 2;
			padding: 20px 20px 20px 20px;

			p:has(+ .text-link) {
				margin-bottom: 20px;
			}
		}
		div.image {
			flex: 1 1 100%;
			order: 1;
			margin: 20px 20px 0px 20px;
		}
		&.taller-version {
			div.image {
				margin: 20px 20px 0px 20px;
			}
		}
	}
}

section.link-boxes {
	margin-bottom: 80px;
	.section-inner {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2px;
	}
	.link-box {
		position: relative;
		padding: 40px;
		aspect-ratio: 3/4;
		overflow: hidden;
		background: no-repeat center center;
		background-size: cover;

		h2 {
			color: white;
			font-weight: 400;
			text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
		}

		p {
			font-size: var(--font-5xl);
			line-height: 1.15;
			color: white;
			margin-bottom: 20px;
			font-weight: 200;
		}

		a.expand {
			color: var(--blue);
			font-weight: 700;
			position: relative;
			padding-left: 20px;
			font-size: var(--font-sm);
		}
		a.expand::before {
			content: "\f067";
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			position: absolute;
			left: 0;
			padding-left: 1px;
			top: 50%;
			transform: translateY(-50%);
			width: 14px;
			height: 14px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: var(--blue);
			color: var(--purple);
			border-radius: 50%;
			font-size: var(--font-xxs);
		}

		&:nth-child(1) {
			background-color: var(--purple);
		}
		&:nth-child(2) {
			border-bottom: 10px solid var(--light-purple);
			.link-box-content {
				background-color: var(--light-purple);
				background-image: none;
			}
		}
		&:nth-child(3) {
			background-color: green;
			border-bottom: 10px solid var(--blue);
			.link-box-content {
				background-color: var(--blue);
				background-image: none;
			}
		}

		.link-box-content {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			background: inherit;
			padding: 40px;
			color: white;
			opacity: 0;
			pointer-events: none;
			transform: translateY(100%);
			transition:
				opacity 0.3s,
				transform 0.3s;
			z-index: 2;

			p {
				font-size: var(--font-base);
				margin-bottom: 5px;
				line-height: 1.2;
			}

			a {
				color: var(--purple);
				font-size: var(--font-sm);
				font-weight: 700;
			}
		}
		&:hover .link-box-content {
			opacity: 1;
			pointer-events: auto;
			transform: translateY(0);
			animation: animate__slideInUp 0.4s;
		}
	}
	@media (max-width: 1400px) {
		.link-box {
			h2 {
				font-size: var(--font-6xl);
			}
			p {
				font-size: var(--font-4xl);
			}
			&:nth-child(1) {
				grid-column: span 2;
				aspect-ratio: auto;
			}
			&:nth-child(2) {
				aspect-ratio: 1/1;
			}
			&:nth-child(3) {
				aspect-ratio: 1/1;
			}
		}
		.section-inner {
			grid-template-columns: 1fr 1fr;
		}
	}
	@media (max-width: 900px) {
		.link-box {
			h2 {
				font-size: var(--font-4xl);
			}
			p {
				font-size: var(--font-4xl);
			}
			padding: 20px;
			&:nth-child(1) {
				grid-column: span 2;
			}
			&:nth-child(2) {
				grid-column: span 2;
				aspect-ratio: 3/2;
			}
			&:nth-child(3) {
				grid-column: span 2;
				aspect-ratio: 3/2;
			}
		}
	}
}

section.link-boxes-2 {
	margin-bottom: 80px;
	.section-inner {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
		gap: 2px;
	}
	.link-box {
		position: relative;
		padding: 40px;
		aspect-ratio: 4/3;
		overflow: hidden;
		background: no-repeat center center;
		background-size: cover;
		border-bottom: 10px solid var(--purple);

		h2 {
			color: white;
			font-weight: 400;
			line-height: 1;
			text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
		}

		p {
			font-size: var(--font-5xl);
			line-height: 1.15;
			color: white;
			margin-bottom: 20px;
			font-weight: 200;
		}

		a.expand {
			color: var(--blue);
			font-weight: 700;
			position: relative;
			padding-left: 20px;
			font-size: var(--font-sm);
		}
		a.expand::before {
			content: "\f067";
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 14px;
			height: 14px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: var(--blue);
			color: var(--purple);
			border-radius: 50%;
			font-size: var(--font-xxs);
		}

		.link-box-content {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			background: inherit;
			padding: 40px;
			color: white;
			opacity: 0;
			pointer-events: none;
			transform: translateY(100%);
			transition:
				opacity 0.3s,
				transform 0.3s;
			z-index: 2;
			background-color: var(--purple);
			background-image: none;

			p {
				font-size: var(--font-base);
				margin-bottom: 5px;
				line-height: 1.2;
			}

			a {
				color: var(--blue);
				font-size: var(--font-sm);
				font-weight: 700;
			}
		}
		&:hover .link-box-content {
			opacity: 1;
			pointer-events: auto;
			transform: translateY(0);
			animation: animate__slideInUp 0.4s;
		}
	}
	@media (max-width: 1400px) {
		.link-box {
			h2 {
				font-size: var(--font-6xl);
			}
		}
	}
	@media (max-width: 900px) {
		.section-inner {
			grid-template-columns: 1fr;
		}
		.link-box {
			h2 {
				font-size: var(--font-4xl);
			}
			padding: 20px 20px 40px 20px;
			.link-box-content {
				padding: 20px;
			}
		}
	}
}

section.large-text-block {
	margin-bottom: 80px;

	P {
		font-size: var(--font-8xl);
		margin-right: 33%;
		margin-left: 40px;
		line-height: 1.1;
		font-weight: 300;
		color: var(--blue);
	}

	&.left_hand_gap {
		p {
			margin-left: calc(33% + 2px);
			margin-right: 0;
		}
	}
	&.less_margin {
		margin-bottom: 40px;
	}
	@media (max-width: 1400px) {
		p {
			font-size: var(--font-6xl);
			margin-right: 0;
		}
	}
	@media (max-width: 900px) {
		P {
			margin-left: 0;
			font-size: var(--font-4xl);
		}
		&.left_hand_gap {
			p {
				margin-left: 0;
				margin-right: 0;
			}
		}
	}
}

section.accordion-1 {
	margin-bottom: 80px;

	h2 {
		margin-left: 33%;
	}

	.accordion-1-row {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2px;
		margin-bottom: 2px;
		cursor: pointer;

		&.active .accordion-1-slide {
			max-height: 600px;
			opacity: 1;
			/* margin-bottom: -40px; */
		}
	}

	.accordion-1-text {
		padding: 0 40px 0px 40px;
		h3 {
			color: var(--blue);
			font-size: var(--font-2xl);
			font-weight: 600;
		}

		a.accordion-1-read-more {
			font-size: var(--font-base);
			color: var(--purple);
			font-weight: 700;
		}

		ul {
			margin: 0 0 1em 0;
			padding: 0;
			li {
				position: relative;
				list-style: none;
				padding-left: 2em;
				margin-bottom: 0.5em;
			}
			li::before {
				content: "\f058";
				font-family: "Font Awesome 6 Free";
				font-weight: 900;
				position: absolute;
				left: 0;
				top: 0;
				width: 1.5rem;
				height: 1.5rem;
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--blue);
				font-size: 1em;
				line-height: 1;
				border: none;
			}
		}

		.accordion-1-slide {
			max-height: 0;
			overflow: hidden;
			transition:
				max-height 0.5s ease,
				opacity 0.5s;
			padding: 0px 0 40px 0;
			opacity: 0;
		}
	}
	.accordion-1-image {
		grid-column: span 2;
		background: no-repeat;
		background-position: center center;
		background-size: cover;
		min-height: 150px;
	}
	@media (max-width: 1400px) {
		h2 {
			font-size: var(--font-6xl);
		}
	}
	@media (max-width: 900px) {
		.accordion-1-row {
			grid-template-columns: 1fr 1fr;
			margin-bottom: 20px;
		}
		h2 {
			margin-left: 0%;
			font-size: var(--font-4xl);
		}
		h3 {
			margin-bottom: 10px;
		}
		.accordion-1-text {
			grid-column: 1 / 3;
			padding: 0 0px 0px 0px;
			.accordion-1-slide {
				padding: 0px 0 0px 0;
			}
			a.accordion-1-read-more {
				margin-bottom: 20px;
				display: block;
			}
		}
		.accordion-1-image {
			grid-column: 1 / 3;
			grid-row: 2 / 3;
		}
	}
}

section.accordion-2 {
	margin-bottom: 80px;

	h2 {
		margin-left: calc(33% + 2px);
	}

	.accordion-2-row {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2px;
		margin-bottom: 2px;
		cursor: pointer;

		&.active .accordion-2-slide {
			max-height: 600px;
			opacity: 1;
			/* margin-bottom: -40px; */
		}
		&.active .accordion-2-image {
			padding-bottom: 100%;

			span {
				opacity: 1;
			}
		}
		&.active .accordion-2-image-1 {
			opacity: 0;
		}
		&.active .accordion-2-image-2 {
			opacity: 0;
		}
		&.active .accordion-2-image-3 {
			opacity: 1;
		}
		&.active .accordion-2-image-4 {
			opacity: 1;
		}
	}

	.accordion-2-text {
		padding: 0 40px 0px 40px;
		h3 {
			color: var(--blue);
			font-size: var(--font-2xl);
			font-weight: 600;
		}
		a.accordion-2-read-more {
			font-size: var(--font-base);
			color: var(--purple);
			font-weight: 700;
		}
		.accordion-2-slide {
			max-height: 0;
			overflow: hidden;
			transition: all 0.5s ease;
			padding: 20px 0 40px 0;
			opacity: 0;
		}
	}
	.accordion-2-image {
		background: no-repeat;
		background-position: center center;
		background-size: cover;
		padding-bottom: 25%;
		transition: all 0.5s ease;
		position: relative;

		span {
			color: white;
			display: block;
			font-size: var(--font-2xl);
			padding: 10px 20px 10px 20px;
			opacity: 0;
			position: absolute;
			top: 0;
			left: 0;
			text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
		}
	}
	.accordion-2-image-1 {
		grid-column: 2 / 3; /* occupies the second grid cell */
		grid-row: 1 / 2;
		opacity: 1;
	}
	.accordion-2-image-2 {
		grid-column: 3 / 4; /* occupies the second grid cell */
		grid-row: 1 / 2;
		opacity: 1;
	}
	.accordion-2-image-3 {
		grid-column: 2 / 3; /* occupies the second grid cell */
		grid-row: 1 / 2;
		opacity: 0;
	}
	.accordion-2-image-4 {
		grid-column: 3 / 4; /* occupies the second grid cell */
		grid-row: 1 / 2;
		opacity: 0;
	}
	@media (max-width: 1400px) {
		h2 {
			font-size: var(--font-6xl);
		}
	}
	@media (max-width: 900px) {
		.accordion-2-row {
			grid-template-columns: 1fr 1fr;
			margin-bottom: 20px;
		}
		h2 {
			margin-left: 0%;
			font-size: var(--font-4xl);
		}
		h3 {
			margin-bottom: 10px;
		}
		.accordion-2-text {
			grid-column: 1 / 3;
			padding: 0 0px 0px 0px;
		}
		.accordion-2-image-1 {
			grid-column: 1 / 2; /* occupies the second grid cell */
			grid-row: 2 / 3;
		}
		.accordion-2-image-2 {
			grid-column: 2 / 3; /* occupies the second grid cell */
			grid-row: 2 / 3;
		}
		.accordion-2-image-3 {
			grid-column: 1 / 2; /* occupies the second grid cell */
			grid-row: 2 / 3;
		}
		.accordion-2-image-4 {
			grid-column: 2 / 3; /* occupies the second grid cell */
			grid-row: 2 / 3;
		}
	}
}

section.partners-interest {
	margin-bottom: 80px;
	.section-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		img {
			width: 100%;
			max-width: 180px;
			margin-bottom: 30px;
		}
		p.interest-text {
			font-size: var(--font-9xl);
			font-family: var(--tstar-bold);
			color: var(--black);
			margin-top: 20px;
			text-transform: uppercase;
			text-align: center;
		}
	}

	p.text-link {
		margin-top: 20px;
	}
	p.text-link a {
		color: var(--black);
		font-size: var(--font-base);
		font-family: var(--tstar-reg);
		background-color: var(--aqua);
		color: white;
		display: block;
		padding: 8px 25px 5px 25px;
		width: fit-content;
		border-radius: 9999px;
		text-decoration: none;
		line-height: 1;
		transition: all 0.3s ease;
	}
	p.text-link a:hover {
		background-color: var(--orange);
	}
	@media (max-width: 1200px) {
		.section-inner {
			p.interest-text {
				font-size: var(--font-9xl-clamp);
			}
		}
	}
	@media (max-width: 768px) {
		margin-bottom: 40px;
		.section-inner {
			align-items: flex-start;
			p.interest-text {
				margin: 0;
				text-align: left;
			}
		}
	}
}

section.partners {
	margin-bottom: 80px;

	h2 {
		text-transform: uppercase;
	}

	.partners-wrapper {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: 20px;
	}
	.partner-image {
		aspect-ratio: 260/400;
		width: 100%;
		background: no-repeat center center;
		background-size: cover;
		margin-bottom: 5px;
		position: relative;
	}
	.partner-text {
		padding: 20px;
		font-size: var(--font-base);
		line-height: 1.2;
		color: white;
		font-family: var(--tstar-reg);
		text-align: center;
		background-color: var(--aqua);
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		opacity: 0;
		transition: all 0.3s ease;

		p {
			color: white;
		}

		&:hover {
			/* opacity: 1; */
		}
	}
	.partner-footer {
		background: var(--purple);
		padding-left: 10px;
		font-size: var(--font-base);
	}
	.partner-name {
		padding-top: 20px;
		P {
			font-family: var(--tstar-med);
			color: white;
		}
	}

	@media (max-width: 1500px) {
		h2 {
			font-size: var(--font-8xl-clamp);
		}
	}
}

section.partners-steps_BU {
	margin-bottom: 80px;
	background-color: var(--aqua);
	.section-inner.steps {
		max-width: 100%;
		padding: 0;
	}
	.section-inner.header {
		background-color: var(--aqua);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40px 20px;

		.col-1 {
			flex: 0.8;
			p {
				font-size: var(--font-11xl);
				color: white;
				font-family: var(--tstar-med);
				line-height: 1.1;
				text-indent: -5px;
			}
		}
		.col-2 {
			flex: 2;
			p {
				font-size: var(--font-6xl);
				color: white;
				line-height: 1.1;
				font-family: var(--tstar-light);
			}
		}
	}
	.step {
		padding: 0;
		--content-max: calc(var(--content-width) - 40px);
		--gap: 40px;
		--c2: 0.4;
		--c3: 0.6;
		display: grid;
		position: relative;
		column-gap: var(--gap);
		border-top: 1px solid rgba(255, 255, 255, 0.5);
		background-color: var(--aqua);
		grid-template-columns:
			1fr
			minmax(
				0,
				calc((min(100%, var(--content-max)) - var(--gap)) * var(--c2))
			)
			minmax(
				0,
				calc((min(100%, var(--content-max)) - var(--gap)) * var(--c3))
			)
			1fr;
	}
	.step-inner {
		display: grid;
		grid-column: 2 / 4;

		grid-template-columns: subgrid;
		padding: 40px 0;

		.col-1 {
			display: flex;
			justify-content: center;
			flex-direction: column;
			position: relative;
			p {
				font-size: var(--font-5xl);
				color: white;
				line-height: 1.1;
				font-family: var(--tstar-med);
			}

			&::after {
				content: "";
				display: block;
				width: 100%;
				height: 25px;
				background: white;
				clip-path: polygon(50% 100%, 0 0, 100% 0);
				margin: 10px auto 0 auto;
				position: absolute;
				bottom: -65px;
				left: 0;
				transform: none;
				z-index: 2;
			}
			&::before {
				content: "";
				display: block;
				width: 100%;
				height: 30px;
				background: #1e8ea8;
				clip-path: polygon(50% 100%, 0 0, 100% 0);
				margin: 10px auto 0 auto;
				position: absolute;
				bottom: -70px;
				left: 0;
				transform: none;
				z-index: 2;
			}
		}
		.col-2 {
			display: flex;
			justify-content: center;
			flex-direction: column;
			p {
				font-size: var(--font-3xl);
				color: white;
				font-family: var(--tstar-light);
			}
		}
	}
	.step:last-child {
		.step-inner {
			.col-1 {
				&::after {
					display: none;
				}
			}
			.col-1 {
				&::before {
					display: none;
				}
			}
		}
	}

	@media (max-width: 992px) {
		.section-inner.header {
			background-color: var(--aqua);
			display: block;
			justify-content: space-between;
			align-items: center;
			padding: 20px 20px;

			.col-1 {
				p {
					font-size: var(--font-11xl-clamp);
				}
			}
			.col-2 {
				p {
					font-size: var(--font-6xl-clamp);
				}
			}
		}
		.step {
			/* padding: 0;
			--content-max: calc(var(--content-width) - 40px);
			--gap: 40px;
			--c2: 0.4;
			--c3: 0.6;
			display: grid;
			column-gap: var(--gap);
			border-top: 1px solid rgba(255, 255, 255, 0.5);
			background-color: var(--aqua);
			grid-template-columns:
				1fr
				minmax(
					0,
					calc(
						(min(100%, var(--content-max)) - var(--gap)) * var(--c2)
					)
				)
				minmax(
					0,
					calc(
						(min(100%, var(--content-max)) - var(--gap)) * var(--c3)
					)
				)
				1fr; */
			--gap: 20px;
			&::after {
				content: "";
				display: block;
				width: 100%;
				height: 25px;
				background: white;
				clip-path: polygon(50% 100%, 0 0, 100% 0);
				margin: 10px auto 0 auto;
				position: absolute;
				bottom: -25px;
				left: 0;
				transform: none;
				z-index: 2;
			}
			&::before {
				content: "";
				display: block;
				width: 100%;
				height: 30px;
				background: #1e8ea8;
				clip-path: polygon(50% 100%, 0 0, 100% 0);
				margin: 10px auto 0 auto;
				position: absolute;
				bottom: -30px;
				left: 0;
				transform: none;
				z-index: 2;
			}
			&:last-child {
				&::after {
					display: none;
				}
				&::before {
					display: none;
				}
			}
		}
		.step-inner {
			grid-template-columns: 1fr;
			.col-1 {
				p {
					font-size: var(--font-6xl-clamp-3);
				}
				&::after {
					display: none;
				}
				&::before {
					display: none;
				}
			}
			.col-2 {
				p {
					font-size: var(--font-3xl-clamp);
				}
			}
		}
	}
}

section.partners-steps {
	margin-bottom: 80px;
	.section-inner.steps {
		/* max-width: 100%;
		padding: 0; */
	}
	.section-inner.header {
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
		padding: 40px 20px;

		.col-1 {
			flex: 0.8;
			p {
				font-size: var(--font-11xl);
				color: var(--black);
				font-family: var(--tstar-med);
				line-height: 1.1;
				text-indent: -5px;
			}
		}
		.col-2 {
			flex: 2;
			p {
				font-size: var(--font-6xl);
				color: var(--black);
				line-height: 1.1;
				font-family: var(--tstar-light);
			}
		}
	}
	.step {
		padding: 0;
		position: relative;
		background: linear-gradient(to right, #b9e6ff 0%, #ffffff 100%);
		border-radius: 9999px;
		margin-bottom: 5px;
	}
	.step-inner {
		display: grid;
		/* grid-column: 2 / 4; */

		grid-template-columns: max-content 1fr max-content;
		padding: 20px 0;

		.col-1 {
			display: flex;
			justify-content: center;
			flex-direction: column;
			.step-number {
				font-size: var(--font-9xl);
				color: white;
				line-height: 1;
				font-family: var(--tstar-med);
				display: block;

				padding: 10px 40px 10px 40px;
			}
		}

		.col-2 {
			display: flex;
			justify-content: center;
			flex-direction: column;
			position: relative;
			p {
				font-size: var(--font-7xl);
				color: var(--darkish-blue);
				line-height: 1.1;
				font-family: var(--tstar-med);
				margin-bottom: 0;
			}
		}
		.col-3 {
			padding: 0 40px 0 40px;
		}
	}
	.step:last-child {
		.step-inner {
			.col-1 {
				&::after {
					display: none;
				}
			}
			.col-1 {
				&::before {
					display: none;
				}
			}
			.col-2 {
				p {
					font-weight: bold;
				}
			}
		}
	}

	@media (max-width: 992px) {
		.section-inner.header {
			display: block;
			justify-content: space-between;
			align-items: center;
			padding: 20px 20px;

			.col-1 {
				p {
					font-size: var(--font-11xl-clamp);
				}
			}
			.col-2 {
				p {
					font-size: var(--font-6xl-clamp);
				}
			}
		}
		.step {
			/* padding: 0;
			--content-max: calc(var(--content-width) - 40px);
			--gap: 40px;
			--c2: 0.4;
			--c3: 0.6;
			display: grid;
			column-gap: var(--gap);
			border-top: 1px solid rgba(255, 255, 255, 0.5);
			background-color: var(--aqua);
			grid-template-columns:
				1fr
				minmax(
					0,
					calc(
						(min(100%, var(--content-max)) - var(--gap)) * var(--c2)
					)
				)
				minmax(
					0,
					calc(
						(min(100%, var(--content-max)) - var(--gap)) * var(--c3)
					)
				)
				1fr; */
			border-radius: 0px;
			padding-left: 20px;

			&:last-child {
				&::after {
					display: none;
				}
				&::before {
					display: none;
				}
			}
		}
		.step-inner {
			grid-template-columns: 1fr;
			.col-1 {
				padding-left: 0;
				.step-number {
					padding-left: 0;
				}
				p {
					font-size: var(--font-6xl-clamp-3);
				}
				&::after {
					display: none;
				}
				&::before {
					display: none;
				}
			}
			.col-2 {
				padding-left: 0;
				padding-bottom: 20px;
				p {
					font-size: var(--font-3xl-clamp);
				}
			}
			.col-3 {
				padding-left: 0;
			}
		}
	}
	@media (max-width: 768px) {
		margin-bottom: 40px;
	}
}

section.faqs-section {
	margin-bottom: 100px;
	/* display: none; */
	.section-inner {
	}

	h2 {
		color: var(--black);
		font-size: var(--font-4xl);
	}

	h3 {
		font-size: var(--font-sm);
		padding: 8px 60px 8px 0px;
		margin-bottom: 0;
		color: black;
		cursor: pointer;
		transition: all 0.3s ease;
		line-height: 1.1;

		position: relative;
		&::after {
			content: "\f067";
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translateY(-50%);
			font-size: var(--font-sm);
			color: black;
			border-radius: 50%;
			padding: 0px 0 0 2px;
			width: 20px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			pointer-events: none;
			line-height: 1;
			text-align: center;
		}
	}
	.open h3 {
		&::after {
			content: "\f068";
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			padding: 0px 0 0 2px;
		}
	}
	p {
		font-size: var(--font-sm);
	}
	.faq-item {
		border-top: 1px solid var(--aqua);
		visibility: hidden;
		width: 48%;
	}

	.faq-item:last-child {
		border-bottom: 1px solid var(--aqua);
	}
	.faq-answer {
		margin-left: 20px;
	}
	/* ul {
		margin: 0 0 1em 0;
		padding: 0;
		font-size: var(--font-sm);
		li {
			position: relative;
			list-style: none;
			padding-left: 2em;
			margin-bottom: 0.5em;
			font-size: var(--font-sm);
		}
		li::before {
			content: "\f058";
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			position: absolute;
			left: 0;
			top: 0;
			width: 1.5rem;
			height: 1.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--blue);
			font-size: 1em;
			line-height: 1;
			border: none;
		}
	} */
	@media (max-width: 1400px) {
	}
	@media (max-width: 900px) {
		.faq-item {
			width: 100%;
		}
	}
}

aside.faqs-section {
	margin-bottom: 80px;
	/* display: none; */
	.section-inner {
	}

	h2 {
		color: var(--black);
		font-size: var(--font-4xl);
		display: none;
	}

	h3 {
		font-size: var(--font-base);
		padding: 10px 60px 10px 0px;
		margin-bottom: 0;
		color: black;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;

		position: relative;
		&::after {
			content: "\f067";
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translateY(-50%);
			font-size: var(--font-sm);
			color: black;
			border-radius: 50%;
			padding: 0px 0 0 2px;
			width: 20px;
			height: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			pointer-events: none;
			line-height: 1;
			text-align: center;
		}
	}
	.open h3 {
		&::after {
			content: "\f068";
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			padding: 0px 0 0 2px;
		}
	}
	p {
		font-size: var(--font-sm);
	}
	.faq-item {
		border-top: 1px solid var(--aqua);
		visibility: hidden;
	}

	.faq-item:last-child {
		border-bottom: 1px solid var(--aqua);
	}
	.faq-answer {
		margin-left: 20px;
	}
	/* ul {
		margin: 0 0 1em 0;
		padding: 0;
		font-size: var(--font-sm);
		li {
			position: relative;
			list-style: none;
			padding-left: 2em;
			margin-bottom: 0.5em;
			font-size: var(--font-sm);
		}
		li::before {
			content: "\f058";
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			position: absolute;
			left: 0;
			top: 0;
			width: 1.5rem;
			height: 1.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--blue);
			font-size: 1em;
			line-height: 1;
			border: none;
		}
	} */
	@media (max-width: 1400px) {
	}
	@media (max-width: 900px) {
		.faq-item {
			width: 100%;
		}
	}
}

section.info-slider {
	margin-bottom: 100px;
	.section-inner {
		max-width: calc(var(--content-width) + 40px);
	}

	h3 {
		margin: 0 0 20px 20px;
		font-size: var(--font-8xl);
	}
	.swiper-wrapper {
		/* gap: 20px; */
	}
	/*slider*/
	.swiper {
		width: 100%;
		position: relative;

		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 0;
			width: 20px;
			height: 100%;
			z-index: 2;
		}
		&::before {
			left: 0;
			background: linear-gradient(to right, white 0%, transparent 100%);
		}
		&::after {
			right: 0;
			background: linear-gradient(to left, white 0%, transparent 100%);
		}

		/* Swiper slide styling */
		.swiper-slide {
			display: flex;
			flex-direction: column;
			/* padding: 30px 10px 30px 10px; */
			gap: 20px;
			padding: 20px 20px 40px 20px;
			height: auto;
			width: 300px;
			background-color: #f2f2f2;
			position: relative;
			margin-left: 20px;
			text-decoration: none;

			&::before {
				content: "HT4";
				position: absolute;
				bottom: 10px;
				right: 20px;
				font-family: var(--tstar-bold);
				font-size: var(--font-xl);
				color: var(--black);
			}
		}

		.image {
			display: block;
			width: 100%;
			background-size: cover;
			background-position: center;
			aspect-ratio: 294/267;
			position: relative;
		}
		.header {
			padding: 20px;
			font-family: var(--tstar-med);
			display: flex;
			flex-direction: column;
			justify-content: end;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;

			:last-child {
				margin-bottom: 0px;
			}

			h3,
			h4,
			h5,
			p {
				font-size: var(--font-2xl);
				color: white;
				text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
				line-height: 1;
				font-family: var(--tstar-bold);
			}
		}
		.slide-row-2 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			p {
				font-size: var(--font-lg);
				color: var(--black);
				font-family: var(--tstar-reg);
				line-height: 1.1;
			}

			:last-child {
				margin-bottom: 0px;
			}
		}
	}

	.prev,
	.next {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		z-index: 10; /* bump if needed */
		transition: all 0.3s ease;
	}

	.prev {
		position: absolute;
		left: -40px;
		top: 50%;
		transform: translateY(-20px);
		cursor: pointer;

		width: 0;
		height: 0;

		/* outer (black stroke) */
		border-top: 35px solid transparent;
		border-bottom: 35px solid transparent;
		border-right: 40px solid var(--grey);
		transition: all 0.3s ease;
	}

	.prev::after {
		content: "";
		position: absolute;
		top: -32px; /* move up so it sits inside */
		left: 2px; /* inset = stroke thickness */
		width: 0;
		height: 0;

		/* outer (black stroke) */
		border-top: 33px solid transparent;
		border-bottom: 33px solid transparent;
		border-right: 38px solid var(--grey);
		transition: all 0.3s ease;
	}

	.prev:hover::after,
	.prev:hover {
		border-right-color: var(--aqua);
	}

	.next {
		position: absolute;
		right: -40px;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;

		width: 0;
		height: 0;

		/* outer (black stroke) */
		border-top: 35px solid transparent;
		border-bottom: 35px solid transparent;
		border-left: 40px solid var(--grey);
		transition: all 0.3s ease;
	}

	.next::after {
		content: "";
		position: absolute;
		top: -32px; /* move up so it sits inside */
		right: 1px; /* inset = stroke thickness */
		width: 0;
		height: 0;

		/* outer (black stroke) */
		border-top: 33px solid transparent;
		border-bottom: 33px solid transparent;
		border-left: 38px solid var(--grey);
		transition: all 0.3s ease;
	}

	.next:hover::after,
	.next:hover {
		border-left-color: var(--aqua);
	}

	@media (max-width: 1599px) {
		h3 {
			font-size: var(--font-8xl-clamp);
		}
		.section-inner {
			padding: 0 60px;
		}
		/* Left button positioning */
		.prev {
			left: 20px;
		}

		/* Right button positioning */
		.next {
			right: 20px;
		}
	}
	@media (max-width: 900px) {
		.swiper {
			.swiper-slide {
				display: flex;
				flex-direction: column;
				width: 300px;
			}
		}
	}
	@media (max-width: 600px) {
		margin-bottom: 40px;
	}
	@media (max-width: 600px) {
		h3 {
			margin: 0 0 20px 0;
		}
		.swiper {
			&::before,
			&::after {
				content: "";
				display: none;
			}

			.swiper-slide {
				padding: 0 0 0 0px;

				margin-left: 0px;
			}
			.image {
				max-width: 100%;
				height: auto;
				max-height: 100%;
				aspect-ratio: 1/1;
				display: block;
				margin: 0 auto 0 auto;
			}

			.slide-row-2 {
				padding: 0 20px 20px 20px;
			}
		}
		/* Left button positioning */
		.prev {
			left: 10px;
		}

		/* Right button positioning */
		.next {
			right: 10px;
		}
	}
}

.blog-sidebar-col {
	padding-top: 100px;
	h3 {
		margin-bottom: 20px;
		font-size: var(--font-6xl);
		font-family: var(--tstar-med);
	}
	@media (max-width: 1200px) {
		padding-top: 0;
		h3 {
			font-size: var(--font-6xl-clamp);
		}
	}
}

aside.blog-sidebar {
	margin-bottom: 80px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;

	h2 {
		margin-bottom: 10px;
	}

	.blog-teaser {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 20px 20px 40px 20px;
		height: auto;
		width: 100%;
		background-color: #f2f2f2;
		position: relative;
		text-decoration: none;

		&::before {
			content: "HT4";
			position: absolute;
			bottom: 10px;
			right: 20px;
			font-family: var(--tstar-bold);
			font-size: var(--font-xl);
			color: var(--black);
		}
	}

	.image {
		display: block;
		width: 100%;
		background-size: cover;
		background-position: center;
		aspect-ratio: 294/267;
		position: relative;
	}
	.header {
		padding: 20px;
		font-family: var(--tstar-med);
		display: flex;
		flex-direction: column;
		justify-content: end;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		:last-child {
			margin-bottom: 0px;
		}

		h3,
		h4,
		h5,
		p {
			font-size: var(--font-2xl);
			color: white;
			text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
			line-height: 1;
			font-family: var(--tstar-bold);
		}
	}
	.row-2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		p {
			font-size: var(--font-lg);
			color: var(--black);
			font-family: var(--tstar-reg);
			line-height: 1.1;
		}

		:last-child {
			margin-bottom: 0px;
		}
	}
}

section.blogs {
	margin-bottom: 80px;
	.section-inner {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 20px;
	}

	h2 {
		margin-bottom: 10px;
	}

	.blog-teaser {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 20px 20px 40px 20px;
		background-color: #f2f2f2;
		position: relative;
		text-decoration: none;

		&::before {
			content: "HT4";
			position: absolute;
			bottom: 10px;
			right: 20px;
			font-family: var(--tstar-bold);
			font-size: var(--font-xl);
			color: var(--black);
		}
	}

	.image {
		display: block;
		width: 100%;
		background-size: cover;
		background-position: center;
		aspect-ratio: 294/267;
		position: relative;
	}
	.header {
		padding: 20px;
		font-family: var(--tstar-med);
		display: flex;
		flex-direction: column;
		justify-content: end;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		:last-child {
			margin-bottom: 0px;
		}

		h3,
		h4,
		h5,
		p {
			font-size: var(--font-2xl);
			color: white;
			text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
			line-height: 1;
			font-family: var(--tstar-bold);
		}
	}
	.row-2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		p {
			font-size: var(--font-lg);
			color: var(--black);
			font-family: var(--tstar-reg);
			line-height: 1.1;
		}

		:last-child {
			margin-bottom: 0px;
		}
	}
}

section.main-text {
	margin-bottom: 80px;
	&.less-margin {
		margin-bottom: 40px;
	}
	.section-inner {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2px;
	}
	.col-1 {
		padding: 0 40px 0 40px;

		h1 {
			color: var(--light-purple);
			font-size: var(--font-8xl);
			font-weight: 300;
		}
	}
	.col-2 {
		grid-column: 2 / 4;
	}

	p {
		font-size: var(--font-2xl);
		font-weight: 300;
	}
	div.large p {
		font-size: var(--font-8xl);
		line-height: 1.1;
		margin-bottom: 2rem;
		font-weight: 300;
	}
	ul {
		margin: 0 0 1em 40px;
		padding: 0;
		font-size: var(--font-2xl);
		li {
			position: relative;
			list-style: none;
			padding-left: 2em;
			margin-bottom: 0.5em;
		}
		li::before {
			content: "\f058";
			font-family: "Font Awesome 6 Free";
			font-weight: 900;
			position: absolute;
			left: 0;
			top: 0;
			width: 1.5rem;
			height: 1.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--blue);
			font-size: 1em;
			line-height: 1;
			border: none;
		}
	}

	span.read-more {
		color: var(--light-purple);
		font-weight: 700;
		position: relative;
		padding-left: 20px;
		font-size: var(--font-sm);
		display: block;
		cursor: pointer;
		user-select: none;
	}
	span.read-more::before {
		content: "\f067";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		position: absolute;
		left: 0;
		padding: 0 0 0 1px;
		top: 50%;
		transform: translateY(-50%);
		width: 14px;
		height: 14px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: var(--light-purple);
		color: white;
		border-radius: 50%;
		font-size: var(--font-xxs);
	}
	span.read-more.open::before {
		content: "\f068";
	}
	@media (max-width: 1400px) {
		.col-1 {
			h1 {
				font-size: var(--font-6xl);
			}
		}

		div.large p {
			font-size: var(--font-6xl);
		}
	}
	@media (max-width: 900px) {
		.col-1 {
			padding: 0;

			h1 {
				font-size: var(--font-4xl);
				br {
					display: none;
				}
			}
		}
		p,
		ul {
			font-size: var(--font-xl);
		}
		div.large p {
			font-size: var(--font-4xl);
		}
		.section-inner {
			display: block;
		}
	}
}

section.cta-banner {
	margin-bottom: 80px;
	background: no-repeat center center / cover;
	aspect-ratio: 5/1;
	.cta-banner-top {
		width: 100%;
		position: relative;
		background-color: var(--blue);
		text-align: center;
		p {
			font-size: var(--font-sm);
			padding: 5px 20px 5px 20px;
			color: white;
		}
	}
	.section-inner {
		display: flex;
		justify-content: center;
		flex-direction: column;
		height: 100%;
		p {
			color: white;
			font-size: var(--font-8xl);
			font-weight: 300;
			line-height: 1.1;
			text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
			padding: 0 0 0 40px;
			max-width: 440px;
			margin-bottom: 0;
		}
	}
	@media (max-width: 1400px) {
		aspect-ratio: auto;
		a.button {
			margin-bottom: 40px;
		}
		.section-inner {
			P {
				font-size: var(--font-6xl);
			}
		}
	}
	@media (max-width: 900px) {
		.section-inner {
			P {
				padding: 0;
				font-size: var(--font-4xl);
			}
		}
	}
}

section.about-us-block {
	margin-bottom: 80px;
	.section-inner {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2px;
	}
	.col-1 {
		padding: 0 40px 0 40px;

		p {
			color: var(--light-purple);
			font-size: var(--font-8xl);
			font-weight: 300;
			line-height: 1.1;
		}
		p:first-child {
			margin-bottom: 5rem;
		}
	}
	.col-2 {
		grid-column: 2 / 4;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2px;

		img {
			width: 100%;
			aspect-ratio: 1/1;
			object-fit: cover;
		}

		.col-2-left {
			p:not(:has(img)) {
				margin-right: 20px;
			}
		}
		.col-2-right {
			p:not(:has(img)) {
				margin-right: 20px;
			}
		}
	}

	p {
		font-size: var(--font-base);
	}
	@media (max-width: 1400px) {
		.col-1 {
			p {
				font-size: var(--font-6xl);
			}
		}
		h2 {
			grid-column: 1 / 4;
			font-size: var(--font-6xl);
		}
	}
	@media (max-width: 1100px) {
		.col-1 {
			grid-column: 1 / 4;
			padding: 0;
			p {
				&:first-child {
					margin-bottom: 20px;
				}
			}
		}
		.col-2 {
			grid-column: 1 / 4;
		}
	}
	@media (max-width: 900px) {
		.col-1 {
			p {
				font-size: var(--font-4xl);
			}
		}
		h2 {
			grid-column: 1 / 4;
			font-size: var(--font-4xl);
		}
	}
	@media (max-width: 600px) {
		.col-2 {
			display: block;
			.col-2-left {
				margin-bottom: 40px;
			}
		}
	}
}

section.contact-form {
	margin-bottom: 80px;

	.section-inner {
		max-width: 1000px;
		.large-text-intro {
			margin: 0 0 40px 0;

			P {
				line-height: 1.1;
				font-size: var(--font-6xl);
			}

			ul {
				line-height: 1.1;
				font-size: var(--font-6xl);
			}

			a {
				white-space: nowrap;
			}
		}

		.normal-text-intro {
			margin: 0 0 40px 0;

			P {
				line-height: 1.1;
				font-size: var(--font-2xl);
			}

			ul {
				line-height: 1.1;
				font-size: var(--font-2xl);
			}

			a {
				white-space: nowrap;
			}
		}

		.wpcf7-form {
			margin-bottom: 40px;

			br {
				display: none;
			}

			input:not([type="submit"]),
			select,
			textarea {
				border: 1px solid var(--grey);
				border-radius: 0;
			}

			input::placeholder,
			textarea::placeholder {
				color: #bbb;
				opacity: 1;
			}
			select option:first-child,
			select:invalid,
			select option[disabled] {
				color: #bbb;
			}
		}

		.wpcf7-form > p {
			margin: 0 0 20px 0;
			display: flex;
			flex-direction: column;
			grid-column: span 1;

			label {
				font-size: var(--font-sm);
				color: var(--purple);
				margin-bottom: 5px;
			}
		}

		.wpcf7-form > p:has(.wpcf7-acceptance) {
			.wpcf7-list-item {
				display: inline-block;
				margin: 0 0 0 0;
			}

			.wpcf7-acceptance input[type="checkbox"] {
				opacity: 0;
				width: 0;
				height: 0;
				position: absolute;
			}
			.wpcf7-acceptance {
				display: flex;
				align-items: center;
				font-size: var(--font-base);
			}
			.wpcf7-acceptance label {
				position: relative;
				padding-left: 28px;
				cursor: pointer;
				display: inline-block;
				line-height: 20px;
			}

			.wpcf7-acceptance label::before {
				content: "";
				position: absolute;
				left: 0;
				top: 2px;
				width: 18px;
				height: 18px;
				border: 2px solid #bbb;
				border-radius: 4px;
				background: #fff;
				box-sizing: border-box;
				transition: border-color 0.2s;
			}

			.wpcf7-acceptance input[type="checkbox"]:checked + *::before {
				border-color: #1976d2;
				background: #2196f3;
			}

			.wpcf7-acceptance input[type="checkbox"]:checked + *::after {
				content: "\f00c";
				font-family: "Font Awesome 6 Free";
				font-weight: 900;
				position: absolute;
				left: 4px;
				top: 2px;
				font-size: var(--font-xs);
				color: var(--purple);
				pointer-events: none;
			}
		}

		.wpcf7-form > p:has(.wpcf7-checkbox) {
			.wpcf7-list-item {
				display: inline-block;
				margin: 0 0 0 0;
			}

			.wpcf7-checkbox input[type="checkbox"] {
				opacity: 0;
				width: 0;
				height: 0;
				position: absolute;
			}
			.wpcf7-checkbox {
				display: flex;
				align-items: center;
				font-size: var(--font-base);
			}
			.wpcf7-checkbox label {
				position: relative;
				padding-left: 28px;
				cursor: pointer;
				display: inline-block;
				line-height: 20px;
			}

			.wpcf7-checkbox label::before {
				content: "";
				position: absolute;
				left: 0;
				top: 2px;
				width: 18px;
				height: 18px;
				border: 2px solid #bbb;
				border-radius: 4px;
				background: #fff;
				box-sizing: border-box;
				transition: border-color 0.2s;
			}

			.wpcf7-checkbox input[type="checkbox"]:checked + *::before {
				border-color: #1976d2;
				background: #2196f3;
			}

			.wpcf7-checkbox input[type="checkbox"]:checked + *::after {
				content: "\f00c";
				font-family: "Font Awesome 6 Free";
				font-weight: 900;
				position: absolute;
				left: 4px;
				top: 2px;
				font-size: var(--font-xs);
				color: var(--purple);
				pointer-events: none;
			}
		}

		.wpcf7-form > p:has(.wpcf7-submit) {
			justify-self: start;

			[disabled].button,
			[disabled][type="submit"] {
				background-color: black;
			}

			margin-bottom: 0;
		}

		.wpcf7-form .wpcf7-response-output {
			grid-column: 1 / -1;
		}

		/* @media (max-width: 800px) {
			.wpcf7-form {
				grid-template-columns: 1fr;
				gap: 16px;
			}
			.wpcf7-form > p {
				grid-column: 1;
			}
		} */

		p.consent {
			font-size: var(--font-sm);
			margin: 0;
			display: block;
		}
	}
	@media (max-width: 1400px) {
	}
	@media (max-width: 900px) {
		.section-inner {
			.large-text {
				margin-left: 0;
				overflow-wrap: anywhere;
				font-size: var(--font-3xl);
			}

			.wpcf7-form {
				margin-left: 0;
			}
			.wpcf7-form > p:nth-of-type(1) {
				grid-column: 1 / -1;
			}
			.wpcf7-form > p:nth-of-type(2) {
				grid-column: 1 / 3;
			}
		}
		P {
		}
	}
	@media (max-width: 600px) {
		.section-inner {
			.large-text {
				font-size: var(--font-xl);
			}
		}
	}
}

section.gallery {
	h3 {
		margin: 0 0 20px 20px;
		font-size: var(--font-8xl);
		text-align: center;
	}
	margin-bottom: 80px;
	@media (max-width: 1599px) {
		h3 {
			font-size: var(--font-8xl-clamp);
		}
	}
}

section.blog-header {
	margin-bottom: 20px;

	border-bottom: 1px solid #a9a9a9;

	.section-inner {
		display: flex;
		justify-content: space-between;
	}

	.intro-text {
		flex: 1 1 auto;
		max-width: 600px;
		* {
			font-size: var(--font-3xl);
			font-family: var(--tstar-med);
		}
	}

	.time-to-read {
		flex: 1 1 auto;
		text-align: right;
		P {
			font-size: var(--font-lg);
			color: var(--aqua);
			font-family: var(--tstar-med);
		}
	}

	@media (max-width: 1200px) {
		.intro-text {
			* {
				font-size: var(--font-3xl-clamp);
			}
		}
		.time-to-read {
			P {
				font-size: var(--font-lg-clamp);
			}
		}
	}

	@media (max-width: 992px) {
		.section-inner {
			display: block;
		}
		.intro-text {
			max-width: 100%;
		}
		.time-to-read {
			text-align: left;
		}
	}
}

section.blog-content {
	margin-bottom: 80px;

	p,
	ul {
		font-family: var(--tstar-reg);
		font-size: var(--font-base);
	}

	h1 {
		font-size: var(--font-3xl);
		font-family: var(--tstar-med);
		margin-bottom: 10px;
	}

	h2 {
		font-size: var(--font-2xl);
		font-family: var(--tstar-med);
		margin-bottom: 10px;
	}

	h3 {
		font-size: var(--font-xl);
		font-family: var(--tstar-med);
		margin-bottom: 10px;
	}
	h4 {
		font-size: var(--font-med);
		font-family: var(--tstar-med);
		margin-bottom: 10px;
	}
	h5 {
		font-size: var(--font-lg);
		font-family: var(--tstar-med);
		margin-bottom: 10px;
	}
	h6 {
		font-size: var(--font-base);
		font-family: var(--tstar-med);
		margin-bottom: 10px;
	}

	img {
		width: 100%;
		height: auto;
	}

	.large-text {
		font-size: var(--font-2xl);
		font-family: var(--tstar-med);
	}

	.blog-text-block {
		/* font-size: 25px; */
	}

	.blog-highlight {
		padding: 30px;
		background-color: var(--darkish-blue);
		margin-bottom: 20px;

		:last-child {
			margin-bottom: 0;
		}

		P,
		ul,
		li,
		ol {
			color: white;
			font-size: var(--font-xl);
			line-height: 1.1;
		}
	}

	.blog-meta {
		font-size: var(--font-lg);
		font-family: var(--tstar-med);
		margin: 40px 0 0 0;
	}

	@media (max-width: 1200px) {
		.large-text {
			font-size: var(--font-2xl-clamp);
			font-family: var(--tstar-med);
		}
		p,
		ul {
			font-size: var(--font-base-clamp);
		}

		h1 {
			font-size: var(--font-3xl-clamp);
		}

		h2 {
			font-size: var(--font-2xl-clamp);
		}

		h3 {
			font-size: var(--font-xl-clamp);
		}
		h4 {
			font-size: var(--font-med-clamp);
		}
		h5 {
			font-size: var(--font-lg-clamp);
		}
		h6 {
			font-size: var(--font-base);
		}

		.blog-highlight {
			P,
			ul,
			li,
			ol {
				font-size: var(--font-xl-clamp);
			}
		}

		.blog-meta {
			font-size: var(--font-lg-clamp);
		}
	}
}

section.founder {
	margin-bottom: 80px;
	background-color: #cccccf;
	width: 100%;

	.section-inner {
		background: url(../images/founder.png) no-repeat right center;
		background-size: 140%;
		&::before,
		&::after {
			content: "";
			display: block;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 40px;
			height: 100%;
			background: #cccccf;
			z-index: 1;
		}
		&::before {
			left: 0px;
			background: linear-gradient(to right, #cccccf 0%, transparent 100%);
		}
		&::after {
			right: 0px;
			background: linear-gradient(to left, #cccccf 0%, transparent 100%);
		}
	}
	.text {
		padding: 80px;
		width: 64%;
		position: relative;
		h2 {
			padding: 0;
			margin-left: 0px;
			font-size: var(--font-7xl);
			line-height: 1;
			font-family: var(--tstar-med);
		}
		p {
			font-size: var(--font-3xl);
			font-family: var(--tstar-light);
		}
		.founder-name {
			font-size: var(--font-3xl);
			margin-top: 20px;
		}
	}

	@media (max-width: 1200px) {
		.text {
			padding: 20px 0 20px 0;
			h2 {
				font-size: var(--font-7xl-clamp);
			}
			width: 50%;
			blockquote {
				font-size: var(--font-6xl-clamp);
			}
			p {
				font-size: var(--font-3xl-clamp);
			}
			.founder-name {
				font-size: var(--font-3xl-clamp);
			}
		}
		.section-inner {
			&::before {
				display: none;
			}
			&::after {
				display: none;
			}
		}
	}
	@media (max-width: 1050px) {
		.text {
		}

		.section-inner {
			/* background-image: none; */
			padding: 0;
		}
		.text {
			width: 100%;
			/* background: rgba(255, 255, 255, 0.8); */
			padding: 20px;
			p:not(.founder-name) {
				width: 50%;
			}
		}
	}
	@media (max-width: 768px) {
		.section-inner {
			background-position: bottom right;
		}
	}
	@media (max-width: 650px) {
		.section-inner {
			background: url(../images/founder-2.png) no-repeat right center;
			background-position: bottom right;
			background-size: 110%;
		}
		.text {
			p:not(.founder-name) {
				width: 55%;
				font-size: var(--font-2xl-clamp);
			}
		}
	}
	@media (max-width: 550px) {
		.text {
			p:not(.founder-name) {
				width: 55%;
				font-size: var(--font-xl-clamp);
			}
		}
	}
	@media (max-width: 480px) {
		.text {
			p:not(.founder-name) {
				width: 55%;
				font-size: var(--font-med-clamp);
			}
		}
	}
	@media (max-width: 440px) {
		.text {
			p:not(.founder-name) {
				width: 60%;
				font-size: var(--font-lg-clamp);
			}
		}
	}
	@media (max-width: 420px) {
		.text {
			p:not(.founder-name) {
				width: 55%;
				font-size: var(--font-base-clamp);
			}
		}
	}
}

footer {
	position: relative;
	background-color: black;
	font-size: var(--font-base);

	.footer-inner {
		display: block;
		position: relative;
		display: flex;
		max-width: var(--content-width);
		padding: 40px 20px 0 20px;
		margin-left: auto;
		margin-right: auto;
		gap: 80px;
		margin-bottom: 60px;
	}

	> div {
		margin: 0 0 var(--std-margin);
	}

	ul {
		margin: 0;
		padding: 0;
		font-size: var(--font-xs);

		li {
			padding: 0;
			display: block;
			line-height: 1.4;
			color: white;
		}

		a {
			color: white;
			text-decoration: none;
			transition:
				color 0.2s ease,
				text-decoration-color 0.2s ease;
		}

		a:visited {
			color: white; /* make sure it’s distinct but still accessible */
		}

		a:hover,
		a:focus,
		a:active {
			color: var(--orange);
		}

		.phone a,
		.mobile a,
		.email a,
		.location {
			padding-left: 27px;
			position: relative;
		}

		.phone a::before,
		.mobile a::before,
		.email a::before,
		.location::before {
			font-family: "Font Awesome 6 Free";
			font-weight: 400;
			font-style: normal;
			font-size: var(--font-xl);
			color: var(--purple);
			margin-right: 10px;
			position: absolute;
			left: 0px;
			top: -3px;
		}

		.phone a::before {
			content: "\f095";
		}
		.mobile a::before {
			content: "\f3cd";
			margin-right: 15px;
		}
		.email a::before {
			content: "\f0e0";
		}
		.location::before {
			content: "\f3c5";
			margin-right: 15px;
		}
	}

	a.logo {
		width: 200px;
		height: 82px;
		background: url(../images/logo-2.svg) left / contain no-repeat;
		text-indent: -9999px;
		white-space: nowrap;
		overflow: hidden;
		display: block;
	}

	.col-1 {
		/* grid-column: span 2; */
		padding-bottom: 20px;
		span.no-break {
			white-space: nowrap;
		}
		margin-left: auto;
	}

	.col-2 {
		padding-bottom: 20px;
	}

	.col-3 {
		padding-bottom: 20px;
	}

	.col-4 {
		padding-bottom: 20px;
	}

	.soc-med {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		gap: 30px;
		/* align-items: center; */

		padding: 0px 0px 0px 0px;
		margin: 0px 0 0 0;
		li {
			padding: 0;
			margin: 0;
			list-style: none;
			/* width: 1rem;
			height: 1rem; */
		}

		a {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			background: none;
			text-indent: 0;
			white-space: nowrap;
			overflow: visible;
			font-size: var(--font-3xl);
			color: #fff;

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

		.fb a::before,
		.ig a::before,
		.li a::before,
		.x a::before {
			font-family: "Font Awesome 6 Brands";
			font-weight: 400;
			font-style: normal;
			font-size: var(--font-xl);
			color: #fff;
		}

		.fb a:hover::before,
		.ig a:hover::before,
		.li a:hover::before,
		.x a:hover::before {
			color: var(--orange);
		}

		.fb a::before {
			content: "\f09a";
		}
		.ig a::before {
			content: "\f16d";
		}
		.li a::before {
			content: "\f0e1";
		}
		.x a::before {
			content: "\e61b";
		}
	}

	.footer-footer {
		background-color: black;
		font-size: var(--font-xs);
		color: white;

		.col-1 {
			padding-bottom: 0;
			margin-left: 0;
		}

		.col-2 {
			padding-bottom: 0;
		}

		.col-3 {
			padding-bottom: 0;
		}

		.footer-footer-inner {
			display: block;
			position: relative;
			display: flex;
			flex-wrap: wrap;
			max-width: var(--content-width);
			padding: 20px;
			margin-left: auto;
			margin-right: auto;
			justify-content: space-between;
		}

		a {
			color: white;
		}
	}
	@media (max-width: 1200px) {
		.footer-inner {
			gap: 40px;
		}
	}
	@media (max-width: 992px) {
		.logo {
			margin-bottom: 20px;
		}

		.soc-med {
			justify-content: flex-start;
		}
		.footer-inner {
			display: block;
		}
		.footer-footer {
			/* padding: 20px 0 20px 0; */
		}
	}
}

/*woocommerce*/

section.wc-my-account {
	margin-bottom: 80px;
	.section-inner {
		max-width: var(--content-width-narrow);
	}
	.woocommerce-MyAccount-navigation {
		position: relative;
		height: auto;
		box-shadow: none;
	}
}

nav.woocommerce-breadcrumb {
	display: none;
}
.product-single {
	.section-inner {
		padding: 0;
		/* clearfix */
		&::after {
			content: "";
			display: table;
			clear: both;
		}
	}
}

/* Free delivery section styling */
.free-delivery-section {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 15px 0 40px 0;
	padding: 10px 0;

	i {
		color: var(--aqua);
		font-size: var(--font-xl);
	}

	span {
		font-family: var(--tstar-med);
		font-size: var(--font-sm);
		color: var(--black);
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}
}

/* Discount code section styling */
.discount-code-section {
	margin-bottom: 20px;

	label {
		display: block;
		font-family: var(--tstar-med);
		font-size: var(--font-sm);
		color: var(--black);
		margin-bottom: 8px;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.discount-code-input-wrapper {
		display: flex;
		gap: 10px;
		align-items: center;

		input[type="text"] {
			flex: 1;
			padding: 6px 10px;
			border: 1px solid var(--grey);
			border-radius: 3px;
			font-family: var(--tstar-reg);
			font-size: var(--font-xs);
			background-color: white;
			height: 30px;
			box-sizing: border-box;
			max-width: 150px;

			&:focus {
				outline: none;
				border-color: var(--aqua);
			}

			&::placeholder {
				color: #999;
			}
		}

		.apply-discount-btn {
			height: 30px;
			padding: 0 15px;
			background-color: var(--aqua);
			color: white;
			border: none;
			border-radius: 3px;
			font-family: var(--tstar-med);
			font-size: var(--font-xs);
			text-transform: uppercase;
			letter-spacing: 0.3px;
			cursor: pointer;
			transition: background-color 0.3s ease;
			box-sizing: border-box;

			&:hover {
				background-color: var(--dark-blue);
			}

			&:active {
				transform: translateY(1px);
			}
		}
	}

	.discount-message {
		margin-top: 10px;
		font-size: var(--font-sm);

		.success {
			color: #28a745;
			font-family: var(--tstar-med);
		}

		.error {
			color: #dc3545;
			font-family: var(--tstar-med);
		}
	}
}

.woocommerce div.product form.cart::after,
.woocommerce div.product form.cart::before {
	content: " ";
	display: none;
}

.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
	float: left;
	width: 60%;
}

.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
	float: right;
	width: 36%;
	clear: none;
}

.woocommerce div.product .product_title {
	font-size: var(--font-4xl);
	font-family: var(--tstar-med);
}

/* WooCommerce cart form with Picnic classes */
.single-product .cart.picnic-form {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding-left: 0;
	margin-left: 0;
	gap: 15px;
	margin-bottom: 20px;

	.quantity {
		display: flex;
		align-items: center;

		input.input {
			width: 80px;
			height: 40px;
			text-align: center;
			border: 1px solid var(--grey);
			border-radius: 5px;
			font-family: var(--tstar-reg);
			font-size: var(--font-sm);

			&:focus {
				outline: none;
				border-color: var(--aqua);
			}
		}
	}

	.single_add_to_cart_button.shyButton {
		height: 40px;
		padding: 0 30px;
		background-color: black;
		color: white;
		border: none;
		border-radius: 5px;
		font-family: var(--tstar-med);
		font-size: var(--font-sm);
		text-transform: uppercase;
		letter-spacing: 0.5px;
		cursor: pointer;
		transition: background-color 0.3s ease;

		&:hover {
			background-color: var(--dark-blue);
		}

		&:active {
			transform: translateY(1px);
		}
	}
}

/* WooCommerce price styling */
.single-product .price {
	font-size: 1.5rem !important;
	font-weight: bold !important;
	color: black !important;
	font-family: var(--tstar-med) !important;
	margin: 10px 0 !important;
}

.single-product .price .amount {
	font-size: 1.5rem !important;
	font-weight: bold !important;
	color: black !important;
}

.single-product .price del {
	font-size: 1.2rem !important;
	color: #999 !important;
	font-weight: normal !important;
}

.single-product .price ins {
	font-size: 1.5rem !important;
	font-weight: bold !important;
	color: black !important;
	text-decoration: none !important;
}

/* WooCommerce product gallery - thumbnails to the left */
.woocommerce div.product div.images {
	display: flex;
	flex-direction: row-reverse;
	gap: 20px;
	padding-left: 10px;
}

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
	order: 2;
	flex: 1;
	min-width: 0;
}

.woocommerce div.product div.images .thumbnails-scroll-wrapper {
	order: 1;
	width: 108px;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 500px;
	position: relative;
}

/* Thumbnails scroll buttons positioning */

.scroll-btn {
	position: absolute;
	left: 63px;
	transform: translateX(-50%);
	pointer-events: auto;
	width: 0;
	height: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 1000;
	opacity: 1;
	display: block;
}

.scroll-up {
	top: -30px;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 16px solid var(--aqua);
}

.scroll-down {
	top: 520px;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 16px solid var(--aqua);
}

.scroll-btn:hover {
	/* transform: translateX(-50%) scale(1.2); */
}

.scroll-up:hover {
	/* border-bottom-color: #00cccc !important; */
}

.scroll-down:hover {
	/* border-top-color: #00cccc !important; */
}

.scroll-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	transform: translateX(-50%);
}

.scroll-up:disabled {
	border-bottom-color: white !important;
}

.scroll-down:disabled {
	border-top-color: white !important;
}

/* Target both old and new WooCommerce gallery structures */
.woocommerce div.product div.images .flex-control-thumbs,
.woocommerce div.product div.images .woocommerce-product-gallery__thumbs {
	order: 1;
	display: flex !important;
	flex-direction: column;
	gap: 12px;
	width: 108px;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li,
.woocommerce div.product div.images .woocommerce-product-gallery__thumbs li {
	width: 108px;
	height: 108px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--grey);
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.3s ease;
	display: block;
}

.woocommerce div.product div.images .flex-control-thumbs li:hover,
.woocommerce div.product div.images .flex-control-thumbs li.flex-active-slide,
.woocommerce
	div.product
	div.images
	.woocommerce-product-gallery__thumbs
	li:hover,
.woocommerce
	div.product
	div.images
	.woocommerce-product-gallery__thumbs
	li.active {
	border-color: var(--aqua);
}

.woocommerce div.product div.images .flex-control-thumbs li img,
.woocommerce
	div.product
	div.images
	.woocommerce-product-gallery__thumbs
	li
	img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Hide the default thumbnail navigation */
.woocommerce div.product div.images .flex-control-nav {
	display: none;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image a {
	outline-offset: -2px;
	aspect-ratio: 1/1;
	display: block;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image a img {
	aspect-ratio: 1/1;
	display: block;
	object-fit: contain;
	border: 1px solid var(--grey);
}

@media (max-width: 768px) {
	.woocommerce div.product div.summary {
		padding: 20px;
	}
	.woocommerce div.product div.images.woocommerce-product-gallery {
		padding: 20px;
	}

	/* WooCommerce product gallery - thumbnails to the left */
	.woocommerce div.product div.images {
		flex-direction: column;
	}

	.woocommerce div.product div.images .thumbnails-scroll-wrapper {
		order: 1;
		width: 100%;
		flex-shrink: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
		height: auto;
		position: relative;
	}

	.scroll-btn {
		display: none;
	}

	.woocommerce div.product div.images .flex-control-thumbs,
	.woocommerce div.product div.images .woocommerce-product-gallery__thumbs {
		flex-direction: row;
		flex-wrap: wrap;
		width: auto;
		padding: 0;
	}

	.woocommerce #content div.product div.images,
	.woocommerce #content div.product div.summary,
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary,
	.woocommerce-page #content div.product div.images,
	.woocommerce-page #content div.product div.summary,
	.woocommerce-page div.product div.images,
	.woocommerce-page div.product div.summary {
		float: none;
		width: 100%;
	}
}

/* temp */
.woocommerce .summary .price {
	display: none !important;
}

.woocommerce .summary .discount-code-section {
	display: none !important;
}

.woocommerce .summary .cart {
	display: none !important;
}

.woocommerce .summary .free-delivery-section {
	display: none !important;
}

.temp {
	padding-bottom: 40px;
	p {
		font-size: var(--font-3xl);
		margin-bottom: 10px;
	}
	a.button {
		color: var(--black);
		font-size: var(--font-base);
		font-family: var(--tstar-reg);
		background-color: var(--black);
		color: white;
		display: block;
		padding: 8px 25px 5px 25px;
		width: fit-content;
		border-radius: 9999px;
		text-decoration: none;
		line-height: 1;
		transition: all 0.3s ease;
	}
	a.button:hover {
		color: white;
		background-color: var(--aqua);
	}
}