@font-face {
	font-family: "Kirsty";
	src: url("../fonts/kirsty.woff2") format("woff2");
}
@font-face {
	font-display: swap;
	font-family: "Inter";
	font-weight: 400;
	src: url("/fonts/inter-v19-latin-regular.woff2") format("woff2");
}
@font-face {
	font-display: swap;
	font-family: "Inter";
	font-weight: 500;
	src: url("../fonts/inter-v19-latin-500.woff2") format("woff2");
}
@font-face {
	font-display: swap;
	font-family: "Inter";
	font-weight: 600;
	src: url("../fonts/inter-v19-latin-600.woff2") format("woff2");
}
/* -------------------------------------------------------------------------- */
/*                                Global Styles                               */
/* -------------------------------------------------------------------------- */
/* Icons from https://www.streamlinehq.com/icons/plump-solid-free?icon=ico_oyL1DtiGN27pB1YR */
:root {
	--color-background: rgba(155, 215, 255, 0.5);
	--color-main: #60935d;
	--color-accent: #fdca40;
	--color-accent-hover: #ffd256;
	--color-black: rgb(34, 32, 33);
	--color-blackdata: 34, 32, 33;
	--color-white: #fff;
	--ff-h: "Kirsty", "Georgia", serif;
	--ff: "Inter", "Arial", sans-serif;
 	--ffb: "Inter", "Arial", sans-serif;
	--h1-font: normal 500 clamp(2rem, 1.478rem + 2.609vw, 5rem) / 1.1
		var(--ff-h);
	--hp-font: normal 600 clamp(1.25rem, 1.12rem + 0.652vw, 2rem) / 1.1
		var(--ff);
	--nav-font: normal 500 clamp(1.25rem, 1.12rem + 0.652vw, 2rem) / 1.1
		var(--ff-h);
	--h2-font: normal 500 clamp(1.5rem, 1.1522rem + 1.7391vw, 3.5rem) / 1.1 var(--ff-h);
	--h3-font: normal 500 clamp(1.5rem, 1.413rem + 0.4348vw, 2rem) / 1.1
		var(--ff);
	--p-font: normal 400 clamp(1.25rem, 1.2065rem + 0.2174vw, 1.5rem) / 1.5 var(--ff);
	--spacing-unit: clamp(0.25rem, calc(0.119rem + 0.652vw), 1rem);
	--margin-xxs: calc(var(--spacing-unit) / 4);
	--margin-xs: calc(var(--spacing-unit) / 2);
	--margin-s: var(--spacing-unit);
	--margin-m: calc(var(--spacing-unit) * 2);
	--margin-l: calc(var(--spacing-unit) * 3);
	--margin-xl: calc(var(--spacing-unit) * 4);
	--margin-xxl: calc(var(--spacing-unit) * 7);
	--borderrad: 25px;
}
body {
	margin: 0;
	padding: 0;
	background: linear-gradient(
		to bottom,
		rgba(155, 215, 255, 0.5) 0%,
		rgba(240, 249, 255, 0.5) 100%
	);
	overflow-x: hidden;
}
img, picture, video, canvas {
	display: block;
	max-width: 100%;
}
p {
	text-wrap: pretty;
}
h1, h2, h3 {
	text-wrap: balance;
}
*, *:before, *:after {
	box-sizing: border-box;
}
* {
	margin: 0;
}
ul {
    list-style: none;
}
.accessibility-skip {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: -1111111;
}
.container {
	width: 100%;
}
.section {
	width: 100%;
	box-sizing: border-box;
}
.content-grid {
    display: grid;
	grid-template-columns: [full-width-start] var(--margin-l) [breakout-start] var(--margin-xxl) [content-start] 1fr [content-end] var(--margin-xxl) [breakout-end] var(--margin-l) [full-width-end];
    position: relative;
    margin-bottom: calc(6*var(--margin-s));
}
.content-grid > * {
    grid-column: content;
}
.content-grid > .breakout {
    grid-column: breakout;
}
.full-width > * {
    grid-column: full-width;
}
/* -------------------------------------------------------------------------- */
/*                               Scroll Watcher                               */
/* -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		.scroll-watcher {
			height: 10px;
			position: fixed;
			top: 0;
			z-index: 1000;
			background-color: none;
			width: 100%;
			scale: 0 1;
			animation: scroll-watcher linear;
			animation-timeline: scroll();
			transform-origin: left;
		}
		@keyframes scroll-watcher {
			to {
				scale: 1 1;
			}
		}
		@keyframes fadeinout {
			0%,
			100% {
				scale: 0.95;
				opacity: 0;
			}
			15%,
			95% {
				scale: 1;
				opacity: 1;
			}
		}
		.scroll-effect {
			animation: fadeinout linear forwards;
			animation-timeline: view();
		}
	}
}
/* -------------------------------------------------------------------------- */
/*                                   Button                                   */
/* -------------------------------------------------------------------------- */
.center-button a {
	background-color: var(--color-accent);
	position: relative;
	display: inline-block;
	padding: var(--margin-m) var(--margin-xl);
	border-radius: 999px;
	color: var(--color-black);
	font: var(--hp-font);
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 4px 15px rgba(var(--color-blackdata), 0.2);
	transition: all 0.3s ease;
}
.center-button a:hover {
	background-color: var(--color-accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(var(--color-blackdata), 0.3);
}
.center-button {
	text-align: center;
}
/* -------------------------------------------------------------------------- */
/*                                Section Tags                                */
/* -------------------------------------------------------------------------- */
.section-tag {
    font: var(--h2-font);
    transition: transform .5s ease;
    line-height: 1;
    grid-column: breakout-start;
    align-self: start;
    justify-self: center;
}
.section-tag:hover {
    animation: jiggle .4s ease-in-out;
}
@keyframes jiggle {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(6deg);}
    50% {transform: rotate(-4deg);}
    75% {transform: rotate(2deg);}
    100% {transform: rotate(0deg);}
}
.section-title {
	font: var(--h2-font);
	color: var(--color-black);
	position: relative;
	padding-bottom: 0.25rem;
    display: inline-block;
}
.section-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: -1px;
	width: 101%;
	height: 3px;
	background-color: var(--color-accent);
	border-radius: 2px;
}
.section-subtitle {
	font: var(--p-font);
	color: var(--color-black);
	opacity: 0.85;
	/* max-width: 50ch; */
}
.section-header .content-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    /* align-items: start; */
    column-gap: var(--margin-s);
    margin-bottom: var(--margin-m);
}
.section-text, .review-section-cards, .center-button {
    grid-column: content-start;
}
/* -------------------------------------------------------------------------- */
/*                                 Navigation                                 */
/* -------------------------------------------------------------------------- */
#navigation {
	position: relative;
	z-index: 100;
}
#navigation .container {
	background-color: var(--color-main);
	box-shadow: 1px 3px 10px rgba(var(--color-blackdata), 0.25);
	display: flex;
	align-items: center;
	gap: calc(1.5 * var(--margin-s));
}
#navigation .nav-mobile-logo {
    display: none;
}
#navigation .mobile-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
}
#navigation .nav {
	width: 100%;
	padding: 1rem 0;
}
#navigation .nav-logo {
	max-width: 15rem;
}
#navigation .logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
#navigation .nav-ul-wrapper {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}
#navigation .nav-ul {
	width: 100%;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
