/*
Theme Name: Flowio
Author: KingsDesign
Author URI: kingsdesign.com.au
Description: A block-based WordPress theme designed to provide a great editing experience that minimises the visual gap between the frontend and backend. This theme also has a focus on consistent spacing & frontend performance.
Version: 0.3
Text Domain: flowio
*/

/*
*  CSS TABLE OF CONTENTS
*
*  1.0 - Reset
*  2.0 - Fonts
*  3.0 - Custom Properties
*  4.0 - General Typography
*  5.0 - Areas
*    5.1 - Header
*    5.2 - Entry Content
*  6.0 - Utilities
*  7.0 - Buttons
*  8.0 - Gutenberg Conditionals
*/

/* -------------------------------------------------
1.0 Reset
------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Add default focus style */
*:focus {
	outline: 2px solid var(--primary-200);
	outline-offset: 2px;
}

/* Remove default padding */
ul,
ol {
	padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
	margin: 0;
}

/* Make images easier to work with */
img {
	width: 100%;
	height: auto;
	object-position: var(--focus);
	object-fit: cover;
	opacity: 0;
	overflow: hidden;
	transition: opacity 0.95s;
}

img.loaded {
	opacity: 1;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

button {
	padding: 0;
	cursor: pointer;
	border: none;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------
End Reset
------------------------------------------------- */

/* -------------------------------------------------
2.0 Font Imports
------------------------------------------------- */
@font-face {
	font-family: 'Poppins';
	src: local('Poppins Light'), local('Poppins-Light'),
		url('./fonts/Poppins-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: local('Poppins Regular'), local('Poppins-Regular'),
		url('./fonts/Poppins-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: local('Poppins Medium'), local('Poppins-Medium'),
		url('./fonts/Poppins-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
		url('./fonts/Poppins-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: local('Poppins Bold'), local('Poppins-Bold'),
		url('./fonts/Poppins-Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'),
		url('./fonts/Poppins-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Roboto';
	src: local('Roboto Bold'), local('Roboto-Bold'),
		url('./fonts/Roboto-Bold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
/* -------------------------------------------------
End Font Imports
------------------------------------------------- */

/* -------------------------------------------------
3.0 Custom Properties
------------------------------------------------- */
:root {
	--heading-font: 'Poppins', sans-serif;
	--body-font: 'Poppins', sans-serif;
	--logo-font: 'Roboto', sans-serif;
	--white: #fff;
	--black: #000;
	--gray-50: #f5f5f5;
	--gray-100: #ddd;
	--gray-200: #bebebe;
	--gray-300: #9d9d9d;
	--gray-400: #858585;
	--gray-500: #6a6a6a;
	--gray-600: #525252;
	--gray-700: #383838;
	--gray-800: #181818; /*Primary*/
	--gray-900: #111111;
	--primary-50: #ffd7bd;
	--primary-100: #ffd7bd;
	--primary-200: #ffc299;
	--primary-300: #ffa366;
	--primary-400: #ff7f2a; /*Primary*/
	--primary-500: #e05a00;
	--primary-600: #c74f00;
	--primary-700: #662900;
	--primary-800: #3d1800;
	--primary-900: #291000;
	--secondary-50: #f1f8fe;
	--secondary-100: #bdd7ef;
	--secondary-200: #96c1e9;
	--secondary-300: #66a5e1;
	--secondary-400: #388cdc;
	--secondary-500: #2273bf;
	--secondary-600: #0d59a1;
	--secondary-700: #093f71;
	--secondary-800: #062a4c;
	--secondary-900: #031526;
	--content-width: 87%;
	--w-3xs: 22.5rem;
	--w-2xs: 30rem;
	--w-xs: 33.5rem;
	--w-sm: 40rem;
	--w-md: 48rem;
	--w-lg: 60rem;
	--w-xl: 72rem;
	--w-2xl: 80rem;
	--w-3xl: 96rem;
	--w-4xl: 120rem;
	--w-full: 100%;
	--entry-top-margin: 4rem;
	--entry-bottom-margin: 0;
	--spacing: 1rem;
	--s-3xs: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 0.25);
	--s-2xs: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 0.5);
	--s-xs: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 0.75);
	--s-sm: clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem);
	--s-md: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 1.5);
	--s-lg: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 2);
	--s-xl: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 2.5);
	--s-2xl: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 3.5);
	--s-c1: clamp(3.5rem, 2vh + 6vw, 6.5rem);
	font-family: var(--body-font);
}
/* -------------------------------------------------
End Custom Properties
------------------------------------------------- */

/* -------------------------------------------------
4.0 General Typography
------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--heading-font);
	line-height: 1.2;
}

.fs-0,
h6 {
	font-size: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
}
.fs-1,
h5 {
	font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
}

.fs-2,
h4 {
	font-size: clamp(1.125rem, 1.09rem + 0.18vw, 1.25rem);
}
.fs-3,
h3 {
	font-size: clamp(1.25rem, 1.11rem + 0.71vw, 1.75rem);
}
.fs-4,
h2 {
	font-size: clamp(1.5rem, 1.29rem + 1.07vw, 2.25rem);
}
.fs-5,
h1 {
	font-size: clamp(1.75rem, 1.39rem + 1.79vw, 3rem);
}
.fs-6 {
	font-size: clamp(2.25rem, 1.82rem + 2.14vw, 3.75rem);
}

p,
a {
	line-height: 1.9;
}

.heading-font {
	font-family: var(--heading-font);
}

.body-font {
	font-family: var(--body-font);
}
.logo-font {
	font-family: var(--logo-font);
	font-size: 40px;
}

/* style lists */
ul,
ol {
	padding-left: 2rem;
	line-height: 1.75;
}

a.link-text {
	text-decoration: none;
	color: var(--black);
}
/* -------------------------------------------------
End General Typography
------------------------------------------------- */

/* -------------------------------------------------
5.0 Areas
------------------------------------------------- */
/* --------
5.1 Header
-------- */
.theme-header ul,
.theme-header ol {
	padding-left: 0;
}

.theme-header {
	width: 100%;
	color: white;
	background-color: var(--gray-900);
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-content {
	width: var(--content-width);
	padding: 1.5rem 0;
}

.header-content {
	max-width: var(--xxxl);
	display: flex;
	gap: 2rem;
	justify-content: space-between;
	align-items: center;
}
.header-tail {
	background: var(--primary-400);
	padding: 0.5rem 0;
}
.header-tail a {
	color: #fff;
}
.header-tail a:hover {
	color: var(--primary-100);
}
.header-tail .header-contact-info {
	display: flex;
	gap: 0.5rem;
	max-width: clamp(17rem, 30rem - 36vw, 25rem);
	margin-left: 7.5%;
	color: #fff;
	justify-content: space-between;
	font-size: 0.875rem;
}

.brand {
	color: white;
	text-decoration: none;
	display: flex;
	gap: 0.5rem;
	align-items: center;
	height: 2rem;
}

.brand > svg {
	height: 100%;
	transition: color 0.4s, opacity 0.4s, backdrop-filter 0.4s;
}

.brand > svg:nth-of-type(2) {
	height: 37%;
	display: none;
}

.brand:hover > svg,
.brand:active > svg {
	color: var(--secondary-200);
	opacity: 0.7;
	backdrop-filter: blur(20px);
}

.brand > div {
	margin-left: 0.75rem;
	font-size: 1.5rem;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 0.15em;
	color: white;
	display: none;
}

@media screen and (min-width: 38rem) {
	.brand > svg:nth-of-type(2) {
		display: block;
	}
}

.brand > div > span {
	font-weight: 900;
}

.curtain-menu-button {
	display: flex;
	padding: 0.25rem;
}

#curtain-menu {
	visibility: hidden;
	position: fixed;
	z-index: 10001;
	background: var(--primary-400);
	color: white;
	height: 100vh;
	width: 0;
	transition: visibility, width 0.3s ease-out;
	overflow-y: scroll;
}

.curtain-button-placer {
	max-width: var(--xxl);
	width: var(--content-width);
	position: relative;
	display: flex;
	justify-content: flex-end;
	margin: auto;
	z-index: 10002;
	top: 1.6em;
	right: 0.45rem;
}

#close-curtain-button {
	opacity: 0;
	transition: opacity 0.3s ease-out;
}

