:root{
	--brand:#ba3636;
	--brand-secondary: #81BC18;
	--brand-secondary-dark: #5D9524;
	--brand-dark:#891B1B;
	--shadow:#14141428;
	--muted:#6b6b6b;
	--bg:#FFF6E2;
	--nav-bg:#c8b1963b;
	--font: 'Figtree', Inter, system-ui, -apple-system, Roboto, Arial;
	--bold-font: 'Roboto Flex';
	--none: #00000000;
	font-family: var(--font);
}

html, body{
	margin: 0;
	background-color: var(--bg);
	font-family: var(--font);
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

.coloured{
	color: var(--brand);
}
.colored2{
	color: var(--brand-secondary);
}

header{
	margin: 60px;
	display: flex;
	justify-content: space-between;
}
.hero > .left{
	display: flex;
	flex-direction: column;
	justify-content: end;
	z-index: 2;
	gap: 48px;
}
.hero > .right{
	flex-basis: 30%;
}

.hero > .right > img{
	width: 500px;
	height: fit-content;
	scale: 1.3;
	transform: translateY(25px);
	z-index: 1;
}

h3{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0px;
	line-height: 0.9;
}

h3::before,
h3::after {
	content: "";
	display: inline-block;
	width: 80px;
	height: 3px;
	background: black;
	position: relative;
}
h3.coloured::before,
h3.coloured::after{
	background: var(--brand);
}
h3.dark::before,
h3.dark::after{
	background: white;
}

h3::before {
	margin-right: 10px;
}

h3::after {
	margin-left: 10px;
}


button{
	font-family: var(--font);
	font-size: 16px !important;
	font-weight: 600 !important;
	cursor: pointer;
}


.cta:hover{
	border: solid 3px var(--brand-secondary);
	background-color: var(--brand-secondary-dark);
}.cta.dark:hover{
	border: solid 3px var(--brand);
	background-color: var(--brand-dark);
}


a{
	color: inherit;
	text-decoration-color: var(--none);
}
h1{
	margin: 0;
	font-family: var(--bold-font);
	font-weight: 1000;
	font-size: 64px;
	display: flex;
	flex-direction: column;
	line-height: 0.8;
	width: fit-content;
}
h1 > .small{
	font-size: 32px;
}

h2{
	font-size: 32px;
	line-height: 0.8;
	margin: 0;
	font-family: var(--bold-font);
	font-weight: 900;
}

.subtitle{
	display: flex;
	flex-direction: column;
	margin-top: 30px;
	justify-content: center;
	align-items: center;
}

h2.small{
	font-size: 20px;
}


h2.description{
	display: flex;
	gap: 30px;
	background-color: var(--brand);
	padding: 10px;
	margin: 10px 0;
	width: fit-content;
}

div.words{
	display: flex;
	flex-direction: column;
	height: 25.6px;
	overflow-y: hidden;
	color: white;
}
.words > span{
	animation: slide 4s linear infinite;
}

@keyframes slide {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-300%);
	}
}

.button-container{
	display: flex;
	justify-content: center;
}


/* NAV */
nav{
	z-index: 4;
	user-select: none;
	width: 100%;
	display: flex;
	position: fixed;
	top: 0;
	margin: 0;
	transition: all 0.27s ease;
	height: 60px;
	border: var(--none) solid 1px ;
	border-bottom: solid 1px var(--muted);
	background-color: var(--bg);
}
nav.scrolled{
	margin: 1vw 1%;
	border-radius: 16px;
	border: solid 1px rgba(255, 255, 255, 0.336);
	background-color: var(--nav-bg);
	backdrop-filter: blur(12px);
	width: 98%;
	filter: drop-shadow(0 0 0.75rem gray);
}

.nav-inner{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all 0.27s ease;
	filter: none;
}

/* LOGO */
.logo{display: flex;user-select: none;cursor: pointer;align-items: center;padding-left: 10px; transition: all 0.27s ease;}
.logo-text{font-family: var(--bold-font);font-weight: 1000;display: flex;flex-direction: column;justify-content: center;line-height: 0.8;letter-spacing: 0px;transition: all 0.17s ease;}
.logo > img {height: 48px;transition: all 0.27s ease;}
.logo:hover > img{rotate: -5deg;scale: 0.95;}
.logo:hover > .logo-text{line-height: 0.9;}
nav.scrolled > div > .logo{padding-left: 32px;}

/* NAV LINKS */
.nav-links{
	list-style: none;
	display: flex;
	justify-content: space-around;
	width: 50%;
	align-items: center;
	transition: all 0.27s ease;
	font-size: 20px;
	font-weight: 600;
}
.nav-links > * > a {
	transition: all 0.27s ease;
}
.nav-links > * > a:hover {
	text-decoration-color: var(--brand);
}

.cta{display: flex;justify-content: center;align-items: center;border: solid 3px var(--none); border-radius: 8px;height: fit-content;line-height: 0.8;background-color: var(--brand-secondary);color: white;font-weight: 700;font-size: 24px;padding: 10px;box-shadow: 0 3px 8px var(--shadow);transition: all 0.27s ease;}
.cta.dark{background-color: var(--brand);}
.nav-inner > .cta{background-color: var(--none); border: solid 3px var(--brand);color: var(--brand);margin-right: 10px;}
nav.scrolled > .nav-inner > .cta{background-color: var(--brand);color: white;margin-right: 32px;}
nav.scrolled > .nav-inner > .cta:hover{background-color: var(--brand-dark);}
nav > .nav-inner > .cta:hover{background-color: var(--brand); color: white;}

p{
	font-size: 20px;
	text-align: center;
	font-weight: 340;
	opacity: 0.85;
	width: 75%;
}


section{
	display: flex;
}