#navigation .nav-li {
	list-style: none;
	place-self: center;
}
#navigation .nav-li-link {
	font-size: clamp(0.875rem, 1vw, 1rem);
	text-decoration: none;
	margin: 0;
	color: var(--color-white);
	display: block;
	position: relative;
	font: var(--nav-font);
	margin: auto;
}
#navigation .nav-li-link:before {
	content: "";
	width: 0%;
	height: 2px;
	background: var(--color-accent);
	opacity: 1;
	position: absolute;
	display: block;
	bottom: 0rem;
	left: 0;
	transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1),
	text-shadow 200ms ease-in-out;
}
#navigation .nav-li-link:hover {
	text-shadow: 0px 0px 20px rgba(var(--color-blackdata), 0.25);
}
#navigation .nav-li-link:hover:before {
	width: 101%;
}
#navigation .nav-li-link.nav-active:before {
	width: 101%;
	background: var(--color-accent-hover);
}
/* -------------------------------------------------------------------------- */
/*                      Highlight Cards & Media Scroller                      */
/* -------------------------------------------------------------------------- */
.media-scroller {
  display: grid;
  grid-column: full-width;
  grid-template-columns: inherit;
  padding-block: var(--margin-m);
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.media-scroller:-webkit-scrollbar {
    inline-size: 0 !important;
    display: none;
}
.scroll-wrapper {
    grid-column: content;
    display: flex;
    align-items: stretch;
    gap: calc(1.5*var(--margin-s));
}
.scroll-wrapper::after {
    content: "";
    flex: 0 0 var(--margin-xxl);
    pointer-events: none;
    align-self: stretch;
}
.highlight-card:first-child {
    scroll-snap-align: center;
}
.highlight-card {
  display: flex;
  flex-direction: column;
    flex: 0 0 auto;
  scroll-snap-align: start;
  width: 23%;
  border-radius: var(--borderrad);
  box-shadow: 0 4px 8px rgba(var(--color-blackdata), 0.1);
  transition: 200ms ease-in-out;
}
.highlight-card:hover {
  transform: translateY(-2px) scale(1.015);
  transition: 200ms ease-in-out;
  box-shadow: 4px 8px 20px rgba(var(--color-blackdata), 0.25);
  position: relative;
  z-index: 25;
}
.review-card {
    aspect-ratio: 1 / 1;
}
/* -------------------------------------------------------------------------- */
/*                               Review Section                               */
/* -------------------------------------------------------------------------- */
.review-card {
	background-color: var(--color-white);
	box-shadow: 1px 3px 10px rgba(var(--color-blackdata), 0.25);
	border-radius: var(--borderrad);
	aspect-ratio: 1 / 1;
    width: 21%;
	justify-content: start;
	border: none;
	transition: 200ms ease-in-out;
}
.review-card:hover {
	transform: scale(1.01) translateY(-4px);
	transition: 200ms ease-in-out;
	box-shadow: 4px 8px 20px rgba(var(--color-blackdata), 0.25);
}
.review-card-stars {
	margin-bottom: var(--margin-m);
}
.review-card-stars svg {
	max-width: 25px;
	max-height: 25px;
    width: clamp(1rem, 0.902rem + 0.489vw, 1.563rem)
}
.review-card-stars path {
	fill: var(--color-accent);
}
.review-card p {
	font: var(--p-font);
	margin-top: 0;
    color: black;
	margin-bottom: 0;
}
.review-card-space {
	margin: var(--margin-m);
}
.review-card-message {
	padding-bottom: 1rem;
}
.review-card-name {
	text-align: right;
    margin-bottom: auto;
}
.review-card:nth-child(even) {
	background-color: #fefefe;
}
/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */
footer {
	position: relative;
	z-index: 100;
}
footer .container {
	background-color: var(--color-main);
	box-shadow: 1px 3px 10px rgba(var(--color-blackdata), 0.25);
}
.footer-content {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: space-around;
}
.footer-info {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: auto;
	padding: calc(1.5 * var(--margin-s));
}
.footer-info p {
	margin: 0;
}
.footer-logo {
    aspect-ratio: 1920 / 1080;
	max-height: 5rem;
	margin: 0 auto 0 0;
	padding: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	z-index: 10;
}
.footer-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.footer-address {
	margin-left: auto;
}
.footer-address,
.footer-number {
	display: flex;
	align-items: center;
	color: var(--color-white);
	font: var(--p-font);
	gap: var(--margin-s);
}
.footer-address svg,
.footer-number svg {
	width: 3rem;
	height: auto;
}
.footer-address svg path,
.footer-number svg path {
	fill: var(--color-white);
}
.footer-copyright h3 {
	text-align: center;
	color: var(--color-white);
	font: var(--p-font);
    margin: 0 auto var(--margin-s) auto;
}
footer a {
	font: var(--p-font);
	color: var(--color-white);
	text-decoration: none;
	transition: color 150ms ease-in-out, text-decoration 150ms ease-in-out;
}
footer a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}
/* -------------------------------------------------------------------------- */
/*                                 Tablet View                                */
/* -------------------------------------------------------------------------- */
@media screen and (max-width: 67rem) {
/* ---------------------------- Mobile Navigation --------------------------- */
	#navigation {
		position: relative;
		top: 0;
		z-index: 100;
        width: 100%;
		margin-top: 0;
		padding: 0;
        margin: 0;
	}
    #navigation .nav {
        padding: .5rem 0;
    }
    #navigation .nav-mobile {
        display: flex;
        justify-content: space-between;
        padding: 0 .5rem 0 1rem;
    }
    #navigation .nav-mobile-logo {
        display: inline-block;
        width: 6rem;
    }
	#navigation .mobile-toggle {
		display: block;
		position: relative;
		z-index: 101;
	}
	#navigation .mobile-burger-menu {
		width: 2rem;
		height: 25px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		transition: all 0.3s ease;
	}
    #navigation .nav-li-logo {
        display: none;
    }
	#navigation .line1,
	.line2,
	.line3 {
		width: 100%;
		height: 3px;
		background-color: var(--color-white);
		border-radius: 3px;
		transition: all 0.3s ease;
		transform-origin: center;
	}
	nav.open .mobile-burger-menu {
		transform: translateX(10px);
	}
	nav.open .mobile-toggle .line1 {
		transform: rotate(45deg) translate(0px, 15px);
	}
	nav.open .mobile-toggle .line2 {
		opacity: 0;
		transform: translateX(-10px);
	}
	nav.open .mobile-toggle .line3 {
		transform: rotate(-45deg) translate(0px, -16px);
	}
	nav .nav-ul-wrapper {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background-color: var(--color-main);
		border-radius: 0 0 var(--borderrad) var(--borderrad);
		box-shadow: 1px 3px 10px rgba(var(--color-blackdata), 0.25);
		transform: translateY(-100%);
		pointer-events: none;
		transition: transform 0.3s ease-in-out;
		z-index: -500;
		display: flex;
		flex-direction: column;
		padding-top: 3rem;
	}
	nav.open .nav-ul-wrapper {
		transform: translateY(-2rem);
		z-index: -500;
		pointer-events: auto;
	}
    .no-transition {
        transition: none !important;
    }
	#navigation .nav-ul {
        display: flex;
		flex-direction: column;
		align-items: center;
        gap: 1rem;
		margin: 0;
		/* padding: var(--margin-m) 0; */
	}
	#navigation .nav-li {
		padding: var(--margin-s) 0;
		width: 100%;
		text-align: center;
	}
	#navigation .nav-li:last-child {
		padding-bottom: var(--margin-l);
	}
	#navigation .nav-li-link {
		margin: 0;
		font-size: clamp(1.5rem, 3vw, 1.25rem);
	}
	#navigation .nav-active {
		text-decoration: underline solid var(--color-accent);
	}
	#navigation .nav-li-link:hover {
		text-shadow: none;
	}
	#navigation .nav-li-link:hover:before {
		width: 0%;
	}
	#navigation .nav-li-link.nav-active:before {
		width: 0%;
		background: var(--color-accent-hover);
	}  
}

