/*

------------------------------------------
------------------------------------------

----- Fonts

------------------------------------------
------------------------------------------	

*/

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

/*

------------------------------------------
------------------------------------------

----- Variables

------------------------------------------
------------------------------------------	

*/

:root {
	
	/* Primary color */
	
	--color-primary-background: #ffa500;
	--color-primary-background-gradient-top: #ffa500;
	--color-primary-background-gradient-middle: #ffa500;
	--color-primary-background-gradient-bottom: #fe6e01;
	--color-primary-background-border: rgba(180, 83, 9, 0.35);
	--color-primary-background-shadow: transparent;	
	--color-primary-foreground: #fff;
	--color-primary-foreground-shadow: 0 1px 1px rgba(120, 45, 0, 0.28);
	
	/* Primary color - Active (used for hover/active states) */
	
	--color-primary-active-background: #ffbf00;
	--color-primary-active-background-gradient-top: #ffbf00;
	--color-primary-active-background-gradient-middle: #ffbf00;
	--color-primary-active-background-gradient-bottom: #ff8101;	
	--color-primary-active-background-border: rgba(180, 83, 9, 0.35);
	--color-primary-active-background-shadow: transparent;	
	--color-primary-active-foreground: #fff;
	--color-primary-active-foreground-shadow: 0 1px 1px rgba(120, 45, 0, 0.28);
	
	/* Secondary color */
	
	--color-secondary-background: #3f3e3e;
	--color-secondary-background-gradient-top: #3f3e3e;
	--color-secondary-background-gradient-middle: #3f3e3e;
	--color-secondary-background-gradient-bottom: #3b3b3b;
	--color-secondary-background-border: rgba(255, 255, 255, 0.14);
	--color-secondary-background-shadow: transparent;
	--color-secondary-foreground: #ffffff;
	--color-secondary-foreground-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
	
	/* Secondary color - Active (used for hover/active states) */
	
	--color-secondary-active-background: #636262;
	--color-secondary-active-background-gradient-top: #636262;
	--color-secondary-active-background-gradient-middle: #636262;
	--color-secondary-active-background-gradient-bottom: #595959;	
	--color-secondary-active-background-border: rgba(255, 255, 255, 0.14);
	--color-secondary-active-background-shadow: transparent;	
	--color-secondary-active-foreground: #ffffff;
	--color-secondary-active-foreground-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);

	/* Tertiary color */
	
	--color-tertiary-background: #eeecec;
	--color-tertiary-background-gradient-top: #eeecec;
	--color-tertiary-background-gradient-middle: #eeecec;
	--color-tertiary-background-gradient-bottom: #e5e2e2;
	--color-tertiary-background-border: rgba(36, 49, 65, 0.12);	
	--color-tertiary-background-shadow: transparent;
	--color-tertiary-foreground: #243141;
	--color-tertiary-foreground-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
	
	/* Tertiary color - Active (used for hover/active states) */
	
	--color-tertiary-active-background: #f7f5f5;
	--color-tertiary-active-background-gradient-top: #f7f5f5;
	--color-tertiary-active-background-gradient-middle: #f7f5f5;
	--color-tertiary-active-background-gradient-bottom: #f6efef;	
	--color-tertiary-active-background-border: rgba(36, 49, 65, 0.12);
	--color-tertiary-active-background-shadow: transparent;	
	--color-tertiary-active-foreground: #243141;
	--color-tertiary-active-foreground-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);	
	
	/* Muted color */
	
	--color-muted-background: rgba(255, 145, 0, 0.08);
	--color-muted-background-gradient-top: rgba(255, 145, 0, 0.08);
	--color-muted-background-gradient-middle: rgba(255, 145, 0, 0.08);
	--color-muted-background-gradient-bottom: rgba(255, 145, 0, 0.08);
	--color-muted-background-border: rgba(255, 145, 0, 0.18);	
	--color-muted-background-shadow: transparent;
	--color-muted-foreground: var(--color-primary-background);
	--color-muted-foreground-shadow: transparent;
	
	/* Muted color - Active (used for hover/active states) */
	
	--color-muted-active-background: rgba(255, 145, 0, 0.14);
	--color-muted-active-background-gradient-top: rgba(255, 145, 0, 0.14);
	--color-muted-active-background-gradient-middle: rgba(255, 145, 0, 0.14);
	--color-muted-active-background-gradient-bottom: rgba(255, 145, 0, 0.14);	
	--color-muted-active-background-border: rgba(255, 145, 0, 0.32);
	--color-muted-active-background-shadow: transparent;	
	--color-muted-active-foreground: var(--color-primary-background);
	--color-muted-active-foreground-shadow: transparent;		
	
	/* Box color */
	
	--color-box-background: #f5f6f9;
	--color-box-background-gradient-top: #f5f6f9;
	--color-box-background-gradient-middle: #f5f6f9;
	--color-box-background-gradient-bottom: #f5f6f9;
	--color-box-background-border: #e8e9eb;	
	--color-box-background-shadow: 0 6px 18px rgba(15, 23, 42, 0.035);
	--color-box-background-divider: #e7e7e7;
	--color-box-foreground: var(--color-body);
	--color-box-foreground-shadow: #fff;	
	--color-box-foreground-bold: #243141;
	--color-box-foreground-bold-shadow: #fff;	
	--color-box-head-background: var(--color-gradient-2-background);
	--color-box-head-background-gradient-top: var(--color-gradient-2-background-gradient-top);
	--color-box-head-background-gradient-middle: var(--color-gradient-2-background-gradient-middle);
	--color-box-head-background-gradient-bottom: var(--color-gradient-2-background-gradient-bottom);	
	--color-box-head-background-border: var(--color-gradient-2-background-border);
	--color-box-head-foreground: var(--color-gradient-2-foreground);
	--color-box-head-foreground-shadow: var(--color-gradient-2-foreground);
	--color-box-head-foreground-bold: var(--color-gradient-2-foreground-bold);
	--color-box-head-foreground-bold-shadow: var(--color-gradient-2-foreground-bold-shadow);	
	--color-box-footer-background: #e7e7e7;
	--color-box-footer-background-gradient-top: #e7e7e7;
	--color-box-footer-background-gradient-middle: #e7e7e7;
	--color-box-footer-background-gradient-bottom: #e7e7e7;	
	--color-box-footer-background-border: #dfdfdf;
	--color-box-footer-foreground: #3f3e3e;
	--color-box-footer-foreground-shadow: #3f3e3e;	
	--color-box-footer-foreground-bold: #000;
	--color-box-footer-foreground-bold-shadow: #000;
	
	/* Box color - Active (used for hover/active states) */
	
	--color-box-active-background: #eeecec;
	--color-box-active-background-gradient-top: #eeecec;
	--color-box-active-background-gradient-middle: #eeecec;
	--color-box-active-background-gradient-bottom: #eeecec;
	--color-box-active-background-border: #dedede;	
	--color-box-active-background-shadow: var(--color-box-background-shadow);
	--color-box-active-background-divider: var(--color-box-background-divider);
	--color-box-active-foreground: var(--color-box-foreground);
	--color-box-active-foreground-shadow: var(--color-box-foreground-shadow);		
	--color-box-active-foreground-bold: var(--color-box-foreground-bold);
	--color-box-active-foreground-bold-shadow: var(--color-box-foreground-bold-shadow);
	--color-box-active-head-background: var(--color-box-head-background);
	--color-box-active-head-background-gradient-top: var(--color-box-head-background-gradient-top);
	--color-box-active-head-background-gradient-middle: var(--color-box-head-background-gradient-middle);
	--color-box-active-head-background-gradient-bottom: var(--color-box-head-background-gradient-bottom);	
	--color-box-active-head-background-border: var(--color-box-head-background-border);
	--color-box-active-head-foreground: var(--color-box-head-foreground);
	--color-box-active-head-foreground-shadow: var(--color-box-head-foreground-shadow);
	--color-box-active-head-foreground-bold: var(--color-box-head-foreground-bold);
	--color-box-active-head-foreground-bold-shadow: var(--color-box-head-foreground-bold-shadow);	
	--color-box-active-footer-background: var(--color-box-footer-background);
	--color-box-active-footer-background-gradient-top: var(--color-box-footer-background-gradient-top);
	--color-box-active-footer-background-gradient-middle: var(--color-box-footer-background-gradient-middle);
	--color-box-active-footer-background-gradient-bottom: var(--color-box-footer-background-gradient-bottom);		
	--color-box-active-footer-background-border: var(--color-box-active-background-border);
	--color-box-active-footer-foreground: var(--color-box-footer-foreground);
	--color-box-active-footer-foreground-shadow: var(--color-box-footer-foreground-shadow);	
	--color-box-active-footer-foreground-bold: var(--color-box-footer-foreground-bold);
	--color-box-active-footer-foreground-bold-shadow: var(--color-box-footer-foreground-bold-shadow);

	/* Gradient body */

	--color-gradient-body-background: #fff;
	--color-gradient-body-background-gradient-top: #fff;
	--color-gradient-body-background-gradient-middle: #fff;
	--color-gradient-body-background-gradient-bottom: #fff;	
	--color-gradient-body-background-border: #e8edf3;	
	--color-gradient-body-background-divider: #fff;	
	--color-gradient-body-foreground: var(--color-body);			
	--color-gradient-body-foreground-shadow: #fff;		
	--color-gradient-body-foreground-bold: #243141;
	--color-gradient-body-foreground-bold-shadow: #fff;	
	
	/* Gradient 1 - Header */

	--color-gradient-1-background: #fff;
	--color-gradient-1-background-gradient-top: #fff;
	--color-gradient-1-background-gradient-middle: #fff;
	--color-gradient-1-background-gradient-bottom: #fff;
	--color-gradient-1-background-border: transparent;	
	--color-gradient-1-background-shadow: none;
	--color-gradient-1-background-divider: #afc4e9;	
	--color-gradient-1-foreground: #585757;			
	--color-gradient-1-foreground-shadow: #fff;		
	--color-gradient-1-foreground-bold: #243141;
	--color-gradient-1-foreground-bold-shadow: #fff;	
	
	/* Gradient 2 - Banner, box head */

	--color-gradient-2-background: rgba(59, 130, 246, 0.36);
	--color-gradient-2-background-gradient-top: #0b2255;
	--color-gradient-2-background-gradient-middle: #153373;
	--color-gradient-2-background-gradient-bottom: #183f8d;	
	--color-gradient-2-background-border: #0b1b3d;		
	--color-gradient-2-background-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.08);		
	--color-gradient-2-background-divider: #43529a;
	--color-gradient-2-foreground: rgba(255, 255, 255, 0.78);			
	--color-gradient-2-foreground-shadow: transparent;		
	--color-gradient-2-foreground-bold: var(--color-white);
	--color-gradient-2-foreground-bold-shadow: transparent;	
	
	/* Gradient 3 - Footer, CTA, demo bar , black throughout theme */	
	
	--color-gradient-3-background: #000000;
	--color-gradient-3-background-gradient-top: #000000;
	--color-gradient-3-background-gradient-middle: #000000;
	--color-gradient-3-background-gradient-bottom: #000000;
	--color-gradient-3-background-highlight: #363636; /* Used for footer 1 column background */	
	--color-gradient-3-background-border: #000;		
	--color-gradient-3-background-shadow: none;
	--color-gradient-3-background-divider: #2e2e2e;	
	--color-gradient-3-foreground: #b8b8b8;			
	--color-gradient-3-foreground-shadow: transparent;		
	--color-gradient-3-foreground-bold: #fff;
	--color-gradient-3-foreground-bold-shadow: transparent;
	
	/* Gradient 4 - Used for content block & support ticket form background */	
	
	--color-gradient-4-background: #eaf6ff;
	--color-gradient-4-background-gradient-top: rgba(139, 202, 255, 0.7);
	--color-gradient-4-background-gradient-middle: rgba(222, 241, 255, 0.65);
	--color-gradient-4-background-gradient-bottom: rgba(255, 255, 255, 0.96);
	--color-gradient-4-background-highlight: #434242;
	--color-gradient-4-background-border: #bdd4fd;		
	--color-gradient-4-background-shadow: none;
	--color-gradient-4-background-divider: #bdd4fd;	
	--color-gradient-4-foreground: var(--color-body);			
	--color-gradient-4-foreground-shadow: #fff;		
	--color-gradient-4-foreground-bold: #243141;
	--color-gradient-4-foreground-bold-shadow: #fff;		
	
	/* Forms */

	--color-forms-background: #f9fafc;
	--color-forms-background-border: #d9dee8;	
	--color-forms-foreground: #657081;
	--color-forms-foreground-placeholder: #8b95a5;
				
	/* Badge - warning */
	
	--color-badge-hot-background: #dc1010;
	--color-badge-hot-background-gradient-top: #dc1010;
	--color-badge-hot-background-gradient-middle: #dc1010;
	--color-badge-hot-background-gradient-bottom: #dc1010;	
	--color-badge-hot-background-border: #dc1010;
	--color-badge-hot-foreground: #fff;	
	
	/* Badge - new */
	
	--color-badge-new-background: #45a523;
	--color-badge-new-background-gradient-top: #45a523;
	--color-badge-new-background-gradient-middle: #45a523;
	--color-badge-new-background-gradient-bottom: #45a523;		
	--color-badge-new-background-border: #45a523;
	--color-badge-new-foreground: #fff;		
	
	/* Badge - popular */
	
	--color-badge-popular-background: #dc1010;
	--color-badge-popular-background-gradient-top: #dc1010;
	--color-badge-popular-background-gradient-middle: #dc1010;
	--color-badge-popular-background-gradient-bottom: #dc1010;		
	--color-badge-popular-background-border: #dc1010;
	--color-badge-popular-foreground: #fff;		
	
	/* Badge - free */
	
	--color-badge-free-background: #15ace5;
	--color-badge-free-background-gradient-top: #15ace5;
	--color-badge-free-background-gradient-middle: #15ace5;
	--color-badge-free-background-gradient-bottom: #15ace5;		
	--color-badge-free-background-border: #15ace5;
	--color-badge-free-foreground: #fff;
	
	/* Default colors */
	
	--color-body: #585858; /* Used for body text */
	--color-heading: #243141; /* Used for heading text */
	--color-border: #e8edf3;
	--color-white: #ffffff;
	--color-black: var(--color-gradient-3-background);		
	--color-green: #43de04;
	--color-red: #dc1010;
	--color-grey: #cccccc;
	
	/* ---- Sizing ---- */
	
	--container-width: 90%; /* Template container width */	
	--container-maxwidth: 1250px; /* Template container maximum width */	
	--container-content-maxwidth: 800px; /* The max width of text */
	--column-1: 100%; /* Width used per column as 1 column */
	--column-2: 48%; /* Width used per column as 2 columns */
	--column-3: 32%; /* Width used per column as 3 columns */
	--column-4: 24.25%; /* Width used per column as 4 columns */
	--column-5: 19.2%; /* Width used per column as 5 columns */
	--column-6: 15.83%; /* Width used per column as 6 columns */		
	--spacing-parent: 3.125rem; /* Used for spacing of main elements */
	--spacing-child: 1.875rem; /* Used for spacing of child elements */
	--spacing-inner: 1.5625rem; /* Used for padding on boxes */
	--border-radius-default: 10px; /* Set the default border radius - used through the template such as for buttons */
	--border-bottom-width-default: 1px; /* Used by the WHMCS Integration */
	
	/* ---- Fonts ---- */
	
	--font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-heading: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	
	/* ---- Misc ---- */
	
	--gradient-degrees: 135deg; /* Set the angle for gradient colors */

	/* ---- Header ---- */

	--header-height: 78px;
	--header-height-mobile: 66px;
	--header-mega-spacing: 1.25rem; /* Used for the spacing of child elements in the mega menu nav */

	--header-background: var(--color-gradient-body-background);
	--header-background-gradient-top: var(--color-gradient-body-background-gradient-top);
	--header-background-gradient-middle: var(--color-gradient-body-background-gradient-middle);
	--header-background-gradient-bottom: var(--color-gradient-body-background-gradient-bottom);	
	--header-background-border: var(--color-gradient-body-background-border);	

	--header-foreground: #1e293b;
	--header-active-foreground: var(--color-primary-background);
	--header-highlight: var(--color-primary-background);

	--header-border: var(--color-border);
	--header-borderradius: var(--border-radius-default);

	--header-title: #1e293b;
	--header-text: #64748b;

	--header-box-background: var(--color-box-background);
	--header-box-background-gradient-top: var(--color-box-background-gradient-top);
	--header-box-background-gradient-middle: var(--color-box-background-gradient-middle);
	--header-box-background-gradient-bottom: var(--color-box-background-gradient-bottom);
	--header-box-background-border: var(--color-box-background-border);
	--header-box-background-shadow: var(--color-box-background-shadow);
	--header-box-background-divider: var(--color-box-background-divider);
	--header-box-foreground: var(--color-box-foreground);
	--header-box-foreground-shadow: var(--color-box-foreground-shadow);

	--header-box-active-background: var(--color-box-active-background);
	--header-box-active-background-gradient-top: var(--color-box-active-background-gradient-top);
	--header-box-active-background-gradient-middle: var(--color-box-active-background-gradient-middle);
	--header-box-active-background-gradient-bottom: var(--color-box-active-background-gradient-bottom);
	--header-box-active-background-border: var(--color-box-active-background-border);
	--header-box-active-background-shadow: var(--color-box-active-background-shadow);
	--header-box-active-background-divider: var(--color-box-active-background-divider);
	--header-box-active-foreground: var(--color-box-active-foreground);
	--header-box-active-foreground-shadow: var(--color-box-active-foreground-shadow);
	
}

/*

------------------------------------------
------------------------------------------

----- Reset

------------------------------------------
------------------------------------------	

*/

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	min-height: 100vh;
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

img {
	border: 0;
}

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

ul,
ol {
	list-style: none;
	padding-left: 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

caption,
th,
td {
	text-align: inherit;
	vertical-align: top;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
	cursor: pointer;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
	cursor: not-allowed;
}

a {
	color: inherit;
}

a,
button {
	-webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--color-primary-background);
	outline-offset: 3px;
}

/*

------------------------------------------
------------------------------------------

----- Defaults

------------------------------------------
------------------------------------------	

*/

body {
	background: var(--color-gradient-body-background);
	background: radial-gradient(
		circle,
		var(--color-gradient-body-background-gradient-top) 0%,
		var(--color-gradient-body-background-gradient-middle) 50%,
		var(--color-gradient-body-background-gradient-bottom) 100%
	);
    color: var(--color-gradient-body-foreground);
	font-family: var(--font-body);
	font-weight: 400;	
}

::selection {
	background: #a6cdf8;
	color: inherit;
}

.contentcontainer {
	margin: 0 auto;
	width: var(--container-width);
	max-width: var(--container-maxwidth);
}

@media (max-width: 450px) {
	
	.contentcontainer {
		width: 88%;
	}	

}

a:hover,
a:hover {
	text-decoration: none;
}

/* ---- Headings ---- */

h1,
h2,
h3,
h4,
h5,
h6,
.heading1,
.heading2,
.heading3,
.heading4,
.heading5,
.heading6 {
	margin: 0 0 var(--spacing-child) 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

h1,
.heading1 {
	font-size: clamp(1.875rem, 3vw, 2.5rem); /* 30px - 40px */
}

h2,
.heading2 {
	font-size: clamp(1.875rem, 3vw, 2.5rem); /* 30px - 40px */
}

h3,
.heading3 {
	font-size: clamp(1.5rem, 2.4vw, 2rem); /* 24px - 32px */
}

h4,
.heading4 {
	font-size: clamp(1.25rem, 2vw, 1.625rem); /* 20px - 26px */
}

h5,
.heading5 {
	font-size: clamp(1.125rem, 1.6vw, 1.375rem); /* 18px - 22px */
}

h6,
.heading6 {
	font-size: 1rem;
	letter-spacing: 0;
	text-transform: uppercase;
}

/*

------------------------------------------
------------------------------------------

----- Common

------------------------------------------
------------------------------------------	

*/

.clear {
	clear: both;
	height: 0;
	line-height: 0;
}

.center {
	text-align: center !important;
}

.cursor-pointer:hover {
	cursor: pointer !important;
}

.cursor-none:hover {
	cursor: default !important;
}

.padding0 {
	padding: 0 !important;
}

.paddingtop0 {
	padding-top: 0 !important;
}

.paddingbottom0 {
	padding-bottom: 0 !important;
}

.margintopchild {
	margin-top: var(--spacing-child) !important;
}

.margintopparent {
	margin-top: var(--spacing-parent) !important;
}

.marginbottomparent {
	margin-bottom: var(--spacing-parent) !important;
}

.margintop100 {
	margin-top: 100px !important;
}

.marginbottomchild {
	margin-bottom: var(--spacing-child) !important;
}

.marginbottom0 {
	margin-bottom: 0 !important;
}

.marginbottom15 {
	margin-bottom: 15px !important;
}

.marginright15 {
	margin-right: 15px !important;
}

.borderbottom0 {
	border-bottom: none !important;
}

.buttonspacing {
	margin: 5px !important;
}

.inline {
	display: inline;
}

.alignleft {
    text-align: left;
}

.alignright {
    text-align: right;
}

.imageline {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 var(--spacing-child) 0;
}

/* Image alignment */

.imgright,
.imgleft {
	display: block;
	max-width: 100%;
	height: auto;
}

.imgright {
	float: right;
	margin: 0 0 var(--spacing-child) var(--spacing-child);
}

.imgleft {
	float: left;
	margin: 0 var(--spacing-child) var(--spacing-child) 0;
}

@media (max-width: 650px) {

	.imgright,
	.imgleft {
		float: none;
		width: fit-content;
		max-width: 100%;
		margin: 0 auto var(--spacing-child) auto;
	}

}

.max-width-150 {
	max-width: 150px;
}

.max-width-200 {
	max-width: 200px;
}

.max-width-280 {
	max-width: 280px;
}

.max-width-300 {
	max-width: 450px;
}

.max-width-350 {
	max-width: 350px;
}

.red {
	color: var(--color-red);
}

.green {
	color: var(--color-green);
}

.color-primary {
	color: var(--color-primary-background);
}

.hiddencontent {
	display: none;
}

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

.discount {
	color: var(--color-red);
	font-weight: bold;
}

.coupon {
	background: #ffffff;
	padding: 10px;
	color: #000;
	text-align: center;
	border: var(--color-red) 3px dashed;
	font-weight: bold;	
}

.opacity30 {
	opacity: 0.8;
}

.opacity30:hover {
	opacity: 1;
}

.icon-check {
	color: var(--color-green);
}

.icon-cross {
	color: var(--color-red);
}

.borderradius {
	border-radius: var(--border-radius-default);
}

/* Primary */

.color1,
.color1:active,
.color1:visited {
	color: var(--color-primary-foreground) !important;
	border-color: var(--color-primary-background-border) !important; 
	background: var(--color-primary-background) !important;
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-primary-background-gradient-top) 0,
		var(--color-primary-background-gradient-middle) 50%,
		var(--color-primary-background-gradient-bottom) 100%
	) !important;
	text-shadow: var(--color-primary-foreground-shadow) !important;
	font-weight: 700;
}

.color1:hover,
.color1:focus {
	color: var(--color-primary-active-foreground) !important;
	border-color: var(--color-primary-active-background-border) !important;
	background: var(--color-primary-active-background) !important;
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-primary-active-background-gradient-top) 0,
		var(--color-primary-active-background-gradient-middle) 50%,
		var(--color-primary-active-background-gradient-bottom) 100%
	) !important;
	text-shadow: var(--color-primary-active-foreground-shadow) !important;	
}

/* Secondary */

.color2,
.color2:active,
.color2:visited {
	color: var(--color-secondary-foreground) !important;
	border-color: var(--color-secondary-background-border) !important;
	background: var(--color-secondary-background) !important;
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-secondary-background-gradient-top) 0,
		var(--color-secondary-background-gradient-middle) 50%,
		var(--color-secondary-background-gradient-bottom) 100%
	) !important;
	text-shadow: var(--color-secondary-foreground-shadow) !important;	
	font-weight: 700;
}

.color2:hover,
.color2:focus {
	color: var(--color-secondary-active-foreground) !important;
	border-color: var(--color-secondary-active-background-border) !important;
	background: var(--color-secondary-active-background) !important;
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-secondary-active-background-gradient-top) 0,
		var(--color-secondary-active-background-gradient-middle) 50%,
		var(--color-secondary-active-background-gradient-bottom) 100%
	) !important;
	text-shadow: var(--color-secondary-active-foreground-shadow) !important;		
}

/* Tertiary */

.color3,
.color3:active,
.color3:visited {
	color: var(--color-tertiary-foreground) !important;
	border-color: var(--color-tertiary-background-border) !important;
	background: var(--color-tertiary-background) !important;
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-tertiary-background-gradient-top) 0,
		var(--color-tertiary-background-gradient-middle) 50%,
		var(--color-tertiary-background-gradient-bottom) 100%
	) !important;
	text-shadow: var(--color-tertiary-foreground-shadow) !important;	
}

.color3:hover,
.color3:focus {
	color: var(--color-tertiary-active-foreground) !important;
	border-color: var(--color-tertiary-active-background-border) !important;
	background: var(--color-tertiary-active-background) !important;
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-tertiary-active-background-gradient-top) 0,
		var(--color-tertiary-active-background-gradient-middle) 50%,
		var(--color-tertiary-active-background-gradient-bottom) 100%
	) !important;
	text-shadow: var(--color-tertiary-active-foreground-shadow) !important;		
}

.badge-hot {
	background: var(--color-badge-hot-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-hot-background-gradient-top) 0,
		var(--color-badge-hot-background-gradient-middle) 50%,
		var(--color-badge-hot-background-gradient-bottom) 100%
	);
	color: var(--color-badge-hot-foreground);	
	border-color: var(--color-badge-hot-background-border);
}

.badge-popular {
	background: var(--color-badge-popular-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-popular-background-gradient-top) 0,
		var(--color-badge-popular-background-gradient-middle) 50%,
		var(--color-badge-popular-background-gradient-bottom) 100%
	);
	color: var(--color-badge-popular-foreground);	
	border-color: var(--color-badge-popular-background-border);
}

.badge-new {
	background: var(--color-badge-new-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-new-background-gradient-top) 0,
		var(--color-badge-new-background-gradient-middle) 50%,
		var(--color-badge-new-background-gradient-bottom) 100%
	);
	color: var(--color-badge-new-foreground);	
	border-color: var(--color-badge-new-background-border);
}

.badge-free {
	background: var(--color-badge-free-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-free-background-gradient-top) 0,
		var(--color-badge-free-background-gradient-middle) 50%,
		var(--color-badge-free-background-gradient-bottom) 100%
	);
	color: var(--color-badge-free-foreground);	
	border-color: var(--color-badge-free-background-border);
}

.badge-primary {
	background: var(--color-primary-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-primary-background-gradient-top) 0,
		var(--color-primary-background-gradient-middle) 50%,
		var(--color-primary-background-gradient-bottom) 100%
	);
	color: var(--color-primary-foreground);	
	border-color: var(--color-primary-background-border);
}

.badge-secondary {
	background: var(--color-secondary-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-secondary-background-gradient-top) 0,
		var(--color-secondary-background-gradient-middle) 50%,
		var(--color-secondary-background-gradient-bottom) 100%
	);
	color: var(--color-secondary-foreground);	
	border-color: var(--color-secondary-background-border);
}

.badge-tertiary {
	background: var(--color-tertiary-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-tertiary-background-gradient-top) 0,
		var(--color-tertiary-background-gradient-middle) 50%,
		var(--color-tertiary-background-gradient-bottom) 100%
	);
	color: var(--color-tertiary-foreground);	
	border-color: var(--color-tertiary-background-border);
}

.footermain .footermain-highlight-hot::after,
.product-boxes1 .product-boxes1-box.product-boxes1-highlight-hot::after,
.product-boxes2 .product-boxes2-box.product-boxes2-highlight-hot .product-boxes2-head .product-boxes2-title::after,
.product-boxes3 .product-boxes3-box.product-boxes3-highlight-hot::after,
.product-tables2.product-tables2-plans .tableplan .tableplan-highlight-hot::after {
	content: "hot";
}

.footermain .footermain-highlight-new::after,
.product-boxes1 .product-boxes1-box.product-boxes1-highlight-new::after,
.product-boxes2 .product-boxes2-box.product-boxes2-highlight-new .product-boxes2-head .product-boxes2-title::after,
.product-boxes3 .product-boxes3-box.product-boxes3-highlight-new::after,
.product-tables2.product-tables2-plans .tableplan .tableplan-highlight-new::after {
	content: "new";
} 

.product-boxes1 .product-boxes1-box.product-boxes1-highlight-popular::after,
.product-tables2.product-tables2-plans .tableplan .tableplan-highlight-popular::after {
	content: "popular";
} 

.product-boxes1 .product-boxes1-box.product-boxes1-highlight-free::after,
.product-tables2.product-tables2-plans .tableplan .tableplan-highlight-free::after {
	content: "free";
}

/*

------------------------------------------
------------------------------------------

----- Layout

------------------------------------------
------------------------------------------	

*/

/* Header */