#curtain-menu-container {
	opacity: 0;
	width: var(--content-width);
	max-width: var(--width-medium);
	margin: auto;
	padding: 3rem 0;
	transition: opacity 0.3s ease;
}

#curtain-menu-container ul {
	font-size: 1.25rem;
	padding-left: 0;
}

#curtain-menu-container ul > * + * {
	margin-block-start: 0.6rem;
}

.menu-item {
	list-style: none;
	position: relative;
}

.menu-item a {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-weight: 600;
	font-size: 0.875rem;
	color: white;
	transition: color 0.3s;
}

.menu-item > a:hover,
a:active {
	color: var(--primary-300);
}

#curtain-menu-container .sub-menu {
	margin-left: 1rem;
	margin-block-start: 0.6rem;
	padding-left: 0.75rem;
	border-left: 2px solid var(--primary-100);
}

.navigation-items {
	display: flex;
	align-items: center;
}

.desktop-nav {
	display: none;
}

.desktop-nav > div > ul > li {
	display: flex;
}

.desktop-nav > div > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: flex-end;
	align-items: center;
}

.desktop-nav .sub-menu {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.4s;
	position: absolute;
	z-index: 11;
	background: rgba(23, 23, 23, 0.3);
	backdrop-filter: blur(8px);
	overflow: hidden;
	padding: 0.7rem 2rem;
	border-right: 6px solid var(--primary-400);
	right: -1rem;
	top: -0.75rem;
	text-align: end;
	display: flex;
	gap: 0.5rem;
	flex-direction: column;
	align-items: flex-end;
}

.desktop-nav .sub-menu a {
	color: white;
	transition: color 0.3s;
	display: block;
	width: max-content;
	max-width: 13rem;
}

.desktop-nav .sub-menu a:hover {
	color: var(--primary-300);
}

.desktop-nav .menu-item-has-children:hover > .sub-menu,
.desktop-nav .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

@media screen and (min-width: 48rem) {
	.desktop-nav {
		display: block;
	}
	#open-curtain-button {
		display: none;
	}
}

.header-buttons {
	display: flex;
	align-items: center;
}

.header-buttons > * + * {
	margin-left: 1rem;
}

.desktop-nav .menu-item-has-children {
	margin-right: 1rem;
	transition: color 0.3s;
}

.desktop-nav .menu-item-has-children > a {
	transition: color 0.3s;
}

.desktop-nav .menu-item-has-children:hover > a {
	color: rgba(0, 0, 0, 0);
}

.desktop-nav .menu-item-has-children:hover::after {
	opacity: 0;
}

.desktop-nav .menu-item-has-children::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 0.35rem solid transparent;
	border-right: 0.35rem solid transparent;
	border-top: 0.5rem solid var(--primary-400);
	position: absolute;
	top: 0.5rem;
	right: -1rem;
	transition: transform 0.2s, opacity 0.3s;
}

.desktop-nav .menu-item-has-children:hover::after,
.desktop-nav .menu-item-has-children:active::after,
.desktop-nav .menu-item-has-children:focus-within::after {
	transform: rotate(180deg);
}

/* --------
End Header
-------- */
/* --------
5.2 Entry Content
-------- */
div[class^='wp-block-lazy'] {
	width: 100%;
	max-width: 100%;
}

.entry-content {
	padding: var(--entry-top-margin) 0 var(--entry-bottom-margin);
}

.entry-bottom-padding {
	--entry-bottom-margin: 6rem;
}