@media screen and (max-width: 76rem) {
	:root {
		--borderrad: 16px;
	}
	body {
		overflow-x: hidden;
	}
	.center-button a {
		padding: 1rem;
		margin-bottom: 0;
		margin-top: 1rem;
	}
    .section-tag {
        display: none;
    }
    .section-text, .scroll-wrapper {
        grid-column: breakout;
    }
    /* --------------------------------- Reviews -------------------------------- */
    .review-card-space {
        padding: var(--margin-xl);
    }
    .highlight-card {
		min-width: 15rem;
	}
	/* --------------------------------- Footer --------------------------------- */
	.footer-info {
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		gap: var(--margin-m);
		margin: var(--margin-m);
		padding: calc(1.5 * var(--margin-s));
	}
	.footer-copyright {
		padding: 0 var(--margin-m);
	}
	.footer-logo {
		display: none;
	}
	.footer-address,
	.footer-number {
		margin: auto auto auto 0;
		display: flex;
		align-items: center;
		color: var(--color-white);
		font: var(--p-font);
		gap: var(--margin-m);
	}
	.footer-address svg,
	.footer-number svg {
		width: 1.5rem;
		height: auto;
	}
}

/* ------------------- Small Tablet: iPad Mini, Galaxy Tab ------------------ */
@media screen and (max-width: 54rem) and (min-width: 35rem) {
    .review-card {
        min-width: 20rem;
    }
    .review-card-space {
        padding: var(--margin-l);
    }
}

/* ------------------- Large Tablet: iPad Air. iPad Pro ------------------ */
@media screen and (max-width: 76rem) and (min-width: 54rem) {
    .review-card {
        min-width: 22rem;
    }
    .review-card-space {
        padding: var(--margin-m);
    }
}