.headernew-header {
	background: var(--header-background);
	background: radial-gradient(
		circle,
		var(--header-background-gradient-top) 0%,
		var(--header-background-gradient-middle) 50%,
		var(--header-background-gradient-bottom) 100%
	);
    border-bottom: var(--header-background-border) 1px solid;
	position: relative;
	z-index: 1000;
}

.headernew-header i {
	margin: 0;
}

.headernew-header-inner {
	width: var(--container-width);
	max-width: var(--container-maxwidth);
	height: var(--header-height);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	position: relative;
}

/* Logo */

.headernew-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
}

.headernew-logo img {
	display: block;
	width: 100%;
	max-width: 145px;
	height: auto;
}

/* Desktop nav */

.headernew-desktop-nav {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
}

.headernew-menu {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
}

.headernew-menu-item {
	height: 100%;
	display: flex;
	align-items: center;
}

.headernew-menu-item > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 44px;
	padding: 0 14px;
	border-radius: var(--header-borderradius);
	color: var(--header-foreground);
	text-decoration: none;
	font-weight: 700;
	transition: color 0.2s ease;
	font-size: 0.9375rem;
}

.headernew-menu-item:hover > a,
.headernew-menu-item:focus-within > a {
	background: transparent;
	color: var(--header-active-foreground);
}

.headernew-menu-item-active > a,
.headernew-menu-item-active:hover > a,
.headernew-menu-item-active:focus-within > a {
	background: transparent;
	color: var(--header-active-foreground);
}

.headernew-has-mega > a::after {
	content: "\f078";
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	font-size: 0.625rem;
	line-height: 1;
	width: 12px;
	min-width: 12px;
	flex: 0 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	transform-origin: center;
	transition:
		transform 0.2s ease,
		color 0.2s ease;
}

.headernew-has-mega:hover > a::after,
.headernew-has-mega:focus-within > a::after {
	color: var(--header-active-foreground);
	transform: rotate(-90deg);
}

.headernew-menu-badge {
	position: absolute;
	bottom: -18px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	padding: 3px 7px;
	border-radius: 5px 5px 0 0;
	border: 1px solid transparent;
	border-bottom-width: 0;
	font-size: 0.625rem;
	line-height: 1;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	pointer-events: none;
	z-index: 3;
}

/* Home icon */

/* Home menu item */

.headernew-home-item > a {
	width: 44px;
	padding: 0;
	justify-content: center;
	font-size: 1rem;
}

.headernew-home-item > a i {
	line-height: 1;
}

/* Header actions */

.headernew-header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.headernew-action-icon {
	width: 44px;
	height: 44px;
	padding: 0 12px;
	color: var(--header-foreground);
	text-decoration: none;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--header-borderradius);
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
	font-size: 1.1rem;	
}

.headernew-action-icon:hover,
.headernew-action-icon:focus {
	background: transparent;
	color: var(--header-active-foreground);
}

.headernew-cart-icon span {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--color-green);
	color: var(--color-white);
	font-size: 0.625rem;
	text-align: center;
	font-weight: 800;
}

/* CTA */

.headernew-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 20px;
	margin-left: 8px;
	border-radius: var(--header-borderradius);
	text-decoration: none;
	border: 1px solid transparent;
}

/* Burger */

.headernew-burger {
	display: none;
	width: 44px;
	height: 44px;
	background: var(--header-background);
	background: radial-gradient(
		circle,
		var(--header-background-gradient-top) 0%,
		var(--header-background-gradient-middle) 50%,
		var(--header-background-gradient-bottom) 100%
	);
    border: var(--header-background-border) 1px solid;
	border-radius: var(--header-borderradius);
	color: var(--header-text);
	cursor: pointer;
	margin-left: 6px;
	font-size: 1.1rem;
}

.headernew-burger:hover {
	color: var(--header-highlight);
}

/* Mega menu frame */

.headernew-has-mega {
	position: static;
}

.headernew-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(8px);
	transition:
		opacity 0.2s ease,
		visibility 0.2s ease,
		transform 0.2s ease;
}

.headernew-has-mega:hover .headernew-mega,
.headernew-has-mega:focus-within .headernew-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.headernew-mega-inner {
	background: var(--header-background);
	background: radial-gradient(
		circle,
		var(--header-background-gradient-top) 0%,
		var(--header-background-gradient-middle) 50%,
		var(--header-background-gradient-bottom) 100%
	);
    border: var(--header-background-border) 1px solid;
	border-radius: 0 0 var(--header-borderradius) var(--header-borderradius);
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
	padding: 0;
	min-height: 220px;
	padding: 35px;
}

/* Mega menu content */

.headernew-mega-content {
	display: grid;
	grid-template-columns: 1.15fr 1fr 1fr;
	gap: 35px;
	font-size: 0.9375rem; /* 15px */
}

/* Mega Menu panels */

.headernew-mega-label {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin: 0 0 var(--header-mega-spacing) 0;
	padding: 5px 8px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 0.625rem;
	line-height: 1;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Reusable panel visual styles */

.headernew-mega-panel-style1 {
	padding: 1.5rem; /* 25px */
	border-radius: var(--header-borderradius);
	background: var(--header-box-background);
	background: radial-gradient(
		circle,
		var(--header-box-background-gradient-top) 0%,
		var(--header-box-background-gradient-middle) 50%,
		var(--header-box-background-gradient-bottom) 100%
	);
	border: 1px solid var(--header-box-background-border);
}

.headernew-mega-panel-style2 {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}

.headernew-mega-panel-style3 {
	padding: 1.5rem; /* 25px */
	border-radius: var(--header-borderradius);
	background:
		radial-gradient(
			circle at 18% 20%,
			var(--color-gradient-2-background) 0%,
			transparent 30%
		),
		linear-gradient(
			135deg,
			var(--color-gradient-2-background-gradient-top) 0%,
			var(--color-gradient-2-background-gradient-middle) 50%,
			var(--color-gradient-2-background-gradient-bottom) 100%
		);
	color: var(--color-gradient-2-foreground);
}

.headernew-mega-panel-style4 {
	padding: 1.5rem; /* 24px */
	border-radius: var(--header-borderradius);
	background: var(--color-tertiary-background);
	background: radial-gradient(
		circle,
		var(--color-tertiary-background-gradient-top) 0%,
		var(--color-tertiary-background-gradient-middle) 50%,
		var(--color-tertiary-background-gradient-bottom) 100%
	);
	border: var(--color-tertiary-background-border) 1px solid;
	color: var(--color-tertiary-foreground);
}

.headernew-mega-panel-style5 {
	border-radius: var(--header-borderradius);
	background: var(--header-box-background);
	background: radial-gradient(
		circle,
		var(--header-box-background-gradient-top) 0%,
		var(--header-box-background-gradient-middle) 50%,
		var(--header-box-background-gradient-bottom) 100%
	);
	border: 1px solid var(--header-box-background-border);
}

.headernew-mega-panel-styleinner1 {
	background: var(--header-background);
	background: radial-gradient(
		circle,
		var(--header-background-gradient-top) 0%,
		var(--header-background-gradient-middle) 50%,
		var(--header-background-gradient-bottom) 100%
	);
	border-color: var(--header-background-border);
}

.headernew-mega-panel-styleinner2 {
	background: var(--header-box-background);
	background: radial-gradient(
		circle,
		var(--header-box-background-gradient-top) 0%,
		var(--header-box-background-gradient-middle) 50%,
		var(--header-box-background-gradient-bottom) 100%
	);
	border-color: var(--header-box-background-border);
}

.headernew-mega-panel-styleinner3 {
	background: var(--color-gradient-3-background);
	background: radial-gradient(
		circle,
		var(--color-gradient-3-background-gradient-top) 0%,
		var(--color-gradient-3-background-gradient-middle) 50%,
		var(--color-gradient-3-background-gradient-bottom) 100%
	);
	border-color: var(--color-gradient-3-background-border);
	color: var(--color-gradient-3-foreground);
}

.headernew-mega-panel-styleinner4 {
	background: var(--header-box-active-background);
	background: radial-gradient(
		circle,
		var(--header-box-active-background-gradient-top) 0%,
		var(--header-box-active-background-gradient-middle) 50%,
		var(--header-box-active-background-gradient-bottom) 100%
	);
	border-color: var(--header-box-active-background-border);
	color: var(--header-box-active-foreground);
}

/* Shared panel base */

.headernew-mega-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

.headernew-mega-panel > *:last-child {
	margin-bottom: 0;
}

.headernew-mega-panel a {
	text-decoration: none;
}

.headernew-mega-panel-title {
	margin: 0;
	color: var(--header-title);
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0 0 var(--header-mega-spacing) 0;
}

.headernew-mega-panel-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 var(--header-mega-spacing) 0;
}

.headernew-mega-panel-head .headernew-mega-panel-title {
	margin-bottom: 0;
}

.headernew-mega-panel-icon {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--header-borderradius);
	color: var(--header-highlight);
	font-size: 1.5rem;
	line-height: 1;
	font-weight: 900;
}

.headernew-mega-panel-text {
	margin: 0 0 var(--header-mega-spacing) 0;
	color: var(--header-text);
}

.headernew-mega-panel ul {
	padding: 0;
	list-style: none;
	margin: 0 0 var(--header-mega-spacing) 0;
}

.headernew-mega-panel li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 0 10px 0;
	color: var(--header-text);
	font-weight: 700;
}

.headernew-mega-panel li:last-child {
	padding-bottom: 0;
}

.headernew-mega-panel li i {
	color: var(--color-green);
}

.headernew-mega-panel-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin: auto 0 0 0;
}

.headernew-mega-panel-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 14px;
	border-radius: var(--header-borderradius);
	text-decoration: none;
	font-weight: 800;
	border: transparent 1px solid;
}

.headernew-mega-panel-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: fit-content;
	margin-top: auto;
	padding: 0.625rem 0.875rem;
	background: var(--color-muted-background);
	background: radial-gradient(
		circle,
		var(--color-muted-background-gradient-top) 0%,
		var(--color-muted-background-gradient-middle) 50%,
		var(--color-muted-background-gradient-bottom) 100%
	);
    color: var(--color-muted-foreground);
    text-shadow: var(--color-muted-foreground-shadow);
	border: var(--color-muted-background-border) 1px solid;
	border-radius: var(--border-radius-default);
	font-size: 0.9375rem;
	line-height: 1;
	font-weight: 900;
	text-decoration: none;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.headernew-mega-panel-link:hover,
.headernew-mega-panel-link:focus-visible {
	background: var(--color-muted-active-background);
	background: radial-gradient(
		circle,
		var(--color-muted-active-background-gradient-top) 0%,
		var(--color-muted-active-background-gradient-middle) 50%,
		var(--color-muted-active-background-gradient-bottom) 100%
	);
    color: var(--color-muted-active-foreground);
    text-shadow: var(--color-muted-active-foreground-shadow);
	border-color: var(--color-muted-active-background-border);
	text-decoration: none;
	transform: translateY(-0.0625rem);
}

.headernew-mega-panel-link i {
	font-size: 0.75rem;
	line-height: 1;
	transition: transform 0.2s ease;
}

.headernew-mega-panel-link:hover i,
.headernew-mega-panel-link:focus-visible i {
	transform: translateX(0.1875rem);
}

/* Panel: intro */

.headernew-mega-panel-intro::before {
	content: "";
	position: absolute;
	top: -70px;
	right: -70px;
	width: 190px;
	height: 190px;
	border-radius: 999px;
	background: rgba(37, 99, 235, 0.35);
	pointer-events: none;
}

.headernew-mega-panel-intro > * {
	position: relative;
	z-index: 1;
}

/* Panel: edition grid */

.headernew-mega-panel-edition-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/* Panel: image block */

.headernew-mega-image {
	overflow: hidden;
	border-radius: var(--border-radius-default);
	margin: 0 0 var(--header-mega-spacing) 0;
}

.headernew-mega-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Panel: link cards */

.headernew-mega-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.headernew-mega-card {
	display: grid;
	grid-template-columns: 54px 1fr;
	gap: 14px;
	align-items: center;
	padding: 14px;
	border-radius: var(--header-borderradius);
	text-decoration: none;
	transition:
		border-color 0.2s ease,
		transform 0.2s ease;
}

.headernew-mega-card:hover,
.headernew-mega-card:focus {
	border-color: var(--header-highlight);
}

.headernew-mega-card-icon,
.headernew-mega-card .headernew-mega-card-icon {
	width: 54px;
	height: 54px;
	min-width: 54px;
	flex: 0 0 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	justify-self: center;
	border-radius: var(--header-borderradius);
	color: var(--header-highlight);
	font-size: 1.5rem;
	line-height: 1;
	font-weight: 900;
}

.headernew-mega-card .headernew-mega-card-icon i,
.headernew-mega-card .headernew-mega-card-icon i::before {
	display: block;
	line-height: 1;
	font-size: inherit;
	color: inherit;
}

.headernew-mega-card-title {
	display: block;
	margin: 0 0 0.1rem 0;
	color: var(--header-title);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.headernew-mega-card-text {
	display: block;
	color: var(--header-text);
	font-size: 0.875rem;
}

.headernew-mega-card .headernew-mega-card-icon {
	color: var(--header-highlight);
}

/* Panel: stats */

.headernew-mega-stat-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 0 0 var(--header-mega-spacing) 0;
}

.headernew-mega-stat {
	border-radius: var(--header-borderradius);
	padding: 12px;
}

.headernew-mega-stat-title {
	display: block;
	color: var(--header-title);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0 0 0.1rem 0;
}

.headernew-mega-stat-text {
	display: block;
	color: var(--header-text);
	font-size: 0.875rem;
}

.headernew-mega-mini-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 0 0 var(--header-mega-spacing) 0;
}

.headernew-mega-mini-list a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px;
	border-radius: var(--header-borderradius);
	color: var(--header-title);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 800;
}

.headernew-mega-mini-list a i {
	color: var(--header-highlight);
}

.headernew-mega-mini-list a:hover {
	border-color: var(--header-highlight);
}

/* Panel: price */

.headernew-mega-panel-price-value {
	margin: 0 0 var(--header-mega-spacing) 0;
	line-height: 1;
	font-family: var(--font-heading);
	font-weight: 900;
	letter-spacing: -0.05em;
	color: var(--header-title);
}

.headernew-mega-panel-price-value span {
	color: var(--header-text);
	letter-spacing: 0;
}

/* Panel: docs */

.headernew-mega-panel-doc-links {
	display: grid;
	gap: 8px;
	margin: 0 0 var(--header-mega-spacing) 0;
}

.headernew-mega-panel-doc-links a {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px;
	border-radius: var(--header-borderradius);
	color: var(--header-title);
	font-weight: 800;
}

.headernew-mega-panel-doc-links a:hover {
	border-color: var(--header-highlight);
}

.headernew-mega-panel-doc-links i {
	color: var(--header-highlight);
}

/* Panel: testimonial */

.headernew-mega-panel-quote {
	margin: 0 0 var(--header-mega-spacing) 0;
	padding: 18px;
	border-radius: var(--header-borderradius);
}

.headernew-mega-panel-quote-text {
	margin: 0;
	color: var(--header-title);
	font-size: 14px;
	line-height: 1.65;
	font-weight: 600;
}

.headernew-mega-panel-quote footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	color: var(--header-text);
	font-weight: 800;
}

.headernew-mega-panel-quote-stars {
	color: var(--header-highlight);
	white-space: nowrap;
}

/* Panel: announcement */

.headernew-mega-panel-announcement {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 0;
}

.headernew-mega-panel-announcement-art {
	min-height: 210px;
	background:
		radial-gradient(
			circle at 18% 20%,
			var(--color-gradient-2-background) 0%,
			transparent 30%
		),
		linear-gradient(
			135deg,
			var(--color-gradient-2-background-gradient-top) 0%,
			var(--color-gradient-2-background-gradient-middle) 50%,
			var(--color-gradient-2-background-gradient-bottom) 100%
		);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-gradient-2-foreground);
	font-size: 54px;
}

.headernew-mega-panel-announcement-body {
	padding: 22px;
}

/* headernew-mega-panel-style3 Overrides */

.headernew-mega-panel-style3 .headernew-mega-panel-title {
	color: var(--color-white);
}

.headernew-mega-panel-style3 .headernew-mega-panel-text {
	color: rgba(255, 255, 255, 0.78);
}

.headernew-mega-panel-style3 li {
	color: rgba(255, 255, 255, 0.78);
}

/* Basic dropdown frame */

.headernew-has-dropdown {
	position: relative;
}

.headernew-dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 200px;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 8px);
	transition:
		opacity 0.2s ease,
		visibility 0.2s ease,
		transform 0.2s ease;
}

.headernew-has-dropdown:hover .headernew-dropdown,
.headernew-has-dropdown:focus-within .headernew-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.headernew-dropdown-inner {
	background: var(--header-background);
	background: radial-gradient(
		circle,
		var(--header-background-gradient-top) 0%,
		var(--header-background-gradient-middle) 50%,
		var(--header-background-gradient-bottom) 100%
	);
    border: var(--header-background-border) 1px solid;
	border-radius: 0 0 var(--header-borderradius) var(--header-borderradius);
	box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
	padding: 8px;
}

.headernew-dropdown-inner a {
	display: block;
	padding: 11px 12px;
	border-radius: var(--header-borderradius);
	color: var(--header-foreground);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9375rem;
}

.headernew-dropdown-inner a:hover,
.headernew-dropdown-inner a:focus {
	background: var(--header-box-background);
	background: radial-gradient(
		circle,
		var(--header-box-background-gradient-top) 0%,
		var(--header-box-background-gradient-middle) 50%,
		var(--header-box-background-gradient-bottom) 100%
	);
	color: var(--header-highlight);
}

.headernew-dropdown-inner a.headernew-dropdown-inner-active,
.headernew-dropdown-inner a.headernew-dropdown-inner-active:hover,
.headernew-dropdown-inner a.headernew-dropdown-inner-active:focus {
	background: var(--header-box-background);
	background: radial-gradient(
		circle,
		var(--header-box-background-gradient-top) 0%,
		var(--header-box-background-gradient-middle) 50%,
		var(--header-box-background-gradient-bottom) 100%
	);
	color: var(--header-highlight);
}

.headernew-has-dropdown > a::after {
	content: "\f078";
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	font-size: 0.625rem;
	line-height: 1;
	width: 12px;
	min-width: 12px;
	flex: 0 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	transform-origin: center;
	transition:
		transform 0.2s ease,
		color 0.2s ease;
}

.headernew-has-dropdown:hover > a::after,
.headernew-has-dropdown:focus-within > a::after {
	color: var(--header-highlight);
	transform: rotate(-90deg);
}

/* Mobile drawer */

.headernew-mobile-overlay {
	position: fixed;
	inset: 0;
	background: transparent;
	opacity: 0;
	visibility: hidden;
	z-index: 9998;
	transition:
		opacity 0.25s ease,
		visibility 0.25s ease;
}

.headernew-mobile-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.headernew-mobile-drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: min(380px, 88vw);
	height: 100vh;
	background: var(--header-background);
	background: radial-gradient(
		circle,
		var(--header-background-gradient-top) 0%,
		var(--header-background-gradient-middle) 50%,
		var(--header-background-gradient-bottom) 100%
	);
	z-index: 9999;
	transform: translateX(100%);
	transition: transform 0.25s ease;
	box-shadow: none;
	overflow-y: auto;
	border-left: 1px solid var(--header-background-border);
}

.headernew-mobile-drawer i {
	margin: 0;
}

.headernew-mobile-drawer.is-open {
	transform: translateX(0);
}

.headernew-mobile-drawer-header {
	height: 66px;
	padding: 0 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--header-border);
}

.headernew-mobile-drawer-header strong {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	color: var(--header-title);
}

.headernew-mobile-close {
	width: 40px;
	height: 40px;
	border: 0;
	background: var(--header-box-background);
	background: radial-gradient(
		circle,
		var(--header-box-background-gradient-top) 0%,
		var(--header-box-background-gradient-middle) 50%,
		var(--header-box-background-gradient-bottom) 100%
	);
	border-radius: var(--header-borderradius);
	color: var(--header-foreground);
	cursor: pointer;
}

.headernew-mobile-nav {
	padding: 14px 22px 26px;
}

.headernew-mobile-section {
	border-bottom: 1px solid var(--header-border);
}

.headernew-mobile-toggle,
.headernew-mobile-link {
	width: 100%;
	min-height: 54px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 0;
	background: transparent;
	color: var(--header-foreground);
	text-decoration: none;
	font-weight: 800;
	cursor: pointer;
	font-size: 0.9375rem;
}

.headernew-mobile-toggle i {
	transition: transform 0.2s ease;
}

.headernew-mobile-section.is-open .headernew-mobile-toggle i {
	transform: rotate(180deg);
}

.headernew-mobile-submenu {
	display: none;
	padding: 0 0 14px 0;
}

.headernew-mobile-section.is-open .headernew-mobile-submenu {
	display: block;
}

.headernew-mobile-submenu a {
	display: block;
	padding: 10px 0 10px 14px;
	color: var(--header-text);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 700;
}

.headernew-mobile-toggle:hover,
.headernew-mobile-toggle:focus,
.headernew-mobile-toggle:hover i,
.headernew-mobile-toggle:focus i,
.headernew-mobile-submenu a:hover,
.headernew-mobile-submenu a:focus,
.headernew-mobile-link:hover,
.headernew-mobile-link:focus {
	color: var(--header-highlight);
}

.headernew-mobile-toggle-active,
.headernew-mobile-toggle-active i,
.headernew-mobile-submenu a.headernew-mobile-link-active,
.headernew-mobile-link-active {
	color: var(--header-highlight);
}

.headernew-mobile-cta {
	margin-top: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	border-radius: var(--header-borderradius);
	border: transparent 1px solid;
	text-decoration: none;
	font-weight: 800;
}

body.headernew-menu-open {
	overflow: hidden;
}

/* Mobile switch */

@media (max-width: 1150px) {

	.headernew-header-inner {
		height: var(--header-height-mobile);
		gap: 16px;
	}

	.headernew-desktop-nav {
		display: none;
	}

	.headernew-header-actions {
		margin-left: auto;
		gap: 8px;
	}

	.headernew-action-icon {
		width: 42px;
		height: 42px;
		padding: 0 11px;
	}

	.headernew-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.headernew-cta {
		display: none;
	}

}

@media (max-width: 640px) {

	.headernew-logo img {
		width: 122px;
		max-width: 122px;
	}

	.headernew-header-inner {
		width: 92%;
	}

	.headernew-header-actions {
		gap: 6px;
	}

	.headernew-action-icon {
		width: 40px;
		height: 40px;
		font-size: 16px;
		padding: 0 10px;
	}

}

@media (max-width: 420px) {

	.headernew-header-actions {
		gap: 4px;
	}

	.headernew-action-icon {
		width: 38px;
		height: 38px;
		font-size: 15px;
		padding: 0 9px;
	}

	.headernew-burger {
		width: 40px;
		height: 40px;
	}

}

@media (max-width: 340px) {

	.headernew-cart-icon {
		display: none;
	}

}

/*

------------------------------------------
------------------------------------------

----- Banner

------------------------------------------
------------------------------------------	

*/

/*

	banner-design1 = Used by the 2 column layout with a centered right image switching to bottom aligned on mobile.
	banner-design2 = Used by the 2 column layout with a bottom aligned right image.
	banner-designscreenshot = Adds a browser design to the top of both the desktop and mobile image
	banner-designscreenshot-mobile = Adds a browser design to the top of the mobile image only

*/

/* Banner */

.banner {
	background:
		radial-gradient(
			circle at 18% 20%,
			var(--color-gradient-2-background) 0%,
			transparent 30%
		),
		linear-gradient(
			135deg,
			var(--color-gradient-2-background-gradient-top) 0%,
			var(--color-gradient-2-background-gradient-middle) 50%,
			var(--color-gradient-2-background-gradient-bottom) 100%
		);		
	margin: 0;
	color: var(--color-gradient-2-foreground);
	overflow: hidden;
	position: relative;
	clear: both;	
	box-shadow: var(--color-gradient-2-background-shadow);
}

.banner img {
	display: block; /* Fixes image display using banner shortcode */
}

.banner .contentcontainer {
	padding: var(--spacing-parent) 0;
	position: relative;
}

.banner .banner-heading {
	color: var(--color-gradient-2-foreground-bold);
	text-shadow: var(--color-gradient-2-foreground-shadow) 1px 1px;
	font-family: var(--font-heading);
	font-weight: 900;
	font-size: clamp(2.5rem, 5vw, 4rem);
	letter-spacing: clamp(-0.18rem, -0.18vw, -0.08rem);
	line-height: 1.25;
	margin: 0 0 var(--spacing-child) 0;
	text-align: center;
}

.banner .banner-heading-highlight {
	color: var(--color-primary-background);
}

.banner .banner-text {
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	line-height: 1.6;
	font-weight: 500;
	max-width: var(--container-content-maxwidth);
	margin: 0 auto var(--spacing-child) auto;
	text-align: center;
}

.banner .list ul {
	margin: 0 0 var(--spacing-child) 0;
}

.banner .list ul li {
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	background-image: none;
	padding-left: 0;
}

.banner .list ul li::before {
	display: none;
}

.banner .list ul li i {
	margin: 0 10px 0 0;	
	color: var(--color-primary-background);
}

.banner-price {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem 1rem;
	margin: 0 0 var(--spacing-child) 0;
	color: var(--color-gradient-2-foreground-bold);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--border-radius-default);
	font-weight: 700;
	line-height: 1;
	width: fit-content;
}

.banner-price strong {
	color: var(--color-primary-background);
	font-size: 1.35em;
	font-weight: 850;
}