.auto-child-width > * {
	max-width: var(--auto-child-max-width, var(--w-sm));
	width: var(--auto-child-width, var(--content-width));
	margin-inline-start: auto;
	margin-inline-end: auto;
}

p > a, li > a {
	color: var(--primary-700);
	transition: color 0.3s;
}

p > a:hover, li > a:hover,
p > a:focus, li > a:focus {
	color: var(--gray-500);
}

/* Ninja Forms */
.nf-form-layout .nf-before-form-content {
	border-bottom: 1px solid var(--primary-100);
	padding-bottom: 1rem;
}

.nf-form-layout .nf-form-content {
	padding: 0;
	margin-top: 1rem;
	max-width: var(--w-md);
}
.contact-form h2 {
	color: #fff;
	max-width: var(--w-md);
	margin: 0 auto;
}
.nf-form-layout .nf-form-content label {
	color: #fff;
}
.nf-form-1-cont {
	margin-top: 0;
}

.nf-before-form-content {
	border-bottom: none !important;
}
.nf-form-fields-required {
	display: none;
}

/* --------
End Entry Content
-------- */
/* --------
5.3 Footer
-------- */
.theme-footer .main-footer {
	background: var(--gray-900);
	color: white;
	display: grid;
	justify-content: center;
}

.theme-footer ul,
.theme-footer ol {
	padding-left: 0;
}

.footer-content {
	display: grid;
	padding: 6rem 0;
	margin: auto;
	max-width: var(--content-width);
	gap: 2rem;
}

.footer-content > .flow ul > * + * {
	margin-block-start: 0.75rem;
}

.theme-footer .map-section {
	background: var(--gray-900);
}
.map iframe {
	width: 100%;
}
.theme-footer .map-section .map-content {
	margin: 0 auto;
	color: white;
	display: flex;
	gap: 3rem;
	align-items: center;
	flex-wrap: wrap;
}

.theme-footer .map-section .map-content > * {
	flex: 24rem 1 1;
}

.footer-content a {
	color: white;
}
.footer-brand-social {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid #fff;
	margin-bottom: 1rem;
}
.footer-social {
	display: flex;
	gap: 0.25rem;
	align-items: end;
}
.footer-social a {
	display: flex;
	padding: 0.5rem;
	background: #fff;
	border-radius: 50%;
	color: var(--primary-400);
	transition: all 650ms;
}
.footer-social a:hover {
	color: #fff;
	background: var(--primary-400);
}
.footer-contact {
	display: grid;
}
.footer-content .stores .store-location {
	display: grid;
}
.footer-tail {
	background: var(--gray-800);
	width: 100%;
	color: #fff;
	text-align: center;
	padding: 1rem;
}
.footer-tail p {
	line-height: 1;
}
.footer-tail a {
	color: #fff;
}
/* @media screen and (min-width: 36rem) {
  .footer-content {
    grid-template-columns: 2fr 1fr;
  }
} */
@media screen and (min-width: 48rem) {
	.footer-content {
		grid-template-columns: 2fr 1fr;
	}
}

