@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root {
	--width-full: 0;
	--width-xl: max(clamp(15px, 6vw, 60px), calc(50% - 920px));
	--width-l: max(clamp(15px, 6vw, 60px), calc(50% - 840px));
	--width-m: max(clamp(15px, 6vw, 60px), calc(50% - 600px));
	--width-s: max(clamp(15px, 6vw, 60px), calc(50% - 430px));
	--padding-l: clamp(15px, 7vw, 150px);
	--padding-m: clamp(15px, 4vw, 100px);
	--padding-s: clamp(15px, 2vw, 50px);
	--gap-xl: clamp(22px, 3.3vw, 80px);
	--gap-l: clamp(20px, 2vw, 60px);
	--gap-m: clamp(15px, 2vw, 40px);
	--gap-s: clamp(10px, 2vw, 20px);
	--gap-xs: clamp(5px, 1vw, 10px);
	--border-radius-l: 50px;
	--border-radius-m: 20px;
	--border-radius-s: 10px;
	--border-radius-xs: 5px;
	/*Colors*/
	--error: red;
	--white: #FFFFFF;
	--deep-grey: #231F20;
	--medium-grey: #383233;
	--light-grey: #D6D6D6;
	--synoptics-dark-pink: #B72E54;
	--synoptics-light-pink: #CF698A;
	--synoptics-extra-light-pink: #FFCADF;
	--syngene-pink: #AF003D;
	--syngene-light-pink: #CF698A;
	--synbiosis-pink: #C6004B;
	--synbiosis-light-pink: #FF619D;
	--fistreem-blue: #1A7CA2;
	--fistreem-light-blue: #93DDFA;
	--gallenkamp-purple: #5E4C98;
	--gallenkamp-light-purple: #DED3FF;
	--white-15: rgba(255, 255, 255, 0.15);
	/* WooCommerce colours */
	--woo-white-smoke: #FAFAFA;
	--woo-grey: #939393;
	--woo-mid-grey: #BDBDBD;

	--primary: var(--synoptics-dark-pink);
	--secondary: var(--synoptics-light-pink);
	--tertiary: var(--synoptics-extra-light-pink);
}

body, textarea, input, select, p, ol, ul, li {
	font-family: "Manrope", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--deep-grey);
}

ol, ul {
	list-style-position: inside;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .hero {
	font-family: "Manrope", sans-serif;
	font-weight: 300;
}

.hero {
	font-size: clamp(40px, 7vw, 100px);
	line-height: 1;
}

h1, .h1 {
	font-size: clamp(32px, 6vw, 55px);
	line-height: 1.2;
}

h2, .h2 {
	font-size: clamp(32px, 5.4vw, 55px);
	line-height: 1.2;
}

h3, .h3 {
	font-size: clamp(30px, 4.8vw, 45px);
	line-height: 1.2;
}

h4, .h4 {
	font-size: clamp(25px, 3.6vw, 35px);
	line-height: 1.1;
}

h5, .h5 {
	font-size: clamp(22px, 2.4vw, 25px);
	line-height: 1.2;
}

h6, .h6 {
	font-size: clamp(20px, 2vw, 22px);
	line-height: 1;
}

.large-text {
	font-size: clamp(22px, 3vw, 30px);
}

.x-large-text {
	font-size: clamp(32px, 4.5vw, 50px);
}

.small-text {
	font-size: 16px;
}

.light-text {
	font-weight: 300;
}

.regular-text {
	font-weight: 400;
}

.semi-bold-text {
	font-weight: 600;
}

strong, b {
	font-weight: 700;
}

.minus-margin {
	margin-bottom: 0;
}

.minus-margin + * {
	margin-top: 5px;
}

.underline {
	text-decoration: underline;
}

a {
	color: var(--primary);
	font-weight: 700;
	text-decoration: none;
	transition: color 0.3s ease-in-out;
}

a:hover {
	text-decoration: underline;
	transition: color 0.3s ease-in-out;
}

.alignleft {
	float: left;
	margin-right: 20px;
}

.alignright {
	float: right;
	margin-left: 20px;
}

.aligncenter {
	margin: auto;
	text-align: center;
	display: block;
}

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

img.display_inline {
	display: inline-block;
	margin: 4px;
}

div.wp-caption {
	max-width: 100%;
	display: inline-block;
}

p.wp-caption-text {
	background-color: #f7f7f7;
	color: #808080;
	padding: 16px 25px;
	font-size: 18px;
	font-style: italic;
}

.button {
	font-family: "Manrope", sans-serif;
	font-size: 18px;
	padding: 15px 20px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--white);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.72px;
	background: var(--primary);
	border: 1px solid var(--primary);
	border-radius: var(--border-radius-l);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	position: relative;
	&:before {
		content: "";;
		width: 20px;
		height: 20px;
		background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='none'%3E%3Cpath fill='%23fff' d='M16.142 1.929a1 1 0 0 0-1-1h-9a1 1 0 1 0 0 2h8v8a1 1 0 0 0 2 0v-9ZM1.707 16.779 15.85 2.635l-1.414-1.414L.293 15.364l1.414 1.414Z'/%3E%3C/svg%3E");
		transition: all 0.3s ease;
	}
	&:hover {
		background: var(--primary);
		text-decoration: none;
		transition: all 0.3s ease-in-out;
		&:before {
			transform: rotateZ(45deg);
		}
	}
}