.banner-price span + span {
	padding-left: 1rem;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.banner .banner-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

.banner .banner-buttons .button1 {
	margin: 0;
}

/* 2 Column */

.banner .banner-twocolumn {
	display: grid;
	grid-template-columns: 49% 44%;
	gap: 7%;
	align-items: center;
}

.banner .banner-twocolumn .banner-twocolumn-col1 {
	display: flex;
	justify-content: center;
	flex-direction: column;
	min-width: 0;
}

.banner .banner-twocolumn .banner-twocolumn-col1 .banner-heading {
	text-align: left;
}

.banner .banner-twocolumn .banner-twocolumn-col1 .banner-text {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}

.banner .banner-twocolumn .banner-twocolumn-col1 .banner-buttons {
	justify-content: left;
}

.banner .banner-twocolumn .banner-twocolumn-col2 {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 0;
}

.banner .banner-twocolumn .banner-twocolumn-col2 img {
	filter:
		drop-shadow(0 1.25rem 2.5rem rgba(0, 0, 0, 0.22))
		drop-shadow(0 0.375rem 0.875rem rgba(0, 0, 0, 0.14));	
}

@media (max-width: 1000px) {

	.banner .banner-twocolumn {
		grid-template-columns: 1fr;
		gap: var(--spacing-parent);
	}

	.banner .banner-twocolumn .banner-twocolumn-col1,
	.banner .banner-twocolumn .banner-twocolumn-col2 {
		width: auto;
	}

	.banner .banner-twocolumn .banner-twocolumn-col1 .banner-heading,
	.banner .banner-twocolumn .banner-twocolumn-col1 .banner-text {
		text-align: center;
	}

	.banner .list {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		max-width: 500px;	
	}

	.banner-price {
		line-height: 1.2;
		margin-left: auto;
		margin-right: auto;
	}

	.banner .banner-twocolumn .banner-twocolumn-col1 .banner-buttons {
		justify-content: center;
	}	

}

@media(max-width:650px) {

	.banner .list ul li {
		text-align: center;
	}

}

@media(max-width:550px) {

	.banner .banner-buttons .button1 {
		width: 100%;
	}

}

/* Banner Design 1 */

@media (max-width: 1000px) {

	.banner.banner-design1 .contentcontainer {
		padding-bottom: 0;
	}

}

/* Banner Design 2 */

.banner.banner-design2 .contentcontainer {
	padding: 0;
}

.banner.banner-design2 .banner-twocolumn {
	align-items: stretch;
}

.banner.banner-design2 .banner-twocolumn .banner-twocolumn-col1 {
	padding: var(--spacing-parent) 0;
}

.banner.banner-design2 .banner-twocolumn .banner-twocolumn-col2 {
	padding-top: var(--spacing-parent);
	align-items: flex-end;
}

.banner.banner-design2 .banner-twocolumn-col2 > a {
	display: block;
	width: 100%;
	margin-top: auto;
}

@media (max-width: 1000px) {

	.banner.banner-design2 .contentcontainer {
		padding-top: var(--spacing-parent);
	}

	.banner.banner-design2 .banner-twocolumn .banner-twocolumn-col1,
	.banner.banner-design2 .banner-twocolumn .banner-twocolumn-col2 {
		padding: 0;
	}

}

/* Banner Designscreenshot */

.banner.banner-designscreenshot picture::before {
	content: "";
	display: block;
	height: 17px;
	background-color: #f4f3f3;
	background-image: url("/libs/images/browsericons.png"), linear-gradient(to bottom, #f4f3f3, #fcfbfb);
	background-position: 5px center, 0 0;
	background-size: auto 7px, 100% 100%;
	background-repeat: no-repeat, repeat;
	border-bottom: 1px solid #c4c4c4;
	border-radius: 5px 5px 0 0;
	box-sizing: border-box;
}

/* Banner Designscreenshot-mobile */

@media(max-width:1000px) {

	.banner.banner-designscreenshot-mobile picture::before {
		content: "";
		display: block;
		height: 17px;
		background-color: #f4f3f3;
		background-image: url("/libs/images/browsericons.png"), linear-gradient(to bottom, #f4f3f3, #fcfbfb);
		background-position: 5px center, 0 0;
		background-size: auto 7px, 100% 100%;
		background-repeat: no-repeat, repeat;
		border-bottom: 1px solid #c4c4c4;
		border-radius: 5px 5px 0 0;
		box-sizing: border-box;
	}

}

/* Subbanner */

.subbanner {
	background: var(--color-gradient-2-background);
	background:
		radial-gradient(
			circle at 18% 20%,
			var(--color-gradient-2-background) 0%,
			transparent 30%
		),
		linear-gradient(
			135deg,
			var(--color-gradient-2-background-gradient-top) 0%,
			var(--color-gradient-2-background-gradient-middle) 50%,
			var(--color-gradient-2-background-gradient-bottom) 100%
		);
	box-shadow: var(--color-gradient-2-background-shadow);	
}

.subbanner .subbanner-heading {
	margin: 0;
	color: var(--color-gradient-2-foreground-bold);
	text-shadow: var(--color-gradient-2-foreground-bold-shadow) 1px 1px;
	text-align: center;
	font-family: var(--font-heading);
}

.subbanner .contentcontainer {
	padding: var(--spacing-child) 0;
}

/* Article toolbar - Used for single docs */

.article-toolbar {
	float: right;
	width: 32%;
	margin: 0 0 var(--spacing-child) var(--spacing-child);
	padding: var(--spacing-child);
	color: var(--color-box-foreground);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-bottom) 100%
	);
	border: 1px solid var(--color-box-background-border);
	border-radius: var(--border-radius-default);
}

.article-toolbar a {
	color: var(--color-box-foreground-bold);
	font-weight: 700;
	text-decoration: none;
}

.article-toolbar a:hover,
.article-toolbar a:focus {
	color: var(--color-primary-background);
	text-decoration: underline;
}

.article-toolbar .button1,
.article-toolbar .button1:hover,
.article-toolbar .button1:focus {
	text-decoration: none;
}

.article-toolbar .article-toolbar-heading {
	margin: 0 0 var(--spacing-child) 0;
	color: var(--color-box-foreground-bold);
	font-family: var(--font-heading);
	font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

/* Video */

.article-toolbar .article-toolbar-video {
	width: fit-content;
	max-width: 100%;
	margin: 0 auto var(--spacing-child) auto;
}

.article-toolbar .article-toolbar-video a {
	display: block;
	border-radius: var(--border-radius-default);
	overflow: hidden;
}

.article-toolbar .article-toolbar-video img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: var(--border-radius-default);
	transition:
		opacity var(--transition-default),
		transform var(--transition-default);
}

.article-toolbar .article-toolbar-video a:hover img,
.article-toolbar .article-toolbar-video a:focus img,
.article-toolbar .article-toolbar-video img:hover,
.article-toolbar .article-toolbar-video img:focus {
	opacity: 0.75;
	transform: scale(1.03);
}

/* Lists */

.article-toolbar ul {
	margin: 0 0 var(--spacing-child) 1.25rem;
	padding: 0;
}

.article-toolbar ul:last-child {
	margin-bottom: 0;
}

.article-toolbar ul li {
	margin: 0 0 0.9375rem 0;
	color: var(--color-box-foreground);
	line-height: 1.45;
	list-style: decimal;
	text-transform: capitalize;
}

.article-toolbar ul li:last-child {
	margin-bottom: 0;
}

/* Child lists - one level */

.article-toolbar ul ul {
	margin: 0.9375rem 0 0 1.5rem !important;
	padding: 0;
}

.article-toolbar ul ul li {
	list-style: decimal;
}

.article-toolbar ul ul li:last-child,
.article-toolbar ul:last-child {
	margin-bottom: 0 !important;
}

/* Responsive */

@media (max-width: 1100px) {

	.article-toolbar {
		width: 40%;
	}

}

@media (max-width: 700px) {

	.article-toolbar {
		float: none;
		width: 70%;
		margin: 0 auto var(--spacing-child) auto;
	}

}

@media (max-width: 500px) {

	.article-toolbar {
		width: 100%;
	}

}

/* Article toolbar - used for single announcement date */

.article-toolbar2 {
	text-align: center;
	margin: 15px auto 0 auto;
}

.article-toolbar2 i {
	margin-right: 5px;
}

/* Breadcrumb */

.breadcrumbmain {
	margin: 0 auto 15px auto;
}

.breadcrumbmain ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 15px;
	list-style: none;
	color: var(--color-box-foreground);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-bottom) 100%
	);
	border: 1px solid var(--color-box-background-border);
	border-radius: 0 0 var(--border-radius-default) var(--border-radius-default);
	text-transform: capitalize;
}

.breadcrumbmain ul li {
	display: flex;
	align-items: center;
	padding: 7px 0;
	color: var(--color-box-foreground);
}

.breadcrumbmain ul li:not(:last-child)::after {
	content: "/";
	margin: 0 10px;
	color: var(--color-box-foreground);
	opacity: 0.6;
}

.breadcrumbmain ul li:last-child {
	color: var(--color-box-foreground-bold);
	font-weight: 700;
}

.breadcrumbmain ul li a {
	color: inherit;
	text-decoration: none;
}

.breadcrumbmain ul li a:hover,
.breadcrumbmain ul li a:focus {
	text-decoration: underline;
}

/* Linksbar */

.linksbar {
	position: relative;
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	border-top: 1px solid var(--color-box-background-border);
	border-bottom: 1px solid var(--color-box-background-border);
	font-size: 0.875rem;
}

.linksbar ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.375rem;
	width: var(--container-width);
	max-width: var(--container-maxwidth);
	margin: 0 auto;
	padding: 0.4375rem 0;
	list-style: none;
}

.linksbar ul li {
	display: flex;
}

.linksbar ul li a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2rem;
	padding: 0 0.875rem;
	color: var(--color-box-foreground);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--border-radius-default);
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
	text-transform: capitalize;
	transition:
		color 0.2s ease,
		background 0.2s ease,
		border-color 0.2s ease;
}

.linksbar ul li a:hover,
.linksbar ul li a:focus-visible {
	background: var(--color-muted-background);
	background: radial-gradient(
		circle,
		var(--color-muted-background-gradient-top) 0%,
		var(--color-muted-background-gradient-middle) 50%,
		var(--color-muted-background-gradient-bottom) 100%
	);
    color: var(--color-muted-foreground);
    text-shadow: var(--color-muted-foreground-shadow);
	border-color: var(--color-muted-background-border);
	text-decoration: none;
}

.linksbar ul li.linksbar-active a {
	background: var(--color-muted-background);
	background: radial-gradient(
		circle,
		var(--color-muted-background-gradient-top) 0%,
		var(--color-muted-background-gradient-middle) 50%,
		var(--color-muted-background-gradient-bottom) 100%
	);
    color: var(--color-muted-foreground);
    text-shadow: var(--color-muted-foreground-shadow);
	border-color: var(--color-muted-background-border);
}

/* Responsive */

@media (max-width: 900px) {

	.linksbar {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.linksbar ul {
		flex-wrap: nowrap;
		justify-content: flex-start;
		width: 100%;
		max-width: none;
		padding: 0.5rem 1rem;
		overflow-x: auto;
	}

	.linksbar ul li {
		flex: 0 0 auto;
	}

	.linksbar ul li a {
		min-height: 2.25rem;
		padding: 0 0.875rem;
		white-space: nowrap;
	}

	.linksbar ul li.linksbar-active a::after {
		display: none;
	}

}

/* Main */

.mainmain {
	padding: var(--spacing-parent) 0;
}

.mainmain:not(.whmcscontainer) .hr {
	border: none;
	border-top: var(--color-gradient-body-background-divider) 1px solid;
	margin: var(--spacing-child) 0;
}

.mainmain:not(.whmcscontainer) p,
.mainmain:not(.whmcscontainer) ul,
.mainmain:not(.whmcscontainer) ol {
	margin: 0 0 var(--spacing-child) 0;
}

.mainmain a:not([class]) {
	color: var(--color-primary-background);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition:
		color 0.2s ease,
		text-decoration-color 0.2s ease;
	font-weight: bold;	
}

.mainmain a:not([class]):hover,
.mainmain a:not([class]):focus-visible {
	color: var(--color-primary-active-background);
	text-decoration-color: transparent;
}

/* Forms */

/* Form fields */

.mainmain:not(.whmcscontainer) input[type="text"],
.mainmain:not(.whmcscontainer) input[type="tel"],
.mainmain:not(.whmcscontainer) input[type="number"],
.mainmain:not(.whmcscontainer) input[type="email"],
.mainmain:not(.whmcscontainer) select,
.mainmain:not(.whmcscontainer) textarea,
.banner input[type="text"],
.banner input[type="tel"],
.banner input[type="number"],
.banner input[type="email"],
.banner select,
.banner textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.625rem 0.75rem;
	background: var(--color-forms-background);
	border: 1px solid var(--color-forms-background-border);
	color: var(--color-forms-foreground);
	opacity: 1;
	border-radius: var(--border-radius-default);
	line-height: 1.4;
	transition:
		border-color var(--transition-default),
		box-shadow var(--transition-default),
		background-color var(--transition-default);
}

.mainmain:not(.whmcscontainer) input[type="text"]::placeholder,
.mainmain:not(.whmcscontainer) input[type="tel"]::placeholder,
.mainmain:not(.whmcscontainer) input[type="number"]::placeholder,
.mainmain:not(.whmcscontainer) input[type="email"]::placeholder,
.mainmain:not(.whmcscontainer) textarea::placeholder,
.banner input[type="text"]::placeholder,
.banner input[type="tel"]::placeholder,
.banner input[type="number"]::placeholder,
.banner input[type="email"]::placeholder,
.banner textarea::placeholder {
	color: var(--color-forms-foreground-placeholder);
	opacity: 0.65;
}

.mainmain:not(.whmcscontainer) input[type="text"]:focus,
.mainmain:not(.whmcscontainer) input[type="tel"]:focus,
.mainmain:not(.whmcscontainer) input[type="number"]:focus,
.mainmain:not(.whmcscontainer) input[type="email"]:focus,
.mainmain:not(.whmcscontainer) select:focus,
.mainmain:not(.whmcscontainer) textarea:focus,
.banner input[type="text"]:focus,
.banner input[type="tel"]:focus,
.banner input[type="number"]:focus,
.banner input[type="email"]:focus,
.banner select:focus,
.banner textarea:focus {
	outline: none;
	border-color: var(--color-primary-background);
	box-shadow: 0 0 0 0.1875rem rgba(255, 145, 0, 0.18);
}

.mainmain:not(.whmcscontainer) textarea,
.banner textarea {
	min-height: 14rem;
	padding: 1rem 1rem 1rem 3rem;
	resize: vertical;
} 

.mainmain:not(.whmcscontainer) input[type="file"],
.banner input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Fieldset */

.fieldset {
	display: grid;
	gap: 1.25rem;
}

.fieldset-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.fieldset-field {
	display: grid;
	gap: 0.5rem;
}

.fieldset-field label {
	color: var(--color-heading);
	font-size: 0.95rem;
	font-weight: 750;
}

.fieldset-field label span {
	color: var(--color-red);
}

.fieldset-field label em {
	color: var(--color-body);
	font-style: normal;
	font-weight: 500;
}

.fieldset-input-wrap,
.fieldset-textarea-wrap {
	position: relative;
}

.fieldset-input-wrap i,
.fieldset-textarea-wrap i {
	position: absolute;
	left: 1rem;
	top: 50%;
	color: rgba(15, 23, 42, 0.55);
	transform: translateY(-50%);
	pointer-events: none;
}

.fieldset-textarea-wrap i {
	top: 1.2rem;
	transform: none;
}

.fieldset-textarea-largerheight textarea { /* Used for Web Design Quote etc */
	min-height: 45rem !important;
}

.fieldset-input-wrap input {
	padding-left: 3rem !important;
}

/* Upload */

.fieldset-upload {
	display: grid;
	place-items: center;
	gap: 0.5rem;
	min-height: 6.5rem;
	padding: 1.25rem;
	background: var(--color-box-active-background);
	background: var(--color-box-active-background);
	background: radial-gradient(
		circle,
		var(--color-box-active-background-gradient-top) 0%,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
    color: var(--color-box-active-foreground);
	border: 1px dashed var(--color-box-active-foreground);
	border-radius: var(--border-radius-default);
	text-align: center;
	cursor: pointer;
	transition:
		background 0.2s ease,
		border-color 0.2s ease;
}

.fieldset-upload:hover {
	opacity: 0.6;
}

.fieldset-upload i {
	font-size: 2rem;
}

.fieldset-upload span {
	font-weight: 800;
}

.fieldset-upload small {
	font-size: 0.85rem;
	font-weight: 500;
}

.fieldset-uploaded-files {
	display: grid;
	gap: 0.375rem;
	width: 100%;
	margin-top: 0.5rem;
}

.fieldset-uploaded-file {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	color: var(--color-heading);
	background: rgba(12, 126, 204, 0.08);
	border-radius: calc(var(--border-radius-default) / 1.5);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.3;
	word-break: break-word;
}

.fieldset-uploaded-file i {
	color: var(--color-secondary-background);
}

/* Actions */

.fieldset-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.fieldset-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.5rem;
}

.fieldset-actions-text {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-box-foreground);
	font-size: 0.9rem;
	opacity: 0.7;
}

.fieldset-actions-text i {
	color: var(--color-box-foreground);
	opacity: 0.7;
}

@media (max-width: 750px) {

	.fieldset-row {
		grid-template-columns: 1fr;
	}

	.fieldset-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.fieldset-actions .button1 {
		width: 100%;
		justify-content: center;
	}

	.fieldset-actions-text {
		justify-content: center;
		text-align: center;
	}

}

/* Layout - Content + Sidebar */

.layout-content-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: var(--spacing-child);
	align-items: start;
	margin: 0 0 var(--spacing-parent) 0;
}

/* Form card */

.layout-content-sidebar-left {
	background: var(--color-gradient-body-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-gradient-body-background-gradient-top) 0,
		var(--color-gradient-body-background-gradient-middle) 50%,
		var(--color-gradient-body-background-gradient-bottom) 100%
	);
	border: 1px solid var(--color-box-background-border);
	border-radius: var(--border-radius-default);	
	box-shadow: var(--color-box-background-shadow);
	color: var(--color-box-foreground);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.layout-content-sidebar-left-heading {
	max-width: 38rem;
	margin: 0 0 var(--spacing-child) 0;
}

.layout-content-sidebar-left-heading h2 {
	margin: 0 0 0.75rem 0;
	color: var(--color-box-foreground-bold);
	font-family: var(--font-heading);
	font-weight: 850;
	line-height: 1.2;
}

.layout-content-sidebar-left-heading h2 {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.layout-content-sidebar-left-heading p {
	margin: 0;
}

/* Sidebar */

.layout-content-sidebar-right {
	display: grid;
	gap: var(--spacing-child);
}

/* Sidebar cards */

.layout-content-card {
	background: var(--color-gradient-body-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-gradient-body-background-gradient-top) 0,
		var(--color-gradient-body-background-gradient-middle) 50%,
		var(--color-gradient-body-background-gradient-bottom) 100%
	);
	border: 1px solid var(--color-box-background-border);
	border-radius: var(--border-radius-default);	
	box-shadow: var(--color-box-background-shadow);
	color: var(--color-box-foreground);
	padding: 1.5rem;
}

.layout-content-card h3 {
	margin: 0 0 0.75rem 0;
	color: var(--color-box-foreground-bold);
	font-family: var(--font-heading);
	font-weight: 850;
	line-height: 1.2;
}

.layout-content-card p {
	margin: 0;
}

.layout-content-card-contact {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: 1.25rem;
}

/* Card buttons */

.layout-content-card-buttons {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.layout-content-card-buttons .button1 {
	justify-content: center;
	width: 100%;
}

/* Contact list */

.layout-content-card-contact-list {
	display: grid;
	gap: 1rem;
	margin-top: 1.25rem;
}

.layout-content-card-contact-item {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	column-gap: 0.875rem;
	color: var(--color-box-foreground);
	text-decoration: none;
}

.layout-content-card-contact-item span {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--color-box-active-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-active-background-gradient-top) 0,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	color: var(--color-primary-background);
	border-radius: 50%;
}

.layout-content-card-contact-item strong {
	color: var(--color-box-foreground-bold);
	font-size: 0.95rem;
}

.layout-content-card-contact-item small {
	color: var(--color-box-foreground);
	line-height: 1.45;
}

.layout-content-card-contact-item:hover strong {
	color: var(--color-primary-background);
}

@media (max-width: 1100px) {

	.layout-content-sidebar {
		grid-template-columns: 1fr;
	}

	.layout-content-sidebar-right {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.layout-content-card-contact {
		grid-template-columns: 3.5rem minmax(0, 1fr);
	}

}

@media (max-width: 750px) {

	.layout-content-sidebar-left {
		padding: 1.25rem;
	}

	.layout-content-sidebar-right {
		grid-template-columns: 1fr;
	}

	.layout-content-card {
		padding: 1.25rem;
	}	

}

/* Content block / section wrappers */

.contentblock { /* Colors use color-box */
	position: relative;
	margin: 0 0 var(--spacing-parent) 0;
	padding: 4rem 0;
	background: #f5f6f9;
	background: linear-gradient(
		var(--gradient-degrees),
		#f5f6f9 0,
		#f5f6f9 50%,
		#f5f6f9 100%
	);
	border-radius: 0;
	overflow: hidden;

	/* Boxes override */

	--color-box-background: #ffffff;
	--color-box-background-gradient-top: #ffffff;
	--color-box-background-gradient-middle: #ffffff;
	--color-box-background-gradient-bottom: #ffffff;
	--color-box-background-border: #dedede;
	--color-box-background-divider: #e6e6e6;
	--color-box-background-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);

	/* Boxes hover override */

	--color-box-active-background: #f7f9fc;
	--color-box-active-background-gradient-top: #ffffff;
	--color-box-active-background-gradient-middle: #f8fafc;
	--color-box-active-background-gradient-bottom: #f3f6fa;
	--color-box-active-background-border: #cfd8e3;
	--color-box-active-background-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);	

}

.contentblock > *:last-child {
	margin-bottom: 0;
}

/* Featured content block */

.contentblock-featured {

	background: #eaf6ff;
	background: linear-gradient(
		var(--gradient-degrees),
		rgba(139, 202, 255, 0.7) 0,
		rgba(222, 241, 255, 0.65) 50%,
		rgba(255, 255, 255, 0.96) 100%
	);
	border-color: transparent;

}

/* hero content block */

.contentblock-hero {
	background: var(--color-gradient-2-background);
	background:
		radial-gradient(
			circle at 18% 20%,
			var(--color-gradient-2-background) 0%,
			transparent 30%
		),
		linear-gradient(
			135deg,
			var(--color-gradient-2-background-gradient-top) 0%,
			var(--color-gradient-2-background-gradient-middle) 50%,
			var(--color-gradient-2-background-gradient-bottom) 100%
		);
	color: var(--color-gradient-2-foreground);
}

.contentblock-hero .section-heading-title,
.contentblock-hero .heading1,
.contentblock-hero .heading2,
.contentblock-hero .heading3,
.contentblock-hero .heading4,
.contentblock-hero .heading5,
.contentblock-hero .heading6 {
	color: var(--color-gradient-2-foreground);
}

.contentblock-hero .section-heading-text {
	color: var(--color-gradient-2-foreground);
}

/* dark content block */

.contentblock-dark {

	background: var(--color-gradient-3-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-gradient-3-background-gradient-top) 0,
		var(--color-gradient-3-background-gradient-middle) 50%,
		var(--color-gradient-3-background-gradient-bottom) 100%
	);
	color: var(--color-white);

}

.contentblock-dark .section-heading-title,
.contentblock-dark .heading1,
.contentblock-dark .heading2,
.contentblock-dark .heading3,
.contentblock-dark .heading4,
.contentblock-dark .heading5,
.contentblock-dark .heading6 {
	color: var(--color-white);
}

.contentblock-dark .section-heading-text {
	color: var(--color-white);
}

/* Remove bottom spacing from common inner grids/components */

.contentblock .columns,
.contentblock .product-boxes1,
.contentblock .product-boxes2,
.contentblock .product-boxes3,
.contentblock .product-tables2,
.contentblock .gridboxes1,
.contentblock .gridboxes2,
.contentblock .gridboxes3,
.contentblock .gridboxes4,
.contentblock .gridboxes5,
.contentblock .gridboxes8,
.contentblock .gridboxes14,
.contentblock .gridboxes15,
.contentblock .gridboxes16,
.contentblock .gridboxes17,
.contentblock .gridboxes18,
.contentblock .gridboxes19,
.contentblock .ctanew {
	margin-bottom: 0;
}

/* Responsive */

@media (max-width: 900px) {

	.contentblock {
		padding: 3rem 0;
	}

}

@media (max-width: 640px) {

	.contentblock {
		padding: 2.5rem 0;
	}

}

/* CTA - pre-footer */

.cta {
	position: relative;
	width: 100%;
	background:
		radial-gradient(
			circle at 18% 20%,
			var(--color-gradient-2-background) 0%,
			transparent 30%
		),
		linear-gradient(
			135deg,
			var(--color-gradient-2-background-gradient-top) 0%,
			var(--color-gradient-2-background-gradient-middle) 50%,
			var(--color-gradient-2-background-gradient-bottom) 100%
		);
	border-top: 1px solid var(--color-gradient-2-background-border);
	color: var(--color-gradient-2-foreground);
}

.cta .contentcontainer {
	position: relative;
}

.cta .cta-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 5.75rem;
	padding: 1.25rem 0;
}

/* Mascot */

.cta .cta-mascot {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 10.5rem;
	height: 9rem;
	background: url("/libs/images/mascot-l.png") center bottom no-repeat;
	background-size: 9.75rem auto;
	pointer-events: none;
}

/* Text */

.cta .cta-col1 {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	padding-left: 13.3rem;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	line-height: 1.15;
	font-weight: 900;
	letter-spacing: -0.04em;
	text-transform: none;
	text-shadow: none;
}

/* Button column */

.cta .cta-col2 {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 0 0 auto;
}

.cta .cta-col2 .button1 {
	white-space: nowrap;
}

/* Responsive */

@media (max-width: 760px) {

	.cta .cta-inner {
		align-items: center;
		flex-direction: column;
		gap: 1.5rem;
		min-height: auto;
		padding: 1.5rem 0;
		text-align: center;
	}

	.cta .cta-mascot {
		right: 0;
		left: auto;
		bottom: 0;
		width: 6.25rem;
		height: 5.75rem;
		background-size: 6rem auto;
		opacity: 0.18;
	}

	.cta .cta-col1 {
		padding: 0;
		text-align: center;
	}

	.cta .cta-col2 {
		justify-content: center;
		width: 100%;
	}

	.cta .cta-col2 .button1 {
		width: auto;
	}

}

@media (max-width: 420px) {

	.cta .cta-inner {
		padding: 1.25rem 0;
	}

	.cta .cta-col1 {
		padding-right: 0;
		font-size: 1.3rem;
	}

	.cta .cta-mascot {
		display: none;
	}

}

/* CTA2 - used on docs */

.cta2 {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px;
	margin: 0 0 var(--spacing-child) 0;
	padding: 24px 28px;
	border: 1px solid rgba(255, 151, 0, 0.3);
	border-radius: var(--border-radius-default);
	background-color: #fffaf3;
	color: var(--color-body);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.035);
}

.cta2-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background-color: rgba(255, 151, 0, 0.12);
	color: var(--color-primary-background);
	font-size: 32px;
	line-height: 1;
}

.cta2-content {
	min-width: 0;
}

.cta2-title {
	margin: 0 0 8px 0;
	color: var(--color-heading);
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.25;
}

.cta2-text p:last-child {
	margin-bottom: 0;
}

.cta2-details {
	display: flex;
	align-items: center;
	gap: 26px;
	padding-left: 30px;
	border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.cta2-price {
	flex: 0 0 auto;
	padding: 12px 18px;
	border: 1px solid rgba(255, 151, 0, 0.3);
	border-radius: var(--border-radius);
	background-color: #fff5e7;
	color: var(--color-heading);
	white-space: nowrap;
}

.cta2-price strong {
	font-size: 24px;
	line-height: 1;
}

.cta2-price span {
	font-size: 14px;
	font-weight: 600;
}

.cta2-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.cta2-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--border-radius-default);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cta2-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
	color: var(--color-body);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.cta2-link:hover,
.cta2-link:focus {
	border-bottom-color: transparent;
	color: var(--color-primary-background);
	text-decoration: none;
}

.cta2-link i {
	font-size: 11px;
}

@media (max-width: 1050px) {

	.cta2 {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.cta2-details {
		grid-column: 1 / -1;
		justify-content: center;
		width: 100%;
		padding: 22px 0 0 0;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		border-left: 0;
	}

}

@media (max-width: 600px) {

	.cta2 {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 22px;
		text-align: center;
	}

	.cta2-icon {
		width: 64px;
		height: 64px;
		margin: 0 auto;
		font-size: 28px;
	}

	.cta2-details {
		flex-direction: column;
		gap: 16px;
		padding-top: 20px;
	}

	.cta2-actions {
		width: 100%;
	}

	.cta2-button {
		width: 100%;
		white-space: normal;
	}

}

/* Footermain */

.footermain {
	color: var(--color-gradient-3-foreground);
	background: var(--color-gradient-3-background);
	background: linear-gradient(
		to right,
		var(--color-gradient-3-background-gradient-top) 0%,
		var(--color-gradient-3-background-gradient-middle) 50%,
		var(--color-gradient-3-background-gradient-bottom) 100%
	);
	border-top: 1px solid var(--color-gradient-3-background-border);
}

.footermain .footermain-inner {
	display: grid;
	grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
	gap: var(--spacing-child);
	align-items: start;
	padding: var(--spacing-parent) 0;
}

.footermain .footermain-col {
	min-width: 0;
}

.footermain .footermain-col1 {
	padding: 0 var(--spacing-child) 0 0;
	border-right: 1px solid var(--color-gradient-3-background-divider);
}

.footermain a {
	color: var(--color-gradient-3-foreground);
}

.footermain a:hover,
.footermain a:focus {
	color: var(--color-gradient-3-foreground-bold);
}

.footermain .footermain-heading {
	margin: 0 0 0.625rem 0;
	color: var(--color-gradient-3-foreground-bold);
	font-family: var(--font-heading);
	font-size: 1.2em;
	font-weight: 700;
	text-align: left;
	text-shadow: 1px 1px var(--color-gradient-3-foreground-shadow);
}

.footermain .footermain-col1 .footermain-heading {
	margin-bottom: 1.375rem;
}

.footermain .footermain-logo {
	display: table;
	margin: 0 0 0.9375rem 0;
}

.footermain .footermain-logo img {
	display: block;
	width: 100%;
	max-width: 145px;
	height: auto;
}

.footermain .footermain-description {
	max-width: var(--container-content-maxwidth);
	margin: 0 0 var(--spacing-inner) 0;
}

/* Icon sets */

.footermain .footermain-iconset {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9375rem;
	margin: 0 0 var(--spacing-inner) 0;
}

.footermain .footermain-iconset-social {
	margin-bottom: 1.25rem;
}

.footermain .footermain-iconset .footermain-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background: var(--color-gradient-3-background-highlight);
	border-radius: var(--border-radius-default);
	overflow: hidden;
	transition:
		background-color var(--transition-default),
		transform var(--transition-default);
}

.footermain .footermain-iconset .footermain-icon:hover,
.footermain .footermain-iconset .footermain-icon:focus,
.footermain .footermain-iconset .footermain-icon:focus-within {
	background: #6e6e6e;
}

.footermain .footermain-iconset.footermain-iconset-hover .footermain-icon:hover,
.footermain .footermain-iconset.footermain-iconset-hover .footermain-icon:focus,
.footermain .footermain-iconset.footermain-iconset-hover .footermain-icon:focus-within {
	transform: scale(1.1);
}

/* Make the full icon background clickable */

.footermain .footermain-iconset .footermain-icon a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
	border-radius: inherit;
}

/* Social icons - Font Awesome Brands */

.footermain .footermain-iconset.footermain-iconset-social .footermain-icon {
	width: 2.375rem;
	height: 2.375rem;
}

.footermain .footermain-iconset.footermain-iconset-social .footermain-icon i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--color-gradient-3-foreground);
	background: none;
	font-family: "Font Awesome 6 Brands";
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
}

.footermain .footermain-iconset.footermain-iconset-social .footermain-icon:hover i,
.footermain .footermain-iconset.footermain-iconset-social .footermain-icon:focus i,
.footermain .footermain-iconset.footermain-iconset-social .footermain-icon:focus-within i {
	color: var(--color-gradient-3-foreground-bold);
}