@media screen and (min-width: 60rem) {
	.footer-contact {
		/* grid-template-columns: repeat(auto-fit,minmax(14rem,1fr)); */
		grid-template-columns: 1fr 2fr;
		gap: 1rem;
	}
	.footer-content {
		grid-template-columns: 3fr 1fr;
	}
	.footer-content .stores .store-location {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
	.footer-content {
		/* grid-template-columns: 1.4fr 1fr 1.4fr 1fr; */
	}
}
/* --------
Emd Footer
-------- */

/* -------------------------------------------------
End Areas
------------------------------------------------- */
/* -------------------------------------------------
6.0 Utilities
------------------------------------------------- */
/* Flow */
.flow,
.inner-flow,
.ff-final {
	--flow: 2rem;
}

.flow > * + * {
	margin-block-start: var(--flow, 2rem);
}

.inner-flow > * + * {
	margin-block-start: var(--inner-flow, var(--flow, 2rem));
}
.no-flow .flow > * + * {
	margin-top: 0;
}

.flex-flow {
	display: flex;
	flex-direction: column;
	gap: var(--flow, 2rem);
}
.ff-final {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: end;
}
.flow-none {
	--flow: 0;
}

.flow-2xs {
	--flow: 0.25rem;
}

.flow-xs {
	--flow: 0.5rem;
}

.flow-sm {
	--flow: 1rem;
}

.flow-md {
	--flow: 1.5rem;
}

.flow-lg {
	--flow: 2rem;
}

.flow-xl {
	--flow: 2.5rem;
}

.flow-xxl {
	--flow: 3rem;
}

/* Margins */
.m-3xs {
	margin: var(--s-3xs);
}

.m-2xs {
	margin: var(--s-2xs);
}

.m-xs {
	margin: var(--s-xs);
}

.m-sm {
	margin: var(--s-sm);
}

.m-md {
	margin: var(--s-md);
}

.m-lg {
	margin: var(--s-lg);
}

.m-xl {
	margin: var(--s-xl);
}

.m-2xl {
	margin: var(--s-2xl);
}

.m-c1 {
	margin: var(--s-c1);
}

.m-none {
	margin: 0;
}

.my-3xs {
	margin-block-start: var(--s-3xs);
	margin-block-end: var(--s-3xs);
}

.my-2xs {
	margin-block-start: var(--s-2xs);
	margin-block-end: var(--s-2xs);
}

.my-xs {
	margin-block-start: var(--s-xs);
	margin-block-end: var(--s-xs);
}

.my-sm {
	margin-block-start: var(--s-sm);
	margin-block-end: var(--s-sm);
}

.my-md {
	margin-block-start: var(--s-md);
	margin-block-end: var(--s-md);
}

.my-lg {
	margin-block-start: var(--s-lg);
	margin-block-end: var(--s-lg);
}

.my-xl {
	margin-block-start: var(--s-xl);
	margin-block-end: var(--s-xl);
}

.my-2xl {
	margin-block-start: var(--s-2xl);
	margin-block-end: var(--s-2xl);
}

.my-c1 {
	margin-block-start: var(--s-c1);
	margin-block-end: var(--s-c1);
}

.my-none {
	margin-block-start: 0;
	margin-block-end: 0;
}

.mx-3xs {
	margin-inline-start: var(--s-3xs);
	margin-inline-end: var(--s-3xs);
}

.mx-2xs {
	margin-inline-start: var(--s-2xs);
	margin-inline-end: var(--s-2xs);
}

.mx-xs {
	margin-inline-start: var(--s-xs);
	margin-inline-end: var(--s-xs);
}

.mx-sm {
	margin-inline-start: var(--s-sm);
	margin-inline-end: var(--s-sm);
}

.mx-md {
	margin-inline-start: var(--s-md);
	margin-inline-end: var(--s-md);
}

.mx-lg {
	margin-inline-start: var(--s-lg);
	margin-inline-end: var(--s-lg);
}

.mx-xl {
	margin-inline-start: var(--s-xl);
	margin-inline-end: var(--s-xl);
}

.mx-2xl {
	margin-inline-start: var(--s-2xl);
	margin-inline-end: var(--s-2xl);
}

.mx-c1 {
	margin-inline-start: var(--s-c1);
	margin-inline-end: var(--s-c1);
}

.mx-auto {
	margin-inline-start: auto;
	margin-inline-end: auto;
}

.mt-3xs {
	margin-block-start: var(--s-3xs);
}

.mt-2xs {
	margin-block-start: var(--s-2xs);
}

.mt-xs {
	margin-block-start: var(--s-xs);
}

.mt-sm {
	margin-block-start: var(--s-sm);
}

.mt-md {
	margin-block-start: var(--s-md);
}

.mt-lg {
	margin-block-start: var(--s-lg);
}

.mt-xl {
	margin-block-start: var(--s-xl);
}

.mt-2xl {
	margin-block-start: var(--s-2xl);
}

.mt-c1 {
	margin-block-start: var(--s-c1);
}

.mt-none {
	margin-block-start: 0;
}

.mb-3xs {
	margin-block-end: var(--s-3xs);
}

.mb-2xs {
	margin-block-end: var(--s-2xs);
}

.mb-xs {
	margin-block-end: var(--s-xs);
}

.mb-sm {
	margin-block-end: var(--s-sm);
}

.mb-md {
	margin-block-end: var(--s-md);
}

.mb-lg {
	margin-block-end: var(--s-lg);
}

.mb-xl {
	margin-block-end: var(--s-xl);
}

.mb-2xl {
	margin-block-end: var(--s-2xl);
}

.mb-c1 {
	margin-block-end: var(--s-c1);
}

.mb-none {
	margin-block-end: 0;
}

.ml-3xs {
	margin-inline-start: var(--s-3xs);
}

.ml-2xs {
	margin-inline-start: var(--s-2xs);
}

.ml-xs {
	margin-inline-start: var(--s-xs);
}

.ml-sm {
	margin-inline-start: var(--s-sm);
}

.ml-md {
	margin-inline-start: var(--s-md);
}

.ml-lg {
	margin-inline-start: var(--s-lg);
}

.ml-xl {
	margin-inline-start: var(--s-xl);
}

.ml-2xl {
	margin-inline-start: var(--s-2xl);
}

.ml-c1 {
	margin-inline-start: var(--s-c1);
}

.ml-none {
	margin-inline-start: 0;
}

.mr-3xs {
	margin-inline-end: var(--s-3xs);
}

.mr-2xs {
	margin-inline-end: var(--s-2xs);
}

.mr-xs {
	margin-inline-end: var(--s-xs);
}

.mr-sm {
	margin-inline-end: var(--s-sm);
}

.mr-md {
	margin-inline-end: var(--s-md);
}

.mr-lg {
	margin-inline-end: var(--s-lg);
}

.mr-xl {
	margin-inline-end: var(--s-xl);
}

.mr-2xl {
	margin-inline-end: var(--s-2xl);
}

.mr-c1 {
	margin-inline-end: var(--s-c1);
}

.mr-none {
	margin-inline-end: 0;
}
/*Padding*/
.p-3xs {
	padding: var(--s-3xs);
}

.p-2xs {
	padding: var(--s-2xs);
}

.p-xs {
	padding: var(--s-xs);
}

.p-sm {
	padding: var(--s-sm);
}

.p-md {
	padding: var(--s-md);
}

.p-lg {
	padding: var(--s-lg);
}

.p-xl {
	padding: var(--s-xl);
}

.p-2xl {
	padding: var(--s-2xl);
}

.p-c1 {
	padding: var(--s-c1);
}

.p-none {
	padding: 0;
}

.py-3xs {
	padding-block-start: var(--s-3xs);
	padding-block-end: var(--s-3xs);
}

.py-2xs {
	padding-block-start: var(--s-2xs);
	padding-block-end: var(--s-2xs);
}

.py-xs {
	padding-block-start: var(--s-xs);
	padding-block-end: var(--s-xs);
}

.py-sm {
	padding-block-start: var(--s-sm);
	padding-block-end: var(--s-sm);
}

.py-md {
	padding-block-start: var(--s-md);
	padding-block-end: var(--s-md);
}

.py-lg {
	padding-block-start: var(--s-lg);
	padding-block-end: var(--s-lg);
}

.py-xl {
	padding-block-start: var(--s-xl);
	padding-block-end: var(--s-xl);
}

.py-2xl {
	padding-block-start: var(--s-2xl);
	padding-block-end: var(--s-2xl);
}

.py-c1 {
	padding-block-start: var(--s-c1);
	padding-block-end: var(--s-c1);
}

.py-none {
	padding-block-start: 0;
	padding-block-end: 0;
}

.px-3xs {
	padding-inline-start: var(--s-3xs);
	padding-inline-end: var(--s-3xs);
}

.px-2xs {
	padding-inline-start: var(--s-2xs);
	padding-inline-end: var(--s-2xs);
}

.px-xs {
	padding-inline-start: var(--s-xs);
	padding-inline-end: var(--s-xs);
}

.px-sm {
	padding-inline-start: var(--s-sm);
	padding-inline-end: var(--s-sm);
}

.px-md {
	padding-inline-start: var(--s-md);
	padding-inline-end: var(--s-md);
}

.px-lg {
	padding-inline-start: var(--s-lg);
	padding-inline-end: var(--s-lg);
}

.px-xl {
	padding-inline-start: var(--s-xl);
	padding-inline-end: var(--s-xl);
}

.px-2xl {
	padding-inline-start: var(--s-2xl);
	padding-inline-end: var(--s-2xl);
}

.px-c1 {
	padding-inline-start: var(--s-c1);
	padding-inline-end: var(--s-c1);
}

.px-auto {
	padding-inline-start: auto;
	padding-inline-end: auto;
}

.pt-3xs {
	padding-block-start: var(--s-3xs);
}

.pt-2xs {
	padding-block-start: var(--s-2xs);
}

.pt-xs {
	padding-block-start: var(--s-xs);
}

.pt-sm {
	padding-block-start: var(--s-sm);
}

.pt-md {
	padding-block-start: var(--s-md);
}

.pt-lg {
	padding-block-start: var(--s-lg);
}

.pt-xl {
	padding-block-start: var(--s-xl);
}

.pt-2xl {
	padding-block-start: var(--s-2xl);
}

.pt-c1 {
	padding-block-start: var(--s-c1);
}

.pt-none {
	padding-block-start: 0;
}

.pb-3xs {
	padding-block-end: var(--s-3xs);
}

.pb-2xs {
	padding-block-end: var(--s-2xs);
}

.pb-xs {
	padding-block-end: var(--s-xs);
}

.pb-sm {
	padding-block-end: var(--s-sm);
}

.pb-md {
	padding-block-end: var(--s-md);
}

.pb-lg {
	padding-block-end: var(--s-lg);
}

.pb-xl {
	padding-block-end: var(--s-xl);
}

.pb-2xl {
	padding-block-end: var(--s-2xl);
}

.pb-c1 {
	padding-block-end: var(--s-c1);
}

.pb-none {
	padding-block-end: 0;
}

.pl-3xs {
	padding-inline-start: var(--s-3xs);
}

.pl-2xs {
	padding-inline-start: var(--s-2xs);
}

.pl-xs {
	padding-inline-start: var(--s-xs);
}

.pl-sm {
	padding-inline-start: var(--s-sm);
}

.pl-md {
	padding-inline-start: var(--s-md);
}

.pl-lg {
	padding-inline-start: var(--s-lg);
}

.pl-xl {
	padding-inline-start: var(--s-xl);
}

.pl-2xl {
	padding-inline-start: var(--s-2xl);
}

.pl-c1 {
	padding-inline-start: var(--s-c1);
}

.pl-none {
	padding-inline-start: 0;
}

.pr-3xs {
	padding-inline-end: var(--s-3xs);
}

.pr-2xs {
	padding-inline-end: var(--s-2xs);
}

.pr-xs {
	padding-inline-end: var(--s-xs);
}

.pr-sm {
	padding-inline-end: var(--s-sm);
}

.pr-md {
	padding-inline-end: var(--s-md);
}

.pr-lg {
	padding-inline-end: var(--s-lg);
}

.pr-xl {
	padding-inline-end: var(--s-xl);
}

.pr-2xl {
	padding-inline-end: var(--s-2xl);
}

.pr-c1 {
	padding-inline-end: var(--s-c1);
}

.pr-none {
	padding-inline-end: 0;
}

/* Block Widths */
.mw-3xs {
	max-width: var(--w-3xs);
}

.mw-2xs {
	max-width: var(--w-2xs);
}

.mw-xs {
	max-width: var(--w-xs);
}

.mw-sm {
	max-width: var(--w-sm);
}

.mw-md {
	max-width: var(--w-md);
}

.mw-lg {
	max-width: var(--w-lg);
}

.mw-xl {
	max-width: var(--w-xl);
}

.mw-2xl {
	max-width: var(--w-2xl);
}

.mw-3xl {
	max-width: var(--w-3xl);
}

.mw-4xl {
	max-width: var(--w-4xl);
}

.mw-full {
	max-width: 100%;
}

.w-content {
	width: var(--content-width);
}

.w-full {
	width: 100%;
}

.cmw-3xs {
	--auto-child-max-width: var(--w-3xs);
}

.cmw-2xs {
	--auto-child-max-width: var(--w-2xs);
}

.cmw-xs {
	--auto-child-max-width: var(--w-xs);
}

.cmw-sm {
	--auto-child-max-width: var(--w-sm);
}

.cmw-md {
	--auto-child-max-width: var(--w-md);
}

.cmw-lg {
	--auto-child-max-width: var(--w-lg);
}

.cmw-xl {
	--auto-child-max-width: var(--w-xl);
}

.cmw-2xl {
	--auto-child-max-width: var(--w-2xl);
}

.cmw-3xl {
	--auto-child-max-width: var(--w-3xl);
}

.cmw-4xl {
	--auto-child-max-width: var(--w-4xl);
}

.cmw-full {
	--auto-child-max-width: 100%;
}

.cw-content {
	--auto-child-width: var(--content-width);
}

.cw-full {
	--auto-child-width: 100%;
}

/* Other Utilities */
.ta-l,
.has-text-align-left {
	text-align: left;
}

.ta-c,
.has-text-align-center {
	text-align: center;
}

.ta-r,
.has-text-align-right {
	text-align: right;
}

.fw-1 {
	font-weight: 100;
}

.fw-2 {
	font-weight: 200;
}

.fw-3 {
	font-weight: 300;
}

.fw-4 {
	font-weight: 400;
}

.fw-5 {
	font-weight: 500;
}

.fw-6 {
	font-weight: 600;
}

.fw-7 {
	font-weight: 700;
}

.fw-8 {
	font-weight: 800;
}

.fw-9 {
	font-weight: 900;
}

.stack {
	display: grid;
	grid-template-areas: 'stack';
	position: relative;
}

.stack > * {
	grid-area: stack;
	position: relative;
}

.stack > img {
	position: absolute;
	object-fit: cover;
	height: 100%;
}

.stack > .overlay {
	width: 100%;
	height: 100%;
	background: var(--overlay, rgba(0, 0, 0, 0.5));
}

.gridRowDefault {
	--grid-auto-rows: auto;
}

/* Colour Utilities */
.col-p-50 {
	color: var(--primary-50);
}

.col-p-100 {
	color: var(--primary-100);
}

.col-p-200 {
	color: var(--primary-200);
}

.col-p-300 {
	color: var(--primary-300);
}

.col-p-400 {
	color: var(--primary-400);
}

.col-p-500 {
	color: var(--primary-500);
}

.col-p-600 {
	color: var(--primary-600);
}

.col-p-700 {
	color: var(--primary-700);
}

.col-p-800 {
	color: var(--primary-800);
}

.col-p-900 {
	color: var(--primary-900);
}

.col-s-50 {
	color: var(--secondary-50);
}

.col-s-100 {
	color: var(--secondary-100);
}

.col-s-200 {
	color: var(--secondary-200);
}

.col-s-300 {
	color: var(--secondary-300);
}

.col-s-400 {
	color: var(--secondary-400);
}

.col-s-500 {
	color: var(--secondary-500);
}

.col-s-600 {
	color: var(--secondary-600);
}

.col-s-700 {
	color: var(--secondary-700);
}

.col-s-800 {
	color: var(--secondary-800);
}

.col-s-900 {
	color: var(--secondary-900);
}

.col-g-50 {
	color: var(--gray-50);
}

.col-g-100 {
	color: var(--gray-100);
}

.col-g-200 {
	color: var(--gray-200);
}

.col-g-300 {
	color: var(--gray-300);
}

.col-g-400 {
	color: var(--gray-400);
}

.col-g-500 {
	color: var(--gray-500);
}

.col-g-600 {
	color: var(--gray-600);
}

.col-g-700 {
	color: var(--gray-700);
}

.col-g-800 {
	color: var(--gray-800);
}

.col-g-900 {
	color: var(--gray-900);
}

.col-white,
.has-white-color {
	color: var(--white);
}

.col-black,
.has-black-color {
	color: var(--black);
}

.bg-p-50 {
	background: var(--primary-50);
}

.bg-p-100 {
	background: var(--primary-100);
}

.bg-p-200 {
	background: var(--primary-200);
}

.bg-p-300 {
	background: var(--primary-300);
}

.bg-p-400 {
	background: var(--primary-400);
}

.bg-p-500 {
	background: var(--primary-500);
}

.bg-p-600 {
	background: var(--primary-600);
}

.bg-p-700 {
	background: var(--primary-700);
}

.bg-p-800 {
	background: var(--primary-800);
}

.bg-p-900 {
	background: var(--primary-900);
}

.bg-s-50 {
	background: var(--secondary-50);
}

.bg-s-100 {
	background: var(--secondary-100);
}

.bg-s-200 {
	background: var(--secondary-200);
}

.bg-s-300 {
	background: var(--secondary-300);
}

.bg-s-400 {
	background: var(--secondary-400);
}

.bg-s-500 {
	background: var(--secondary-500);
}

.bg-s-600 {
	background: var(--secondary-600);
}

.bg-s-700 {
	background: var(--secondary-700);
}

.bg-s-800 {
	background: var(--secondary-800);
}

.bg-s-900 {
	background: var(--secondary-900);
}

.bg-g-50 {
	background: var(--gray-50);
}

.bg-g-100 {
	background: var(--gray-100);
}

.bg-g-200 {
	background: var(--gray-200);
}

.bg-g-300 {
	background: var(--gray-300);
}

.bg-g-400 {
	background: var(--gray-400);
}

.bg-g-500 {
	background: var(--gray-500);
}

.bg-g-600 {
	background: var(--gray-600);
}

.bg-g-700 {
	background: var(--gray-700);
}

.bg-g-800 {
	background: var(--gray-800);
}

.bg-g-900 {
	background: var(--gray-900);
}

.flex-layout {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap, 2rem);
	row-gap: var(--row-gap, var(--gap, 2rem));
	justify-content: var(--justify);
	align-items: var(--align);
}
.flex-layout > * {
	flex: var(--flex-base, 17rem) var(--flex-grow, 1) var(--flex-shrink, 1);
	max-width: var(--flex-child-max-width);
	min-width: var(--flex-child-min-width);
}
.fb-2 {
	--flex-base: 2rem;
}
.fb-4 {
	--flex-base: 4rem;
}
.fb-6 {
	--flex-base: 6rem;
}
.fb-8 {
	--flex-base: 8rem;
}
.fb-10 {
	--flex-base: 10rem;
}
.fb-12 {
	--flex-base: 12rem;
}
.fb-14 {
	--flex-base: 14rem;
}
.fb-16 {
	--flex-base: 16rem;
}
.fb-18 {
	--flex-base: 18rem;
}
.fb-20 {
	--flex-base: 20rem;
}
.fb-24 {
	--flex-base: 24rem;
}
.fb-28 {
	--flex-base: 28rem;
}
.fb-32 {
	--flex-base: 32rem;
}
.fb-40 {
	--flex-base: 40rem;
}
.gap-none {
	--gap: 0;
}
.gap-2xs {
	--gap: 0.25rem;
}
.gap-xs {
	--gap: 0.5rem;
}
.gap-sm {
	--gap: 1rem;
}
.gap-md {
	--gap: 1.5rem;
}
.gap-lg {
	--gap: 2rem;
}
.gap-xl {
	--gap: 2.5rem;
}
.gap-2xl {
	--gap: 3rem;
}
.row-gap-none {
	--row-gap: 0;
}
.row-gap-2xs {
	--row-gap: 0.25rem;
}
.row-gap-xs {
	--row-gap: 0.5rem;
}
.row-gap-sm {
	--row-gap: 1rem;
}
.row-gap-md {
	--row-gap: 1.5rem;
}
.row-gap-lg {
	--row-gap: 2rem;
}
.row-gap-xl {
	--row-gap: 2.5rem;
}
.row-gap-2xl {
	--row-gap: 3rem;
}