.button.outline {
	background: transparent;
	color: var(--primary);
	&:before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 25 25'%3E%3Cpath fill='%23B72E54' d='M24.7 2.4c0-.8-.7-1.5-1.5-1.5H9.7a1.5 1.5 0 0 0 0 3h12v12a1.5 1.5 0 0 0 3 0V2.4ZM3.1 24.7 24.3 3.5l-2.1-2.2L.9 22.5l2.2 2.2Z'/%3E%3C/svg%3E");
	}
}

.button.white {
	background: var(--white-15);
	border-color: var(--white-15);
	&:before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='none'%3E%3Cpath fill='%23B72E54' d='M16.142 1.929a1 1 0 0 0-1-1h-9a1 1 0 1 0 0 2h8v8a1 1 0 0 0 2 0v-9ZM1.707 16.779 15.85 2.635l-1.414-1.414L.293 15.364l1.414 1.414Z'/%3E%3C/svg%3E");
	}
	&.outline {
		background: transparent;
		border-color: var(--white);
	}
}

.button.dark {
	background: var(--deep-grey);
	border-color: var(--deep-grey);
	&:before {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 17 17'%3E%3Cpath fill='%23fff' d='M16.6 2c0-.6-.5-1-1-1h-9a1 1 0 0 0 0 2h8v8a1 1 0 1 0 2 0V2ZM2 16.7 16.3 2.6l-1.4-1.4L.7 15.4l1.4 1.4Z'/%3E%3C/svg%3E");
	}
	.outline {
		background: transparent;
		color: var(--deep-grey);
		border-color: var(--deep-grey);
		&:before {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 17 17'%3E%3Cpath fill='%23231F20' d='M16.6 2c0-.6-.5-1-1-1h-9a1 1 0 0 0 0 2h8v8a1 1 0 1 0 2 0V2ZM2 16.7 16.3 2.6l-1.4-1.4L.7 15.4l1.4 1.4Z'/%3E%3C/svg%3E");
		}
	}
}

.button.icon_button {
	padding: 12px;
	aspect-ratio: 1 / 1;
	border-radius: var(--border-radius-s);
	margin: 0;
}

@media (width <= 700px) {
	.button.icon_button {
		width: 35px;
		height: 35px;
		padding: 8px;
		&:before {
			background-size: 20px;
		}
	}
}

@media (width <= 450px) {
	.button.icon_button {
		min-width: 0;
	}
}

.mce-content-body a.button[data-mce-selected] {
	padding: 8px 20px;
	margin: 0;
	box-shadow: none;
	border-radius: 0;
}

.mce-content-body a.button.white {
	background: #ddd !important;
}

/* bullet points */
ul.check_ul {
	list-style: none;
	padding: 0;
}

ul.check_ul > li {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 10px;
}

ul.check_ul > li:last-child {
	margin-bottom: 0;
}

ul.check_ul > li::before {
	content: '';
	margin-right: 15px;
	min-width: 20px;
	min-height: 20px;
	background: center / 16px 12px no-repeat url("data:image/svg+xml,%3Csvg width='16' height='13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5.43 12.23-5.2-5.2a.8.8 0 0 1 0-1.13l1.14-1.13a.8.8 0 0 1 1.13 0L6 8.27l7.5-7.5a.8.8 0 0 1 1.13 0l1.14 1.13a.8.8 0 0 1 0 1.13l-9.2 9.2a.8.8 0 0 1-1.14 0Z' fill='%23FF0000'/%3E%3C/svg%3E");
}

.mce-content-body span[style="color: #ffffff;"] {
	color: #ddd !important;
}

@media ( min-width: 451px) {
	.button:not(:last-child) {
		margin: 0 1rem 1rem 0;
	}
}

@media (max-width: 450px) {
	.button {
		padding: 15px 20px;
		box-sizing: border-box;
	}
	.button:not(:last-child) {
		margin-bottom: 1rem;
	}
}