.footermain .footermain-icon-facebook i::before {
	content: "\f39e";
}

.footermain .footermain-icon-twitter i::before {
	content: "\f099";
}

.footermain .footermain-icon-youtube i::before {
	content: "\f167";
}

.footermain .footermain-icon-whatsapp i::before {
	content: "\f232";
}

/* Payment method icons - image based */

.footermain .footermain-iconset.footermain-iconset-paymentmethods .footermain-icon {
	width: 3.75rem;
	height: 1.875rem;
}

.footermain .footermain-iconset.footermain-iconset-paymentmethods .footermain-icon i {
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
}

.footermain .footermain-icon-paypal i {
	background-image: url("/libs/images/paypal.png");
	background-size: 2.875rem auto;
}

.footermain .footermain-icon-bitcoin i {
	background-image: url("/libs/images/bitcoin.png");
	background-size: 2.875rem auto;
}

.footermain .footermain-icon-mastercard i {
	background-image: url("/libs/images/mastercard.png");
	background-size: 2.1875rem auto;
}

.footermain .footermain-icon-visa i {
	background-image: url("/libs/images/visa.png");
	background-size: 2.8125rem auto;
}

/* Links */

.footermain .footermain-links {
	margin: 0 0 var(--spacing-child) 0;
}

.footermain .footermain-links ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footermain .footermain-links ul li {
	position: relative;
}

.footermain .footermain-links ul li a {
	display: block;
	padding: 0.3125rem 0;
	text-decoration: none;
}

.footermain .footermain-links ul li a:hover,
.footermain .footermain-links ul li a:focus {
	text-decoration: underline;
}

.footermain .footermain-links ul li a i {
	margin: 0 0.625rem 0 0;
}

/* Highlight badges */

.footermain .footermain-highlight {
	position: relative;
}

.footermain .footermain-highlight a {
	padding-right: 3.25rem;
}

.footermain .footermain-highlight::after {
	position: absolute;
	top: 50%;
	right: 0.3125rem;
	transform: translateY(-50%);
	padding: 0.25rem 0.3125rem;
	border-radius: var(--border-radius-default);
	font-size: 0.7em;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.footermain .footermain-highlight-hot::after {
	content: "hot";
	color: var(--color-badge-hot-foreground);
	background: var(--color-badge-hot-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-hot-background-gradient-top) 0,
		var(--color-badge-hot-background-gradient-middle) 50%,
		var(--color-badge-hot-background-gradient-bottom) 100%
	);
}

.footermain .footermain-highlight-new::after {
	content: "new";
	color: var(--color-badge-new-foreground);
	background: var(--color-badge-new-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-new-background-gradient-top) 0,
		var(--color-badge-new-background-gradient-middle) 50%,
		var(--color-badge-new-background-gradient-bottom) 100%
	);
}

/* Responsive */

@media (max-width: 1100px) {

	.footermain .footermain-inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.footermain .footermain-col1 {
		order: 4;
		grid-column: 1 / -1;
		padding: var(--spacing-child) 0 0 0;
		border-top: 1px solid var(--color-gradient-3-background-divider);
		border-right: none;
	}

	.footermain .footermain-col2 {
		order: 1;
	}

	.footermain .footermain-col3 {
		order: 2;
	}

	.footermain .footermain-col4 {
		order: 3;
	}

	.footermain .footermain-col1 .footermain-heading {
		text-align: center;
	}

	.footermain .footermain-logo {
		margin-right: auto;
		margin-left: auto;
	}

	.footermain .footermain-description {
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}

	.footermain .footermain-iconset {
		justify-content: center;
	}

}

@media (max-width: 850px) {

	.footermain .footermain-inner {
		grid-template-columns: 1fr;
		padding-bottom: 0;
	}

	.footermain .footermain-col,
	.footermain .footermain-col1 {
		grid-column: auto;
		width: 100%;
	}

	.footermain .footermain-heading,
	.footermain .footermain-links ul li a {
		text-align: center;
	}

	.footermain .footermain-links ul li:last-child a {
		margin-bottom: 0;
	}

	.footermain .footermain-highlight a {
		padding-right: 0;
	}

	.footermain .footermain-highlight::after {
		position: static;
		display: inline-block;
		margin-left: 0.5rem;
		transform: none;
		vertical-align: middle;
	}

}

/* Copyrightmain */

.copyrightmain {
	color: var(--color-gradient-3-foreground);
	border-bottom: 1px solid var(--color-gradient-3-background-border);
}

.copyrightmain .copyrightmain-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--spacing-child);
	align-items: center;
	padding: var(--spacing-child) 0;
	border-top: 1px solid var(--color-gradient-3-background-divider);
}

.copyrightmain a {
	color: var(--color-gradient-3-foreground);
}

.copyrightmain a:hover,
.copyrightmain a:focus {
	color: var(--color-gradient-3-foreground-bold);
}

.copyrightmain .copyrightmain-text {
	min-width: 0;
}

.copyrightmain .copyrightmain-links {
	min-width: 0;
}

.copyrightmain .copyrightmain-links ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}

.copyrightmain .copyrightmain-links ul li {
	display: flex;
	align-items: center;
}

.copyrightmain .copyrightmain-links ul li a {
	display: block;
	padding: 0 0.9375rem;
	border-right: 1px solid var(--color-gradient-3-background-divider);
	text-decoration: none;
}

.copyrightmain .copyrightmain-links ul li a:hover,
.copyrightmain .copyrightmain-links ul li a:focus {
	text-decoration: underline;
}

.copyrightmain .copyrightmain-links ul li:first-child a {
	padding-left: 0;
}

.copyrightmain .copyrightmain-links ul li:last-child a {
	padding-right: 0;
	border-right: none;
}

/* Responsive */

@media (max-width: 1100px) {

	.copyrightmain .copyrightmain-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.copyrightmain .copyrightmain-links ul {
		justify-content: center;
	}

	.copyrightmain .copyrightmain-links ul li:first-child a {
		padding-left: 0.9375rem;
	}

	.copyrightmain .copyrightmain-links ul li:last-child a {
		padding-right: 0.9375rem;
	}

}

@media (max-width: 850px) {

	.copyrightmain .copyrightmain-links ul {
		display: block;
	}

	.copyrightmain .copyrightmain-links ul li {
		display: block;
		width: 100%;
	}

	.copyrightmain .copyrightmain-links ul li a,
	.copyrightmain .copyrightmain-links ul li:first-child a,
	.copyrightmain .copyrightmain-links ul li:last-child a {
		display: block;
		padding: 0.3125rem 0;
		border-right: none;
		text-align: center;
	}

	.copyrightmain .copyrightmain-links ul li:last-child a {
		margin-bottom: 0;
	}

}

/* Legalmain */

.legalmain {
	padding: var(--spacing-child) 0;
	font-size: 0.9em;
	text-align: center;
}

.legalmain .legalmain-text {
	margin: 0 0 0.9375rem 0;
	padding: 0 0 0.9375rem 0;
}

.legalmain .legalmain-text:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

.legalmain .legalmain-heading {
	margin: 0 0 0.9375rem 0;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
}

.legalmain p {
	margin: 0 0 0.9375rem 0;
}

.legalmain p:last-child,
.legalmain .legalmain-text p:last-child {
	margin-bottom: 0;
}

/*

------------------------------------------
------------------------------------------

----- Content

------------------------------------------
------------------------------------------	

*/

/* Columns */

.columns {
	--columns-col-width: var(--column-3);

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0 0 var(--spacing-parent) 0;
}

.columns.columns-verticle-center,
.columns.columns-vertical-center {
	align-items: center;
}

.columns.columns-horizontal-center {
	justify-content: center;
}

.columns .columns-col {
	box-sizing: border-box;
	min-width: 0;
	width: var(--columns-col-width);
	margin: 0 0 var(--spacing-child) 0;
}

/* Column counts */

.columns.columns-1col {
	--columns-col-width: var(--column-1);
}

.columns.columns-2col {
	--columns-col-width: var(--column-2);
}

.columns.columns-3col {
	--columns-col-width: var(--column-3);
}

.columns.columns-4col {
	--columns-col-width: var(--column-4);
}

.columns.columns-5col {
	--columns-col-width: var(--column-5);
}

.columns.columns-6col {
	--columns-col-width: var(--column-6);
}

/* Custom layouts */

.columns.columns-style1 .columns-col1 {
	width: 59%;
}

.columns.columns-style1 .columns-col2 {
	width: 37%;
}

/* Responsive columns */

@media (max-width: 1350px) {

	.columns.columns-6col {
		--columns-col-width: var(--column-5);
	}

}

@media (max-width: 1200px) {

	.columns.columns-5col,
	.columns.columns-6col {
		--columns-col-width: var(--column-4);
	}

}

@media (max-width: 1100px) {

	.columns.columns-4col,
	.columns.columns-5col,
	.columns.columns-6col {
		--columns-col-width: var(--column-3);
	}

}

@media (max-width: 1000px) {

	.columns.columns-style1 {
		flex-direction: column;
	}

	.columns.columns-style1 .columns-col1,
	.columns.columns-style1 .columns-col2 {
		width: var(--column-1);
	}

	.columns.columns-2col,
	.columns.columns-3col,
	.columns.columns-4col,
	.columns.columns-5col,
	.columns.columns-6col {
		--columns-col-width: var(--column-2);
	}

	.columns.columns-2col .columns-col1 {
		order: 2;
	}

	.columns.columns-2col .columns-col2 {
		order: 1;
	}

}

@media (max-width: 650px) {

	.columns.columns-1col,
	.columns.columns-2col,
	.columns.columns-3col,
	.columns.columns-4col,
	.columns.columns-5col,
	.columns.columns-6col {
		--columns-col-width: var(--column-1);
	}

}

@media (max-width: 640px) {

	.columns-verticle-center .button1 { /* Center FAQ contact us button */
		width: 100%;
	}

}

/* Notice */

.notice {
	--notice-background: transparent;
	--notice-border: transparent;
	--notice-foreground: var(--color-body);

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 var(--spacing-child) 0;
	padding: 0.9375rem var(--spacing-inner);
	color: var(--notice-foreground);
	background: var(--notice-background);
	border: 1px solid var(--notice-border);
	border-radius: var(--border-radius-default);
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
}

.notice p {
	margin: 0 auto;
	text-align: center;
}

.notice p:last-child {
	margin-bottom: 0 !important;
}

.notice .button1 {
	margin: 0.1875rem 0.625rem;
	padding: 0.2em 0.6em;
	font-size: 0.8em;
}

/* Notice styles */

.notice-warning {
	--notice-background: #f8d7da;
	--notice-border: #f5c6cb;
	--notice-foreground: #721c24;
}

.notice.notice-warning a,
.notice.notice-warning a:hover {
	color: var(--notice-foreground);
}

.notice-success {
	--notice-background: #d4edda;
	--notice-border: #c3e6cb;
	--notice-foreground: #155724;
}

.notice.notice-success a,
.notice.notice-success a:hover {
	color: var(--notice-foreground);
}

.notice-alert {
	--notice-background: #fff3cd;
	--notice-border: #ffeeba;
	--notice-foreground: #856404;
}

.notice.notice-alert a,
.notice.notice-alert a:hover {
	color: var(--notice-foreground);
}

.notice-info {
	--notice-background: #cce5ff;
	--notice-border: #b8daff;
	--notice-foreground: #004085;
}

.notice.notice-info a,
.notice.notice-info a:hover {
	color: var(--notice-foreground);
}

/* Notice bar */

.noticebar {
	position: relative;
	width: 100%;
	margin: 0;
	color: var(--color-gradient-3-foreground-bold);
	background: var(--color-gradient-3-background);
	background: linear-gradient(
		to right,
		var(--color-gradient-3-background-gradient-top) 0%,
		var(--color-gradient-3-background-gradient-middle) 50%,
		var(--color-gradient-3-background-gradient-bottom) 100%
	);
	border: none;
	border-radius: 0;
	font-size: 0.9375rem;
	line-height: 1.4;
	text-align: center;
}

.noticebar .contentcontainer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.3125rem 0;
}

.noticebar p {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 auto;
	color: inherit;
}

.noticebar .button1 {
	min-height: auto;
	margin: 0 0 0 0.25rem;
	padding: 0.4rem 0.775rem;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1;
	vertical-align: middle;
}

/* Notice bar labels */

.noticebar.noticebar-highlight-news p::before,
.noticebar.noticebar-highlight-sale p::before,
.noticebar.noticebar-highlight-maintenance p::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.1875rem 0.4375rem;
	color: #fff;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 800;
	line-height: 1;
	text-transform: capitalize;
	vertical-align: middle;
}

.noticebar.noticebar-highlight-news p::before {
	content: "News";
	background: purple;
}

.noticebar.noticebar-highlight-sale p::before {
	content: "Sale";
	background: red;
}

.noticebar.noticebar-highlight-maintenance p::before {
	content: "Maintenance";
	color: var(--color-badge-new-foreground);
	background: var(--color-badge-new-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-new-background-gradient-top) 0,
		var(--color-badge-new-background-gradient-middle) 50%,
		var(--color-badge-new-background-gradient-bottom) 100%
	);
}

/* Close button */

.notice .notice-close a,
.noticebar .notice-close a {
	position: absolute;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: inherit;
	text-decoration: none;
}

.notice .notice-close a::after,
.noticebar .notice-close a::after {
	content: "\f00d";
	font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1;
	color: var(--color-secondary-background);
}

.notice .notice-close a {
	top: -1rem;
	right: -0.5rem;
}

.noticebar .notice-close a {
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

.notice.notice-noticebar .notice-close a::after,
.noticebar .notice-close a::after {
	color: var(--color-gradient-3-foreground-bold);
}

.noticebar .notice-close a:hover::after,
.noticebar .notice-close a:focus::after {
	color: var(--color-primary-background);
}

/* Responsive */

@media (max-width: 650px) {

	.noticebar {
		font-size: 0.875rem;
	}

	.noticebar .contentcontainer {
		min-height: auto;
		padding: 0.625rem 0;
	}

	.noticebar p {
		gap: 0.375rem;
	}

	.noticebar .button1 {
		margin-top: 0.25rem;
	}

}

/* Highlight box */

.highlightbox {
	display: flex;
	flex-direction: column;
	margin: 0 0 var(--spacing-parent) 0;
	padding: var(--spacing-child);
	color: var(--color-box-foreground);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-background-shadow);
	border: 1px solid var(--color-box-background-border);
	border-radius: var(--border-radius-default);
}

.highlightbox::after {
	content: "";
	display: table;
	clear: both;
}

.highlightbox a {
	color: var(--color-box-foreground);
}

.highlightbox a:hover,
.highlightbox a:focus {
	color: var(--color-primary-background);
}

.highlightbox p:last-child {
	margin-bottom: 0;
}

.highlightbox .highlightbox-heading {
	margin: 0 0 0.9375rem;
	color: var(--color-heading);
	font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.highlightbox .highlightbox-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	text-align: center;
}

.highlightbox .highlightbox-buttons .button1 {
	margin: 0;
}

@media (max-width:500px) {

	.highlightbox .highlightbox-buttons {
		flex-direction: column;
		width: 100%;
	}

	.highlightbox .highlightbox-buttons .button1 {
		width: 100%;
	}

}

/* Code snippet - Used with Prism */

.codesnippet {
	position: relative;
	margin: 0 0 var(--spacing-child) 0;
	padding: 2.25rem 0 0 0;
}

.codesnippet::before {
	content: "Code";
	position: absolute;
	top: 9px;
	left: 0;
	z-index: 2;
	padding: 0.3125rem 0.625rem;
	color: var(--color-badge-new-foreground);
	background: var(--color-badge-new-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-new-background-gradient-top) 0,
		var(--color-badge-new-background-gradient-middle) 50%,
		var(--color-badge-new-background-gradient-bottom) 100%
	);
	border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1.2;
}

.codesnippet pre[class*="language-"] {
	margin-top: 0;
}

.codesnippet.codesnippet-maxheight code[class*="language-"],
.codesnippet.codesnippet-maxheight pre[class*="language-"] {
	max-height: 18.75rem;
	overflow: auto;
}

/* Figure image */

.figure {
	--figure-padding: 15px;

	box-sizing: border-box;
	display: block;
	width: fit-content;
	max-width: min(650px, 100%);
	margin: 0 0 var(--spacing-child) 0;
	padding: var(--figure-padding) var(--figure-padding) 0 var(--figure-padding);
}

.figure.figure-figurecenter {
	margin-right: auto;
	margin-left: auto;
}

.figure.figure-figureright {
	float: right;
	margin: 0 0 var(--spacing-child) var(--spacing-child);
}

.figure.figure-figureleft {
	float: left;
	margin: 0 var(--spacing-child) var(--spacing-child) 0;
}

.figure img {
	display: block;
	max-width: 100%;
	height: auto;
}

.figure .figure-figcaption {
	padding: var(--figure-padding);
	color: var(--color-box-foreground);
	text-align: center;
}

@media (max-width: 1000px) {

	.figure.figure-figureright,
	.figure.figure-figureleft {
		float: none;
		margin-right: auto;
		margin-left: auto;
	}

}

@media (max-width: 700px) {

	.figure {
		width: 100%;
		max-width: 100%;
	}

	.figure img {
		width: 100%;
	}

}

/* Accordion */

.accordion {
	display: flex;
	flex-direction: column;
	margin: 0 0 var(--spacing-parent) 0;
	border-right: 1px solid var(--color-box-background-border);
	border-left: 1px solid var(--color-box-background-border);
}

.accordion .accordion-block {
	width: 100%;
}

.accordion .accordion-heading {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spacing-child);
	min-height: 48px;
	padding: 12px var(--spacing-child) 12px 56px;
	cursor: pointer;
	color: var(--color-box-foreground);
	font-weight: 700;
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	border-top: 1px solid var(--color-box-background-border);
	transition:
		color var(--transition-default),
		background-color var(--transition-default);
}

.accordion .accordion-heading::before {
	content: "\f067";
	position: absolute;
	top: 50%;
	left: 22px;
	transform: translateY(-50%);
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	font-size: 14px;
	line-height: 1;
	color: currentColor;
}

.accordion .accordion-heading:hover {
	color: var(--color-primary-background);
}

.accordion .accordion-close {
	color: var(--color-primary-background);
	border-bottom: 1px solid var(--color-box-background-border);
}

.accordion .accordion-close::before {
	content: "\f068";
}

.accordion .accordion-tag {
	margin-left: auto;
	padding: 5px 6px;
	border-radius: var(--border-radius-default);
	color: var(--color-gradient-body-foreground);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	line-height: 1;
	font-size: 0.85em;
	white-space: nowrap;
}

.accordion .accordion-answer {
	display: none;
	padding: var(--spacing-inner) var(--spacing-inner) var(--spacing-inner) 56px;
	color: var(--color-box-foreground);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
}

.accordion .accordion-answer p:last-child {
	margin-bottom: 0;
}

.accordion .accordion-block:last-child .accordion-heading,
.accordion .accordion-block:last-child .accordion-answer {
	border-bottom: 1px solid var(--color-box-background-border);
}

@media (max-width: 500px) {

	.accordion .accordion-heading {
		padding: 12px var(--spacing-child) 12px 48px;
	}

	.accordion .accordion-heading::before {
		left: 18px;
	}

	.accordion .accordion-answer {
		padding: var(--spacing-child);
	}

}

/* Section Heading */

.section-heading {
	position: relative;
	margin-bottom: 2.625rem;
}

.section-heading-center {
	text-align: center;
}

.section-heading-left {
	text-align: left;
}

.section-heading-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.75rem;
	padding: 0.4375rem 0.8125rem;
	border-radius: 999px;
	font-size: 0.75rem;
	line-height: 1;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.section-heading-title {
	position: relative;
	margin: 0;
	padding-bottom: 1rem;
	color: var(--color-heading);
	font-weight: 850;
	line-height: 1.12;
	letter-spacing: -0.035em;
}

.section-heading-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 4rem;
	height: 0.1875rem;
	background: var(--color-primary-background);
	border-radius: 999px;
}

.section-heading-center .section-heading-title::after {
	left: 50%;
	transform: translateX(-50%);
}

.section-heading-left .section-heading-title::after {
	left: 0;
}

.section-heading-text {
	max-width: var(--container-content-maxwidth);
	margin-top: 1.125rem;
	font-size: 1.1em;
	line-height: 1.7;
	font-weight: 500;
}

.section-heading-center .section-heading-text {
	margin-left: auto;
	margin-right: auto;
}

.section-heading-left .section-heading-text {
	margin-left: 0;
	margin-right: auto;
}

@media (max-width: 40rem) {

	.section-heading {
		margin-bottom: 2rem;
	}

}

/* Tags - Used on the web design case study pages */

.tags {
	margin: 0 0 var(--spacing-parent) 0;
}

.tags ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.tags ul li {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	padding: 0.625rem 0.9375rem;
	color: var(--color-box-foreground);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-background-shadow);
	border-radius: var(--border-radius-default);
}

.tags ul li:hover {
	background: var(--color-box-active-background);
	background: radial-gradient(
		circle,
		var(--color-box-active-background-gradient-top) 0%,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-active-background-shadow);
}

.tags ul li i {
	flex: 0 0 auto;
	margin-right: 5px;
}

.tags ul li a {
	color: var(--color-box-foreground) !important;
	text-decoration: underline !important;
}

.tags ul li a:hover,
.tags ul li a:focus {
	color: var(--color-box-foreground) !important;
	text-decoration: none !important;
}

/* Items in cart */

.itemsincart {
	padding: var(--spacing-child) 0;
	border-bottom: 1px solid var(--color-border);
}

.itemsincart .contentcontainer {
	position: relative;
	z-index: 1;
}

.itemsincart .contentcontainer::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: calc(-1 * var(--spacing-child));
	z-index: -1;
	width: 180px;
	height: 145px;
	background: url("/libs/images/mascot-r.png") center center no-repeat;
	background-size: contain;
	pointer-events: none;
}

.itemsincart .itemsincart-heading {
	margin: 0 0 var(--spacing-child) 0;
	color: var(--color-heading);
	text-align: center;
}

.itemsincart p {
	max-width: var(--container-content-maxwidth);
	margin-right: auto;
	margin-left: auto;
	font-size: 1.1rem;
	text-align: center;
}

.itemsincart p:last-child {
	margin-bottom: 0;
}

.itemsincart .itemsincart-coupon {
	display: inline-block;
	padding: 0.3125rem 0.625rem;
	color: var(--color-box-foreground);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	border: 3px dashed var(--color-primary-background);
	border-radius: var(--border-radius-default);
	font-weight: 700;
	line-height: 1.2;
}

.itemsincart .itemsincart-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.875rem;
	margin: var(--spacing-child) 0 0 0;
	text-align: center;
}

.itemsincart .itemsincart-buttons .button1 {
	margin: 0;
}

.hook-itemsincart .banner .format {
	margin-top: 0;
}

@media (max-width: 730px) {

	.itemsincart .itemsincart-coupon {
		display: block;
		width: fit-content;
		margin: 0.625rem auto 0 auto;
	}

}

@media (max-width: 650px) {

	.itemsincart .contentcontainer::after {
		display: none;
	}

}

/* Navsub */

.navsub {
	--navsub-max-width: 100%;

	max-width: var(--navsub-max-width);
	margin: 0 auto var(--spacing-child) auto;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.navsub ul {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0.625rem;
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 0 0 1.2rem 0;
	list-style: none;
	text-align: center;
}

.navsub ul li {
	display: block;
	flex: 0 0 auto;
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-background-shadow);
	border-radius: var(--border-radius-default);
	overflow: hidden;
	transition:
		color var(--transition-default),
		background-color var(--transition-default),
		transform var(--transition-default);
}

.navsub ul li.tabs-active,
.navsub ul li:hover,
.navsub ul li:focus,
.navsub ul li:focus-within {
	background: var(--color-box-active-background);
	background: linear-gradient(
		to right,
		var(--color-box-active-background-gradient-top) 0%,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-active-background-shadow);
	border-color: var(--color-box-active-background-border);
}

.navsub ul li.tabs-active a,
.navsub ul li:hover a,
.navsub ul li:focus a,
.navsub ul li:focus-within a {
	color: var(--color-primary-background) !important;
}

.navsub ul li a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.875rem;
	padding: 0.75rem 1.125rem;
	color: inherit;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	color: var(--color-box-foreground) !important;
}

.navsub ul li.tabs-active a::after,
.navsub ul li:hover a::after,
.navsub ul li:focus a::after,
.navsub ul li:focus-within a::after {
	opacity: 1;
	transform: scaleX(1);
}

.navsub ul li a:hover,
.navsub ul li a:focus {
	text-decoration: none;
}

/* Tabs / style 1 */

.navsub.tabs,
.navsub.navsub-style1 {
	padding: 0;
	border-bottom: 1px solid var(--color-box-background-border);
}

.navsub.tabs ul,
.navsub.navsub-style1 ul {
	justify-content: center;
}

/* Compact style */

.navsub.navsub-compact ul {
	gap: 0.5rem;
}

.navsub.navsub-compact ul li a {
	min-height: 2.5rem;
	padding: 0.625rem 0.875rem;
	font-size: 0.95em;
}

/* Scrollbar */

.navsub::-webkit-scrollbar {
	height: 0.5rem;
}

.navsub::-webkit-scrollbar-thumb {
	background: var(--color-box-background-border);
	border-radius: 999px;
}

.navsub::-webkit-scrollbar-track {
	background: transparent;
}

/* Responsive */

@media (max-width: 650px) {

	.navsub {
		max-width: 100%;
	}

	.navsub ul {
		gap: 0.5rem;
		padding-bottom: 0.5rem;
	}

	.navsub ul li a {
		min-height: 2.5rem;
		padding: 0.625rem 0.875rem;
		font-size: 0.95em;
	}

}

/* Tabs */

.tabs .tabs-content {
	display: none;
}

/* List */

.list {
	--list-item-width: var(--column-1);
}

.list ul,
.list ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 0.3125rem;
	margin: 0 0 var(--spacing-child) 0;
	padding: 0;
}

.list ul li,
.list ol li {
	box-sizing: border-box;
	width: var(--list-item-width);
	min-width: 0;
	margin: 0;
	padding: 0.3125rem 0.625rem;
}

/* Unordered list */

.list ul {
	list-style: none;
}

.list ul li {
	position: relative;
	padding-left: 1.25rem;
}

.list ul li::before {
	content: "";
	position: absolute;
	top: 0.95em;
	left: 0;
	width: 0.4375rem;
	height: 0.4375rem;
	transform: translateY(-50%);
	background: var(--color-primary-background);
	border-radius: 50%;
}

/* Ordered list */

.list ol {
	list-style-position: inside;
}

.list ol li {
	list-style: decimal;
	padding-left: 0;
}

/* Columns */

.list.list-col1 {
	--list-item-width: var(--column-1);
}

.list.list-col2 {
	--list-item-width: var(--column-2);
}

.list.list-col3 {
	--list-item-width: var(--column-3);
}

.list.list-col4 {
	--list-item-width: var(--column-4);
}

.list.list-col5 {
	--list-item-width: var(--column-5);
}

.list.list-col6 {
	--list-item-width: var(--column-6);
}

/* Responsive */

@media (max-width: 1350px) {

	.list.list-col6 {
		--list-item-width: var(--column-5);
	}

}

@media (max-width: 1200px) {

	.list.list-col5,
	.list.list-col6 {
		--list-item-width: var(--column-4);
	}

}

@media (max-width: 1100px) {

	.list.list-col4,
	.list.list-col5,
	.list.list-col6 {
		--list-item-width: var(--column-3);
	}

}

@media (max-width: 1000px) {

	.list.list-col3,
	.list.list-col4,
	.list.list-col5,
	.list.list-col6 {
		--list-item-width: var(--column-2);
	}

}

@media (max-width: 650px) {

	.list,
	.list.list-col2,
	.list.list-col3,
	.list.list-col4,
	.list.list-col5,
	.list.list-col6 {
		--list-item-width: var(--column-1);
	}

}

/* CTA Product */

.cta-product {
	height: 100%;
}

.cta-product .cta-product-image {
	min-height: 12.5rem;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.cta-product .cta-product-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 12.5rem;
	padding: var(--spacing-child);
	background: rgba(0, 0, 0, 0.6);
}

.cta-product .button1 {
	margin: 0.9375rem;
}

/* CTA Product Bar - Sticky Bar */

.cta-product-bar {
	display: none;
	position: relative;
}

.cta-product-bar-stuck-active {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 50;
	display: block;
	width: 100%;
	padding: 0.9375rem 3.75rem 0.9375rem 0.9375rem;
	overflow: visible;
	background:
		radial-gradient(
			circle at 18% 20%,
			var(--color-gradient-2-background) 0%,
			transparent 30%
		),
		linear-gradient(
			135deg,
			var(--color-gradient-2-background-gradient-top) 0%,
			var(--color-gradient-2-background-gradient-middle) 50%,
			var(--color-gradient-2-background-gradient-bottom) 100%
		);
	border-top: 1px solid var(--color-gradient-2-background-border);
	box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.15);
}