.mw-2 {
	max-width: 2rem;
}
.mw-4 {
	max-width: 4rem;
}
.mw-6 {
	max-width: 6rem;
}
.mw-8 {
	max-width: 8rem;
}
.mw-10 {
	max-width: 10rem;
}
.mw-12 {
	max-width: 12rem;
}
.mw-14 {
	max-width: 14rem;
}
.mw-16 {
	max-width: 16rem;
}
.mw-18 {
	max-width: 18rem;
}
.mw-20 {
	max-width: 20rem;
}
.mw-24 {
	max-width: 24rem;
}
.mw-28 {
	max-width: 28rem;
}
.mw-32 {
	max-width: 32rem;
}
.mw-40 {
	max-width: 40rem;
}

.fcmw-2 {
	--flex-child-max-width: 2rem;
}
.fcmw-4 {
	--flex-child-max-width: 4rem;
}
.fcmw-6 {
	--flex-child-max-width: 6rem;
}
.fcmw-8 {
	--flex-child-max-width: 8rem;
}
.fcmw-10 {
	--flex-child-max-width: 10rem;
}
.fcmw-12 {
	--flex-child-max-width: 12rem;
}
.fcmw-14 {
	--flex-child-max-width: 14rem;
}
.fcmw-16 {
	--flex-child-max-width: 16rem;
}
.fcmw-18 {
	--flex-child-max-width: 18rem;
}
.fcmw-20 {
	--flex-child-max-width: 20rem;
}
.fcmw-24 {
	--flex-child-max-width: 24rem;
}
.fcmw-28 {
	--flex-child-max-width: 28rem;
}
.fcmw-32 {
	--flex-child-max-width: 32rem;
}
.fcmw-40 {
	--flex-child-max-width: 40rem;
}