main > section{
	margin: 32px 0;
	width: 100%;
	flex-direction: column;
	gap: 16px;
	padding: 32px 0;
	justify-content: space-around;
}
main > section.dark{
	padding: 32px 0;
	background-color: var(--brand-dark);
	border-radius: 16px;
	filter: drop-shadow(0 0 0.75rem gray);
	color: white;
}

.horizontal{
	flex-direction: row;
}

main > section > h2{
	font-weight: 1000;
}

section.centered{
	align-items: center;
}

.graphic{
	width: 30vw;
	height: auto;
	filter: drop-shadow(0 0 0.75rem gray);
	margin-left: 60px;
}

h2#services-title{
	display: flex;
	flex-direction: column;
	width: fit-content;
}
div.center{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

footer{
	display: grid;
	width: 100%;
	background-color: var(--brand-dark);
	border-radius: 16px 16px 0 0;
	color: white;
	padding: 32px 0;
}footer > p{
	width: 100%;
}


div:has(> details){
	width: 80%;
}

details{
	box-shadow: 0 4px 3px var(--shadow);
	border-radius: 12px;
	margin: 12px 0;
	box-sizing: content-box;
}
details:hover{
	background-color: var(--nav-bg);
}
summary{
	user-select: none;
	cursor: pointer;
	transition: all 0.27s ease;
	padding: 12px;
	width: fit-content;
}
summary:hover{
	text-decoration-color: var(--brand);
}
summary::marker{
	color: var(--brand);
}

h2.center{
		text-align: center;
	}

input[type=radio]{
	display: none;
}
.faq:has(input[type=radio]:checked){
	height: fit-content;
}.faq:has(input[type=radio]:checked)::before{
	rotate: 90deg;
}
.faqs{
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 80%;
	margin-bottom: 64px;
}.faqs > .faq {
	height: 28.8px;
	overflow-y: hidden;
	box-shadow: 0 3px 3px var(--shadow);
	padding: 12px;
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.27s ease;
	font-weight: 700;
	cursor: pointer;
	font-size: 24px;
}.faq:hover{
	background-color: var(--nav-bg);
}.faq::before{
	content: '=';
	position: absolute;
	color: var(--brand);
	transition: all 0.27s ease;
}.faq > .question{
	margin-left: 24px;
	width: fit-content;
}
.faq > .answer {
	width: inherit;
}
.form-section{
	flex-direction: row;
}
form{
	background-color: var(--brand-dark);
	padding: 32px;
	border-radius: 8px;
	display: grid;
	grid-template-rows: 1fr 1fr 2fr 2fr;
	scale: 1.5;
	box-shadow: 0 3px 3px var(--shadow);
	gap: 12px;
	user-select: none;
}
input{
	outline: none;
	background-color: var(--none);
	color: white;
	font-family: var(--font);
	border: solid 1px var(--brand);
	border-radius: 2px;
	height: 24px;
	padding: 4px;
	line-height: 0.8;
	height: 19px;
	flex: 1;
}textarea{
	outline: none;
	background-color: var(--none);
	color: white;
	font-family: var(--font);
	border: solid 1px var(--brand);
	border-radius: 2px;
	resize: none;
	width: 100%;
	padding: 4px;
}::placeholder{
	color: var(--brand);
}form > div {
	display: flex;
	gap: 12px;
}
p.paragraph{
	width: 450px;
	text-align: center;
}

.submit-container{
	display: flex;
	margin-top: 12px;
	justify-content: space-between;
}.submit-container > span{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
}


.pricing-wrapper {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 32px 0;
	flex-direction: column;
}

.pricing-container {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	padding-bottom: 20px;
	width: 70%;
	justify-content: space-around;
	filter: drop-shadow(0 0 0.25rem var(--brand));
}

.pricing-container::-webkit-scrollbar {
	height: 8px;
}
.pricing-container::-webkit-scrollbar-thumb {
	background: var(--brand);
	cursor: pointer;
	border-radius: 4px;
}

.pricing-card {
	width: 240px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--brand-dark);
	flex-direction: column;
	border-radius: 15px;
	padding: 20px;
	flex-shrink: 0;
}

.pricing-card > h2{
	color: white;
	padding-bottom: 12px;
	border-bottom: solid 2px white;
	width: 100%;
	text-align: center;
}

.price {
	width: 100%;
	font-size: 2rem;
	font-weight: bold;
	color: var(--brand-secondary);
	opacity: 1;
}

.price span {
	font-size: 1rem;
	color: var(--brand-secondary-dark);
}

ul.features {
	width: 100%;
	list-style: '- ';
	padding: 0;
	margin-left: 25px;
	color: white;
	height: 150px;
}

ul.features > li.feature {
	margin-bottom: 8px;
}
.swipe-hint{
	display: none;
}





@media (max-width: 1200px) {
	.hidden {
		display: none;
	}
	h1{
		font-size: 40px;
		text-align: center;
	}h1 > small{
		text-align: center;
		font-size: 24px;
	}h3{
		font-size: 16px;
	}
	h3::before,
	h3::after {
	width: 20px;
	}header{
		margin: 80px 10px 10px 10px;
		justify-content: space-around;
	}.subtitle{
		margin-top: -16px;
	}h2{
		font-size: 24px;
	}h2.small{
		font-size: 16px;
	}form{
		scale: 1;
		box-shadow: none;
		gap: 4px;
	}.form-section{
		flex-direction: column;
	}form > div{
		gap: 8px;
	}p.paragraph{
		width: 100%;
	}.faq:hover{
	background-color: var(--none);
	}.swipe-hint{
		display: inline-block;
	}.faqs > .faq{
		font-size: 12px;
		height: 14.4px;
		margin: none;
	}p{
		font-size: 16px;
	}
}