.cta-product-bar-stuck-active ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.cta-product-bar-stuck-active ul li {
	display: block;
	margin: 0;
}

.cta-product-bar-stuck-active .cta-product-bar-stuck-close {
	position: absolute;
	top: 50%;
	right: 1.375rem;
	transform: translateY(-50%);
}

.cta-product-bar-stuck-active .cta-product-bar-stuck-close a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	border-radius: var(--border-radius-default);
}

.cta-product-bar-stuck-active .cta-product-bar-stuck-close a:hover,
.cta-product-bar-stuck-active .cta-product-bar-stuck-close a:focus {
	background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 650px) {

	.cta-product-bar-stuck-active {
		padding: 0.9375rem;
	}

	.cta-product-bar-stuck-active ul li {
		width: 100%;
	}

	.cta-product-bar-stuck-active ul li .button1 {
		width: 100%;
	}

	.cta-product-bar-stuck-active .cta-product-bar-stuck-close {
		bottom: -0.2rem;
		right: 0.1rem;
		transform: none;
	}

}

/* Buttons */

.buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0 0 var(--spacing-child) 0;
}

.buttons-left {
	justify-content: flex-start;
}

.buttons-right {
	justify-content: flex-end;
}

.buttons .button1 {
	margin: 0;
}

.button1 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0.75rem 1.15rem;
	color: inherit;
	border: 1px solid transparent;
	border-radius: var(--border-radius-default, 0.625rem);
	font: inherit;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	vertical-align: middle;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	appearance: none;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.button1:hover,
.button1:focus {
	border-radius: var(--border-radius-default, 0.625rem);
	text-decoration: none;
}

.button1:focus {
	outline: none;
}

.button1:focus-visible {
	outline: 0.1875rem solid rgba(37, 99, 235, 0.25);
	outline-offset: 0.1875rem;
}

.button1:active {
	transform: translateY(0.0625rem);
}

.button1 i {
	line-height: 1;
}

@media (max-width: 640px) {

	.buttons,
	.buttons .button1 {
		width: 100%;
	}

}

/* Small buttons */

.button1-more {
	min-height: auto;
	padding: 0.25rem 0.5rem;
	font-weight: 400;
	line-height: 1;
}

.button1-servicetable {
	min-height: auto;
	margin: 0.3125rem;
	padding: 0.25rem 0.5rem 0.375rem 0.5rem;
	line-height: 1;
}

/* Disabled */

.button1:disabled,
.button1.button1-disabled {
	cursor: not-allowed;
	opacity: 0.6;
	pointer-events: none;
}

/* Author Box */

.authorbox {
	border-top: var(--color-border) 1px solid;
	margin: var(--spacing-parent) 0 0 0;
	padding: var(--spacing-parent) 0 0 0;
	text-align: center;
}

.authorbox img {
	display: inline;
	max-width: 230px;
}

.authorbox p:last-child {
	margin-bottom: 0;
}

/* Domain Search */

.domainsearch {
	--domainsearch-width: 560px;
	--domainsearch-height: 3.125rem;
	--domainsearch-prefix-width: 4.5rem;
	--domainsearch-submit-width: 8rem;

	display: flex;
	align-items: stretch;
	justify-content: center;
	width: min(92vw, var(--domainsearch-width));
	max-width: 100%;
	margin: 0 auto;
	text-align: left;
}

.domainsearch .domainsearch-field {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 0;
	height: var(--domainsearch-height);
}

.domainsearch .domainsearch-prefix {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--domainsearch-prefix-width);
	width: var(--domainsearch-prefix-width);
	height: var(--domainsearch-height);
	color: var(--color-secondary-foreground);
	background: var(--color-secondary-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-secondary-background-gradient-top) 0,
		var(--color-secondary-background-gradient-middle) 50%,
		var(--color-secondary-background-gradient-bottom) 100%
	);
	border: 1px solid var(--color-secondary-background-border);
	border-right: none;
	border-radius: var(--border-radius-default) 0 0 var(--border-radius-default);
	font-size: 1.125rem;
	line-height: 1;
	text-shadow: none;
	white-space: nowrap;
}

.domainsearch input {
	box-sizing: border-box;
	height: var(--domainsearch-height);
	margin: 0;
	font: inherit;
	line-height: 1;
}

.domainsearch input[type="text"] {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: 0 var(--spacing-inner);
	border-right-width: 0;
	border-radius: 0;
	text-align: left;
}

.domainsearch input[type="submit"] {
	display: block;
	flex: 0 0 var(--domainsearch-submit-width);
	width: var(--domainsearch-submit-width);
	min-width: var(--domainsearch-submit-width);
	border-radius: 0 var(--border-radius-default) var(--border-radius-default) 0;
	white-space: nowrap;
	border: none !important;
}

/* Placeholder */

.domainsearch input[type="text"]::placeholder {
	color: var(--color-body);
	opacity: 0.55;
}

.domainsearch input[type="text"]:focus::placeholder {
	opacity: 0.35;
}

/* Focus */

.domainsearch:focus-within .domainsearch-prefix,
.domainsearch:focus-within input[type="text"] {
	border-color: var(--color-primary-background);
}

.domainsearch input[type="text"]:focus,
.domainsearch input[type="submit"]:focus {
	outline: none;
}

/* Extra centering support */

.banner .domainsearch,
.format .domainsearch,
.contentcontainer .domainsearch {
	margin-right: auto;
	margin-left: auto;
}

/* Responsive */

@media (max-width: 700px) {

	.domainsearch {
		--domainsearch-width: 500px;
		--domainsearch-height: 2.875rem;
		--domainsearch-prefix-width: 4rem;
		--domainsearch-submit-width: 7rem;

		width: min(94vw, var(--domainsearch-width));
	}

	.domainsearch .domainsearch-prefix {
		font-size: 1rem;
	}

	.domainsearch input[type="text"],
	.domainsearch input[type="submit"] {
		font-size: 0.95rem;
	}

}

@media (max-width: 480px) {

	.domainsearch {
		--domainsearch-height: 2.75rem;
		--domainsearch-prefix-width: 3.5rem;
		--domainsearch-submit-width: 6.25rem;

		width: 96vw;
	}

	.domainsearch .domainsearch-prefix,
	.domainsearch input[type="text"],
	.domainsearch input[type="submit"] {
		font-size: 0.875rem;
	}

	.domainsearch input[type="text"] {
		padding-right: 0.625rem;
		padding-left: 0.625rem;
	}

}

@media (max-width: 380px) {

	.domainsearch {
		--domainsearch-prefix-width: 3.25rem;
		--domainsearch-submit-width: 5.75rem;
	}

	.domainsearch .domainsearch-prefix,
	.domainsearch input[type="text"],
	.domainsearch input[type="submit"] {
		font-size: 0.8rem;
	}	

}

/* CTA */

.ctanew {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin: 0 0 var(--spacing-parent) 0;
	padding: 2rem;
	background: var(--color-box-background);
	background: radial-gradient(
		circle,
		var(--color-box-background-gradient-top) 0%,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-background-shadow);
	border: 1px solid var(--color-box-background-border);
	border-left: 0.1875rem solid rgba(255, 145, 0, 0.75);
	border-radius: var(--border-radius-default);
	overflow: hidden;
}

.ctanew::before {
	content: "";
	position: absolute;
	top: -4rem;
	right: -4rem;
	width: 12rem;
	height: 12rem;
	border-radius: 999px;
	background: var(--color-primary-background);
	opacity: 0.08;
	pointer-events: none;
}

.ctanew-content,
.ctanew-action {
	position: relative;
	z-index: 1;
}

.ctanew-content {
	max-width: 48rem;
}

.ctanew-label {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	margin: 0 0 0.75rem 0;
	padding: 0.375rem 0.625rem;
	background: rgba(255, 165, 0, 0.1);
	color: var(--color-primary-background);
	border: 1px solid var(--color-primary-background-border);
	border-radius: 999px;
	font-size: 0.75rem;
	line-height: 1;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ctanew-title {
	margin: 0;
	color: var(--color-box-foreground-bold);
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.ctanew-text {
	margin: 0.875rem 0 0 0;
	color: var(--color-box-foreground);
	font-size: 1rem;
	line-height: 1.65;
	font-weight: 400;
}

.ctanew-action {
	flex: 0 0 auto;
}

@media (max-width: 760px) {

	.ctanew {
		align-items: flex-start;
		flex-direction: column;
		gap: 1.5rem;
		padding: 1.5rem;
	}

	.ctanew-action,
	.ctanew-button {
		width: 100%;
	}

}

@media (max-width: 640px) {

	.ctanew-action .button1 {
		width: 100%;
	}

}

/* Product Boxes 1 */

.product-boxes1 {
	--product-boxes1-columns: 3;

	display: grid;
	grid-template-columns: repeat(var(--product-boxes1-columns), minmax(0, 1fr));
	gap: var(--spacing-child);
	align-items: start;
	margin: 0 0 var(--spacing-parent) 0;
}

.product-boxes1.product-boxes1-1col {
	--product-boxes1-columns: 1;
}

.product-boxes1.product-boxes1-2col {
	--product-boxes1-columns: 2;
}

.product-boxes1.product-boxes1-3col {
	--product-boxes1-columns: 3;
}

.product-boxes1.product-boxes1-4col {
	--product-boxes1-columns: 4;
}

.product-boxes1.product-boxes1-5col {
	--product-boxes1-columns: 5;
}

.product-boxes1.product-boxes1-6col {
	--product-boxes1-columns: 6;
}

.product-boxes1 .product-boxes1-box {
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	color: var(--color-box-foreground);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-background-shadow);
	border: 1px solid var(--color-box-background-border);
	border-top: none;
	border-radius: var(--border-radius-default);
}

/* Highlight ribbons */

.product-boxes1 .product-boxes1-box.product-boxes1-highlight::after {
	position: absolute;
	top: 0.75rem;
	right: -4.4375rem;
	width: 12.5rem;
	padding: 0.625rem 0;
	transform: rotate(45deg);
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

.product-boxes1 .product-boxes1-box.product-boxes1-highlight-hot::after {
	color: var(--color-badge-hot-foreground);
	background: var(--color-badge-hot-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-hot-background-gradient-top) 0,
		var(--color-badge-hot-background-gradient-middle) 50%,
		var(--color-badge-hot-background-gradient-bottom) 100%
	);
}

.product-boxes1 .product-boxes1-box.product-boxes1-highlight-new::after {
	color: var(--color-badge-new-foreground);
	background: var(--color-badge-new-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-new-background-gradient-top) 0,
		var(--color-badge-new-background-gradient-middle) 50%,
		var(--color-badge-new-background-gradient-bottom) 100%
	);
}

.product-boxes1 .product-boxes1-box.product-boxes1-highlight-popular::after {
	color: var(--color-badge-popular-foreground);
	background: var(--color-badge-popular-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-popular-background-gradient-top) 0,
		var(--color-badge-popular-background-gradient-middle) 50%,
		var(--color-badge-popular-background-gradient-bottom) 100%
	);
}

.product-boxes1 .product-boxes1-box.product-boxes1-highlight-free::after {
	color: var(--color-badge-free-foreground);
	background: var(--color-badge-free-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-free-background-gradient-top) 0,
		var(--color-badge-free-background-gradient-middle) 50%,
		var(--color-badge-free-background-gradient-bottom) 100%
	);
}

/* Header */

.product-boxes1 .product-boxes1-head {
	width: 100%;
	margin: 0 0 var(--spacing-inner) 0;
	padding: 0.9375rem var(--spacing-inner);
	background: var(--color-box-head-background);
	background:
		radial-gradient(
			circle at 18% 20%,
			var(--color-box-head-background) 0%,
			transparent 30%
		),
		linear-gradient(
			135deg,
			var(--color-box-head-background-gradient-top) 0%,
			var(--color-box-head-background-gradient-middle) 50%,
			var(--color-box-head-background-gradient-bottom) 100%
		);
	border-bottom: var(--color-box-head-background-border) 1px solid;
}

.product-boxes1 .product-boxes1-heading {
	margin: 0;
	color: var(--color-box-head-foreground-bold);
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	text-align: center;
}

/* Intro */

.product-boxes1 .product-boxes1-text {
	width: 100%;
	margin: 0 0 var(--spacing-inner) 0;
	padding: 0 var(--spacing-inner);
	text-align: center;
}

.product-boxes1 .product-boxes1-text p:last-child {
	margin-bottom: 0;
}

.product-boxes1 .product-boxes1-image {
	display: table;
	margin: 0 auto var(--spacing-inner) auto;
	padding: 0 var(--spacing-inner);
}

.product-boxes1 .product-boxes1-image i {
	margin: 0;
	font-size: 2.5em;
}

/* Price */

.product-boxes1 .product-boxes1-price {
	width: 100%;
	padding: 0.9375rem var(--spacing-inner);
	color: var(--color-box-footer-foreground);
	background: var(--color-box-footer-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-footer-background-gradient-top) 0,
		var(--color-box-footer-background-gradient-middle) 50%,
		var(--color-box-footer-background-gradient-bottom) 100%
	);
	border-top: 1px solid var(--color-box-footer-background-border);
	border-bottom: 1px solid var(--color-box-footer-background-border);
	font-size: 1.6em;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}

.product-boxes1 .product-boxes1-price-free {
	text-transform: uppercase;
}

.product-boxes1 .product-boxes1-price-priceprefix,
.product-boxes1 .product-boxes1-price-price,
.product-boxes1 .product-boxes1-price-currencyprefix,
.product-boxes1 .product-boxes1-price-currencysuffix,
.product-boxes1 .product-boxes1-price-term {
	display: inline;
}

.product-boxes1 .product-boxes1-price-priceprefix {
	padding-right: 0.625rem;
	font-size: 0.7em;
	font-weight: 400;
}

.product-boxes1 .product-boxes1-price-price {
	font-weight: 700;
}

.product-boxes1 .product-boxes1-price-currencyprefix,
.product-boxes1 .product-boxes1-price-currencysuffix,
.product-boxes1 .product-boxes1-price-term {
	font-size: 0.7em;
	font-weight: 400;
}

.product-boxes1 .product-boxes1-price-currencysuffix {
	padding-left: 0.3125rem;
}

.product-boxes1 .product-boxes1-price-term {
	padding-left: 0.625rem;
}

/* Secondary heading */

.product-boxes1 .product-boxes1-heading2 {
	width: 100%;
	padding: 0.5rem var(--spacing-child);
	color: var(--color-box-footer-foreground);
	background: var(--color-box-footer-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-footer-background-gradient-top) 0,
		var(--color-box-footer-background-gradient-middle) 50%,
		var(--color-box-footer-background-gradient-bottom) 100%
	);
	border-top: 1px solid var(--color-box-footer-background-border);
	border-bottom: 1px solid var(--color-box-footer-background-border);
	font-size: 1.1em;
	font-weight: 700;
	text-align: center;
	white-space: nowrap;
}

/* Features */

.product-boxes1 .product-boxes1-features {
	padding: 1.25rem;
}

.product-boxes1 .product-boxes1-features ul {
	margin: 0;
}

.product-boxes1 .product-boxes1-features ul li {
	display: inline-block;
	width: 100%;
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--color-box-background-divider);
	text-align: center;
	white-space: nowrap;
}

.product-boxes1 .product-boxes1-features ul li:first-child {
	padding-top: 0;
}

.product-boxes1 .product-boxes1-features ul li:last-child {
	padding-bottom: 0;
	border: none;
}

.product-boxes1 .product-boxes1-featuretop {
	display: block;
	padding: 0 0 0.3125rem 0;
	font-weight: 700;
}

.product-boxes1 .product-boxes1-features ul li strong {
	color: var(--color-box-foreground-bold);
	font-weight: 700;
}

.product-boxes1 .product-boxes1-features ul li a {
	color: var(--color-box-foreground);
}

/* Buttons */

.product-boxes1 .product-boxes1-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: var(--spacing-child);
}

.product-boxes1 .product-boxes1-buttons .button1 {
	margin: 0.3125rem;
}

/* Terms */

.product-boxes1 .product-boxes1-buttons-divider {
	display: block;
	width: 100%;
	height: 1px;
	background: var(--color-box-background-divider);
}

.product-boxes1 .product-boxes1-buttons-left,
.product-boxes1 .product-boxes1-buttons-right {
	box-sizing: border-box;
}

.product-boxes1 .product-boxes1-buttons-left {
	width: 55%;
	padding: 0.625rem var(--spacing-inner) 0.625rem 0;
	font-size: 0.9em;
}

.product-boxes1 .product-boxes1-buttons-left-heading {
	color: var(--color-box-foreground-bold);
	font-size: 1.2em;
	font-weight: 700;
}

.product-boxes1 .product-boxes1-buttons-right {
	width: 45%;
	padding: 0.625rem 0;
}

.product-boxes1 .product-boxes1-buttons-left .button1,
.product-boxes1 .product-boxes1-buttons-right .button1 {
	width: 100%;
}

/* Responsive columns */

@media (max-width: 1350px) {

	.product-boxes1.product-boxes1-6col {
		--product-boxes1-columns: 5;
	}

}

@media (max-width: 1200px) {

	.product-boxes1.product-boxes1-5col,
	.product-boxes1.product-boxes1-6col {
		--product-boxes1-columns: 4;
	}

}

@media (max-width: 1100px) {

	.product-boxes1.product-boxes1-4col,
	.product-boxes1.product-boxes1-5col,
	.product-boxes1.product-boxes1-6col {
		--product-boxes1-columns: 3;
	}

}

@media (max-width: 1000px) {

	.product-boxes1,
	.product-boxes1.product-boxes1-3col,
	.product-boxes1.product-boxes1-4col,
	.product-boxes1.product-boxes1-5col,
	.product-boxes1.product-boxes1-6col {
		--product-boxes1-columns: 2;
	}

}

@media (max-width: 650px) {

	.product-boxes1,
	.product-boxes1.product-boxes1-2col,
	.product-boxes1.product-boxes1-3col,
	.product-boxes1.product-boxes1-4col,
	.product-boxes1.product-boxes1-5col,
	.product-boxes1.product-boxes1-6col {
		--product-boxes1-columns: 1;
	}

}

@media (max-width: 550px) {

	.product-boxes1 .product-boxes1-text img {
		height: 4.375rem;
	}

}

/* Product Boxes 2 */

.product-boxes2 {
	--product-boxes2-columns: 2;

	display: grid;
	grid-template-columns: repeat(var(--product-boxes2-columns), minmax(0, 1fr));
	gap: var(--spacing-child);
	margin: 0 0 var(--spacing-parent) 0;
}

.product-boxes2.product-boxes2-1col {
	--product-boxes2-columns: 1;
	width: 100%;
	max-width: calc((100% - var(--spacing-child)) / 2);
	margin-right: auto;
	margin-left: auto;	
}

.product-boxes2.product-boxes2-2col {
	--product-boxes2-columns: 2;
}

.product-boxes2.product-boxes2-3col {
	--product-boxes2-columns: 3;
}

.product-boxes2.product-boxes2-4col {
	--product-boxes2-columns: 4;
}

.product-boxes2.product-boxes2-5col {
	--product-boxes2-columns: 5;
}

.product-boxes2.product-boxes2-6col {
	--product-boxes2-columns: 6;
}

.product-boxes2 .product-boxes2-box {
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	margin: 0;
	align-self: start;
	color: var(--color-box-foreground);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-background-shadow);
	border: 1px solid var(--color-box-background-border);
	border-radius: var(--border-radius-default);
	overflow: hidden;
}

.product-boxes2 .product-boxes2-box:hover,
.product-boxes2 .product-boxes2-box:focus-within {
	background: var(--color-box-active-background);
	background: radial-gradient(
		circle,
		var(--color-box-active-background-gradient-top) 0%,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	border-color: var(--color-box-active-background-border);
	box-shadow: var(--color-box-active-background-shadow);
}

/* Header */

.product-boxes2 .product-boxes2-head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-width: 0;
	padding: 0.625rem 0.9375rem;
	background: var(--color-box-head-background);
	background:
		radial-gradient(
			circle at 18% 20%,
			var(--color-box-head-background) 0%,
			transparent 30%
		),
		linear-gradient(
			135deg,
			var(--color-box-head-background-gradient-top) 0%,
			var(--color-box-head-background-gradient-middle) 50%,
			var(--color-box-head-background-gradient-bottom) 100%
		);
	border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
}

.product-boxes2 .product-boxes2-title {
	min-width: 0;
}

.product-boxes2 .product-boxes2-heading {
	margin: 0;
	color: var(--color-box-head-foreground-bold);
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
}

/* Highlight badge */

.product-boxes2 .product-boxes2-highlight {
	position: absolute;
	top: 50%;
	right: 0.9375rem;
	transform: translateY(-50%);
	padding: 0.25rem 0.3125rem;
	color: var(--color-badge-new-foreground);
	background: var(--color-badge-new-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-new-background-gradient-top) 0,
		var(--color-badge-new-background-gradient-middle) 50%,
		var(--color-badge-new-background-gradient-bottom) 100%
	);
	border-radius: var(--border-radius-default);
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.product-boxes2 .product-boxes2-box.product-boxes2-box-price-active .product-boxes2-highlight {
	right: 5.8125rem;
}

/* Price */

.product-boxes2 .product-boxes2-price {
	padding: 0.25rem 0.5rem;
	color: var(--color-box-foreground-bold);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	border-radius: var(--border-radius-default);
	line-height: 1;
	white-space: nowrap;
}

.product-boxes2 .product-boxes2-price-free {
	font-weight: 700;
	text-transform: uppercase;
}

.product-boxes2 .product-boxes2-price-price,
.product-boxes2 .product-boxes2-price-currencyprefix,
.product-boxes2 .product-boxes2-price-currencysuffix,
.product-boxes2 .product-boxes2-price-term {
	display: inline;
}

.product-boxes2 .product-boxes2-price-price {
	font-weight: 700;
}

.product-boxes2 .product-boxes2-price-currencyprefix,
.product-boxes2 .product-boxes2-price-currencysuffix,
.product-boxes2 .product-boxes2-price-term {
	font-size: 0.7em;
	font-weight: 400;
}

.product-boxes2 .product-boxes2-price-currencysuffix,
.product-boxes2 .product-boxes2-price-term {
	padding-left: 0.3125rem;
}

/* Content */

.product-boxes2 .product-boxes2-text,
.product-boxes2 .product-boxes2-buttons {
	padding: 0 var(--spacing-inner) var(--spacing-inner) var(--spacing-inner);
	text-align: center;
}

.product-boxes2 .product-boxes2-buttons .button1 {
	margin: 0.3125rem;
}

.product-boxes2 .product-boxes2-buttons .color3 {
	padding-right: 0;
	padding-left: 0;
	background: none !important;
	border-color: transparent !important;
}

/* Display 1 */

.product-boxes2 .product-boxes2-box.product-boxes2-display1 .product-boxes2-image {
	padding: var(--spacing-inner);
}

.product-boxes2 .product-boxes2-box.product-boxes2-display1 .product-boxes2-image img {
	margin: 0 auto;
	border: 1px solid transparent;
	filter:
		drop-shadow(0 0.75rem 1.5rem rgba(0, 0, 0, 0.12))
		drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.08));	
}

/* Display 2 */

.product-boxes2 .product-boxes2-box.product-boxes2-display2 .product-boxes2-image {
	padding: var(--spacing-inner);
}

.product-boxes2 .product-boxes2-box.product-boxes2-display2 .product-boxes2-image img {
	margin: 0 auto;
	border: 1px solid var(--color-box-background-border);
}

/* Images */

.product-boxes2 .product-boxes2-image img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Format icons */

.product-boxes2 .product-boxes2-box.product-boxes2-format-icon .product-boxes2-image {
	background-position: right 0.625rem top 0.625rem;
	background-repeat: no-repeat;
	background-size: auto 1.25rem;
}

.product-boxes2 .product-boxes2-box.product-boxes2-format-icon-wordpress .product-boxes2-image {
	background-image: url("/libs/images/wordpresslogo3.png");
}

.product-boxes2 .product-boxes2-box.product-boxes2-format-icon-html .product-boxes2-image {
	background-image: url("/libs/images/htmllogo2.png");
}

.product-boxes2 .product-boxes2-box.product-boxes2-format-icon-whmcs .product-boxes2-image {
	background-image: url("/libs/images/whmcslogo1.png");
}

/* Responsive columns */

@media (max-width: 1350px) {

	.product-boxes2.product-boxes2-6col {
		--product-boxes2-columns: 5;
	}

}

@media (max-width: 1200px) {

	.product-boxes2.product-boxes2-5col,
	.product-boxes2.product-boxes2-6col {
		--product-boxes2-columns: 4;
	}

}

@media (max-width: 1100px) {

	.product-boxes2.product-boxes2-4col,
	.product-boxes2.product-boxes2-5col,
	.product-boxes2.product-boxes2-6col {
		--product-boxes2-columns: 3;
	}

}

@media (max-width: 1000px) {

	.product-boxes2.product-boxes2-3col,
	.product-boxes2.product-boxes2-4col,
	.product-boxes2.product-boxes2-5col,
	.product-boxes2.product-boxes2-6col {
		--product-boxes2-columns: 2;
	}

}

@media (max-width: 850px) {

	.product-boxes2.product-boxes2-1col {
		max-width: 100%;
	}

}

@media (max-width: 650px) {

	.product-boxes2,
	.product-boxes2.product-boxes2-2col,
	.product-boxes2.product-boxes2-3col,
	.product-boxes2.product-boxes2-4col,
	.product-boxes2.product-boxes2-5col,
	.product-boxes2.product-boxes2-6col {
		--product-boxes2-columns: 1;
	}

}

/* Product Boxes 3 */

.product-boxes3 {
	--product-boxes3-columns: 3;

	display: grid;
	grid-template-columns: repeat(var(--product-boxes3-columns), minmax(0, 1fr));
	gap: var(--spacing-child);
	margin: 0 0 var(--spacing-parent) 0;
}

.product-boxes3.product-boxes3-1col {
	--product-boxes3-columns: 1;
}

.product-boxes3.product-boxes3-2col {
	--product-boxes3-columns: 2;
}

.product-boxes3.product-boxes3-3col {
	--product-boxes3-columns: 3;
}

.product-boxes3.product-boxes3-4col {
	--product-boxes3-columns: 4;
}

.product-boxes3.product-boxes3-5col {
	--product-boxes3-columns: 5;
}

.product-boxes3.product-boxes3-6col {
	--product-boxes3-columns: 6;
}

.product-boxes3 .product-boxes3-box {
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	color: var(--color-box-foreground);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-background-shadow);
	border: 1px solid var(--color-box-background-border);
	border-radius: var(--border-radius-default);
}

.product-boxes3 .product-boxes3-box:hover,
.product-boxes3 .product-boxes3-box:focus-within {
	background: var(--color-box-active-background);
	background: radial-gradient(
		circle,
		var(--color-box-active-background-gradient-top) 0%,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	border-color: var(--color-box-active-background-border);
	box-shadow: var(--color-box-active-background-shadow);
}

/* Highlight ribbons */

.product-boxes3 .product-boxes3-box.product-boxes3-highlight::after {
	position: absolute;
	top: 0.75rem;
	left: -4.4375rem;
	width: 12.5rem;
	padding: 0.375rem 0;
	transform: rotate(-45deg);
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

.product-boxes3 .product-boxes3-box.product-boxes3-highlight-hot::after {
	color: var(--color-badge-hot-foreground);
	background: var(--color-badge-hot-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-hot-background-gradient-top) 0,
		var(--color-badge-hot-background-gradient-middle) 50%,
		var(--color-badge-hot-background-gradient-bottom) 100%
	);
}

.product-boxes3 .product-boxes3-box.product-boxes3-highlight-new::after {
	color: var(--color-badge-new-foreground);
	background: var(--color-badge-new-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-new-background-gradient-top) 0,
		var(--color-badge-new-background-gradient-middle) 50%,
		var(--color-badge-new-background-gradient-bottom) 100%
	);
}

/* Header */

.product-boxes3 .product-boxes3-head {
	padding: 1rem var(--spacing-inner);
	background: var(--color-box-head-background);
	background:
		radial-gradient(
			circle at 18% 20%,
			var(--color-box-head-background) 0%,
			transparent 30%
		),
		linear-gradient(
			135deg,
			var(--color-box-head-background-gradient-top) 0%,
			var(--color-box-head-background-gradient-middle) 50%,
			var(--color-box-head-background-gradient-bottom) 100%
		);
}

.product-boxes3 .product-boxes3-title {
	background-repeat: no-repeat;
	background-position: 105% center;
	background-size: auto 4.6875rem;
}

.product-boxes3 .product-boxes3-heading {
	position: relative;
	margin: 0;
	color: var(--color-box-head-foreground-bold);
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

/* Price bar */

.product-boxes3 .product-boxes3-bar {
	width: 100%;
	padding: 0.5rem var(--spacing-inner);
	color: var(--color-box-footer-foreground);
	background: var(--color-box-footer-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-footer-background-gradient-top) 0,
		var(--color-box-footer-background-gradient-middle) 50%,
		var(--color-box-footer-background-gradient-bottom) 100%
	);
	border-top: 1px solid var(--color-box-footer-background-border);
	border-bottom: 1px solid var(--color-box-footer-background-border);
	font-size: 1.4em;
	text-align: center;
}