.h-full {
	height: 100%;
}
.grid-layout {
	display: grid;
	grid-template-columns: repeat(
		var(--col-fill, auto-fit),
		minmax(var(--col-min, 15rem), var(--col-max, 1fr))
	);
	grid-auto-rows: var(--grid-auto-rows, 1fr);
	gap: var(--gap, 2rem);
}
.justify-start {
	--justify: start;
}
.justify-center {
	--justify: center;
}
.justify-end {
	--justify: end;
}
.justify-around {
	--justify: space-around;
}
.justify-between {
	--justify: space-between;
}
.align-start {
	--align: start;
}
.align-center {
	--align: center;
}
.align-end {
	--align: end;
}
.align-around {
	--align: space-around;
}
.align-between {
	--align: space-between;
}
.as-start {
	align-self: start;
}
.as-center {
	align-self: center;
}
.as-end {
	align-self: end;
}
.js-start {
	justify-self: start;
}
.js-center {
	justify-self: center;
}
.js-end {
	justify-self: end;
}

/* -------------------------------------------------
End Utilities
------------------------------------------------- */

/* -------------------------------------------------
Additional Utilities
------------------------------------------------- */
.justify-center {
	justify-content: center;
}
.justify-between {
	justify-content: space-between;
}
.justify-around {
	justify-content: space-around;
}
.justify-evenly {
	justify-content: space-evenly;
}
.d-none {
	display: none;
}
.d-block {
	display: block;
}
.d-flex-wrap {
	display: flex;
	flex-wrap: wrap;
}
.d-flex-nowrap {
	display: flex;
	flex-wrap: nowrap;
}
.d-grid {
	display: grid;
}
/* -------------------------------------------------
End Additional Utilities
------------------------------------------------- */
/* -------------------------------------------------
7.0 Buttons
------------------------------------------------- */
.btn,
.btn-read-more,
.linkbtn > a {
	color: var(--color, white);
	background: var(--background, var(--primary-400));
	border: var(--border, 2px solid var(--primary-400));
	border-radius: var(--borderRadius, 0);
	padding: var(--padding, 0.5rem 1rem);
	transform: var(--transform, none);
	display: inline-flex;
	width: max-content;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 900;
	font-size: 0.875rem;
	letter-spacing: 0.15em;
	transition: background 0.55s, color 0.55s, border 0.55s;
	text-align: center;
}

