:root {
	--font-family-suavity: 'The Suavity', sans-serif;
	--font-family-anton: 'anton', sans-serif;
	--font-family-inter: 'inter-variable', sans-serif;

	/* Colours */
	--ek-purple: #A94DC5;
	--ek-purple-opacity: #A94DC5CC;

	--ek-black: #000000;
	--ek-black-opacity: #000000CC;

	--ek-white: #FFFFFF;
	--ek-white-opacity: #FFFFFFCC;
}

@font-face {
	font-family: 'The Suavity';
	src: url('/fonts/The_Suavity.woff2') format('woff2'),
		 url('/fonts/The_Suavity.woff') format('woff'),
		 url('/fonts/The_Suavity.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.anton {
	font-family: var(--font-family-anton);
	font-weight: 400;
	font-style: normal;
}

.inter {
	font-family: var(--font-family-inter);
	font-variation-settings: "slnt" 0, "wght" 700;
}

.suavity {
	font-family: var(--font-family-suavity);
	font-weight: 400;
	font-style: normal;
}

html, body {
	scroll-behavior: auto!important;
	scroll-padding: 122px!important;
}

body {
	overflow: unset!important;
	padding-right: 0!important;
	margin-top: 0; 
	font-family: var(--font-family-inter);
	font-variation-settings: "slnt" 0, "wght" 400;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-family-anton);
	text-transform: uppercase;
}

@media(min-width:0px) {
	.aspect-ratio-1-1 {
		aspect-ratio: 1/1;
		object-fit: cover;
	}

	.aspect-ratio-16-9 {
		aspect-ratio: 16/9;
		object-fit: cover;
	}

	.aspect-ratio-9-16 {
		aspect-ratio: 9/16;
		object-fit: cover;
	}

	.aspect-ratio-4-3 {
		aspect-ratio: 4/3;
		object-fit: cover;
	}

	.aspect-ratio-8-9 {
		aspect-ratio: 8/9;
		object-fit: cover;
	}

	.aspect-ratio-4-5 {
		aspect-ratio: 4/5;
		object-fit: cover;
	}
}

@media(min-width:576px) {
	.aspect-ratio-1-1--sm  {
		aspect-ratio: 1/1;
		object-fit: cover;
	}

	.aspect-ratio-16-9--sm {
		aspect-ratio: 16/9;
		object-fit: cover;
	}

	.aspect-ratio-9-16--sm {
		aspect-ratio: 9/16;
		object-fit: cover;
	}

	.aspect-ratio-4-3--sm {
		aspect-ratio: 4/3;
		object-fit: cover;
	}

	.aspect-ratio-8-9--sm {
		aspect-ratio: 8/9;
		object-fit: cover;
	}

	.aspect-ratio-4-5--sm {
		aspect-ratio: 4/5;
		object-fit: cover;
	}
}

@media(min-width:768px) {
	.aspect-ratio-1-1--md  {
		aspect-ratio: 1/1;
		object-fit: cover;
	}

	.aspect-ratio-16-9--md {
		aspect-ratio: 16/9;
		object-fit: cover;
	}

	.aspect-ratio-9-16--md {
		aspect-ratio: 9/16;
		object-fit: cover;
	}

	.aspect-ratio-4-3--md {
		aspect-ratio: 4/3;
		object-fit: cover;
	}

	.aspect-ratio-8-9--md {
		aspect-ratio: 8/9;
		object-fit: cover;
	}

	.aspect-ratio-4-5--md {
		aspect-ratio: 4/5;
		object-fit: cover;
	}
}

@media(min-width:992px) {
	.aspect-ratio-1-1--lg  {
		aspect-ratio: 1/1;
		object-fit: cover;
	}

	.aspect-ratio-16-9--lg {
		aspect-ratio: 16/9;
		object-fit: cover;
	}

	.aspect-ratio-9-16--lg {
		aspect-ratio: 9/16;
		object-fit: cover;
	}

	.aspect-ratio-4-3--lg {
		aspect-ratio: 4/3;
		object-fit: cover;
	}

	.aspect-ratio-8-9--lg {
		aspect-ratio: 8/9;
		object-fit: cover;
	}

	.aspect-ratio-4-5--lg {
		aspect-ratio: 4/5;
		object-fit: cover;
	}
}

@media(min-width:1200px) {
	.aspect-ratio-1-1--xxl  {
		aspect-ratio: 1/1;
		object-fit: cover;
	}

	.aspect-ratio-16-9--xxl {
		aspect-ratio: 16/9;
		object-fit: cover;
	}

	.aspect-ratio-9-16--xxl {
		aspect-ratio: 9/16;
		object-fit: cover;
	}

	.aspect-ratio-4-3--xxl {
		aspect-ratio: 4/3;
		object-fit: cover;
	}

	.aspect-ratio-8-9--xxl {
		aspect-ratio: 8/9;
		object-fit: cover;
	}

	.aspect-ratio-4-5--xxl {
		aspect-ratio: 4/5;
		object-fit: cover;
	}
}

/* CSS specific to iOS devices */ 
@supports (-webkit-touch-callout: none) {
	.ek-homepage-banner {
		background-attachment: inherit;
		background-position: top;
		background-size: cover;
		background-repeat: no-repeat;
		align-items: flex-end;
	}
}

/* CSS for other than iOS devices */ 
@supports not (-webkit-touch-callout: none) {
	.ek-homepage-banner {
		background-attachment: fixed;
		background-position: top;
		background-size: cover;
		background-repeat: no-repeat;
		align-items: center;
	}
}

/* Ensure overlay covers the full parent */
.ek-homepage-banner {
	position: relative;
	overflow: hidden;
	height: 100vh;
}

.ek-bg-overlay::before, .ek-bg-overlay::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
}

.ek-bg-overlay-black::after {
	background-color: rgba(0, 0, 0, .5) !important;
}

.ek-bg-overlay-inner {
	z-index: 3;
	position: relative;
}

.ek-homepage-static {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
	min-width: 300px;
	text-align: center;
}

.ek-bg-purple {
	background-color: var(--ek-purple);
	color: var(--ek-white);
}

.ek-bg-black {
	background-color: var(--ek-black);
	color: var(--ek-white);
}

.ek-bg-white {
	background-color: var(--ek-white);
	color: var(--ek-black);
}

.btn {
	font-family: var(--font-family-inter);
	font-variation-settings: "slnt" 0, "wght" 700;
}

.ek-btn-purple {
	background: var(--ek-purple);
	color: var(--ek-white);
}

.ek-btn-purple:hover, .ek-btn-purple:active, .ek-btn-purple:focus {
	background: var(--ek-purple-opacity)!important;
	color: var(--ek-white);
}

.ek-btn-black {
	background: var(--ek-black);
	color: var(--ek-white);
}

.ek-btn-black:hover, .ek-btn-black:active, .ek-btn-black:focus {
	background: var(--ek-black-opacity)!important;
	color: var(--ek-white);
}

.ek-btn-white {
	background: var(--ek-white);
	color: var(--ek-black);
}

.ek-btn-white:hover, .ek-btn-white:active, .ek-btn-white:focus {
	background: var(--ek-white-opacity)!important;
	color: var(--ek-black);
}