.product-boxes3 .product-boxes3-box:hover .product-boxes3-bar {
	border-color: var(--color-box-active-footer-background-border);
}

.product-boxes3 .product-boxes3-price-free {
	font-weight: 700;
	text-transform: uppercase;
}

.product-boxes3 .product-boxes3-price-before,
.product-boxes3 .product-boxes3-price-price,
.product-boxes3 .product-boxes3-price-currencyprefix,
.product-boxes3 .product-boxes3-price-currencysuffix,
.product-boxes3 .product-boxes3-price-term {
	display: inline;
}

.product-boxes3 .product-boxes3-price-before {
	padding-right: 0.3125rem;
}

.product-boxes3 .product-boxes3-price-price {
	font-weight: 700;
}

.product-boxes3 .product-boxes3-price-currencyprefix,
.product-boxes3 .product-boxes3-price-currencysuffix,
.product-boxes3 .product-boxes3-price-term {
	font-size: 0.7em;
	font-weight: 400;
}

.product-boxes3 .product-boxes3-price-currencysuffix,
.product-boxes3 .product-boxes3-price-term {
	padding-left: 0.3125rem;
}

/* Content */

.product-boxes3 .product-boxes3-text {
	padding: var(--spacing-inner);
}

.product-boxes3 .product-boxes3-buttons {
	margin: 0 0 1.5625rem 0;
	padding: 0 var(--spacing-inner);
	text-align: center;
}

.product-boxes3 .product-boxes3-buttons .button1 {
	margin: 0.3125rem;
}

.product-boxes3 .product-boxes3-buttons .button1:first-child {
	margin-right: 0.625rem;
}

/* Responsive columns */

@media (max-width: 1350px) {

	.product-boxes3.product-boxes3-6col {
		--product-boxes3-columns: 5;
	}

}

@media (max-width: 1200px) {

	.product-boxes3.product-boxes3-5col,
	.product-boxes3.product-boxes3-6col {
		--product-boxes3-columns: 4;
	}

}

@media (max-width: 1100px) {

	.product-boxes3.product-boxes3-4col,
	.product-boxes3.product-boxes3-5col,
	.product-boxes3.product-boxes3-6col {
		--product-boxes3-columns: 3;
	}

}

@media (max-width: 1000px) {

	.product-boxes3,
	.product-boxes3.product-boxes3-3col,
	.product-boxes3.product-boxes3-4col,
	.product-boxes3.product-boxes3-5col,
	.product-boxes3.product-boxes3-6col {
		--product-boxes3-columns: 2;
	}

}

@media (max-width: 650px) {

	.product-boxes3,
	.product-boxes3.product-boxes3-2col,
	.product-boxes3.product-boxes3-3col,
	.product-boxes3.product-boxes3-4col,
	.product-boxes3.product-boxes3-5col,
	.product-boxes3.product-boxes3-6col {
		--product-boxes3-columns: 1;
	}

}

/* Product Tables 2 */

.product-tables2 {
	width: 100%;
	margin: 0 0 var(--spacing-parent) 0;
	overflow-x: auto;
	overflow-y: hidden;
	border: 1px solid var(--color-box-background-border);
	box-shadow: var(--color-box-background-shadow);
	border-radius: var(--border-radius-default);
}

.product-tables2 table {
	width: 100%;
	min-width: 650px;
	border-collapse: separate;
	border-spacing: 0;
}

.product-tables2 tr {
	width: 100%;
	color: var(--color-box-foreground);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
}

.product-tables2 th,
.product-tables2 td {
	vertical-align: middle;
	background-color: transparent;
	border-right: 1px solid var(--color-box-background-divider);
	border-bottom: 1px solid var(--color-box-background-divider);
}

.product-tables2 th {
	color: var(--color-box-head-foreground-bold);
	padding: 1.125rem 1.25rem;
	font-size: 1.3em;
	font-weight: 700;
	text-align: center;
}

.product-tables2 th.product-tables2-heading-small {
	font-size: 1rem;
	line-height: 1.4;
	color: var(--color-box-head-foreground);
	font-weight: 600;
}

.product-tables2 td {
	padding: 0.6875rem 1.25rem;
	text-align: center;
}

.product-tables2 th:first-child,
.product-tables2 td:first-child {
	text-align: left;
}

.product-tables2 th:last-child,
.product-tables2 td:last-child {
	border-right: none;
}

.product-tables2 tr:last-child th,
.product-tables2 tr:last-child td {
	border-bottom: none;
}

.product-tables2 th img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.product-tables2 th img.imgopacity {
	opacity: 0.8;
}

.product-tables2 .button1 {
	margin: 0;
}

/* Highlight first row */

.product-tables2.product-tables2-highlightfirst tr:first-child {
	background: var(--color-box-head-background);
	background:
		radial-gradient(
			circle at 18% 20%,
			var(--color-box-head-background) 0%,
			transparent 30%
		),
		linear-gradient(
			135deg,
			var(--color-box-head-background-gradient-top) 0%,
			var(--color-box-head-background-gradient-middle) 50%,
			var(--color-box-head-background-gradient-bottom) 100%
		);
	color: var(--color-box-head-foreground);		
}

.product-tables2.product-tables2-highlightfirst tr:first-child th,
.product-tables2.product-tables2-highlightfirst tr:first-child td,
.product-tables2.product-tables2.highlightfirst tr:first-child th,
.product-tables2.product-tables2.highlightfirst tr:first-child td {
	border-top: none;
}

/* Table Highlight - column 2 */

.product-tables2.product-tables2-highlight-2 tr:first-child th:nth-child(2),
.product-tables2.product-tables2-highlight-2 tr:first-child td:nth-child(2) {
	background: var(--color-black);
}

.product-tables2.product-tables2-highlight-2 tr td:nth-child(2) {
	color: var(--color-box-active-foreground-bold);
	background: var(--color-box-active-background);
	background: linear-gradient(
		to right,
		var(--color-box-active-background-gradient-top) 0%,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	border-bottom-color: var(--color-box-active-background-border);
	text-shadow: 1px 1px var(--color-box-active-foreground-bold-shadow);
}

.product-tables2.product-tables2-highlight-2 tr:last-child td:nth-child(2) {
	border-bottom-color: var(--color-box-background-border);
}

.product-tables2.product-tables2-highlight-2 tr td.icon-check:nth-child(2) {
	color: var(--color-green);
}

.product-tables2.product-tables2-highlight-2 tr td.icon-cross:nth-child(2) {
	color: var(--color-red);
}

/* Scrollbar */

.product-tables2::-webkit-scrollbar {
	width: 0.875rem;
	height: 0.875rem;
	-webkit-appearance: none;
}

.product-tables2::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.3);
	border: 0.1875rem solid #e3e3e3;
	border-radius: var(--border-radius-default);
}

@media (max-width: 650px) {

	.product-tables2 table {
		min-width: 560px;
	}

	.product-tables2 th,
	.product-tables2 td {
		padding-right: 1rem;
		padding-left: 1rem;
	}

}

/* Gridboxes 1 - Compact feature overview cards */

.gridboxes1 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0 0 var(--spacing-parent) 0;
}

/* Column variants */

.gridboxes1.gridboxes1-1col {
	grid-template-columns: 1fr;
}