.btn:hover,
.linkbtn > a:hover {
	color: var(--hColor, white);
	background: var(--hBackground, none);
	border: var(--hBorder, 2px solid white);
	border-radius: var(--hBorderRadius, 0);
	padding: var(--hPadding, 0.5rem 1rem);
	transform: var(--hTransform, none);
	cursor: pointer;
}

.btn-read-more:hover {
	color: var(--fColor, var(--primary-500));
	background: var(--fBackground, none);
	border: var(--fBorder, 2px solid var(--primary-500));
	border-radius: var(--fBorderRadius, 0);
	padding: var(--fPadding, 0.5rem 1rem);
	transform: var(--fTransform, none);
	outline: pointer;
}

.btn:focus,
.linkbtn > a:focus {
	color: var(--fColor, var(--primary-500));
	background: var(--fBackground, none);
	border: var(--fBorder, 2px solid var(--primary-500));
	border-radius: var(--fBorderRadius, 0);
	padding: var(--fPadding, 0.5rem 1rem);
	transform: var(--fTransform, none);
	outline: none;
}

.btn:active,
.linkbtn > a:active {
	color: var(--aColor, var(--primary-500));
	background: var(--aBackground, none);
	border: var(--aBorder, 2px solid var(--primary-500));
	border-radius: var(--aBorderRadius, 0);
	padding: var(--aPadding, 0.5rem 1rem);
	transform: var(--aTransform, none);
}