.gridboxes1.gridboxes1-2col {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gridboxes1.gridboxes1-3col {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gridboxes1.gridboxes1-4col,
.gridboxes1.gridboxes1-5col,
.gridboxes1.gridboxes1-6col {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Box */

.gridboxes1 .gridboxes1-box {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 1.35rem 1.25rem;
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	border: 1px solid var(--color-box-background-border);
	border-radius: var(--border-radius-default);
	box-shadow: var(--color-box-background-shadow);
	text-align: center;
	overflow: hidden;
	transition:
		transform 0.2s ease,
		background 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.gridboxes1 .gridboxes1-box:hover,
.gridboxes1 .gridboxes1-box:focus-within {
	background: var(--color-box-active-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-active-background-gradient-top) 0,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	border-color: var(--color-box-active-background-border);
	box-shadow: var(--color-box-active-background-shadow);
	transform: translateY(-0.125rem);
}

/* Icon */

.gridboxes1 .gridboxes1-box .gridboxes1-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 auto 0.75rem auto;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--color-primary-background);
	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.gridboxes1 .gridboxes1-box .gridboxes1-image i {
	display: block;
	font-size: 1.7rem;
	line-height: 1;
	color: currentColor;
}

.gridboxes1 .gridboxes1-box .gridboxes1-image svg,
.gridboxes1 .gridboxes1-box .gridboxes1-image .svg-inline--fa {
	display: block;
	width: 1.7rem;
	height: 1.7rem;
	color: currentColor;
	fill: currentColor;
}

.gridboxes1 .gridboxes1-box:hover .gridboxes1-image,
.gridboxes1 .gridboxes1-box:focus-within .gridboxes1-image {
	transform: translateY(-0.1rem);
}

/* Legacy image support */

.gridboxes1 .gridboxes1-box .gridboxes1-image img {
	display: block;
	width: auto;
	max-width: 2.35rem;
	max-height: 2.35rem;
	height: auto;
	margin: 0 auto;
	transition: transform 0.2s ease;
}

.gridboxes1 .gridboxes1-box:hover .gridboxes1-image img,
.gridboxes1 .gridboxes1-box:focus-within .gridboxes1-image img {
	transform: scale(1.05);
}

/* Full image version */

.gridboxes1 .gridboxes1-box .gridboxes1-image-full {
	width: 100%;
	height: 9rem;
	margin: 0 0 1rem 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.gridboxes1 .gridboxes1-box .gridboxes1-image-full img {
	max-width: 100%;
	max-height: 8.5rem;
	border-radius: calc(var(--border-radius-default) - 0.25rem);
}

/* Heading */

.gridboxes1 .gridboxes1-box .gridboxes1-heading {
	margin: 0 0 0.55rem 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(1.05rem, 1.2vw, 1.15rem);
	line-height: 1.22;
	font-weight: 700;
	letter-spacing: -0.025em;
	text-align: center;
	text-wrap: balance;
	transition: color 0.2s ease;
}

.gridboxes1 .gridboxes1-box:hover .gridboxes1-heading,
.gridboxes1 .gridboxes1-box:focus-within .gridboxes1-heading {
	color: var(--color-primary-background);
}

/* Text */

.gridboxes1 .gridboxes1-box .gridboxes1-text {
	color: var(--color-box-foreground);
	font-size: 0.94rem;
	line-height: 1.5;
	text-align: center;
}

.gridboxes1 .gridboxes1-box .gridboxes1-text p {
	margin: 0 0 0.8rem 0;
}

.gridboxes1 .gridboxes1-box .gridboxes1-text p:last-child {
	margin: 0;
}

.gridboxes1 .gridboxes1-box .gridboxes1-text a {
	color: var(--color-primary-background);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.gridboxes1 .gridboxes1-box .gridboxes1-text a:hover,
.gridboxes1 .gridboxes1-box .gridboxes1-text a:focus {
	color: var(--color-heading);
}

/* Buttons */

.gridboxes1 .gridboxes1-box .gridboxes1-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.65rem;
	margin: 1.1rem 0 0 0;
	text-align: center;
}

.gridboxes1 .gridboxes1-box .gridboxes1-buttons .button1 {
	margin: 0;
}

/* Extended content */

.gridboxes1 > .gridboxes1-box {
	position: relative;
}

.gridboxes1 > .gridboxes1-box .gridboxes1-extended {
	position: absolute;
	top: -1px;
	right: -1px;
	z-index: 3;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: 0;
	line-height: 1;
	text-align: right;
}

.gridboxes1 > .gridboxes1-box .gridboxes1-extended a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 1.75rem;
	padding: 0 0.6rem;
	background: var(--color-muted-background);
	background: radial-gradient(
		circle,
		var(--color-muted-background-gradient-top) 0%,
		var(--color-muted-background-gradient-middle) 50%,
		var(--color-muted-background-gradient-bottom) 100%
	);
    color: var(--color-muted-foreground);
    text-shadow: var(--color-muted-foreground-shadow);
	border: 1px solid var(--color-muted-background-border);
	border-radius: 0 var(--border-radius-default) 0 var(--border-radius-default);
	font-size: 0.78rem;
	line-height: 1;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.gridboxes1 > .gridboxes1-box .gridboxes1-extended a:hover,
.gridboxes1 > .gridboxes1-box .gridboxes1-extended a:focus {
	background: var(--color-muted-active-background);
	background: radial-gradient(
		circle,
		var(--color-muted-active-background-gradient-top) 0%,
		var(--color-muted-active-background-gradient-middle) 50%,
		var(--color-muted-active-background-gradient-bottom) 100%
	);
    color: var(--color-muted-active-foreground);
    text-shadow: var(--color-muted-active-foreground-shadow);
	border-color: var(--color-muted-active-background-border);
	text-decoration: none;
}

.gridboxes1 > .gridboxes1-box .gridboxes1-extended a i,
.gridboxes1 > .gridboxes1-box .gridboxes1-extended a svg,
.gridboxes1 > .gridboxes1-box .gridboxes1-extended a .svg-inline--fa {
	width: 0.78rem;
	height: 0.78rem;
	font-size: 0.78rem;
	line-height: 1;
	color: currentColor;
}

/* Hide extra links if old markup still has more than one */

.gridboxes1 > .gridboxes1-box .gridboxes1-extended a:not(:first-child) {
	display: none;
}

/* Responsive - 3 columns > 2 columns > 1 column */

@media (max-width: 1050px) {

	.gridboxes1,
	.gridboxes1.gridboxes1-2col,
	.gridboxes1.gridboxes1-3col,
	.gridboxes1.gridboxes1-4col,
	.gridboxes1.gridboxes1-5col,
	.gridboxes1.gridboxes1-6col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gridboxes1.gridboxes1-1col {
		grid-template-columns: 1fr;
	}

}

@media (max-width: 640px) {

	.gridboxes1,
	.gridboxes1.gridboxes1-1col,
	.gridboxes1.gridboxes1-2col,
	.gridboxes1.gridboxes1-3col,
	.gridboxes1.gridboxes1-4col,
	.gridboxes1.gridboxes1-5col,
	.gridboxes1.gridboxes1-6col {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.gridboxes1 .gridboxes1-box {
		padding: 1.2rem 1.15rem;
	}

	.gridboxes1 .gridboxes1-box .gridboxes1-image {
		width: 2.5rem;
		height: 2.5rem;
		margin-bottom: 0.7rem;
	}

	.gridboxes1 .gridboxes1-box .gridboxes1-image i {
		font-size: 1.55rem;
	}

	.gridboxes1 .gridboxes1-box .gridboxes1-image svg,
	.gridboxes1 .gridboxes1-box .gridboxes1-image .svg-inline--fa {
		width: 1.55rem;
		height: 1.55rem;
	}

	.gridboxes1 .gridboxes1-box .gridboxes1-heading {
		font-size: 1.05rem;
		font-weight: 700;
	}

	.gridboxes1 .gridboxes1-box .gridboxes1-text {
		font-size: 0.92rem;
		line-height: 1.5;
	}

	.gridboxes1 .gridboxes1-box .gridboxes1-buttons,
	.gridboxes1 .gridboxes1-box .gridboxes1-buttons .button1 {
		width: 100%;
	}

	.gridboxes1 > .gridboxes1-box .gridboxes1-extended {
		top: 0.75rem;
		right: 0.75rem;
	}

	.gridboxes1 > .gridboxes1-box .gridboxes1-extended a {
		min-height: 1.65rem;
		padding: 0 0.55rem;
		font-size: 0.75rem;
	}

}

/* Gridboxes 2 - Feature rows */

.gridboxes2 {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-child);
	margin-bottom: var(--spacing-parent);
}

/* Feature container */

.gridboxes2 .gridboxes2-container {
	position: relative;
	padding: clamp(1.5rem, 3vw, 2.5rem) 0;
	overflow: hidden;
}

/* Layout */

.gridboxes2 .gridboxes2-box {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(1.75rem, 4vw, 4rem);
	align-items: center;
}

.gridboxes2 .gridboxes2-container.gridboxes2-reverse .gridboxes2-box {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.gridboxes2 .gridboxes2-container.gridboxes2-reverse .gridboxes2-box .gridboxes2-image {
	order: 2;
}

.gridboxes2 .gridboxes2-container.gridboxes2-reverse .gridboxes2-box .gridboxes2-text {
	order: 1;
}

/* Image */

.gridboxes2 .gridboxes2-box .gridboxes2-image {
	width: auto;
	text-align: center;
}

.gridboxes2 .gridboxes2-box .gridboxes2-image img {
	display: block;
	height: auto;
	margin: 0 auto;
	border-radius: var(--border-radius-default);
}

.gridboxes2 .gridboxes2-container.gridboxes2-boldimg .gridboxes2-box .gridboxes2-image img {
	box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.08);
}

.gridboxes2 .gridboxes2-box .gridboxes2-image .gridboxes2-image-text {
	max-width: 32rem;
	margin: 1rem auto 0 auto;
	font-size: 0.95rem;
	line-height: 1.55;
	text-align: center;
	opacity: 0.82;
}

/* Text */

.gridboxes2 .gridboxes2-box .gridboxes2-text {
	width: auto;
	min-width: 0;
}

.gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-heading {
	margin: 0 0 1rem 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.1;
	font-weight: 900;
	letter-spacing: -0.05em;
	text-align: left;
	text-wrap: balance;
}

.gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-heading2 {
	margin: 0 0 1.25rem 0;
	color: var(--color-box-foreground);
	font-family: var(--font-heading);
	font-size: clamp(1.15rem, 1.5vw, 1.35rem);
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-align: left;
	opacity: 1;
	text-wrap: balance;
}

.gridboxes2 .gridboxes2-box .gridboxes2-text p {
	color: var(--color-box-foreground);
	font-size: 1rem;
	line-height: 1.7;
}

.gridboxes2 .gridboxes2-box .gridboxes2-text p:last-child {
	margin-bottom: 0;
}

/* URL */

.gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-url {
	margin: 0 0 var(--spacing-child) 0;
	color: var(--color-box-foreground);
	font-size: 0.95rem;
	font-weight: 700;
}

.gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-url a {
	color: var(--color-primary-background);
	text-decoration: none;
}

.gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-url a:hover {
	text-decoration: underline;
}

/* Buttons */

.gridboxes2 .gridboxes2-box .gridboxes2-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 1.5rem;
}

.gridboxes2 .gridboxes2-box .gridboxes2-buttons .button1 {
	margin: 0;
}

/* Extended content */

.gridboxes2 .gridboxes2-box-extend {
	position: relative;
	z-index: 2;
	padding: var(--spacing-child) 0 0 0;
	margin-top: var(--spacing-child);
	border-top: 1px solid var(--color-box-background-divider);
}

/* No image layout */

.gridboxes2 .gridboxes2-container.gridboxes2-noimg .gridboxes2-box {
	display: block;
}

.gridboxes2 .gridboxes2-container.gridboxes2-noimg .gridboxes2-box .gridboxes2-text {
	width: 100%;
	max-width: 52rem;
	margin: 0 auto;
	text-align: center;
}

.gridboxes2 .gridboxes2-container.gridboxes2-noimg .gridboxes2-box .gridboxes2-text .gridboxes2-heading,
.gridboxes2 .gridboxes2-container.gridboxes2-noimg .gridboxes2-box .gridboxes2-text .gridboxes2-heading2,
.gridboxes2 .gridboxes2-container.gridboxes2-noimg .gridboxes2-box .gridboxes2-text .gridboxes2-url {
	text-align: center;
}

.gridboxes2 .gridboxes2-container.gridboxes2-noimg .gridboxes2-box .gridboxes2-buttons {
	justify-content: center;
}

/* Responsive */

@media (max-width: 1200px) {

	.gridboxes2 .gridboxes2-box {
		display: flex;
		flex-direction: column;
	}

	.gridboxes2 .gridboxes2-image,
	.gridboxes2 .gridboxes2-text {
		width: 100%;
		min-width: 0;
	}

	.gridboxes2 .gridboxes2-image img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
	}	

	.gridboxes2 .gridboxes2-container.gridboxes2-reverse .gridboxes2-box .gridboxes2-image,
	.gridboxes2 .gridboxes2-container.gridboxes2-reverse .gridboxes2-box .gridboxes2-text {
		order: initial;
	}

	.gridboxes2 .gridboxes2-box .gridboxes2-image {
		width: 100%;
	}

	.gridboxes2 .gridboxes2-box .gridboxes2-image img {
		max-width: 34rem;
	}

	.gridboxes2 .gridboxes2-box .gridboxes2-text {
		width: 100%;
	}

	.gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-heading,
	.gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-heading2,
	.gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-url {
		text-align: center;
	}

	.gridboxes2 .gridboxes2-box .gridboxes2-buttons {
		justify-content: center;
	}

	/* Feature box reverse order */

	.gridboxes2 .gridboxes2-container.gridboxes2-reverse-order .gridboxes2-box .gridboxes2-text {
		margin: 0 0 var(--spacing-child) 0;
	}

	.gridboxes2 .gridboxes2-container.gridboxes2-reverse-order .gridboxes2-box .gridboxes2-image {
		order: 2;
		margin-bottom: 0;
	}

}

@media (max-width: 640px) {

	.gridboxes2 {
		gap: 1rem;
	}

	.gridboxes2 .gridboxes2-container {
		padding: 1.35rem 0;
	}

	.gridboxes2 .gridboxes2-container::before {
		top: 1.25rem;
		bottom: 1.25rem;
	}

	.gridboxes2 .gridboxes2-box .gridboxes2-text .gridboxes2-heading {
		font-size: 1.65rem;
	}

	.gridboxes2 .gridboxes2-box .gridboxes2-buttons,
	.gridboxes2 .gridboxes2-box .gridboxes2-buttons .button1 {
		width: 100%;
	}

}

/* Gridboxes 3 - Category boxes such as the homepage */

.gridboxes3 {
	--gridboxes3-columns: 3;

	display: grid;
	grid-template-columns: repeat(var(--gridboxes3-columns), minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0 0 var(--spacing-parent) 0;
}

.gridboxes3.gridboxes3-1col {
	--gridboxes3-columns: 1;
}

.gridboxes3.gridboxes3-2col {
	--gridboxes3-columns: 2;
}

.gridboxes3.gridboxes3-3col {
	--gridboxes3-columns: 3;
}

.gridboxes3.gridboxes3-4col {
	--gridboxes3-columns: 4;
}

.gridboxes3.gridboxes3-5col {
	--gridboxes3-columns: 5;
}

.gridboxes3.gridboxes3-6col {
	--gridboxes3-columns: 6;
}

.gridboxes3-box {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 13.75rem;
	padding: 1.75rem;
	overflow: hidden;
	background: var(--color-box-background);
	background: radial-gradient(
		circle,
		var(--color-box-background-gradient-top) 0%,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-background-shadow);
	border: 1px solid var(--color-box-background-border);
	border-left: 0.1875rem solid rgba(255, 145, 0, 0.75);
	border-radius: var(--border-radius-default);
	transition:
		transform 0.2s ease,
		border-color 0.2s ease,
		background 0.2s ease;
}

.gridboxes3-box:hover,
.gridboxes3-box:focus-within {
	transform: translateY(-0.125rem);
	background: var(--color-box-active-background);
	background: radial-gradient(
		circle,
		var(--color-box-active-background-gradient-top) 0%,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	border-color: var(--color-box-active-background-border);
	box-shadow: var(--color-box-active-background-shadow);
	border-left-color: var(--color-primary-active-background);
}

.gridboxes3-box > * {
	position: relative;
	z-index: 1;
}

.gridboxes3-highlight {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 2;
	padding: 0.375rem 0.625rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Icon becomes a subtle corner detail instead of taking layout space */

.gridboxes3-icon {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 0;
	color: var(--color-primary-background);
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 0.12;
	pointer-events: none;
}

.gridboxes3-icon i {
	font-size: 3.25rem;
	line-height: 1;
}

.gridboxes3-heading {
	margin: 0 0 0.875rem 0;
	padding-right: 4.5rem;
	color: var(--color-box-foreground-bold);
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.gridboxes3-text {
	max-width: 30rem;
	color: var(--color-box-foreground);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.65;
}

.gridboxes3-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	margin-top: auto;
	padding-top: 1.375rem;
	color: var(--color-primary-background);
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
}

.gridboxes3-link:hover,
.gridboxes3-link:focus-visible {
	color: var(--color-primary-active-background);
}

.gridboxes3-link i {
	font-size: 0.75rem;
	line-height: 1;
	transition: transform 0.2s ease;
}

.gridboxes3-link:hover i,
.gridboxes3-link:focus-visible i {
	transform: translateX(0.25rem);
}

/* Responsive columns */

@media (max-width: 1350px) {

	.gridboxes3.gridboxes3-6col {
		--gridboxes3-columns: 5;
	}

}

@media (max-width: 1200px) {

	.gridboxes3.gridboxes3-5col,
	.gridboxes3.gridboxes3-6col {
		--gridboxes3-columns: 4;
	}

}

@media (max-width: 1100px) {

	.gridboxes3.gridboxes3-4col,
	.gridboxes3.gridboxes3-5col,
	.gridboxes3.gridboxes3-6col {
		--gridboxes3-columns: 3;
	}

}

@media (max-width: 980px) {

	.gridboxes3,
	.gridboxes3.gridboxes3-3col,
	.gridboxes3.gridboxes3-4col,
	.gridboxes3.gridboxes3-5col,
	.gridboxes3.gridboxes3-6col {
		--gridboxes3-columns: 2;
	}

	.gridboxes3.gridboxes3-1col {
		--gridboxes3-columns: 1;
	}

}

@media (max-width: 640px) {

	.gridboxes3,
	.gridboxes3.gridboxes3-2col,
	.gridboxes3.gridboxes3-3col,
	.gridboxes3.gridboxes3-4col,
	.gridboxes3.gridboxes3-5col,
	.gridboxes3.gridboxes3-6col {
		--gridboxes3-columns: 1;
		gap: 1rem;
	}

	.gridboxes3-box {
		min-height: auto;
		padding: 1.5rem;
	}

	.gridboxes3-heading {
		padding-right: 3.75rem;
	}

	.gridboxes3-icon {
		right: 1.25rem;
		bottom: 1.25rem;
	}

	.gridboxes3-icon i {
		font-size: 2.75rem;
	}

}

/* Grid Boxes 4 - Docs button links */

.gridboxes4 {
	--gridboxes4-columns: 4;

	display: grid;
	grid-template-columns: repeat(var(--gridboxes4-columns), minmax(0, 1fr));
	gap: var(--spacing-child);
	margin: 0 0 var(--spacing-parent) 0;
}

.gridboxes4.gridboxes4-1col {
	--gridboxes4-columns: 1;
}

.gridboxes4.gridboxes4-2col {
	--gridboxes4-columns: 2;
}

.gridboxes4.gridboxes4-3col {
	--gridboxes4-columns: 3;
}

.gridboxes4.gridboxes4-4col {
	--gridboxes4-columns: 4;
}

.gridboxes4.gridboxes4-5col {
	--gridboxes4-columns: 5;
}

.gridboxes4.gridboxes4-6col {
	--gridboxes4-columns: 6;
}

.gridboxes4 .gridboxes4-box {
	min-width: 0;
}

.gridboxes4 .gridboxes4-box a {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	min-width: 0;
	padding: 0.9375rem;
	overflow: hidden;
	color: var(--color-box-foreground);
	text-decoration: none;
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-background-shadow);
	border: 1px solid var(--color-box-background-border);
	border-radius: var(--border-radius-default);
	transition:
		background-color var(--transition-default),
		border-color var(--transition-default),
		color var(--transition-default);
}

.gridboxes4 .gridboxes4-box a:hover {
	background: var(--color-box-active-background);
	background: radial-gradient(
		circle,
		var(--color-box-active-background-gradient-top) 0%,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	border-color: var(--color-box-active-background-border);
	box-shadow: var(--color-box-active-background-shadow);	
}

.gridboxes4 .gridboxes4-content {
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
}

.gridboxes4 .gridboxes4-icon {
	display: flex;
	flex: 0 0 2.5rem;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	margin: 0 1rem 0 0;
}

.gridboxes4 .gridboxes4-icon img {
	display: block;
	max-width: 100%;
	height: auto;
}

.gridboxes4 .gridboxes4-icon i {
	display: block;
	color: var(--color-box-foreground-bold);
	font-size: 2.25rem;
	line-height: 1;
}

.gridboxes4 .gridboxes4-text {
	min-width: 0;
}

.gridboxes4 .gridboxes4-heading {
	color: var(--color-box-foreground-bold);
	font-weight: 700;
	line-height: 1.3;
}

.gridboxes4 .gridboxes4-text-text {
	margin: 0.3125rem 0 0 0;
	color: var(--color-box-foreground);
	font-weight: 400;
	line-height: 1.5;
}

/* Hover / active */

.gridboxes4 .gridboxes4-box a:hover,
.gridboxes4 .gridboxes4-box a:focus,
.gridboxes4 .gridboxes4-box.gridboxes4-box-active a,
.gridboxes4 .gridboxes4-box.gridboxes4-box-active a:hover,
.gridboxes4 .gridboxes4-box.gridboxes4-box-active a:focus {
	background: var(--color-box-active-background);
	background: linear-gradient(
		to right,
		var(--color-box-active-background-gradient-top) 0%,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	border-color: var(--color-box-active-background-border);
}

.gridboxes4 .gridboxes4-box a:hover .gridboxes4-heading,
.gridboxes4 .gridboxes4-box a:focus .gridboxes4-heading,
.gridboxes4 .gridboxes4-box.gridboxes4-box-active a .gridboxes4-heading,
.gridboxes4 .gridboxes4-box.gridboxes4-box-active a:hover .gridboxes4-heading,
.gridboxes4 .gridboxes4-box.gridboxes4-box-active a:focus .gridboxes4-heading {
	color: var(--color-box-active-foreground-bold);
}

.gridboxes4 .gridboxes4-box a:hover .gridboxes4-text-text,
.gridboxes4 .gridboxes4-box a:focus .gridboxes4-text-text,
.gridboxes4 .gridboxes4-box.gridboxes4-box-active a .gridboxes4-text-text,
.gridboxes4 .gridboxes4-box.gridboxes4-box-active a:hover .gridboxes4-text-text,
.gridboxes4 .gridboxes4-box.gridboxes4-box-active a:focus .gridboxes4-text-text {
	color: var(--color-box-active-foreground);
}

.gridboxes4 .gridboxes4-box a:hover .gridboxes4-image i,
.gridboxes4 .gridboxes4-box a:focus .gridboxes4-image i,
.gridboxes4 .gridboxes4-box.gridboxes4-box-active a .gridboxes4-image i {
	color: var(--color-box-active-foreground-bold);
}

/* Responsive columns */

@media (max-width: 1350px) {

	.gridboxes4.gridboxes4-6col {
		--gridboxes4-columns: 5;
	}

}

@media (max-width: 1200px) {

	.gridboxes4.gridboxes4-5col,
	.gridboxes4.gridboxes4-6col {
		--gridboxes4-columns: 4;
	}

}

@media (max-width: 1100px) {

	.gridboxes4,
	.gridboxes4.gridboxes4-4col,
	.gridboxes4.gridboxes4-5col,
	.gridboxes4.gridboxes4-6col {
		--gridboxes4-columns: 3;
	}

}

@media (max-width: 1000px) {

	.gridboxes4,
	.gridboxes4.gridboxes4-3col,
	.gridboxes4.gridboxes4-4col,
	.gridboxes4.gridboxes4-5col,
	.gridboxes4.gridboxes4-6col {
		--gridboxes4-columns: 2;
	}

}

@media (max-width: 650px) {

	.gridboxes4,
	.gridboxes4.gridboxes4-2col,
	.gridboxes4.gridboxes4-3col,
	.gridboxes4.gridboxes4-4col,
	.gridboxes4.gridboxes4-5col,
	.gridboxes4.gridboxes4-6col {
		--gridboxes4-columns: 1;
	}

	.gridboxes4 .gridboxes4-image {
		margin-right: 1.25rem;
	}

}

/* Grid Boxes 5 - Past Work */

.gridboxes5 {
	--gridboxes5-columns: 3;

	display: grid;
	grid-template-columns: repeat(var(--gridboxes5-columns), minmax(0, 1fr));
	gap: var(--spacing-parent);
	margin: 0 0 var(--spacing-parent) 0;
}

.gridboxes5.gridboxes5-1col {
	--gridboxes5-columns: 1;
}

.gridboxes5.gridboxes5-2col {
	--gridboxes5-columns: 2;
}

.gridboxes5.gridboxes5-3col {
	--gridboxes5-columns: 3;
}

.gridboxes5.gridboxes5-4col {
	--gridboxes5-columns: 4;
}

.gridboxes5.gridboxes5-5col {
	--gridboxes5-columns: 5;
}

.gridboxes5.gridboxes5-6col {
	--gridboxes5-columns: 6;
}

.gridboxes5 .gridboxes5-box {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 0.9375rem 0;
	transition: transform 0.3s ease;
}

.gridboxes5 .gridboxes5-box:hover,
.gridboxes5 .gridboxes5-box:focus-within {
	transform: translateY(-0.25rem);
}

.gridboxes5 .gridboxes5-box a {
	display: block;
	max-width: 100%;
	text-decoration: none;
}

.gridboxes5 .gridboxes5-box img {
	display: block;
	max-width: 100%;
	height: auto;
	transition:
		transform 0.45s ease,
		filter 0.45s ease;
	will-change: transform;
}

.gridboxes5 .gridboxes5-box:hover img,
.gridboxes5 .gridboxes5-box:focus-within img {
	transform: scale(1.04);
	filter: brightness(1.05);
}

.gridboxes5 .gridboxes5-name {
	padding: 0.625rem var(--spacing-inner);
	color: var(--color-secondary-foreground);
	background: var(--color-secondary-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-secondary-background-gradient-top) 0,
		var(--color-secondary-background-gradient-middle) 50%,
		var(--color-secondary-background-gradient-bottom) 100%
	);
	border-top: 3px solid var(--color-primary-background);
	font-size: 1.1em;
	text-align: center;
}

.gridboxes5 .gridboxes5-name strong {
	color: var(--color-primary-background);
}

/* Responsive columns */

@media (max-width: 1350px) {

	.gridboxes5.gridboxes5-6col {
		--gridboxes5-columns: 5;
	}

}

@media (max-width: 1200px) {

	.gridboxes5.gridboxes5-5col,
	.gridboxes5.gridboxes5-6col {
		--gridboxes5-columns: 4;
	}

}

@media (max-width: 1100px) {

	.gridboxes5.gridboxes5-4col,
	.gridboxes5.gridboxes5-5col,
	.gridboxes5.gridboxes5-6col {
		--gridboxes5-columns: 3;
	}

}

@media (max-width: 1000px) {

	.gridboxes5,
	.gridboxes5.gridboxes5-3col,
	.gridboxes5.gridboxes5-4col,
	.gridboxes5.gridboxes5-5col,
	.gridboxes5.gridboxes5-6col {
		--gridboxes5-columns: 2;
	}

	.gridboxes5.gridboxes5-1col {
		--gridboxes5-columns: 1;
	}

}

@media (max-width: 650px) {

	.gridboxes5,
	.gridboxes5.gridboxes5-2col,
	.gridboxes5.gridboxes5-3col,
	.gridboxes5.gridboxes5-4col,
	.gridboxes5.gridboxes5-5col,
	.gridboxes5.gridboxes5-6col {
		--gridboxes5-columns: 1;
	}

}

/* Grid - Boxes8 - Used for displaying posts/content */

.gridboxes8 {
	display: grid;
	gap: 1.5rem;
	margin: 0 0 var(--spacing-parent) 0;
	padding-top: 1.5rem; /* allows mascot to overlap without breaking layout */
}

.gridboxes8.gridboxes8-1col {
	grid-template-columns: 1fr;
}

.gridboxes8.gridboxes8-2col {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gridboxes8.gridboxes8-3col {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gridboxes8.gridboxes8-4col {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gridboxes8.gridboxes8-5col {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gridboxes8.gridboxes8-6col {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Stop old percentage widths breaking CSS grid */

.gridboxes8.gridboxes8-1col .gridboxes8-box,
.gridboxes8.gridboxes8-2col .gridboxes8-box,
.gridboxes8.gridboxes8-3col .gridboxes8-box,
.gridboxes8.gridboxes8-4col .gridboxes8-box,
.gridboxes8.gridboxes8-5col .gridboxes8-box,
.gridboxes8.gridboxes8-6col .gridboxes8-box {
	width: 100% !important;
}

/* Card */

.gridboxes8 .gridboxes8-box {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 100%;
	margin: 0;
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-background-shadow);
	border: 1px solid var(--color-box-background-border);
	border-left: 0.1875rem solid rgba(255, 145, 0, 0.75);
	border-radius: var(--border-radius-default);
	color: var(--color-box-foreground);
	overflow: visible;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease,
		background 0.2s ease;
}

.gridboxes8 .gridboxes8-box:hover,
.gridboxes8 .gridboxes8-box:focus-within {
	transform: translateY(-0.125rem);
	background: var(--color-box-active-background);
	background: linear-gradient(
		to right,
		var(--color-box-active-background-gradient-top) 0%,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	border-color: var(--color-box-active-background-border);
	border-left-color: var(--color-primary-active-background);
	box-shadow: var(--color-box-active-background-shadow);
}

/* Header */

.gridboxes8 .gridboxes8-head {
	position: relative;
	min-height: 4.75rem;
	background: var(--color-box-head-background);
	background:
		radial-gradient(
			circle at 18% 20%,
			var(--color-box-head-background) 0%,
			transparent 30%
		),
		linear-gradient(
			135deg,
			var(--color-box-head-background-gradient-top) 0%,
			var(--color-box-head-background-gradient-middle) 50%,
			var(--color-box-head-background-gradient-bottom) 100%
		);
	border-bottom: var(--color-box-head-background-border) 1px solid;
	border-radius: calc(var(--border-radius-default) - 1px) calc(var(--border-radius-default) - 1px) 0 0;
	overflow: visible;
}

/* Mascot */

.gridboxes8 .gridboxes8-mascot {
	position: absolute;
	left: 1.25rem;
	top: -1.55rem;
	bottom: auto;
	z-index: 4;
	width: 6.25rem;
	height: 6.25rem;
	background: url("/libs/images/mascot-l.png") center bottom no-repeat;
	background-size: 6.25rem auto;
	pointer-events: none;
}

/* Category tag */

.gridboxes8 .gridboxes8-highlight {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
	padding: 0.375rem 0.625rem;
	background: var(--color-badge-new-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-badge-new-background-gradient-top) 0,
		var(--color-badge-new-background-gradient-middle) 50%,
		var(--color-badge-new-background-gradient-bottom) 100%
	);
	color: var(--color-badge-new-foreground);
	border: 1px solid var(--color-badge-new-background-border);
	border-top: 0;
	border-right: 0;
	border-radius: 0 var(--border-radius-default) 0 var(--border-radius-default);
	font-size: 0.75rem;
	line-height: 1;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Date badge */

.gridboxes8 .gridboxes8-badge {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	background: rgba(255, 255, 255, 0.12);
	color: var(--color-gradient-2-foreground);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-right: 0;
	border-bottom: 0;
	border-radius: var(--border-radius-default) 0 0 0;
	text-align: center;
	font-weight: 800;
	text-transform: uppercase;
	overflow: hidden;
	backdrop-filter: blur(0.375rem);
}

.gridboxes8 .gridboxes8-badge .gridboxes8-badge-line1,
.gridboxes8 .gridboxes8-badge .gridboxes8-badge-line2,
.gridboxes8 .gridboxes8-badge .gridboxes8-badge-line3 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	line-height: 1;
}

.gridboxes8 .gridboxes8-badge .gridboxes8-badge-line1 {
	padding: 0.5rem 0.25rem 0.5rem 0.75rem;
	color: var(--color-gradient-2-foreground);
	font-size: 1rem;
	font-weight: 900;
}

.gridboxes8 .gridboxes8-badge .gridboxes8-badge-line2 {
	padding: 0.5rem 0.25rem;
	color: var(--color-gradient-2-foreground);
	font-size: 0.75rem;
	font-weight: 800;
}

.gridboxes8 .gridboxes8-badge .gridboxes8-badge-line3 {
	padding: 0.5rem 0.75rem 0.5rem 0.25rem;
	color: var(--color-gradient-2-foreground);
	font-size: 0.75rem;
	font-weight: 800;
}

/* Content */

.gridboxes8 .gridboxes8-box .gridboxes8-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 1.75rem;
	padding-bottom: 4rem;
}

.gridboxes8 .gridboxes8-box .gridboxes8-heading {
	margin: 0 0 1.125rem 0;
	color: var(--color-box-foreground-bold);
	font-family: var(--font-heading);
	font-size: 1.375rem;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-align: left;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.gridboxes8 .gridboxes8-box .gridboxes8-heading a {
	display: block;
	color: var(--color-box-foreground-bold);
	text-decoration: none;
}

.gridboxes8 .gridboxes8-box .gridboxes8-heading a:hover,
.gridboxes8 .gridboxes8-box .gridboxes8-heading a:focus-visible {
	color: var(--color-primary-background);
}

.gridboxes8 .gridboxes8-box .gridboxes8-text {
	margin: 0 0 1.5rem 0;
	color: var(--color-box-foreground);
	font-size: 0.9375rem;
	line-height: 1.65;
	font-weight: 400;
}

.gridboxes8 .gridboxes8-postedby {
	margin-top: auto;
	padding-right: 7.5rem;
	color: var(--color-box-foreground);
	font-size: 0.875rem;
	line-height: 1.4;
	font-weight: 500;
}

.gridboxes8 .gridboxes8-postedby i {
	margin-right: 0.375rem;
	color: var(--color-primary-background);
}

/* Read more */

.gridboxes8 .gridboxes8-readmore {
	position: absolute;
	right: -1px;
	bottom: -1px;
}

.gridboxes8 .gridboxes8-readmore a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.875rem;
	padding: 0 1rem;
	background: var(--color-muted-background);
	background: radial-gradient(
		circle,
		var(--color-muted-background-gradient-top) 0%,
		var(--color-muted-background-gradient-middle) 50%,
		var(--color-muted-background-gradient-bottom) 100%
	);
	color: var(--color-muted-foreground);
    text-shadow: var(--color-muted-foreground-shadow);
	border: var(--color-muted-background-border) 1px solid;
	border-radius: var(--border-radius-default) 0 var(--border-radius-default) 0;
	font-size: 0.9375rem;
	line-height: 1;
	font-weight: 800;
	text-decoration: none;
}

.gridboxes8 .gridboxes8-readmore a:hover,
.gridboxes8 .gridboxes8-readmore a:focus-visible {
	background: var(--color-muted-active-background);
	background: radial-gradient(
		circle,
		var(--color-muted-active-background-gradient-top) 0%,
		var(--color-muted-active-background-gradient-middle) 50%,
		var(--color-muted-active-background-gradient-bottom) 100%
	);
    color: var(--color-muted-active-foreground);
    text-shadow: var(--color-muted-active-foreground-shadow);
	border-color: var(--color-muted-active-background-border);
}

/* Responsive */

@media (max-width: 1180px) {

	.gridboxes8.gridboxes8-3col,
	.gridboxes8.gridboxes8-4col,
	.gridboxes8.gridboxes8-5col,
	.gridboxes8.gridboxes8-6col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 900px) {

	.gridboxes8.gridboxes8-4col,
	.gridboxes8.gridboxes8-5col,
	.gridboxes8.gridboxes8-6col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gridboxes8 .gridboxes8-box .gridboxes8-heading {
		font-size: 1.25rem;
	}

	.gridboxes8 .gridboxes8-box .gridboxes8-content {
		padding: 1.5rem;
		padding-bottom: 4rem;
	}

}

@media (max-width: 760px) {

	.gridboxes8,
	.gridboxes8.gridboxes8-2col,
	.gridboxes8.gridboxes8-3col,
	.gridboxes8.gridboxes8-4col,
	.gridboxes8.gridboxes8-5col,
	.gridboxes8.gridboxes8-6col {
		grid-template-columns: 1fr;
	}

	.gridboxes8 {
		padding-top: 1.25rem;
	}

	.gridboxes8 .gridboxes8-mascot {
		left: 1rem;
		top: -1.25rem;
		width: 5.5rem;
		height: 5.5rem;
		background-size: 5.5rem auto;
	}

	.gridboxes8 .gridboxes8-box .gridboxes8-heading {
		font-size: 1.25rem;
	}

}

@media (max-width: 420px) {

	.gridboxes8 .gridboxes8-head {
		min-height: 4.5rem;
	}

	.gridboxes8 .gridboxes8-mascot {
		width: 5rem;
		height: 5rem;
		background-size: 5rem auto;
	}

	.gridboxes8 .gridboxes8-highlight {
		font-size: 0.6875rem;
	}

	.gridboxes8 .gridboxes8-badge .gridboxes8-badge-line1 {
		font-size: 0.9375rem;
	}

	.gridboxes8 .gridboxes8-badge .gridboxes8-badge-line2,
	.gridboxes8 .gridboxes8-badge .gridboxes8-badge-line3 {
		font-size: 0.6875rem;
	}

	.gridboxes8 .gridboxes8-box .gridboxes8-content {
		padding: 1.25rem;
		padding-bottom: 4rem;
	}

	.gridboxes8 .gridboxes8-postedby {
		padding-right: 6.5rem;
	}

	.gridboxes8 .gridboxes8-readmore a {
		min-height: 2.625rem;
		padding: 0 0.875rem;
		font-size: 0.875rem;
	}

}

/* Gridboxes 14 - Hosting page switch/new boxes */

.gridboxes14 {
	--gridboxes14-columns: 2;

	display: grid;
	grid-template-columns: repeat(var(--gridboxes14-columns), minmax(0, 1fr));
	gap: var(--spacing-child);
	margin: 0 0 var(--spacing-parent) 0;
}

.gridboxes14.gridboxes14-1col {
	--gridboxes14-columns: 1;
}

.gridboxes14.gridboxes14-2col {
	--gridboxes14-columns: 2;
}

.gridboxes14 .gridboxes14-box {
	min-width: 0;
	margin: 0;
	color: var(--color-box-foreground);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-background-shadow);
	border: 1px solid var(--color-box-background-border);
	border-radius: var(--border-radius-default);
	overflow: hidden;
	width: 100%;
}

.gridboxes14 .gridboxes14-box:hover,
.gridboxes14 .gridboxes14-box:focus-within {
	background: var(--color-box-active-background);
	background: radial-gradient(
		circle,
		var(--color-box-active-background-gradient-top) 0%,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	border-color: var(--color-box-active-background-border);
	box-shadow: var(--color-box-active-background-shadow);	
}

.gridboxes14 .gridboxes14-box img {
	display: block;
	max-width: 100%;
	height: auto;
	transition: transform 0.4s ease;
}

.gridboxes14 .gridboxes14-box:hover img,
.gridboxes14 .gridboxes14-box:focus-within img {
	transform: scale(1.05);
}

/* Head */

.gridboxes14 .gridboxes14-head {
	width: 100%;
	padding: 0.9375rem var(--spacing-inner);
	color: var(--color-box-head-foreground);
	background: var(--color-box-head-background);
	background:
		radial-gradient(
			circle at 18% 20%,
			var(--color-box-head-background) 0%,
			transparent 30%
		),
		linear-gradient(
			135deg,
			var(--color-box-head-background-gradient-top) 0%,
			var(--color-box-head-background-gradient-middle) 50%,
			var(--color-box-head-background-gradient-bottom) 100%
		);
	border-bottom: var(--color-box-head-background-border) 1px solid;
	border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
}

.gridboxes14 .gridboxes14-heading {
	margin: 0;
	color: var(--color-box-head-foreground-bold);
	text-shadow: var(--color-box-head-foreground-bold-shadow);	
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.3;
	text-transform: capitalize;
	white-space: nowrap;
}

/* Content */

.gridboxes14 .gridboxes14-content {
	display: grid;
	grid-template-columns: 42% 58%;
}

.gridboxes14 .gridboxes14-left,
.gridboxes14 .gridboxes14-right {
	min-width: 0;
	padding: var(--spacing-inner);
}

.gridboxes14 .gridboxes14-left {
	border-right: 1px solid var(--color-box-background-divider);
}

.gridboxes14 .gridboxes14-left-image {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 6.25rem;
	margin: 0 0 var(--spacing-child) 0;
}

.gridboxes14 .gridboxes14-left ul {
	margin-bottom: 0;
}

.gridboxes14 .gridboxes14-right ol {
	margin: 0;
	padding-left: 1.25rem;
}

.gridboxes14 .gridboxes14-right ol li {
	margin: 0 0 0.6rem 0;
	padding-left: 0.25rem;
}

.gridboxes14 .gridboxes14-right ol li:last-child,
.gridboxes14 .gridboxes14-right p:last-child {
	margin-bottom: 0;
}

.gridboxes14 .gridboxes14-heading2 {
	margin: 0 0 var(--spacing-inner) 0;
	font-size: 1.3em;
	font-weight: 700;
	text-align: center;
}

.gridboxes14 .gridboxes14-buttons {
	margin: var(--spacing-child) 0 0 0;
	text-align: center;
}

.gridboxes14 .gridboxes14-buttons .button1 {
	max-width: 100%;
}

/* Responsive */

@media (max-width: 950px) {

	.gridboxes14 .gridboxes14-content {
		grid-template-columns: 1fr;
	}

	.gridboxes14 .gridboxes14-left {
		border-right: none;
		border-bottom: 1px solid var(--color-box-background-divider);
	}

	.gridboxes14 .gridboxes14-left img {
		max-height: 4.375rem;
	}

}

@media (max-width: 650px) {

	.gridboxes14 {
		--gridboxes14-columns: 1;
	}

}

/* Gridboxes 15 - Documentation categories */

.gridboxes15 {
	margin: 0 0 var(--spacing-parent) 0;
}

.gridboxes15 .gridboxes15-box {
	width: 100%;
	margin: 0 0 var(--spacing-child) 0;
	overflow: hidden;
	color: var(--color-box-foreground);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-background-shadow);
	border: 1px solid var(--color-box-background-border);
	border-radius: var(--border-radius-default);
}

.gridboxes15 .gridboxes15-box:hover,
.gridboxes15 .gridboxes15-box:focus-within {
	background: var(--color-box-active-background);
	background: radial-gradient(
		circle,
		var(--color-box-active-background-gradient-top) 0%,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	border-color: var(--color-box-active-background-border);
	box-shadow: var(--color-box-active-background-shadow);
}

/* Head */

.gridboxes15 .gridboxes15-head {
	position: relative;
	width: 100%;
	padding: 0.625rem var(--spacing-inner);
	color: var(--color-box-head-foreground);
	background: var(--color-box-head-background);
	background:
		radial-gradient(
			circle at 18% 20%,
			var(--color-box-head-background) 0%,
			transparent 30%
		),
		linear-gradient(
			135deg,
			var(--color-box-head-background-gradient-top) 0%,
			var(--color-box-head-background-gradient-middle) 50%,
			var(--color-box-head-background-gradient-bottom) 100%
		);
	border-bottom: var(--color-box-head-background-border) 1px solid;
	border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
}

.gridboxes15 .gridboxes15-heading {
	margin: 0;
	padding-right: 2.5rem;
	color: var(--color-box-head-foreground-bold);
	text-shadow: var(--color-box-head-foreground-bold-shadow);	
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	text-transform: capitalize;
}

.gridboxes15 .gridboxes15-icon {
	position: absolute;
	top: 50%;
	right: 0.9375rem;
	transform: translateY(-50%);
	color: var(--color-box-head-foreground-bold);
	font-size: 1.3em;
	line-height: 1;
	text-shadow: 1px 1px var(--color-box-head-foreground-shadow-bold);
}

.gridboxes15 .gridboxes15-icon a {
	color: inherit;
	text-decoration: none;
	text-shadow: inherit;
}

.gridboxes15 .gridboxes15-icon a:hover,
.gridboxes15 .gridboxes15-icon a:focus {
	color: var(--color-gradient-2-foreground);
}

/* Content */

.gridboxes15 .gridboxes15-content {
	padding: var(--spacing-inner);
}

.gridboxes15 .gridboxes15-content p:last-child,
.gridboxes15 .gridboxes15-content ul:last-child {
	margin-bottom: 0;
}

.gridboxes15 .gridboxes15-content ul li {
	margin: 0 0 0.9375rem 0;
	font-size: 1.2em;
	font-weight: 700;
}

.gridboxes15 .gridboxes15-content ul li:last-child {
	margin-bottom: 0;
}

.gridboxes15 .gridboxes15-content-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.5rem;
	width: 2.5rem;
	text-align: center;
}

.gridboxes15 .gridboxes15-content-icon2 {
	margin: 0 0 0 0.3125rem;
}

/* Content headings */

.gridboxes15 .gridboxes15-heading2 {
	margin: 0 0 var(--spacing-child) 0;
	font-size: 1.6em;
	font-weight: 700;
	text-align: center;
	text-transform: capitalize;
}

.gridboxes15 .gridboxes15-heading3 {
	margin: 0 0 var(--spacing-child) 0;
	font-size: 1.1em;
	font-weight: 700;
	text-align: center;
}

.gridboxes15 .gridboxes15-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.625rem;
	text-align: center;
}

.gridboxes15 .gridboxes15-buttons .button1 {
	margin: 0;
}

@media (max-width: 650px) {

	.gridboxes15 .gridboxes15-heading {
		font-size: 1.35em;
	}

	.gridboxes15 .gridboxes15-content ul li {
		font-size: 1.1em;
	}

}

/* Gridboxes 16 - Order step boxes */

.gridboxes16 {
	--gridboxes16-columns: 4;

	display: grid;
	grid-template-columns: repeat(var(--gridboxes16-columns), minmax(0, 1fr));
	gap: var(--spacing-child);
	margin: 0 0 var(--spacing-parent) 0;
}

.gridboxes16.gridboxes16-1col {
	--gridboxes16-columns: 1;
}

.gridboxes16.gridboxes16-2col {
	--gridboxes16-columns: 2;
}

.gridboxes16.gridboxes16-3col {
	--gridboxes16-columns: 3;
}

.gridboxes16.gridboxes16-4col {
	--gridboxes16-columns: 4;
}

.gridboxes16.gridboxes16-5col {
	--gridboxes16-columns: 5;
}

.gridboxes16.gridboxes16-6col {
	--gridboxes16-columns: 6;
}

.gridboxes16 .gridboxes16-box {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: var(--spacing-inner);
	color: var(--color-box-foreground);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	border: 1px solid var(--color-box-background-border);
	border-radius: var(--border-radius-default);
	box-shadow: var(--color-box-background-shadow);
	overflow: hidden;
	transition:
		transform 0.2s ease,
		background 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.gridboxes16 .gridboxes16-box:hover,
.gridboxes16 .gridboxes16-box:focus-within {
	background: var(--color-box-active-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-active-background-gradient-top) 0,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	border-color: var(--color-box-active-background-border);
	box-shadow: var(--color-box-active-background-shadow);
	transform: translateY(-0.125rem);
}

.gridboxes16 .gridboxes16-box::before {
	content: var(--gridboxes16-number);
	position: absolute;
	top: -1px;
	left: -1px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--color-box-active-foreground);
	background: var(--color-box-active-background);
	background: linear-gradient(
		to right,
		var(--color-box-active-background-gradient-top) 0%,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	border: 1px solid var(--color-box-active-background-border);
	border-radius: var(--border-radius-default);
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.gridboxes16 .gridboxes16-box1 {
	--gridboxes16-number: "1";
}

.gridboxes16 .gridboxes16-box2 {
	--gridboxes16-number: "2";
}

.gridboxes16 .gridboxes16-box3 {
	--gridboxes16-number: "3";
}

.gridboxes16 .gridboxes16-box4 {
	--gridboxes16-number: "4";
}

.gridboxes16 .gridboxes16-box5 {
	--gridboxes16-number: "5";
}

.gridboxes16 .gridboxes16-box6 {
	--gridboxes16-number: "6";
}

.gridboxes16 .gridboxes16-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	margin: 0 0 1rem 0;
}

.gridboxes16 .gridboxes16-icon img {
	display: block;
	max-width: 100%;
	height: auto;
}

.gridboxes16 .gridboxes16-icon i {
	display: block;
	font-size: 2rem;
	line-height: 1;
}

.gridboxes16 .gridboxes16-text {
	color: var(--color-box-foreground);
	font-family: var(--font-heading);
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-shadow: none;
	text-transform: capitalize;
}

/* Responsive columns */

@media (max-width: 1350px) {

	.gridboxes16.gridboxes16-6col {
		--gridboxes16-columns: 5;
	}

}

@media (max-width: 1200px) {

	.gridboxes16.gridboxes16-5col,
	.gridboxes16.gridboxes16-6col {
		--gridboxes16-columns: 4;
	}

}

@media (max-width: 1100px) {

	.gridboxes16.gridboxes16-4col,
	.gridboxes16.gridboxes16-5col,
	.gridboxes16.gridboxes16-6col {
		--gridboxes16-columns: 3;
	}

}

@media (max-width: 1000px) {

	.gridboxes16,
	.gridboxes16.gridboxes16-3col,
	.gridboxes16.gridboxes16-4col,
	.gridboxes16.gridboxes16-5col,
	.gridboxes16.gridboxes16-6col {
		--gridboxes16-columns: 2;
	}

	.gridboxes16.gridboxes16-1col {
		--gridboxes16-columns: 1;
	}

}

@media (max-width: 650px) {

	.gridboxes16,
	.gridboxes16.gridboxes16-2col,
	.gridboxes16.gridboxes16-3col,
	.gridboxes16.gridboxes16-4col,
	.gridboxes16.gridboxes16-5col,
	.gridboxes16.gridboxes16-6col {
		--gridboxes16-columns: 1;
	}

}

/* Gridboxes 17 - Domain TLD boxes */

.gridboxes17 {
	--gridboxes17-columns: 4;

	display: grid;
	grid-template-columns: repeat(var(--gridboxes17-columns), minmax(0, 1fr));
	gap: var(--spacing-child);
	margin: 0 0 var(--spacing-parent) 0;
}

.gridboxes17.gridboxes17-1col {
	--gridboxes17-columns: 1;
}

.gridboxes17.gridboxes17-2col {
	--gridboxes17-columns: 2;
}

.gridboxes17.gridboxes17-3col {
	--gridboxes17-columns: 3;
}

.gridboxes17.gridboxes17-4col {
	--gridboxes17-columns: 4;
}

.gridboxes17.gridboxes17-5col {
	--gridboxes17-columns: 5;
}

.gridboxes17.gridboxes17-6col {
	--gridboxes17-columns: 6;
}

.gridboxes17 .gridboxes17-box {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: var(--spacing-inner);
	overflow: hidden;
	color: var(--color-box-foreground);
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-background-shadow);
	border: 1px solid var(--color-box-background-border);
	border-radius: var(--border-radius-default);
	transition:
		transform 0.3s ease,
		border-color 0.3s ease,
		box-shadow 0.3s ease;
}

.gridboxes17 .gridboxes17-box:hover,
.gridboxes17 .gridboxes17-box:focus-within {
	background: var(--color-box-active-background);
	background: radial-gradient(
		circle,
		var(--color-box-active-background-gradient-top) 0%,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	border-color: var(--color-box-active-background-border);
	box-shadow: var(--color-box-active-background-shadow);
}

.gridboxes17 .gridboxes17-box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--color-primary-background);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.gridboxes17 .gridboxes17-box:hover,
.gridboxes17 .gridboxes17-box:focus-within {
	transform: translateY(-0.25rem);
	border-color: var(--color-primary-background);
	box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.12);
}

.gridboxes17 .gridboxes17-box:hover::before,
.gridboxes17 .gridboxes17-box:focus-within::before {
	opacity: 1;
}

.gridboxes17 .gridboxes17-content {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: var(--spacing-child);
	align-items: center;
}

.gridboxes17 .gridboxes17-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	aspect-ratio: 1;
	padding: 0.625rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--color-box-background-divider);
	border-radius: var(--border-radius-default);
}

.gridboxes17 .gridboxes17-image img {
	display: block;
	max-width: 100%;
	height: auto;
	transition: transform 0.35s ease;
}

.gridboxes17 .gridboxes17-box:hover .gridboxes17-image img,
.gridboxes17 .gridboxes17-box:focus-within .gridboxes17-image img {
	transform: scale(1.06);
}

.gridboxes17 .gridboxes17-text {
	min-width: 0;
	color: var(--color-box-foreground-bold);
	font-family: var(--font-heading);
	font-size: 2em;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	text-shadow: 1px 1px var(--color-box-foreground-bold-shadow);
}

.gridboxes17 .gridboxes17-content span {
	display: block;
	margin: 0.75rem 0 0 0;
	color: var(--color-box-foreground);
	font-family: var(--font-body);
	font-size: 0.8em;
	font-weight: 400;
	line-height: 1.3;
	text-shadow: none;
}

/* Responsive columns */

@media (max-width: 1350px) {

	.gridboxes17.gridboxes17-6col {
		--gridboxes17-columns: 5;
	}

}

@media (max-width: 1200px) {

	.gridboxes17.gridboxes17-5col,
	.gridboxes17.gridboxes17-6col {
		--gridboxes17-columns: 4;
	}

}

@media (max-width: 1100px) {

	.gridboxes17,
	.gridboxes17.gridboxes17-4col,
	.gridboxes17.gridboxes17-5col,
	.gridboxes17.gridboxes17-6col {
		--gridboxes17-columns: 3;
	}

}

@media (max-width: 850px) {

	.gridboxes17,
	.gridboxes17.gridboxes17-3col,
	.gridboxes17.gridboxes17-4col,
	.gridboxes17.gridboxes17-5col,
	.gridboxes17.gridboxes17-6col {
		--gridboxes17-columns: 2;
	}

	.gridboxes17.gridboxes17-1col {
		--gridboxes17-columns: 1;
	}

}

@media (max-width: 550px) {

	.gridboxes17,
	.gridboxes17.gridboxes17-2col,
	.gridboxes17.gridboxes17-3col,
	.gridboxes17.gridboxes17-4col,
	.gridboxes17.gridboxes17-5col,
	.gridboxes17.gridboxes17-6col {
		--gridboxes17-columns: 1;
	}

}

@media (max-width: 450px) {

	.gridboxes17 .gridboxes17-content {
		grid-template-columns: 4rem minmax(0, 1fr);
	}

	.gridboxes17 .gridboxes17-text {
		font-size: 1.8em;
	}

}

/* Gridboxes18 - used for testimonials/reviews */

.gridboxes18 {
	display: grid;
	gap: 1.5rem;
	margin: 0 0 var(--spacing-parent) 0;
}

.gridboxes18.gridboxes18-1col {
	grid-template-columns: 1fr;
}

.gridboxes18.gridboxes18-2col {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gridboxes18.gridboxes18-3col {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gridboxes18.gridboxes18-4col {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gridboxes18.gridboxes18-5col {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gridboxes18.gridboxes18-6col {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Stop old percentage widths affecting the new grid */

.gridboxes18.gridboxes18-1col .gridboxes18-box,
.gridboxes18.gridboxes18-2col .gridboxes18-box,
.gridboxes18.gridboxes18-3col .gridboxes18-box,
.gridboxes18.gridboxes18-4col .gridboxes18-box,
.gridboxes18.gridboxes18-5col .gridboxes18-box,
.gridboxes18.gridboxes18-6col .gridboxes18-box {
	width: 100% !important;
}

/* Box */

.gridboxes18 .gridboxes18-box {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 100%;
	margin: 0;
	padding: 1.75rem;
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	box-shadow: var(--color-box-background-shadow);
	color: var(--color-box-foreground);
	border: 1px solid var(--color-box-background-border);
	border-left: 0.1875rem solid rgba(255, 145, 0, 0.75);
	border-radius: var(--border-radius-default);
	overflow: hidden;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease,
		background 0.2s ease;
}

.gridboxes18 .gridboxes18-box:hover,
.gridboxes18 .gridboxes18-box:focus-within {
	transform: translateY(-0.125rem);
	background: var(--color-box-active-background);
	background: linear-gradient(
		to right,
		var(--color-box-active-background-gradient-top) 0%,
		var(--color-box-active-background-gradient-middle) 50%,
		var(--color-box-active-background-gradient-bottom) 100%
	);
	border-color: var(--color-box-active-background-border);
	border-left-color: var(--color-primary-active-background);
	box-shadow: var(--color-box-active-background-shadow);
}

/* Subtle background quote mark */

.gridboxes18 .gridboxes18-box::after {
	content: "\f10e";
	position: absolute;
	right: 1.5rem;
	bottom: 1.25rem;
	z-index: 0;
	color: var(--color-primary-background);
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	font-size: 4rem;
	line-height: 1;
	opacity: 0.07;
	pointer-events: none;
}

/* Top */

.gridboxes18 .gridboxes18-box .gridboxes18-top {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.5rem 0;
	padding: 0 0 1.25rem 0;
	border-bottom: 1px solid var(--color-box-background-divider);
}

.gridboxes18 .gridboxes18-box .gridboxes18-top .gridboxes18-top-left {
	display: block;
	min-width: 0;
}

.gridboxes18 .gridboxes18-box .gridboxes18-top .gridboxes18-top-right {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.625rem;
	height: 2.625rem;
	flex: 0 0 2.625rem;
	background: var(--color-muted-background);
	background: radial-gradient(
		circle,
		var(--color-muted-background-gradient-top) 0%,
		var(--color-muted-background-gradient-middle) 50%,
		var(--color-muted-background-gradient-bottom) 100%
	);
    color: var(--color-muted-foreground);
    text-shadow: var(--color-muted-foreground-shadow);
	border: var(--color-muted-background-border) 1px solid;
	border-radius: 999px;
	font-size: 1rem;
	line-height: 1;
	font-weight: 900;
	opacity: 1;
}

.gridboxes18 .gridboxes18-box .gridboxes18-top .gridboxes18-top-right::after {
	content: "\f10e";
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
}

/* Text */

.gridboxes18 .gridboxes18-box .gridboxes18-text {
	position: relative;
	z-index: 1;
	padding: 0;
	color: var(--color-box-foreground);
	font-weight: 400;
}

.gridboxes18 .gridboxes18-box .gridboxes18-text::before,
.gridboxes18 .gridboxes18-box .gridboxes18-text::after {
	display: none;
}

.gridboxes18 .gridboxes18-box .gridboxes18-text .gridboxes18-readmore {
	margin: 0 0 0 0.3125rem;
	color: var(--color-primary-background);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.gridboxes18 .gridboxes18-box .gridboxes18-text .gridboxes18-readmore:hover,
.gridboxes18 .gridboxes18-box .gridboxes18-text .gridboxes18-readmore:focus-visible {
	color: var(--color-primary-active-background);
	text-decoration-color: transparent;
}

/* Bottom */

.gridboxes18 .gridboxes18-box .gridboxes18-bottom {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: auto 0 0 0;
	padding: 1.25rem 0 0 0;
	border-top: 1px solid var(--color-box-background-divider);
}

.gridboxes18 .gridboxes18-box .gridboxes18-bottom .gridboxes18-bottom-left {
	min-width: 0;
}

.gridboxes18 .gridboxes18-box .gridboxes18-bottom .gridboxes18-bottom-left .gridboxes18-bottom-left-name {
	color: var(--color-box-foreground-bold);
	font-family: var(--font-heading);
	font-size: 1rem;
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.gridboxes18 .gridboxes18-box .gridboxes18-bottom .gridboxes18-bottom-right {
	flex: 0 0 auto;
	max-width: 45%;
	text-align: right;
}

.gridboxes18 .gridboxes18-box .gridboxes18-bottom .gridboxes18-bottom-right .gridboxes18-bottom-right-url {
	font-size: 0.875rem;
	line-height: 1.3;
	font-weight: 500;
}

.gridboxes18 .gridboxes18-box .gridboxes18-bottom .gridboxes18-bottom-right .gridboxes18-bottom-right-url a {
	color: var(--color-box-foreground);
	text-decoration: none;
}

.gridboxes18 .gridboxes18-box .gridboxes18-bottom .gridboxes18-bottom-right .gridboxes18-bottom-right-url a:hover,
.gridboxes18 .gridboxes18-box .gridboxes18-bottom .gridboxes18-bottom-right .gridboxes18-bottom-right-url a:focus-visible {
	color: var(--color-primary-background);
}

/* Responsive */

@media (max-width: 1180px) {

	.gridboxes18.gridboxes18-3col,
	.gridboxes18.gridboxes18-4col,
	.gridboxes18.gridboxes18-5col,
	.gridboxes18.gridboxes18-6col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 760px) {

	.gridboxes18,
	.gridboxes18.gridboxes18-2col,
	.gridboxes18.gridboxes18-3col,
	.gridboxes18.gridboxes18-4col,
	.gridboxes18.gridboxes18-5col,
	.gridboxes18.gridboxes18-6col {
		grid-template-columns: 1fr;
	}

	.gridboxes18 .gridboxes18-box {
		padding: 1.5rem;
	}

}

@media (max-width: 420px) {

	.gridboxes18 .gridboxes18-box {
		padding: 1.25rem;
	}

	.gridboxes18 .gridboxes18-box .gridboxes18-top {
		align-items: flex-start;
	}

	.gridboxes18 .gridboxes18-box .gridboxes18-bottom {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.5rem;
	}

	.gridboxes18 .gridboxes18-box .gridboxes18-bottom .gridboxes18-bottom-right {
		max-width: 100%;
		text-align: left;
	}

}

/* Gridboxes 19 - Design selection cards */

.gridboxes19 {
	--gridboxes19-columns: 3;

	display: grid;
	grid-template-columns: repeat(var(--gridboxes19-columns), minmax(0, 1fr));
	gap: var(--spacing-parent) var(--spacing-child);
	margin: 0 0 var(--spacing-parent) 0;
}

.gridboxes19.gridboxes19-1col { --gridboxes19-columns: 1; }
.gridboxes19.gridboxes19-2col { --gridboxes19-columns: 2; }
.gridboxes19.gridboxes19-3col { --gridboxes19-columns: 3; }
.gridboxes19.gridboxes19-4col { --gridboxes19-columns: 4; }
.gridboxes19.gridboxes19-5col { --gridboxes19-columns: 5; }
.gridboxes19.gridboxes19-6col { --gridboxes19-columns: 6; }

.gridboxes19 .gridboxes19-box {
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: var(--color-box-foreground);
	background: var(--color-box-background);
	border: 1px solid var(--color-box-background-border);
	border-radius: var(--border-radius-default);
	box-shadow: var(--color-box-background-shadow);
	overflow: hidden;
}

.gridboxes19 .gridboxes19-image {
	display: block;
	line-height: 0;
	border-bottom: 1px solid var(--color-box-background-border);
}

.gridboxes19 .gridboxes19-image img {
	display: block;
	width: 100%;
	height: auto;
}

.gridboxes19 .gridboxes19-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	padding: var(--spacing-inner);
	gap: var(--spacing-child);
	text-align: center;
}

.gridboxes19 .gridboxes19-title {
	margin: 0;
	color: var(--color-heading);
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 800;
}

.gridboxes19 .gridboxes19-text {
	max-width: 36rem;
	margin: 0;
	color: var(--color-box-foreground);
}

.gridboxes19 .gridboxes19-text p {
	margin: 0;
}

.gridboxes19 .gridboxes19-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.625rem;
	margin-top: auto;
}

/* Responsive columns */

@media (max-width: 1350px) {
	.gridboxes19.gridboxes19-6col {
		--gridboxes19-columns: 5;
	}
}

@media (max-width: 1200px) {
	.gridboxes19.gridboxes19-5col,
	.gridboxes19.gridboxes19-6col {
		--gridboxes19-columns: 4;
	}
}

@media (max-width: 1100px) {
	.gridboxes19.gridboxes19-4col,
	.gridboxes19.gridboxes19-5col,
	.gridboxes19.gridboxes19-6col {
		--gridboxes19-columns: 3;
	}
}

@media (max-width: 1000px) {
	.gridboxes19,
	.gridboxes19.gridboxes19-3col,
	.gridboxes19.gridboxes19-4col,
	.gridboxes19.gridboxes19-5col,
	.gridboxes19.gridboxes19-6col {
		--gridboxes19-columns: 2;
	}

	.gridboxes19.gridboxes19-1col {
		--gridboxes19-columns: 1;
	}
}

@media (max-width: 650px) {
	.gridboxes19,
	.gridboxes19.gridboxes19-2col,
	.gridboxes19.gridboxes19-3col,
	.gridboxes19.gridboxes19-4col,
	.gridboxes19.gridboxes19-5col,
	.gridboxes19.gridboxes19-6col {
		--gridboxes19-columns: 1;
	}

	.gridboxes19 .gridboxes19-title {
		font-size: 1.5rem;
	}

	.gridboxes19 .gridboxes19-text {
		font-size: 1rem;
	}
}

/*

------------------------------------------
------------------------------------------

----- Pages

------------------------------------------
------------------------------------------	

*/

/* Affiliate ID */

.page-media .affiliateid {
	--affiliateid-width: 320px;
	--affiliateid-height: 3.125rem;
	--affiliateid-prefix-width: 4.5rem;
	--affiliateid-submit-width: 8rem;

	display: flex;
	align-items: stretch;
	justify-content: center;
	width: min(92vw, var(--affiliateid-width));
	max-width: 100%;
	margin: 0 auto;
	text-align: left;
}

/* Prefix */

.page-media .affiliateid-prefix {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--affiliateid-prefix-width);
	width: var(--affiliateid-prefix-width);
	height: var(--affiliateid-height);
	color: var(--color-secondary-foreground);
	background: var(--color-secondary-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-secondary-background-gradient-top) 0,
		var(--color-secondary-background-gradient-middle) 50%,
		var(--color-secondary-background-gradient-bottom) 100%
	);
	border: 1px solid transparent;
	border-right: none;
	border-radius: var(--border-radius-default) 0 0 var(--border-radius-default);
	font-size: 1.125rem;
	line-height: 1;
	text-shadow: none;
	white-space: nowrap;
}

/* Inputs */

.page-media .affiliateid input {
	box-sizing: border-box;
	height: var(--affiliateid-height);
	margin: 0;
	font: inherit;
	line-height: 1;
}

.page-media .affiliateid input[type="number"] {
	display: block;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: 0 var(--spacing-inner);
	border-radius: 0;
	text-align: left;
}

.page-media .affiliateid input[type="submit"] {
	display: block;
	flex: 0 0 var(--affiliateid-submit-width);
	width: var(--affiliateid-submit-width);
	min-width: var(--affiliateid-submit-width);
	border-radius: 0 var(--border-radius-default) var(--border-radius-default) 0;
	white-space: nowrap;
}

/* Responsive */

@media (max-width: 700px) {

	.page-media .affiliateid {
		--affiliateid-width: 500px;
		--affiliateid-height: 2.875rem;
		--affiliateid-prefix-width: 4rem;
		--affiliateid-submit-width: 7rem;

		width: min(94vw, var(--affiliateid-width));
	}

	.page-media .affiliateid-prefix {
		font-size: 1rem;
	}

	.page-media .affiliateid input[type="number"],
	.page-media .affiliateid input[type="submit"] {
		font-size: 0.95rem;
	}

}

@media (max-width: 480px) {

	.page-media .affiliateid {
		--affiliateid-height: 2.75rem;
		--affiliateid-prefix-width: 3.5rem;
		--affiliateid-submit-width: 6.25rem;

		width: 96vw;
	}

	.page-media .affiliateid-prefix,
	.page-media .affiliateid input[type="number"],
	.page-media .affiliateid input[type="submit"] {
		font-size: 0.875rem;
	}

	.page-media .affiliateid input[type="number"] {
		padding-right: 0.625rem;
		padding-left: 0.625rem;
	}

}

@media (max-width: 380px) {

	.page-media .affiliateid {
		--affiliateid-prefix-width: 3.25rem;
		--affiliateid-submit-width: 5.75rem;
	}

	.page-media .affiliateid-prefix,
	.page-media .affiliateid input[type="number"],
	.page-media .affiliateid input[type="submit"] {
		font-size: 0.8rem;
	}

}

.page-media .bannergrid .columns-col img {
	margin: 0 auto var(--spacing-child) auto;
}

.page-media .product-tables2 input[type="text"],
.page-media .product-tables2 input:disabled {
	cursor: text;
}

/* Web Hosting */

.page-web-hosting .product-boxes1 .product-boxes1-box:nth-child(1) .product-boxes1-image img {
	border-bottom: #c37432 5px solid;
}

.page-web-hosting .product-boxes1 .product-boxes1-box:nth-child(2) .product-boxes1-image img {
	border-bottom: #b8b8b8 5px solid;
}

.page-web-hosting .product-boxes1 .product-boxes1-box:nth-child(3) .product-boxes1-image img {
	border-bottom: #fdd028 5px solid;
}

/* Affiliate Program */

.page-affiliate-program .legaltext {
	text-align: right;
	font-size: 0.8em;
}

/* Templates Compare */

.page-templates-compare .table-responsive .button1 {
	margin-top: 15px;
}

/* Templates Package */

.page-templates-package .templates-package-heading {
	margin-bottom: var(--spacing-parent);
}

.page-templates-package .columns.columns-2col .columns-col {
	align-self: center;
}

.page-templates-package .columns.columns-2col .columns-col:nth-child(1) {
	width: 36%;
}

.page-templates-package .columns.columns-2col .columns-col:nth-child(1) img {
	margin: 0 auto var(--spacing-child) auto;
}

.page-templates-package .columns.columns-2col .columns-col:nth-child(1) .templates-package-heading2 {
	margin-bottom: 15px;
}

.page-templates-package .columns.columns-2col .columns-col:nth-child(1) .templates-package-text {
	text-align: center;
	font-weight: bold;
	font-size: 1.4em;
	text-transform: capitalize;
}

.page-templates-package .columns.columns-2col .columns-col:nth-child(2) {
	width: 60%;
}

.page-templates-package .footermain {
	border-top: none;
}

@media (max-width: 900px) {	
	
	.page-templates-package .columns {
		flex-direction: column;
	}
	
	.page-templates-package .columns.columns-2col .columns-col:nth-child(1),
	.page-templates-package .columns.columns-2col .columns-col:nth-child(2) {
		width: 100%;
	}
	
	.page-templates-package .columns.columns-2col .columns-col:nth-child(1) {
		order: 2;
	}	
			
}

/* Docs Single */

.category-docs-single h2,
.category-docs-single h3 {
	text-align: left;
}

.category-docs-single .docs-number {
	color: var(--color-primary-background);
	font-weight: bold;
	margin: 0 10px 0 0;
}

/* Category Demo */

.category-demo {
	border-top: none;
	overflow: hidden;
	background: transparent;
}

.category-demo #eucookie {
	display: none;
}

/* Cookie Consent */

.page-cookie-consent .cta-product .cta-product-image {
	background-position: center bottom;
}

/*

------------------------------------------
------------------------------------------

----- Scripts

------------------------------------------
------------------------------------------	

*/

/* Scroll to top */

.cd-top {
	position: fixed;
	right: 1rem;
	bottom: 5.625rem;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	overflow: hidden;
	color: var(--color-secondary-foreground);
	background: var(--color-secondary-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-secondary-background-gradient-top) 0,
		var(--color-secondary-background-gradient-middle) 50%,
		var(--color-secondary-background-gradient-bottom) 100%
	);
	border-radius: var(--border-radius-default);
	text-indent: -9999px;
	white-space: nowrap;
	visibility: hidden;
	opacity: 0;
	transition:
		opacity 0.3s ease,
		visibility 0s linear 0.3s,
		background-color 0.3s ease,
		transform 0.3s ease;
}

.cd-top::before {
	content: "\f062";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: currentColor;
	font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
	font-size: 1rem;
	font-weight: 900;
	line-height: 1;
	text-indent: 0;
}

.cd-top:hover,
.cd-top:focus {
	color: var(--color-secondary-active-foreground);
	background: var(--color-secondary-active-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-secondary-active-background-gradient-top) 0,
		var(--color-secondary-active-background-gradient-middle) 50%,
		var(--color-secondary-active-background-gradient-bottom) 100%
	);
	text-decoration: none;
	transform: translateY(-0.1875rem);
}

.cd-top:focus {
	outline: none;
}

.cd-top:focus-visible {
	outline: 0.1875rem solid rgba(37, 99, 235, 0.25);
	outline-offset: 0.1875rem;
}

.cd-top.cd-is-visible,
.cd-top.cd-fade-out {
	visibility: visible;
	transition:
		opacity 0.3s ease,
		visibility 0s linear 0s,
		background-color 0.3s ease,
		transform 0.3s ease;
}

.cd-top.cd-is-visible {
	opacity: 1;
}

.cd-top.cd-fade-out {
	opacity: 0.7;
}

.no-touch .cd-top:hover,
.no-touch .cd-top:focus {
	opacity: 1;
}

@media (max-width: 650px) {

	.cd-top {
		right: 0.75rem;
		bottom: 4.5rem;
		width: 2.25rem;
		height: 2.25rem;
	}

	.cd-top::before {
		font-size: 0.9rem;
	}

}

/* Magnific Popup - https://dimsemenov.com/plugins/magnific-popup/ */

.popup {
	position: relative;
	background: var(--color-box-background);
	background: linear-gradient(
		var(--gradient-degrees),
		var(--color-box-background-gradient-top) 0,
		var(--color-box-background-gradient-middle) 50%,
		var(--color-box-background-gradient-bottom) 100%
	);
	color: var(--color-box-foreground);
	border: 1px solid var(--color-box-background-border);
	border-left: 0.1875rem solid rgba(255, 145, 0, 0.75);
	border-radius: var(--border-radius-default);
	box-shadow: var(--color-box-active-background-shadow);
	font-size: 1rem;
	line-height: 1.65;
	overflow: hidden;
}

.popup .popup-inner {
	padding: 1.75rem;
}

.popup-review {
	width: var(--container-width);
	max-width: 50rem;
	margin: 0 auto;
	padding: 1.75rem;
}

/* Review quote */

.popup-review .popup-review-quote {
	position: relative;
	padding: 0 0 0 3.25rem;
	color: var(--color-box-foreground);
	font-size: 1rem;
	line-height: 1.75;
	font-weight: 400;
}

.popup-review .popup-review-quote::before {
	content: "\f10d";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--color-primary-background);
	font-family: "Font Awesome 6 Pro";
	font-size: 2rem;
	font-weight: 900;
	line-height: 1;
	opacity: 0.25;
}

.popup-review .popup-review-quote::after {
	display: none;
}

/* Review footer */

.popup-review .popup-review-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin: 1.75rem 0 0 0;
	padding: 1.5rem 0 0 0;
	border-top: 1px solid var(--color-box-background-divider);
}

.popup-review .popup-review-bottom .popup-review-bottom-left {
	min-width: 0;
}

.popup-review .popup-review-bottom .popup-review-bottom-left .popup-review-bottom-left-name {
	margin: 0 0 0.25rem 0;
	color: var(--color-box-foreground-bold);
	font-family: var(--font-heading);
	font-size: 1rem;
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.popup-review .popup-review-bottom .popup-review-bottom-left .popup-review-bottom-left-url {
	color: var(--color-box-foreground);
	font-size: 0.875rem;
	line-height: 1.4;
	font-weight: 500;
}

.popup-review .popup-review-bottom .popup-review-bottom-left .popup-review-bottom-left-url a {
	color: var(--color-box-foreground);
	text-decoration: none;
}

.popup-review .popup-review-bottom .popup-review-bottom-left .popup-review-bottom-left-url a:hover,
.popup-review .popup-review-bottom .popup-review-bottom-left .popup-review-bottom-left-url a:focus-visible {
	color: var(--color-primary-background);
}

/* Review source logos */

.popup-review .popup-review-bottom .popup-review-source-google,
.popup-review .popup-review-bottom .popup-review-source-facebook,
.popup-review .popup-review-bottom .popup-review-source-whtop,
.popup-review .popup-review-bottom .popup-review-source-wht,
.popup-review .popup-review-bottom .popup-review-source-blesta,
.popup-review .popup-review-bottom .popup-review-source-whmcs {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 0 0 auto;
}

.popup-review .popup-review-bottom .popup-review-source-google img,
.popup-review .popup-review-bottom .popup-review-source-whtop img,
.popup-review .popup-review-bottom .popup-review-source-wht img {
	max-height: 2.5rem;
	width: auto;
}

.popup-review .popup-review-bottom .popup-review-source-facebook img {
	max-height: 1.25rem;
	width: auto;
}

.popup-review .popup-review-bottom .popup-review-source-blesta img,
.popup-review .popup-review-bottom .popup-review-source-whmcs img {
	max-height: 1.5625rem;
	width: auto;
}

/* Magnific image popup */

.mfp-content .mfp-figure figure {
	background: #fff;
	border-radius: var(--border-radius-default);
	overflow: hidden;
}

/* Responsive */

@media (max-width: 640px) {

	.popup .popup-inner,
	.popup-review {
		padding: 1.5rem;
	}

	.popup-review .popup-review-quote {
		padding-left: 2.75rem;
	}

	.popup-review .popup-review-quote::before {
		font-size: 1.75rem;
	}

	.popup-review .popup-review-bottom {
		align-items: flex-start;
		flex-direction: column;
		gap: 1rem;
	}

	.popup-review .popup-review-bottom .popup-review-source-google,
	.popup-review .popup-review-bottom .popup-review-source-facebook,
	.popup-review .popup-review-bottom .popup-review-source-whtop,
	.popup-review .popup-review-bottom .popup-review-source-wht,
	.popup-review .popup-review-bottom .popup-review-source-blesta,
	.popup-review .popup-review-bottom .popup-review-source-whmcs {
		justify-content: flex-start;
	}

}

@media (max-width: 420px) {

	.popup .popup-inner,
	.popup-review {
		padding: 1.25rem;
	}

	.popup-review .popup-review-quote {
		padding-left: 0;
	}

	.popup-review .popup-review-quote::before {
		position: static;
		display: block;
		margin: 0 0 0.75rem 0;
	}

}

.mfp-content img.mfp-img {
	padding: var(--spacing-inner);
}

.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8; }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation; }

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover,
  .mfp-close:focus {
    opacity: 1; }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent; }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover,
  .mfp-arrow:focus {
    opacity: 1; }
  .mfp-arrow:before,
  .mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
  .mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
  .mfp-arrow-right:before {
    border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444; }
  .mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
  .mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0; }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; } }

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; }
}

.popup .codesnippet {
	margin-bottom: 0;
}

.popup .codesnippet code[class*="language-"],
.popup .codesnippet pre[class*="language-"] {
	height: 250px;
}
 
/* Prism (Code highlighting) - https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+markup-templating+php+smarty */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #9a6e3a;
	/* This background color was intended by the author of this theme. */
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function,
.token.class-name {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}