.header-button {
	--color: white;
	--hColor: white;
	--fColor: white;
	--aColor: var(--primary-300);
	--background: var(--primary-300);
	--hBackground: var(--primary-400);
	--fBackground: var(--primary-400);
	--aBackground: var(--primary-400);
	--border: none;
	--hBorder: none;
	--fBorder: none;
	--aBorder: none;
	--padding: 0.25rem;
	--hPadding: 0.25rem;
	--fPadding: 0.25rem;
	--aPadding: 0.25rem;
}

.outline-button {
	--color: white;
	--hColor: var(--primary-300);
	--fColor: var(--primary-300);
	--aColor: var(--primary-300);
	--background: none;
	--hBackground: none;
	--fBackground: none;
	--aBackground: none;
	--border: 2px solid var(--primary-400);
	--hBorder: 2px solid white;
	--fBorder: 2px solid white;
	--aBorder: 2px solid white;
}
.outline-button-white {
	--color: white;
	--hColor: var(--primary-300);
	--fColor: var(--primary-300);
	--aColor: var(--primary-300);
	--background: none;
	--hBackground: none;
	--fBackground: none;
	--aBackground: none;
	--border: 2px solid white;
	--hBorder: 2px solid var(--primary-300);
	--fBorder: 2px solid var(--primary-300);
	--aBorder: 2px solid var(--primary-300);
}
.outline-button-orange .outline-button,
.outline-button-orange {
	--color: var(--primary-400);
	--hColor: var(--primary-300);
	--fColor: var(--primary-300);
	--aColor: var(--primary-300);
	--background: none;
	--hBackground: none;
	--fBackground: none;
	--aBackground: none;
	--border: 2px solid var(--primary-400);
	--hBorder: 2px solid var(--primary-300);
	--fBorder: 2px solid var(--primary-300);
	--aBorder: 2px solid var(--primary-300);
}

.primary-button {
	--color: white;
	--hColor: var(--primary-400);
	--fColor: var(--primary-400);
	--aColor: var(--primary-400);
	--background: var(--primary-400);
	--hBackground: var(--primary-200);
	--fBackground: var(--primary-200);
	--aBackground: var(--primary-200);
	--border: 2px solid var(--primary-400);
	--hBorder: 2px solid var(--primary-400);
	--fBorder: 2px solid var(--primary-400);
	--aBorder: 2px solid var(--primary-400);
}
html body input[id^='nf-'][type='button'] {
	background: transparent;
	border: 2px solid #fff;
	font-weight: 500;
	cursor: pointer;
	height: auto;
	padding-left: 2rem;
	padding-right: 2rem;
}
html body input[id^='nf-'][type='button']:hover {
	color: var(--primary-500);
	border: 2px solid #fff;
	background: #fff;
}
/* -------------------------------------------------
End Buttons
------------------------------------------------- */
/* -------------------------------------------------
8.0 Gutenberg Conditionals
------------------------------------------------- */
/* Top of Page Blocks */
.entry-content > .first-block-negative-margin:first-child {
	margin-block-start: calc(-1 * var(--entry-top-margin));
}
/* -------------------------------------------------
End Gutenberg Conditionals
------------------------------------------------- */
/* -------------------------------------------------
Buttons Block
------------------------------------------------- */

.buttons-block {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: var(--bbj);
	align-items: var(--bba);
}
.bbj-start {
	--bbj: start;
}
.bbj-center {
	--bbj: center;
}
.bbj-end {
	--bbj: end;
}
.bba-start {
	--bba: start;
}
.bba-center {
	--bba: center;
}
.bba-end {
	--bba: end;
}

/* -------------------------------------------------
End Buttons Block
------------------------------------------------- */

/* gallery block */
.block-gallery {
}
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0.5rem;
}
.gallery-grid.first-break {
}
.gallery-grid.second-break {
}
.grid-item {
}
.gallery-grid img {
	/* aspect-ratio: 1; */
}
/* subscription */
.subscription form input:not([type='submit']) {
	padding: 0.25rem 1rem;
	width: 100%;
	border: none;
}
.subscription form button[type='submit'] {
	width: 100%;
	text-align: center;
	justify-content: center;
}

.svg_selection svg {
	height: 3rem;
	width: 3rem;
}
.svg_selection > div {
	display: flex;
	justify-content: center;
	margin-bottom: 2rem;
}
.svg_selection .tas-map svg {
	width: 100%;
	height: auto;
	max-width: 25rem;
}
.wp-block-gallery.has-nested-images {
	max-width: var(--w-2xl);
}

html .wp-block-flowio-accordion summary.btn:before {
	height: fit-content;
}

.wp-block-flowio-accordion > .btn {
	text-align: left;
}

.mw-10 {
	max-width: 10rem;
}

/* -------------------------------------------------
Search Form
------------------------------------------------- */
.search-form {
	display: grid;
	grid-template-columns: 1fr auto;
	height: fit-content;
}

.search-form .search-field {
	height: 100%;
	width: 100%;
	border: 1px solid var(--gray-200);
	border-radius: 0;
	padding: 0.5rem;
}
/* -------------------------------------------------
End Search Form
------------------------------------------------- */

.white-link a {
	color: white;
}

#nf-form-3-cont .nf-field-label label {color: #000;}
.nf-field-label .nf-label-span {color: #fff;}
.list-radio-wrap ul {
	display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}