/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
html,
body {
  height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}

/* 
 * Remove default styling from buttons */

button {
  border: none;
  background: none;
  border-radius: none;
}

/*
  8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/*
  9. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

/* dialog styling */

dialog {
  margin: auto;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
} 

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/

/* CSS variables */

:root {
  --gap: 2.127659574%;
  --default-drag-n-drop-gutter: 30px;
  --section-horizontal-padding: 1.875rem;
  --section-vertical-padding: 6.25rem;
  --grid-width: 1280px;
  --desktop-column-width: 6.1848%;
  --desktop-column-width-px: calc(
    ((var(--grid-width) - 11 * var(--default-drag-n-drop-gutter)) / 12)
  ); /* (1280px - 11 * 30px) / 12 */
  --tablet-column-width: 5.1%;

  --dsk-span11: calc(
    (var(--desktop-column-width) * 11) +
      (10 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span11-px: calc(
    (var(--desktop-column-width-px) * 11) +
      (10 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span10: calc(
    (var(--desktop-column-width) * 10) + (9 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span10-px: calc(
    (var(--desktop-column-width-px) * 10) +
      (9 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span9: calc(
    (var(--desktop-column-width) * 9) + (8 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span9-px: calc(
    (var(--desktop-column-width-px) * 9) +
      (8 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span8: calc(
    (var(--desktop-column-width) * 8) + (7 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span8-px: calc(
    (var(--desktop-column-width-px) * 8) +
      (7 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span7: calc(
    (var(--desktop-column-width) * 7) + (6 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span7-px: calc(
    (var(--desktop-column-width-px) * 7) +
      (6 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span6: calc(
    (var(--desktop-column-width) * 6) + (5 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span6-px: calc(
    (var(--desktop-column-width-px) * 6) +
      (5 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span5_: calc(
    (var(--desktop-column-width) * 5) + (5 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span5: calc(
    (var(--desktop-column-width) * 5) + (4 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span5-px: calc(
    (var(--desktop-column-width-px) * 5) +
      (4 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span4: calc(
    (var(--desktop-column-width) * 4) + (3 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span4-px: calc(
    (var(--desktop-column-width-px) * 4) +
      (3 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span3: calc(
    (var(--desktop-column-width) * 3) + (2 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span3-px: calc(
    (var(--desktop-column-width-px) * 3) +
      (2 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span2: calc(
    (var(--desktop-column-width) * 2) + (1 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span2-px: calc(
    (var(--desktop-column-width-px) * 2) +
      (1 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span1: calc(
    (var(--desktop-column-width) * 1) + (0 * var(--default-drag-n-drop-gutter))
  );
  --dsk-span1-px: var(--desktop-column-width-px);
}

@media screen and (max-width: 992px) {
  :root {
    --section-vertical-padding: 75px;
  }
}

@media screen and (max-width: 560px) {
  :root {
    --section-vertical-padding: 50px;
  }
}

/* The grid layout system is based on the 3 levels:
 => section-container: Sets the width of the sections and the vertical padding of the sections
 => row-fluid: Acts as a container for the grid, it takes the whole width of the section, align elements to the left, space them according to the gutter
		and dictate the behavior on screen resizing (elements shrink on desktop and wrap on tablet/mobile)
 => spanX: Set the width of the elements inside the grid. From span1 to span12 on desktop and tablet-span1 to tablet-span8 on tablet, 
		 mobile-span1 set the element to 50% width on mobile. The width is calculated dynamically, a percent value representing the grid column width and the gutter width.
		 .i.e. spanX => calc( (span1Width % * X) + (gutterWidth * (X-1)))
**/

/* Hidding the overflow on all section causes the position: sticky to break on sticky sections -- use overflow: hidden at the template level or module level when needed */
.section {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* This class adds the overlow hidden when needed */
.overflow-hidden {
  overflow: hidden;
}

.section[data-hero="true"] {
  padding-top: 70px;
}

@media screen and (max-width: 560px) {
  .section[data-hero="true"] {
    padding-top: 72px;
  }
}

@media screen and (max-width: 400px) and (max-height: 700px) {
  .section[data-hero="true"] {
    padding-top: 50px;
  }
}

/* UX Gray*/
:where([data-background="ux-bg-gray"]) {
  background-color: var(--ux-bg-gray) !important;
}
/* Primary BG */
:where([data-background="primary-accent"]) {
  background-color: var(--primary-accent) !important;
}

:where([data-background="primary-tint-2"]) {
  background-color: var(--bg-primary-tint-2) !important;
}
:where([data-background="primary-tint-1"]) {
  background-color: var(--bg-primary-tint-1) !important;
}

:where([data-background="primary-tint-0"]) {
  background-color: var(--bg-primary-tint-0) !important;
}

/* Dark BG */

:where([data-background="dark"]) {
  background-color: var(--dark) !important;
}

:where([data-background="dark-tint-2"]) {
  background-color: var(--bg-dark-tint-2) !important;
}
:where([data-background="dark-tint-1"]) {
  background-color: var(--bg-dark-tint-1) !important;
}

:where([data-background="dark-tint-0"]) {
  background-color: var(--bg-dark-tint-0) !important;
}

/* Grey BG */
:where([data-background="grey-accent"]) {
  background-color: var(--grey-accent) !important;
}
:where([data-background="grey-tint-2"]) {
  background-color: var(--bg-grey-tint-2) !important;
}
:where([data-background="grey-tint-1"]) {
  background-color: var(--bg-grey-tint-1) !important;
}

:where([data-background="grey-tint-0"]) {
  background-color: var(--bg-grey-tint-0) !important;
}

/* Green BG */
:where([data-background="green-accent"]) {
  background-color: var(--green-accent) !important;
}
:where([data-background="green-tint-2"]) {
  background-color: var(--bg-green-tint-2) !important;
}
:where([data-background="green-tint-1"]) {
  background-color: var(--bg-green-tint-1) !important;
}

:where([data-background="green-tint-0"]) {
  background-color: var(--bg-green-tint-0) !important;
}

/* Lilac BG */
:where([data-background="lilac-accent"]) {
  background-color: var(--lilac-accent) !important;
}
:where([data-background="lilac-tint-2"]) {
  background-color: var(--bg-lilac-tint-2) !important;
}

:where([data-background="lilac-tint-1"]) {
  background-color: var(--bg-lilac-tint-1) !important;
}

:where([data-background="lilac-tint-0"]) {
  background-color: var(--bg-lilac-tint-0) !important;
}

/* Pink BG */

:where([data-background="pink-accent"]) {
  background-color: var(--pink-accent) !important;
}

:where([data-background="pink-tint-2"]) {
  background-color: var(--bg-pink-tint-2) !important;
}
:where([data-background="pink-tint-1"]) {
  background-color: var(--bg-pink-tint-1) !important;
}

:where([data-background="pink-tint-0"]) {
  background-color: var(--bg-pink-tint-0) !important;
}

/* Orange BG */

:where([data-background="orange-accent"]) {
  background-color: var(--orange-accent) !important;
}

:where([data-background="orange-tint-2"]) {
  background-color: var(--bg-orange-tint-2) !important;
}

:where([data-background="orange-tint-1"]) {
  background-color: var(--bg-orange-tint-1) !important;
}

:where([data-background="orange-tint-0"]) {
  background-color: var(--bg-orange-tint-0) !important;
}

/* Chip BG */

:where([data-background="chip-ocean-93"]) {
  background-color: var(--chip-ocean-93) !important;
}

:where([data-background="chip-lilac-93"]) {
  background-color: var(--chip-lilac-93) !important;
}

:where([data-background="chip-rose-93"]) {
  background-color: var(--chip-rose-93) !important;
}

:where([data-background="chip-gray-93"]) {
  background-color: var(--chip-gray-93) !important;
}

:where([data-background="chip-purple-93"]) {
  background-color: var(--chip-purple-93) !important;
}

:where([data-background="chip-olive-93"]) {
  background-color: var(--chip-olive-93) !important;
}
:where([data-background="chip-emerald-93"]) {
  background-color: var(--chip-emerald-93) !important;
}
:where([data-background="chip-pink-93"]) {
  background-color: var(--chip-pink-93) !important;
}
:where([data-background="chip-wood-93"]) {
  background-color: var(--chip-wood-93) !important;
}
:where([data-background="chip-leather-93"]) {
  background-color: var(--chip-leather-93) !important;
}
:where([data-background="chip-forest-93"]) {
  background-color: var(--chip-forest-93) !important;
}

/* White BG */

:where([data-background="white"]) {
  background-color: var(--white) !important;
}

/* Revenue Rebels */

:where([data-background="rr-purple"]) {
  background-color: var(--rr-purple) !important;
}

:where([data-background="rr-dark"]) {
  background-color: var(--rr-dark) !important;
}

:where([data-background="rr-green"]) {
  background-color: var(--rr-green) !important;
}

/* Product Grays */

:where([data-background="product-gray-80"]) {
  background-color: var(--bg-product-gray-80) !important;
}

:where([data-background="product-gray-89"]) {
  background-color: var(--bg-product-gray-89) !important;
}

:where([data-background="product-gray-92"]) {
  background-color: var(--bg-product-gray-92) !important;
}

:where([data-background="product-gray-94"]) {
  background-color: var(--bg-product-gray-94) !important;
}

:where([data-background="product-gray-96"]) {
  background-color: var(--bg-product-gray-96) !important;
}

:where([data-background="product-gray-98"]) {
  background-color: var(--bg-product-gray-98) !important;
}

/* Section Container */

.section-container {
  width: var(--section-container-width);
  max-width: 1280px;
  padding-top: var(--section-vertical-padding);
  padding-bottom: var(--section-vertical-padding);
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .section-container {
    width: calc(100vw - 7.5rem);
  }
}

:is(.section-container)[data-topless="true"] {
  padding-top: 0;
}

:is(.section-container)[data-bottomless="true"] {
  padding-bottom: 0;
}

/* The default behavior of rows is nowrap, add the below wrap class to force the wrap behavior */

.never-wrap {
  flex-wrap: nowrap !important;
}

/* Mobile layout == 2 Columns Grid*/

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
  gap: var(--default-drag-n-drop-gutter);
}

.row-fluid [class*="span"] {
  min-height: 1px;
  width: 100%;
}

.row-fluid [class*="mobile-span1"] {
  width: calc(50% - var(--default-drag-n-drop-gutter) / 2);
}

/* Tablet layout == 12 Columns Grid */

@media (min-width: 560px) {
  :root {
    /* From 560px width to 992px width, the gutter will proportionaly grow from 16px to 30px */
    --default-drag-n-drop-gutter: clamp(
      1rem,
      calc(1rem + ((1vw - 0.35rem) * 3.2407)),
      1.875rem
    );
  }

  .row-fluid [class*="small-tablet-span1"] {
    width: 5.1%;
  }

  .row-fluid [class*="small-tablet-span2"] {
    width: calc((5.1% * 2) + (1 * var(--default-drag-n-drop-gutter)));
  }

  .row-fluid [class*="small-tablet-span3"] {
    width: calc((5.1% * 3) + (2 * var(--default-drag-n-drop-gutter)));
  }

  .row-fluid [class*="small-tablet-span4"] {
    width: calc((5.1% * 4) + (3 * var(--default-drag-n-drop-gutter)));
  }

  .row-fluid [class*="small-tablet-span5"] {
    width: calc((5.1% * 5) + (4 * var(--default-drag-n-drop-gutter)));
  }

  .row-fluid [class*="small-tablet-span6"] {
    width: calc((5.1% * 6) + (5 * var(--default-drag-n-drop-gutter)));
  }

  .row-fluid [class*="small-tablet-span7"] {
    width: calc((5.1% * 7) + (6 * var(--default-drag-n-drop-gutter)));
  }

  .row-fluid [class*="small-tablet-span8"] {
    width: calc((5.1% * 8) + (7 * var(--default-drag-n-drop-gutter)));
  }
  .row-fluid [class*="small-tablet-span9"] {
    width: calc((5.1% * 9) + (8 * var(--default-drag-n-drop-gutter)));
  }
  .row-fluid [class*="small-tablet-span10"] {
    width: calc((5.1% * 10) + (9 * var(--default-drag-n-drop-gutter)));
  }
  .row-fluid [class*="small-tablet-span11"] {
    width: calc((5.1% * 11) + (10 * var(--default-drag-n-drop-gutter)));
  }
  .row-fluid [class*="small-tablet-span12"] {
    width: 100%;
  }
}

@media (min-width: 810px) {
  .row-fluid [class*="tablet-span1"] {
    width: 5.1%;
  }

  .row-fluid [class*="tablet-span2"] {
    width: calc((5.1% * 2) + (1 * var(--default-drag-n-drop-gutter)));
  }

  .row-fluid [class*="tablet-span3"] {
    width: calc((5.1% * 3) + (2 * var(--default-drag-n-drop-gutter)));
  }

  .row-fluid [class*="tablet-span4"] {
    width: calc((5.1% * 4) + (3 * var(--default-drag-n-drop-gutter)));
  }

  .row-fluid [class*="tablet-span5"] {
    width: calc((5.1% * 5) + (4 * var(--default-drag-n-drop-gutter)));
  }

  .row-fluid [class*="tablet-span6"] {
    width: calc((5.1% * 6) + (5 * var(--default-drag-n-drop-gutter)));
  }

  .row-fluid [class*="tablet-span7"] {
    width: calc((5.1% * 7) + (6 * var(--default-drag-n-drop-gutter)));
  }

  .row-fluid [class*="tablet-span8"] {
    width: calc((5.1% * 8) + (7 * var(--default-drag-n-drop-gutter)));
  }
  .row-fluid [class*="tablet-span9"] {
    width: calc((5.1% * 9) + (8 * var(--default-drag-n-drop-gutter)));
  }
  .row-fluid [class*="tablet-span10"] {
    width: calc((5.1% * 10) + (9 * var(--default-drag-n-drop-gutter)));
  }
  .row-fluid [class*="tablet-span11"] {
    width: calc((5.1% * 11) + (10 * var(--default-drag-n-drop-gutter)));
  }
  .row-fluid [class*="tablet-span12"] {
    width: 100%;
  }
}

/* Desktop layout == 12 Columns Grid */

@media (min-width: 992px) {
  :root {
    --default-drag-n-drop-gutter: 30px;
  }

  .row-fluid {
    flex-wrap: nowrap;
  }

  .row-fluid [class*="tablet-span"] {
    width: unset;
  }

  .row-fluid .span11 {
    width: var(--dsk-span11);
  }

  .row-fluid .span10 {
    width: var(--dsk-span10);
  }

  .row-fluid .span9 {
    width: var(--dsk-span9);
  }

  .row-fluid .span8 {
    width: var(--dsk-span8);
  }

  .row-fluid .span7 {
    width: var(--dsk-span7);
  }

  .row-fluid .span6 {
    width: var(--dsk-span6);
    max-width: 625px;
  }

  .row-fluid .span5_ {
    width: var(--dsk-span5_);
  }

  .row-fluid .span5 {
    width: var(--dsk-span5);
  }

  .row-fluid .span4 {
    width: var(--dsk-span4);
  }

  .row-fluid .span3 {
    width: var(--dsk-span3);
  }

  .row-fluid .span2 {
    width: var(--dsk-span2);
  }

  .row-fluid .span1 {
    width: var(--dsk-span1);
  }
}

/* Small laptop layout == 12 Columns Grid */

@media (min-width: 992px) and (max-width: 1100px) {
  .row-fluid .sdsk-span11 {
    width: var(--dsk-span11);
  }

  .row-fluid .sdsk-span10 {
    width: var(--dsk-span10);
  }

  .row-fluid .sdsk-span9 {
    width: var(--dsk-span9);
  }

  .row-fluid .sdsk-span8 {
    width: var(--dsk-span8);
  }

  .row-fluid .sdsk-span7 {
    width: var(--dsk-span7);
  }

  .row-fluid .sdsk-span6 {
    width: var(--dsk-span6);
    max-width: 625px;
  }

  .row-fluid .sdsk-span5 {
    width: var(--dsk-span5);
  }

  .row-fluid .sdsk-span4 {
    width: var(--dsk-span4);
  }

  .row-fluid .sdsk-span3 {
    width: var(--dsk-span3);
  }

  .row-fluid .sdsk-span2 {
    width: var(--dsk-span2);
  }

  .row-fluid .sdsk-span1 {
    width: var(--dsk-span1);
  }
}

/* CSS GRID LAYOUT */

.grid {
  display: grid !important;
}

.grid-set {
  grid-template-columns: repeat(12, 1fr);
}

@media (min-width: 992px) {
  .grid-set [class*="tablet-span"] {
    grid-column: unset;
    width: unset;
  }

  .grid-set .span12 {
    grid-column: span 12;
    width: auto;
    max-width: 100%;
  }

  .grid-set .span11 {
    grid-column: span 11;
    width: auto;
    max-width: unset;
  }

  .grid-set .span10 {
    grid-column: span 10;
    width: auto;
    max-width: 100%;
  }

  .grid-set .span9 {
    grid-column: span 9;
    width: auto;
    max-width: 100%;
  }

  .grid-set .span8 {
    grid-column: span 8;
    width: auto;
    max-width: 100%;
  }

  .grid-set .span7 {
    grid-column: span 7;
    width: auto;
    max-width: 100%;
  }

  .grid-set .span6 {
    grid-column: span 6;
    width: auto;
    max-width: 100%;
  }

  .grid-set .span5 {
    grid-column: span 5;
    width: auto;
    max-width: 100%;
  }

  .grid-set .span4 {
    grid-column: span 4;
    width: auto;
    max-width: 100%;
  }

  .grid-set .span3 {
    grid-column: span 3;
    width: auto;
    max-width: 100%;
  }

  .grid-set .span2 {
    grid-column: span 2;
    width: auto;
    max-width: 100%;
  }

  .grid-set .span1 {
    grid-column: span 1;
    width: auto;
    max-width: 100%;
  }
}

/* Small laptop layout == 12 Columns Grid */

@media (min-width: 992px) and (max-width: 1100px) {
  .grid-set .sdsk-span12 {
    grid-column: span 12;
    width: auto;
  }

  .grid-set .sdsk-span11 {
    grid-column: span 11;
    width: auto;
  }

  .grid-set .sdsk-span10 {
    grid-column: span 10;
    width: auto;
  }

  .grid-set .sdsk-span9 {
    grid-column: span 9;
    width: auto;
  }

  .grid-set .sdsk-span8 {
    grid-column: span 8;
    width: auto;
  }

  .grid-set .sdsk-span7 {
    grid-column: span 7;
    width: auto;
  }

  .grid-set .sdsk-span6 {
    grid-column: span 6;
    width: auto;
  }

  .grid-set .sdsk-span5 {
    grid-column: span 5;
    width: auto;
  }

  .grid-set .sdsk-span4 {
    grid-column: span 4;
    width: auto;
  }

  .grid-set .sdsk-span3 {
    grid-column: span 3;
    width: auto;
  }

  .grid-set .sdsk-span2 {
    grid-column: span 2;
    width: auto;
  }

  .grid-set .sdsk-span1 {
    grid-column: span 1;
    width: auto;
  }
}

/* Tablet */

@media screen and (min-width: 810px) and (max-width: 991px) {
  .grid-set .tablet-span12 {
    grid-column: span 12;
    width: auto;
  }

  .grid-set .tablet-span11 {
    grid-column: span 11;
    width: auto;
  }

  .grid-set .tablet-span10 {
    grid-column: span 10;
    width: auto;
  }

  .grid-set .tablet-span9 {
    grid-column: span 9;
    width: auto;
  }

  .grid-set .tablet-span8 {
    grid-column: span 8;
    width: auto;
  }

  .grid-set .tablet-span7 {
    grid-column: span 7;
    width: auto;
  }

  .grid-set .tablet-span6 {
    grid-column: span 6;
    width: auto;
  }

  .grid-set .tablet-span5 {
    grid-column: span 5;
    width: auto;
  }

  .grid-set .tablet-span4 {
    grid-column: span 4;
    width: auto;
  }

  .grid-set .tablet-span3 {
    grid-column: span 3;
    width: auto;
  }

  .grid-set .tablet-span2 {
    grid-column: span 2;
    width: auto;
  }

  .grid-set .tablet-span1 {
    grid-column: span 1;
    width: auto;
  }
}

/* Small Tablet */
@media screen and (min-width: 560px) and (max-width: 810px) {
  .grid-set .small-tablet-span12 {
    grid-column: span 12;
    width: auto;
  }

  .grid-set .small-tablet-span11 {
    grid-column: span 11;
    width: auto;
  }

  .grid-set .small-tablet-span10 {
    grid-column: span 10;
    width: auto;
  }

  .grid-set .small-tablet-span9 {
    grid-column: span 9;
    width: auto;
  }

  .grid-set .small-tablet-span8 {
    grid-column: span 8;
    width: auto;
  }

  .grid-set .small-tablet-span7 {
    grid-column: span 7;
    width: auto;
  }

  .grid-set .small-tablet-span6 {
    grid-column: span 6;
    width: auto;
  }

  .grid-set .small-tablet-span5 {
    grid-column: span 5;
    width: auto;
  }

  .grid-set .small-tablet-span4 {
    grid-column: span 4;
    width: auto;
  }

  .grid-set .small-tablet-span3 {
    grid-column: span 3;
    width: auto;
  }

  .grid-set .small-tablet-span2 {
    grid-column: span 2;
    width: auto;
  }

  .grid-set .small-tablet-span1 {
    grid-column: span 1;
    width: auto;
  }
}

/* Stack under 560 */

@media screen and (max-width: 560px) {
  .grid-set [class*="span"] {
    grid-column: span 12;
    max-width: var(--section-container-width);
  }
  .grid-set .m-span2 {
    grid-column: span 2;
    width: auto;
  }

  .grid-set {
    max-width: var(--section-container-width);
  }
}

.grid-autofill {
  width: var(--section-container-width);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  grid-auto-flow: row dense;
  column-gap: var(--size-2);
  row-gap: var(--size-3);
}

.grid-centered {
  justify-content: center;
  align-content: center;
  align-items: center;
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

/* .dnd-section .dnd-column {
  padding: 0 1rem;
} */

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* Elements
Base HMTL elements are styled in this section (<body<, <h1>, <a>, <p>, <button> etc.)
*/

@font-face {
  font-family: "DM Sans";
  src: url("https://www.getaccept.com/hubfs/CMS%20Fonts/DMSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("https://www.getaccept.com/hubfs/CMS%20Fonts/DMSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("https://www.getaccept.com/hubfs/CMS%20Fonts/DMSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

h1,
h2,
h3 {
  /* font-family: var(--display-font); */
  font-family: var(--display-font);
  font-weight: var(--font-weight-3);
  color: var(--dark);
  margin: 0;
  text-wrap: pretty;
  overflow-wrap: normal;
}

h4,
h5,
h6,
p,
a,
li,
input,
div,
button,
label {
  font-family: var(--text-font);
  margin: 0;
  color: var(--dark);
  text-wrap: pretty;
}

a,
button {
  cursor: pointer;
}

/* Display */

.superheading {
  font-size: var(--font-size-9);
  line-height: 64px;
  letter-spacing: var(--font-letterspacing-8);
  font-weight: var(--font-weight-3);
  font-family: var(--display-font);
  font-feature-settings: "ss02";
}

.display-h1 {
  font-size: var(--font-size-8);
  line-height: 52px;
  letter-spacing: var(--font-letterspacing-10);
  font-weight: var(--font-weight-3);
  font-family: var(--display-font);
  font-feature-settings: "ss02";
  text-wrap: pretty;
}

.display-h2 {
  font-size: var(--font-size-6);
  line-height: 44px;
  letter-spacing: var(--font-letterspacing-8);
  font-weight: var(--font-weight-3);
  font-family: var(--display-font);
  font-feature-settings: "ss02";
  text-wrap: pretty;
}

.display-h3 {
  font-size: var(--font-size-5);
  line-height: 38px;
  letter-spacing: var(--font-letterspacing-7);
  font-weight: var(--font-weight-3);
  font-family: var(--display-font);
  font-feature-settings: "ss02";
}

.display-h4 {
  font-size: var(--font-size-4);
  line-height: 34px;
  letter-spacing: var(--font-letterspacing-5);
  font-weight: var(--font-weight-2);
  font-family: var(--display-font);
  font-feature-settings: "ss02";
}

.text-white .superheading,
.text-white .display-h1,
.text-white .display-h2,
.text-white .display-h3,
.text-white .display-h4 {
  color: var(--white);
}

/* Labels */

.featured-content {
  font-size: 20px;
  line-height: 26px;
  font-weight: var(--font-weight-3);
  font-family: var(--display-font);
  font-feature-settings: "ss02";
}

.label-big {
  font-size: var(--font-size-3);
  line-height: 28px;
  letter-spacing: var(--font-letterspacing-4);
  font-weight: var(--font-weight-3);
  font-family: var(--display-font);
  font-feature-settings: "ss02";
}

.label-medium {
  font-size: var(--font-size-1);
  line-height: 22px;
  letter-spacing: var(--font-letterspacing-2);
  font-weight: var(--font-weight-2);
  font-family: var(--text-font);
}

.label-box {
  font-size: var(--font-size-0);
  line-height: 22px;
  letter-spacing: var(--font-letterspacing-2);
  font-weight: var(--font-weight-1);
  font-family: var(--text-font);
}

.label-small {
  font-size: var(--font-size-00);
  line-height: 20px;
  letter-spacing: var(--font-letterspacing-2);
  font-weight: var(--font-weight-1);
  font-family: var(--text-font);
}

.label-tiny {
  font-size: var(--font-size-000);
  line-height: 16px;
  letter-spacing: 0;
  font-weight: var(--font-weight-1);
  font-family: var(--text-font);
}

.text-white .label-big,
.text-white .label-medium,
.text-white .label-box,
.text-white .label-small,
.text-white .label-tiny {
  color: var(--white);
}

/* Paragraphs */

.paragraph-large {
  font-size: var(--font-size-2);
  line-height: 28px;
  letter-spacing: var(--font-letterspacing-1);
  font-weight: var(--font-weight-0);
  font-family: var(--text-font);
}

.paragraph-medium {
  font-size: var(--font-size-1);
  line-height: 26px;
  letter-spacing: var(--font-letterspacing-1);
  font-weight: var(--font-weight-0);
  font-family: var(--text-font);
}

.paragraph-small {
  font-size: var(--font-size-0);
  line-height: 22px;
  letter-spacing: var(--font-letterspacing-1);
  font-weight: var(--font-weight-0);
  font-family: var(--text-font);
}

.paragraph-tiny {
  font-size: var(--font-size-00);
  line-height: 20px;
  letter-spacing: var(--font-letterspacing-1);
  font-weight: var(--font-weight-1);
  font-family: var(--text-font);
}

.text-white .paragraph-large,
.text-white .paragraph-medium,
.text-white .paragraph-small,
.text-white .paragraph-tiny {
  color: var(--white);
}

/* Links */

.link {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: var(--primary-accent);
}

.link[data-variant="footer-nav"] {
  font-size: var(--font-size-00);
  line-height: var(--font-lineheight-9);
  letter-spacing: var(--font-letterspacing-6);
  text-decoration: none;
  color: inherit;
  font-weight: var(--font-weight-1);
  display: flex;
  text-align: left;
}

.link[data-variant="header-nav"] {
  font-size: var(--font-size-0);
  line-height: var(--font-lineheight-10);
  letter-spacing: var(--font-letterspacing-6);
  text-decoration: none;
  color: inherit;
}

/* 
Buttons -- These styles are only for the typography inside buttons, 
the remaining styles for button elements can be found in /css/buttons.css
*/

.button-large {
  font-weight: var(--font-weight-2);
  font-size: var(--font-size-2);
  letter-spacing: var(--font-letterspacing-4);
  text-align: center;
}

.button-medium {
  font-weight: var(--font-weight-2);
  font-size: var(--font-size-1);
  /letter-spacing: var(--font-letterspacing-3);
  text-align: center;
}

.button-small {
  font-weight: var(--font-weight-2);
  font-size: var(--font-size-0);
  letter-spacing: var(--font-letterspacing-2);
  text-align: center;
}

/* 
The above styles were controlling the standard state of the elements.
The below will control the automatic resizing happening when the browser shrinks.
*/

@media screen and (max-width: 1024px) {
  .display-h1 {
    font-size: clamp(2.375rem, calc(2.375rem + ((1vw - 0.2rem) * 1.4205)), 3rem);
    line-height: clamp(2.625rem, calc(2.625rem + ((1vw - 0.2rem) * 1.4205)), 3.25rem);
    min-height: 0vw;
  }
  .display-h2 {
    font-size: clamp(2rem, calc(2rem + ((1vw - 0.2rem) * 0.8523)), 2.375rem);
    line-height: clamp(2.625rem, calc(2.625rem + ((1vw - 0.2rem) * 1.1364)), 3.125rem);
    min-height: 0vw;
  }
  .paragraph-large {
    font-size: clamp(1.125rem, calc(1.125rem + ((1vw - 0.225rem) * 0.3012)), 1.25rem);
    line-height: 26px;
    min-height: 0vw;
  }

  .superheading {
    font-size: clamp(3rem, calc(3rem + ((1vw - 0.225rem) * 3.6145)), 4.5rem);
    line-height: clamp(3.5rem, calc(3.5rem + ((1vw - 0.225rem) * 3.6145)), 5rem);
  }
}

@media screen and (max-width: 560px) {
  .display-h2 {
    font-size: 30px;
    line-height: 36px;
  }

  .display-h3 {
    font-size: 26px;
    line-height: 32px;
  }

  .captions {
    font-size: var(--font-size-1);
  }
}
/* From h1 to 42px */

.h2-fluid {
  font-size: var(--font-size-fluid-4);
}
/* From h2 to 38px */

.h3-fluid {
  font-size: var(--font-size-fluid-3);
}

/* from h3 to 28px? to confirm */

.paragraph-large-fluid {
  font-size: var(--font-size-fluid-2);
}

/* From large to medium */

.paragraph-medium-fluid {
  font-size: var(--font-size-fluid-1);
}

/* Stats */

.stats-number {
  font-family: var(--display-font) !important;
  font-weight: var(--font-weight-3);
  font-size: var(--font-size-7);
  line-height: 56px;
  letter-spacing: var(--font-letterspacing-6);
  color: var(--dark);
  text-align: center;
}

.testimonial-paragraph {
  font-family: var(--text-font);
  font-weight: var(--font-weight-1);
  font-size: var(--font-size-4);
  line-height: 38px;
  letter-spacing: var(--font-letterspacing-1);
}

.testimonial-paragraph-medium {
  font-family: var(--text-font);
  font-weight: var(--font-weight-0);
  font-size: 24px;
  line-height: 34px;
  letter-spacing: var(--font-letterspacing-1);
}

.text-white .stats-number,
.text-white .testimonial-paragraph,
.text-white .testimonial-paragraph-medium {
  color: var(--white);
}

/* Nav Styles */

.header-nav__link,
.mega-menu__link-list-heading {
  font-weight: var(--font-weight-2);
  font-size: var(--font-size-0);
  line-height: 24px;
  letter-spacing: var(--font-letterspacing-2);
}

.mega-menu__link {
  font-weight: var(--font-weight-1);
  font-size: var(--font-size-0);
  line-height: 24px;
  letter-spacing: var(--font-letterspacing-2);
}

.mega-menu__link-list .button-small {
  font-weight: var(--font-weight-1);
  font-size: var(--font-size-0);
  line-height: 24px;
  letter-spacing: var(--font-letterspacing-2);
}

/* Captions */

.captions {
  font-size: var(--font-size-1);
  line-height: 26px;
  letter-spacing: var(--font-letterspacing-1);
  font-weight: var(--font-weight-1);
  font-family: var(--text-font);
  text-wrap: pretty;
}

.captions-small {
  font-size: var(--font-size-0);
  line-height: 24px;
  letter-spacing: var(--font-letterspacing-1);
  font-weight: var(--font-weight-1);
  font-family: var(--text-font);
  color: var(--grey-accent);
  text-wrap: pretty;
}

@media screen and (max-width: 560px) {
  .captions {
    font-size: var(--font-size-0);
    line-height: 24px;
  }

  .captions-small {
    font-size: var(--font-size-00);
    line-height: 20px;
  }
}

.text-white .captions,
.text-white .captions-small {
  color: var(--white);
}

/* Misc */

.text-balanced {
  text-wrap: balance;
}

.text-white {
  color: var(--white);
}

.text-dark {
  color: var(--dark);
}
/* 
/*  We have 3 kinds of button:
  ➡️ Large, Medium and Small. 
    ➡️ Then we have 4 variants: Primary, Secondary, Outline, Link
      ➡️ For each variant we have 3 options: No Icon, Icon on the Right, Icon on the Left
  We will follow the logic of CUBE CSS, using attributes instead of classes to add variations. 
  Design wise, we want buttons with a fixed height and font, there shouldn't be a need for fluid font and size changes. 
  To be as DRY as possible we can make uses of CSS Variables, and the :is() function to apply styles to mulitple variants and calculate values.

*/

/* CSS Variables the buttons */
:root {
  --large-button-height: 3.75rem; /* 60px */
  --medium-button-height: 3.25rem; /* 52px */
  --small-button-height: 2.5rem; /* 40px */
  --large-button-padding-h: 1.2em;
  --medium-button-padding-h: 1em;
  --small-button-padding-h: 1em;
  --large-button-padding-v: 1.25rem;
  --medium-button-padding-v: 1rem;
  --small-button-padding-v: 0.75rem;
}

/* General Styles for all the Buttons */

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: none;
  font-family: var(--text-font);
  text-align: left;
  text-decoration: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  flex-shrink: 0;
  line-height: 1;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  height: fit-content;
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]):focus-visible {
  outline: none;
  border: none;
  transform: scale(1.05);
}

/* We have 3 different button sizes */

.button-large {
  padding: var(--large-button-padding-v) var(--large-button-padding-h);
  gap: 0.5rem;
  border-radius: var(--radius-1);
}

.button-medium {
  padding: var(--medium-button-padding-v) var(--medium-button-padding-h);
  gap: 0.375rem;
  border-radius: var(--radius-0);
}

.button-small {
  padding: var(--small-button-padding-v) var(--small-button-padding-h);
  gap: 0.25rem;
  border-radius: var(--radius-0);
}

/* 4 Button Variants - Primary, Secondary, Outline, Link */

/* Primary Variant */
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="primary"],
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]).primary-variant {
  background-color: var(--primary-accent);
  color: var(--white);
  fill: none;
  border: 1.5px solid var(--primary-accent);
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="primary"] svg path {
  stroke: var(--white) !important;
}

/* Secondary Variant */
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="secondary"],
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]).dark-variant {
  background-color: var(--dark);
  color: var(--white);
  fill: none;
  border: 1.5px solid var(--dark);
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="secondary"] svg path {
  stroke: var(--white) !important;
}

/* Outline Variant */
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="outline"],
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]).outline-variant {
  border: 1.5px solid var(--dark);
  background-color: transparent;
  color: var(--dark);
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="outline"][data-color="primary"],
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]).outline-variant.outline-primary {
  border: 1.5px solid var(--primary-accent);
  background-color: transparent;
  color: var(--primary-accent);
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="outline"][data-color="primary"] svg path {
  stroke: var(--primary-accent) !important;
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="outline"][data-color="white"],
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]).outline-variant.outline-white {
  border: 1.5px solid var(--white);
  background-color: transparent;
  color: var(--white);
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="outline"][data-color="white"] svg path {
  stroke: var(--white) !important;
}

@media screen and (max-width: 500px) {
  :is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="secondary"],
  :is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="primary"],
  :is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="outline"] {
    width: 100%;
  }
}

/* Link Variant */
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="link"] {
  height: auto;
  padding: 0 0;
  border: none;
  background-color: transparent;
  color: var(--primary-accent);
  justify-content: space-between;
  font-weight: var(--font-weight-2);
  border-radius: 0;
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="link"] svg path {
  stroke: var(--primary-accent) !important;
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="link"][data-color="white"] {
  color: var(--white);
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="link"][data-color="white"] svg path {
  stroke: var(--white) !important;
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="link"][data-color="dark"] {
  color: var(--dark);
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="link"][data-color="dark"] svg path {
  stroke: var(--dark) !important;
}

/* Can have an Icon on the -- Right or Left */

/* Right */
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-icon="right"] {
  flex-direction: row;
  justify-content: center;
}

/* Left */
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-icon="left"] {
  flex-direction: row-reverse;
  justify-content: center;
  padding-right: 1em !important;
}

/* Changing the size of the icons based on the variant */

.button-small svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  min-width: unset !important;
  min-height: unset !important;
}

.button-medium svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  min-width: unset !important;
  min-height: unset !important;
}

.button-large svg {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  min-width: unset !important;
  min-height: unset !important;
}

/* Hover effects on buttons */

/* Outline Variant */

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="outline"]::before,
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]).outline-variant::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  right: calc(50% - 10px);
  top: calc(50% - 10px);
  transform: scale(1);
  opacity: 0;
  transition: transform 0.5s ease;
}

/* Account for the different colors */

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="outline"][data-color="primary"]::before,
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]).outline-variant.outline-primary::before {
  background-color: var(--primary-opacity-005);
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="outline"][data-color="white"]::before,
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]).outline-variant.outline-white::before {
  background-color: rgba(255, 255, 255, 0.05);
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="outline"][data-color="dark"]::before,
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]).outline-variant.outline-dark::before {
  background-color: var(--dark-opacity-005);
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="outline"]:hover::before,
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]).outline-variant:hover::before {
  transform: scale(25);
  opacity: 1;
  border: 0px solid rgba(0, 0, 0, 0);
  transition: transform 0.5s ease;
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="link"]:hover svg {
  animation: arrowIconAnimation 1s infinite;
}

@keyframes arrowIconAnimation {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0px);
  }
}

@keyframe scaleAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframe rotateAnimation {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/*Secondary & Primary */

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="primary"]:hover,
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="secondary"]:hover,
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]).primary-variant:hover,
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]).dark-variant:hover {
  transform: translateY(-2px);
  /* box-shadow: var(--shadow-1); */
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="secondary"]:hover,
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]).dark-variant:hover {
  background-color: var(--bg-lilac-tint-0);
  color: var(--lilac-accent);
  outline: 1.5px solid var(--bg-lilac-tint-2);
  border: 1.5px solid transparent;
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="primary"]:hover,
:is([class*="button-medium"], [class*="button-large"], [class*="button-small"]).primary-variant:hover {
  background-color: var(--bg-primary-tint-0);
  color: var(--primary-accent);
  outline: 1.5px solid var(--bg-primary-tint-2);
  border: 1.5px solid transparent;
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="primary"]:hover svg path {
  stroke: var(--primary-accent) !important;
}

:is([class*="button-medium"], [class*="button-large"], [class*="button-small"])[data-variant="secondary"]:hover svg path {
  stroke: var(--lilac-accent) !important;
}

/* Load more effect */

.loading-effect {
  position: relative;
  width: fit-content;
  overflow: visible;
}

.loading-effect::before,
.loading-effect::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  margin: auto auto;
  z-index: 1;
  transition: all 0.3s;
  border: 1.5px solid var(--dark);
  border-radius: 4px;
}

.loading-effect:hover::after {
  animation-name: rotatecw;
  animation-duration: 3s;
}
.loading-effect:hover::before {
  animation-name: rotateccw;
  animation-duration: 4s;
}
.loading-effect:hover::after,
.loading-effect:hover::before {
  right: calc(-100% - 16px);
  border-radius: 10px;
  width: 32px;
  height: 32px;
  top: calc(50% - 22px);

  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotatecw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateccw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
:root {
  --form-input-large-height: 3.25rem;
  --form-input-medium-height: 3rem;
  --form-input-small-height: 2.5rem;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/*Making one of the many wrappers of husbpost forms 100% width*/
:is([id*="hs_form_target"]) {
  width: 100%;
}

/* Dependent field animate entrance */

@keyframes dependentFieldAppear {
  0% {
    transform: translateY(-30px);
    max-height: 0px;
    height: auto;
    opacity: 0;
  }
  50% {
    max-height: 400px;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.hs-dependent-field .hs-form-field:not(:first-child) {
  animation: dependentFieldAppear 0.5s ease-in-out;
}

/* General Label Styles */

/* Types */

.hs-input[type="email"] {
  display: flex;
  position: relative;
}

.hs-input[type="tel"] {
  display: flex;
  position: relative;
}

.hs-input[name="lastname"] {
  display: flex;
  position: relative;
}

.hs-input[name="firstname"] {
  display: flex;
  position: relative;
}

.hs-button[type="submit"] {
  height: var(--medium-button-height);
  padding-left: var(--medium-button-padding-h);
  padding-right: var(--medium-button-padding-h);
  gap: 0.375rem;
  background-color: var(--primary-accent);
  color: var(--white);
  fill: var(--white);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-0);
  font-family: var(--text-font);
  text-decoration: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  flex-shrink: 0;
  font-weight: var(--font-weight-2);
  font-size: var(--font-size-1);
  line-height: 22px;
  letter-spacing: var(--font-letterspacing-3);
  text-align: center;
  cursor: pointer;
}

/* General Input Styles */

.hs-input {
  background-color: var(--bg-grey-tint-0);
  color: var(--dark);
  border-radius: var(--radius-0);
  display: flex;
  flex-direction: row;
  padding: 0 1rem;
  align-items: center;
  justify-content: space-between;
  border: none;
  cursor: pointer;
  width: 100% !important;
  /* If we only have a unique size for forms */
  height: var(--form-input-large-height);
  font-size: var(--font-size-1);
}

.hs-input::-webkit-input-placeholder {
  font-size: var(--font-size-1);
  color: var(--dark);
  line-height: var(--line-height-9);
  letter-spacing: var(--font-letterspacing-7);
}

.hs-input::-moz-placeholder {
  font-size: var(--font-size-1);
  color: var(--dark);
  line-height: var(--line-height-9);
  letter-spacing: var(--font-letterspacing-7);
}

.hs-input:-ms-input-placeholder {
  font-size: var(--font-size-1);
  color: var(--dark);
  line-height: var(--line-height-9);
  letter-spacing: var(--font-letterspacing-7);
}

.hs-input::-ms-input-placeholder {
  font-size: var(--font-size-1);
  color: var(--dark);
  line-height: var(--line-height-9);
  letter-spacing: var(--font-letterspacing-7);
}

.hs-input::placeholder {
  font-size: var(--font-size-1);
  color: var(--dark);
  line-height: var(--line-height-9);
  letter-spacing: var(--font-letterspacing-7);
}

.form-container[data-variant="small"] .hs-input::-webkit-input-placeholder,
.form-container[data-variant="small"] .hs-input::-moz-input-placeholder,
.form-container[data-variant="small"] .hs-input::-ms-input-placeholder {
  font-size: var(--font-size-0);
}

.form-container[data-variant="small"] .hs-input::placeholder {
  font-size: var(--font-size-0);
}

.form-container[data-variant="small"] .hs-button[type="submit"] {
  height: var(--small-button-height);
  padding-left: var(--small-button-padding-h);
  padding-right: var(--small-button-padding-h);
  gap: 0.25rem;
  font-weight: var(--font-weight-2);
  font-size: var(--font-size-00);
  line-height: 20px;
  letter-spacing: var(--font-letterspacing-2);
  text-align: center;
  border-radius: var(--radius-0);
}

.form-container form fieldset {
  max-width: 100%;
}

.form-container[data-variant="small"] .hs-input {
  height: var(--form-input-small-height);
  font-size: var(--font-size-0);
  border-radius: var(--radius-0);
}

.hs-input:focus-visible {
  outline: 1px solid var(--dark);
}

textarea.hs-input {
  max-width: 100%;
  padding: 0.5rem;
  font-family: var(--text-font);
  font-size: 14px;
  color: rgba(37, 49, 65, 0.7);
  height: calc(var(--form-input-small-height) * 2);
}

/* Form Validation */

.hs-input[data-validation="error"] {
  color: var(--error);
  border: 1px solid var(--error);
}

.form-container[data-variant="small"] .hs-error-msg {
  font-size: 10px !important;
  margin-bottom: 0px !important;
}

.hs-error-msg {
  color: var(--error);
  font-size: 10px !important;
  margin-bottom: 0px !important;
}

.hs-error-msgs {
  display: flex;
  padding-left: 0px;
  list-style: none;
}

.hs-error-msgs li::marker {
  display: none;
}

.hs-input[data-validation="error"]::-webkit-input-placeholder {
  color: var(--error);
  font-size: var(--font-size-0);
}

.hs-input[data-validation="error"]::-moz-placeholder {
  color: var(--error);
  font-size: var(--font-size-0);
}

.hs-input[data-validation="error"]:-ms-input-placeholder {
  color: var(--error);
  font-size: var(--font-size-0);
}

.hs-input[data-validation="error"]::-ms-input-placeholder {
  color: var(--error);
  font-size: var(--font-size-0);
}

.hs-input[data-validation="error"]::placeholder {
  color: var(--error);
  font-size: var(--font-size-0);
}

.hs-input__icon[data-validation="error"] {
  color: var(--error) !important;
}

/* Adding icons to inputs */

.input {
  display: flex;
  position: relative;
}

:is(.input) .hs-input__icon {
  position: absolute;
  right: 1rem;
}

:is(.hs-input[disabled]) {
  cursor: auto;
  opacity: 0.5;
}

:is(.hs-input[readonly]) {
  cursor: not-allowed;
}

/* File Upload Input */

input[type="file"]::file-selector-button {
  height: 100%;
  vertical-align: middle;
  padding: 0 1em;
  margin-right: 0.5em;
  color: var(--white);
  font-weight: var(--font-weight-2);
  border: none;
  margin-left: -1.125em;
  background-color: var(--dark);
  font-family: var(--text-font);
}

/* HubSpot input list */

.inputs-list {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
}

/* Input Size Changes */

/* Uncomment if we have more than one size */

/* :is(.hs-input[data-size="large"]) {
  height: var(--form-input-large-height);
  font-size: var(--font-size-1);
}

:is(.hs-input[data-size="medium"]) {
  height: var(----form-input-medium-height);
  font-size: var(--font-size-1);
} */

/* Checkboxes, Switches & Radios */

/* Checkboxes */

.hs-input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  height: 1.5rem !important;
  width: 1.5rem !important;
  padding: 0;
  border: 1px solid var(--dark);
  border-radius: var(--radius-00);
  background-color: var(--white);
}

.hs-form-checkbox-display {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding: 0.5rem 0;
}

.hs-input[type="checkbox"]:checked {
  background-color: var(--white);
  color: var(--primary-accent);
  border: 1px solid var(--primary-accent);
  justify-content: center;
  align-items: center;
}

.hs-input[type="checkbox"]:checked:before {
  content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 43 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32.8584 10.8685C33.6209 11.4618 33.7585 12.5612 33.1656 13.3242L19.5689 30.8242C19.2661 31.2139 18.8129 31.4576 18.321 31.4951C17.8291 31.5326 17.3443 31.3603 16.986 31.0209L9.59728 24.0209C8.89591 23.3564 8.86562 22.2488 9.52963 21.547C10.1936 20.8451 11.3005 20.8148 12.0019 21.4793L17.9908 27.1531L30.4043 11.1759C30.9972 10.4129 32.0959 10.2753 32.8584 10.8685Z' fill='%23253141'/%3E%3C/svg%3E");
  display: inline;
  letter-spacing: 0;
  text-align: center;
  height: 1.5rem;
  width: 1.5rem;
}

.hs-form-booleancheckbox-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hs-form-booleancheckbox-display span {
  margin-left: 0 !important;
}

.hs-form-booleancheckbox-display span p {
  font-size: 14px;
  color: var(--dark-opacity-08);
}

/* Switches */

.form-switch[type="checkbox"] {
  min-width: 3rem;
  height: 1.5rem;
  border-radius: 1em;
  padding: 0.1em;
  position: relative;
}

.form-switch[type="checkbox"]:checked {
  border: none;
  justify-content: flex-end;
  background-color: var(--dark);
}

.form-switch[type="checkbox"]:before {
  content: "\f111";
}

.form-switch[type="checkbox"]:checked:before {
  content: "\f111";
  color: var(--white);
  font-size: 1em;
  position: unset;
}

/* Radio Input */

.hs-input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  height: 1.5rem !important;
  width: 1.5rem !important;
  padding: 0;
  border: 1px solid var(--dark);
  border-radius: 100%;
  align-items: center;
  justify-content: center;
}

.hs-input[type="radio"]:checked:before {
  content: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z' fill='%232C3B4E'/%3E%3C/svg%3E");
  height: 18px;
  width: 18px;
  margin: auto;
}

/* Color Input */

.hs-input[type="color"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0.2em;
  width: 2em;
  height: 2em;
}

/* Select */

.outer-form-select {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
}

.form-select__icon {
  position: absolute;
  font-size: var(--font-size-3);
  color: var(--dark);
  top: calc(var(--form-input-large-height) / 2 - var(--font-size-3) / 2);
  right: 1rem;
}

.form-select option {
  display: none;
}

fieldset.form-columns-1 .input {
  margin-right: 0 !important;
}

/* Hide hidden fields */

fieldset.form-columns-1:has(.hs-input:not(.hs-fieldtype-intl-phone) input[type="hidden"]) {
  display: none;
}

fieldset.form-columns-1:has([class*="utm"]) {
  display: none;
}

fieldset.form-columns-1:has([class*="hs_mql"]) {
  display: none;
}

fieldset.form-columns-1:has([class*="gclid"]) {
  display: none;
}

fieldset.form-columns-1:has([class*="client_id"]) {
  display: none;
}

fieldset.form-columns-1:has([class*="partner_registration_source"]) {
  display: none;
}

fieldset.form-columns-1:has([class*="hs_mql___referral_page"]),
fieldset.form-columns-1:has([class*="hs_mql___converting_page"]),
fieldset.form-columns-1:has([class*="hs_traffic_channel"]) {
  display: none;
}

.hs-input[type="hidden"] {
  display: none;
}

.form-container {
  /* Define your color, size, and other variables here */
  --form-gap: 12px;
  --form-gap-row: 8px;
  --form-gap-column: 12px;
  --form-shadow: 0px 1px 4px 0px rgba(44, 59, 78, 0.2);
  --error-color: var(--error);
  --button-width-small: 200px;
  --button-width-medium: 300px;
  --button-width-large: 400px;
  --phone-picker-width: 52px;
  /* Add more variables as needed */
}

/* General Form Styles */
.form-container form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--form-gap);
  width: 100%;
}

.form-container.single.inline form {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--form-gap-row);
}

.form-container[data-type="single-field"][data-format="inline"] form {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--form-gap-row);
}

.form-container[data-type="multi-field"][data-format="stacked"] form {
  flex-direction: column;
  gap: var(--form-gap);
}

.form-container[data-type="single-field"][data-format="inline"] form .hs-form-field {
  order: 1;
  flex: 3;
  min-width: 300px;
}

.form-container[data-type="single-field"][data-format="inline"] form .hs-submit {
  order: 2;
  flex: 1;
  min-width: max-content;
}

.form-container[data-type="single-field"][data-format="inline"] form .legal-consent-container {
  order: 3;
  width: 100%;
}

.form-container[data-type="single-field"][data-format="stacked"] form {
  flex-direction: column;
  gap: var(--form-gap-row);
}

.form-container[data-type="single-field"][data-format="stacked"] form .hs-form-field {
  order: 1;
  width: 100%;
}

.form-container[data-type="single-field"][data-format="stacked"] form .hs-submit {
  order: 2;
  width: 100%;
}

.form-container[data-type="single-field"][data-format="stacked"] form .legal-consent-container {
  order: 3;
  width: 100%;
}

.form-container form fieldset {
  max-width: 100%;
  border: none;
  padding: 0;
}

.form-container.single.inline form .hs-form-field {
  flex: 2;
}
.form-container.single.inline form .hs-submit {
  flex: 1;
}

.form-container.single.inline form .legal-consent-container {
  order: 3;
  width: 100%;
}

@container (max-width: 500px) {
  .form-container.single.inline form {
    flex-direction: column;
    gap: var(--form-gap-row);
  }

  .form-container fieldset.form-columns-2 .hs-form-field {
    width: 100% !important;
  }
  .form-container fieldset.form-columns-3 .hs-form-field {
    width: 100% !important;
  }
}

.form-container.single.inline form .hs-submit {
  min-width: fit-content;
}

/* Two Column Layout */
.form-container fieldset.form-columns-2 {
  display: flex;
  gap: var(--form-gap-column);
}

@container (max-width: 450px ) {
  .form-container fieldset.form-columns-2 {
    flex-direction: column;
  }

  .form-container fieldset.form-columns-2 .hs-form-field {
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  .form-container fieldset.form-columns-2 {
    flex-direction: column;
  }

  .form-container fieldset.form-columns-2 .hs-form-field {
    width: 100% !important;
  }
}

.form-container fieldset.form-columns-2 .hs-form-field,
.form-container fieldset.form-columns-2 .input {
  width: 100% !important;
  margin: 0;
}

/* Three Column Layout */

.form-container fieldset.form-columns-3 {
  display: flex;
  gap: var(--form-gap-column);
}

@container (max-width: 450px ) {
  .form-container fieldset.form-columns-3 {
    flex-direction: column;
  }

  .form-container fieldset.form-columns-3 .hs-form-field {
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  .form-container fieldset.form-columns-3 {
    flex-direction: column;
  }

  .form-container fieldset.form-columns-3 .hs-form-field {
    width: 100% !important;
  }
}

.form-container fieldset.form-columns-3 .hs-form-field,
.form-container fieldset.form-columns-3 .input {
  width: 100% !important;
  margin: 0;
}

/* Form Input Styles */
.form-container.white form input,
.form-container.white form select,
.form-container.white form textarea {
  background: var(--form-bg-color);
}

.form-container.shadow form input,
.form-container.shadow form select,
.form-container.shadow form textarea {
  box-shadow: var(--form-shadow);
}

.form-container.border form input:not([type="submit"]),
.form-container.border form select,
.form-container.border form textarea {
  border: 1.5px solid var(--bg-grey-tint-1);
}

/* Error Styles */
.form-container form input.error,
.form-container form select.error {
  border: 1px solid var(--error-color);
}

/* Button Styles */
.form-container form .hs-submit .hs-button {
  margin: 0 auto;
  width: 100%;
  transition: all 0.2s ease;
}

.form-container.input-small form input:not([type="submit"]),
.form-container.input-small form select,
.form-container.inline.input-small .hs-submit .hs-button {
  height: var(--form-input-small-height);
}

.form-container.input-small[data-type="single-field"][data-format="inline"] form .hs-button {
  height: var(--form-input-small-height);
  font-size: var(--font-size-00);
}

.form-container.input-small form .hs-input.hs-submit {
  font-size: var(--font-size-1);
}

.form-container.input-small form input::placeholder,
.form-container.input-small form textarea::placeholder,
.form-container.input-small fieldset label,
.form-container.input-small form input:not([type="submit"]),
.form-container.input-small form select,
.form-container.input-small .legal-consent-container p {
  font-size: var(--font-size-00);
}

.form-container.input-medium form input,
.form-container.input-medium form select,
.form-container.input-small form .hs-input.hs-submit {
  height: var(--form-input-medium-height);
}

.form-container.input-medium form .hs-input:not(.hs-submit) {
  padding-right: var(--form-input-medium-height);
}

.form-container.input-large form input,
.form-container.input-large form select,
.form-container.input-large form .hs-input.hs-submit {
  height: var(--form-input-large-height);
}

/* Form button */

.form-container form .hs-submit .hs-button {
  margin: 0 auto;
  width: 100%;
}

.form-container.submit-primary form .hs-submit .hs-button {
  background: var(--primary-accent);
  color: var(--white);
}

.form-container.submit-dark form .hs-submit .hs-button {
  color: var(--white);
  background: var(--dark);
}

.form-container.submit-outline form .hs-submit .hs-button {
  background: transparent;
  border: 1.5px solid var(--dark);
  color: var(--dark);
  border-radius: 4px;
}

.form-container.submit-dark form .hs-submit .hs-button:hover {
  background-color: var(--bg-lilac-tint-0);
  color: var(--lilac-accent);
  outline: 1.5px solid var(--bg-lilac-tint-2);
  transform: translateY(-2px);
}

.form-container.submit-primary form .hs-submit .hs-button:hover {
  background-color: var(--bg-primary-tint-0);
  color: var(--primary-accent);
  outline: 1.5px solid var(--bg-primary-tint-2);
  transform: translateY(-2px);
}

.form-container.submit-small form .hs-submit .hs-button {
  max-width: var(--button-width-small);
  width: 100%;
}

.form-container.submit-medium form .hs-submit .hs-button {
  max-width: var(--button-width-medium);
  width: 100%;
}

.form-container.submit-large form .hs-submit .hs-button {
  max-width: var(--button-width-large);
  width: 100%;
}

.form-container.submit-full form .hs-submit .hs-button {
  max-width: 100%;
  width: 100%;
}

/* International Phone Picker */
.form-container .hs-fieldtype-intl-phone select {
  max-width: var(--phone-picker-width);
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.form-container .hs-fieldtype-intl-phone {
  display: flex;
  gap: var(--form-gap-row) !important;
  padding-right: 0px !important;
}

.form-container .hs-fieldtype-intl-phone input.hs-input {
  width: 100% !important;
}

.form-container .hs-fieldtype-intl-phone.hs-input::after {
  display: none !important;
}

/* Form Pop Up v3 */

.form-pop-up_v3 {
  height: fit-content;
  box-shadow: 0px 0px 10px 0px var(--dark-opacity-02);
  border: none;
  border-radius: 8px;
  /*overflow: scroll;*/
  opacity: 0;
  scale: 0.8;
  transition:
    opacity 0.3s ease-in-out,
    scale 0.3s ease-in-out;
}

.form-pop-up_v3[open] {
  display: flex;
  flex-direction: row;
  justify-content: center;
  opacity: 1;
  scale: 1;
  transition:
    opacity 0.5s ease-in-out,
    scale 0.3s ease-in-out;
}

.form-pop-up_v3::backdrop {
  background-color: rgba(44, 59, 78, 0.9);
  backdrop-filter: blur(10px);
}

.form-pop-up_v3 .form-container form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 20px;
}

.form-pop-up_v3 .form-heading {
  width: 100%;
}

.form-pop-up_v3 .form-container fieldset.form-columns-2 {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

@media (max-width: 768px) {
  .form-pop-up_v3 .form-container fieldset.form-columns-2 {
    flex-direction: column;
  }
}

.form-pop-up_v3 .form-container fieldset.form-columns-2 .hs-form-field {
  width: 100%;
}

.form-pop-up_v3 .form-container fieldset.form-columns-2 .input {
  margin: 0;
}

.form-pop-up_v3 .form-container fieldset.form-columns-3 {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

@media (max-width: 768px) {
  .form-pop-up_v3 .form-container fieldset.form-columns-3 {
    flex-direction: column;
  }
}

.form-pop-up_v3 .form-container fieldset.form-columns-3 .hs-form-field {
  width: 100%;
}

.form-pop-up_v3 .form-container fieldset.form-columns-3 .input {
  margin: 0;
}

.modal-close {
  margin-bottom: 1rem;
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
}

/* Form input */

/* Small input */

.form-pop-up_v3 form input,
.form-pop-up_v3 form select,
.form-pop-up_v3 form textarea,
.form-pop-up_v3 form input::placeholder,
.form-pop-up_v3 form select::placeholder,
.form-pop-up_v3 form textarea::placeholder {
  color: var(--dark);
  background: var(--white);
}

.form-pop-up_v3 form input.error,
.form-pop-up_v3 form select.error {
  border: 1px solid var(--error);
}

.hs-error-msgs li {
  display: flex;
}

.form-pop-up_v3.input-small form input:not([type="submit"]),
.form-pop-up_v3.input-small form select {
  height: var(--form-input-small-height);
}

.form-pop-up_v3.input-small form .hs-input.hs-submit {
  font-size: var(--font-size-1);
}

.form-pop-up_v3.input-small form input::placeholder,
.form-pop-up_v3.input-small form textarea::placeholder,
.form-pop-up_v3.input-small fieldset label,
.form-pop-up_v3.input-small form input:not([type="submit"]),
.form-pop-up_v3.input-small form select,
.form-pop-up_v3.input-small .legal-consent-container p {
  font-size: var(--font-size-00);
}

.form-pop-up_v3.input-medium form input,
.form-pop-up_v3.input-medium form select,
.form-pop-up_v3.input-small form .hs-input.hs-submit {
  height: var(--form-input-medium-height);
}

.form-pop-up_v3.input-large form input,
.form-pop-up_v3.input-large form select,
.form-pop-up_v3.input-large form .hs-input.hs-submit {
  height: var(--form-input-large-height);
}

/* Form width */

.form-pop-up_v3.width-small {
  width: min(90vw, 400px);
}

.form-pop-up_v3.width-medium {
  width: min(90vw, 600px);
}

.form-pop-up_v3.width-large {
  width: min(90vw, 800px);
}

.form-pop-up_v3.width-full {
  width: min(90vw, 1110px);
}

/* Form button */

.form-pop-up_v3 form .hs-submit .hs-button {
  margin: 0 auto;
  width: 100%;
  transition: all 0.2s ease;
}

.form-pop-up_v3.submit-primary form .hs-submit .hs-button {
  background: var(--primary-accent);
}

.form-pop-up_v3.submit-dark form .hs-submit .hs-button {
  background: var(--dark);
}

.form-pop-up_v3.submit-dark form .hs-submit .hs-button:hover {
  background-color: var(--bg-lilac-tint-0);
  color: var(--lilac-accent);
  outline: 1.5px solid var(--bg-lilac-tint-2);
  transform: translateY(-2px);
}

.form-pop-up_v3.submit-primary form .hs-submit .hs-button:hover {
  background-color: var(--bg-primary-tint-0);
  color: var(--primary-accent);
  outline: 1.5px solid var(--bg-primary-tint-2);
  transform: translateY(-2px);
}

.form-pop-up_v3.submit-outline form .hs-submit .hs-button {
  background: transparent;
  border: 1.5px solid var(--dark);
  color: var(--dark);
  border-radius: 4px;
}

.form-pop-up_v3.submit-small form .hs-submit .hs-button {
  max-width: 200px;
  width: 100%;
}

.form-pop-up_v3.submit-medium form .hs-submit .hs-button {
  max-width: 300px;
  width: 100%;
}

.form-pop-up_v3.submit-large form .hs-submit .hs-button {
  max-width: 400px;
  width: 100%;
}

.form-pop-up_v3.submit-full form .hs-submit .hs-button {
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 768px) {
  .form-pop-up_v3 .dialog-inner {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    padding: 0;
  }
  .form-pop-up_v3 .modal-close {
    min-height: 32px;
    min-width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .form-pop-up_v3 .modal-close svg {
    min-height: 16px;
    min-width: 16px;
  }
  .form-pop-up_v3 .dialog-text {
    display: none;
  }
}

/* Phone Intl Picker */

.hs-fieldtype-intl-phone select {
  max-width: 52px !important;
  width: 52px;
  padding: 0;
  padding-left: 12px;
}

/* Form appear */

.form--appear {
  animation: form-appear 0.3s ease;
}

@keyframes form-appear {
  from {
    opacity: 0;
    max-height: 1px;
  }
  to {
    opacity: 1;
    max-height: 1000px;
  }
}



/* Skeleton UI */

@keyframes skeleton-ui {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.skeleton-ui-container {
  width: 100%;
  max-height: 1000px;
  opacity: 1;
  transition:
    opacity 0.3s ease,
    max-height 0.3s ease;
}

.form-skeleton {
  display: grid;
  gap: 12px;
}

.skeleton-field-group-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.skeleton-field-group-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.skeleton-field {
  height: var(--form-input-medium-height);
  border-radius: 4px;
  background: linear-gradient(90deg, var(--dark-opacity-01) 0%, var(--dark-opacity-02) 50%, var(--dark-opacity-01) 100%);
  background-size: 200% 100%;
  animation: skeleton-ui 1.5s alternate infinite ease-in-out;
}

.skeleton-label {
  height: 1rem;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--dark-opacity-01) 0%, var(--dark-opacity-02) 50%, var(--dark-opacity-01) 100%);
  background-size: 200% 100%;
  animation: skeleton-ui 1.5s alternate infinite ease-in-out;
}

.skeleton-field.light {
  height: var(--form-input-medium-height);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%);
  background-size: 200% 100%;
  animation: skeleton-ui 1.5s alternate infinite ease-in-out;
}

.skeleton-label.light {
  height: 1rem;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%);
  background-size: 200% 100%;
  animation: skeleton-ui 1.5s alternate infinite ease-in-out;
}

.skeleton-ui--animate-out {
  max-height: 1px;
  opacity: 0;
}

.skeleton-ui--hidden {
  display: none;
}

@media (max-width: 560px) {
  .skeleton-field-group-2 {
    grid-template-columns: 1fr;
  }
  .skeleton-field-group-3 {
    grid-template-columns: 1fr;
  }
}
/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}
.chips {
  font-size: var(--font-size-00);
  /* border-radius: var(--radius-pill); */
  border-radius: 20px;
  /* Make a pill shape border radius */
  width: fit-content;
  padding: 4px 12px;
  font-family: var(--text-font);
  font-weight: var(--font-weight-2);
  max-height: fit-content;
}

.tag-cloud {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chips[data-size="mini"] {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
}

.chips[data-color="white"] {
  background: var(--white);
}

.chips[data-color="pink"] {
  background: var(--chip-pink-93);
}

.chips[data-color="olive"] {
  background: var(--chip-olive-93);
}

.chips[data-color="gray"] {
  background: var(--chip-gray-93);
}

.chips[data-color="ocean"] {
  background: var(--chip-ocean-93);
}

.chips[data-color="lilac"] {
  background: var(--chip-lilac-93);
}

.chips[data-color="forest"] {
  background: var(--chip-forest-93);
}

.chips[data-color="rose"] {
  background: var(--chip-rose-93);
}

.chips[data-color="emerald"] {
  background: var(--chip-emerald-93);
}

.chips[data-color="wood"] {
  background: var(--chip-wood-93);
}

.chips[data-color="purple"] {
  background: var(--chip-purple-93);
}

.chips[data-color="leather"] {
  background: var(--chip-leather-93);
}

/* Avatars */

.author-avatar {
  clip-path: circle(50% at 50% 50%);
  width: 60px;
  height: 60px;
}

.author-picture {
  max-width: 160px;
  max-height: 160px;
}

@media screen and (max-width: 768px) {
  .author-picture {
    max-width: 140px;
    max-height: 140px;
  }
}

/* Review stars */

.review__star {
  color: #ff492c;
}

.review__star.empty {
  color: var(--bg-grey-tint-1);
}

/* Customer logos */

.customer-logos {
  flex-wrap: wrap;
}

/* Play buttons */

.icon-button {
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.icon-button[data-color="primary"] {
  color: var(--white);
  background: var(--primary-accent);
}

.icon-button[data-color="primary"] svg path {
  stroke: var(--white);
}

.icon-button[data-color="primary-soft"] {
  color: var(--dark);
  background: var(--bg-primary-tint-1);
}

.icon-button[data-color="primary-soft"] svg path {
  stroke: var(--dark);
}

.icon-button[data-color="grey"] {
  color: var(--dark);
  background: var(--bg-grey-tint-1);
}

.icon-button[data-color="grey"] svg path {
  stroke: var(--dark);
}

.icon-button[data-color="dark-inactive"] {
  background: var(--dark-inactive);
}

.icon-button[data-color="dark-inactive"] svg path {
  stroke: var(--dark);
}

.icon-button[data-color="lilac"] {
  color: var(--white);
  background: var(--lilac-accent);
}

.icon-button[data-color="lilac"] svg path {
  stroke: var(--white);
}

.icon-button[data-shape="pill"] {
  width: auto;
  aspect-ratio: 16/9;
  border-radius: var(--radius-capsule);
}

.icon-button[data-shape="circle"] {
  aspect-ratio: 1/1;
  border-radius: var(--radius-circle);
}

.icon-button[data-size="small"] {
  height: 2rem;
  width: 2rem;
}

.icon-button[data-size="small"] svg {
  height: 1rem;
  width: 1rem;
}

.icon-button[data-size="medium"] {
  font-size: 1.25rem;
  height: 40px;
  width: 40px;
}

.icon-button[data-size="medium"] svg {
  height: 1rem !important;
  width: 1rem !important;
}

.icon-button[data-size="large"] {
  font-size: 1.5rem;
  height: 4rem;
  width: 4rem;
}

.icon-button[data-size="large"] svg {
  height: 24px;
  width: 24px;
}

/* G2 Reviews */

#g2-star-rating {
  display: none;
  position: relative;
  background-size: 26px;
  background-position: 0px 0px;
  background-repeat: repeat-x;
  aspect-ratio: 5/1;
  height: 26px;
}

.g2-star-rating-value {
  display: inline-block;
  height: 101%;
  position: absolute;
  background-position: 0px 0px;
  background-size: 26px;
  background-repeat: repeat-x;
  left: 0;
}

.g2-logo {
  max-width: 38px;
  max-height: 38px;
}

.g2-star-rating-container a {
  gap: 6px !important;
  align-items: center !important;
  text-decoration: none !important;
}

.g2-review-count {
  color: #617989;
}

.g2-review-fallback {
  max-width: 182px;
}

.g2-review-fallback-inline {
  max-width: 279px;
  width: 279px;
}
.content__container {
  display: none;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
}

.js-content__container-active {
  display: flex;
  opacity: 1;
  z-index: 0;
  transition: opacity 0.4s ease;
}

.slider__vertical .slider__arrows {
  height: 130%;
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  top: -5rem;
  max-width: fit-content;
  left: calc(50% - (var(--slider-arrow-size) / 2));
}

/* Sliders Dots */

.slider-dots {
  display: flex;
  gap: 10px;
  padding: 40px 0;
}

.slider-dots[data-direction="horizontal"] {
  flex-direction: row;
}

.slider-dots[data-direction="vertical"] {
  flex-direction: column;
}

.slider-dots--vertical {
  display: flex;
  gap: 10px;
  font-size: 10px;
  padding: 15px 0;
}

.slider-dot {
  border-radius: var(--radius-circle);
  height: 10px;
  width: 10px;
  background-color: var(--bg-grey-tint-1);
  padding: 0px;
}

.slider-dot.is-active {
  border-radius: var(--radius-circle);
  height: 10px;
  width: 10px;
  background-color: var(--dark);
}

.splide__pagination--ttb {
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: auto;
  padding: 0;
  left: -1.5rem;
  top: 0;
  transform: none;
  width: auto;
  position: absolute;
  width: fit-content;
}

/* Splide arrows */

.slider__arrows {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  top: 50%;
  margin-top: 0px;
}

.slider__arrow {
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  aspect-ratio: 1/1;
  border-radius: var(--radius-circle);
  background: var(--white);
  height: 40px;
  width: 40px;
  z-index: 100;
}

.slider__arrow svg {
  width: 12px;
  height: 12px;
}

.slider__arrow svg path {
  stroke: var(--dark);
  stroke-width: 3;
}

.slider__arrow--next.outside {
  margin-right: -3rem;
}

.slider__arrow--prev.outside {
  margin-left: -3rem;
}

@media screen and (max-width: 1200px) {
  .slider__arrows {
    justify-content: flex-start;
    gap: 12px;
    top: 102%;
  }

  .slider__arrow--prev.outside,
  .slider__arrow--next.outside {
    margin-right: 0px;
    margin-left: 0px;
  }
}

/* Custom slider classes to move somewhere else after */

.custom-slider__overflow-and-clipped {
  clip-path: inset(-100vw -100vw -100vw 0);
}

/* .custom-slider__overflow-and-clipped .splide__track {
	overflow: visible !important;
} */

.custom-slider[data-overflow="visible"] .splide__track {
  overflow: visible !important;
}

.custom-slider[data-clip="left"] .splide__track {
  clip-path: inset(-100vw -100vw -100vw 0);
}

.custom-slider[data-clip="right"] .splide__track {
  clip-path: inset(0 0 -100vw -100vw);
}

.custom-slider[data-clip="both"] .splide__track {
  clip-path: inset(0 0 0 0);
}

.custom-slider[data-clip="none"] .splide__track {
  clip-path: inset(-380px -380px -380px -380px);
}

.custom-slider[data-clip="none"][data-direction="horizontal"] .splide__track {
  clip-path: inset(-350px -0px -350px -0px);
}

.custom-slider[data-clip="none"][data-direction="vertical"] .splide__track {
  clip-path: inset(-25% -33% -25% -33%);
}

@media screen and (max-width: 992px) {
  .custom-slider[data-clip="none"][data-direction="vertical"] .splide__track {
    clip-path: inset(0 0 0 -33%);
  }
}

/* Custom classes for splide sliders */

.custom__slide > div {
  transition: 0.4s ease;
  border-radius: 8px;
}

.custom__slide[data-inactive="opacity"] {
  opacity: 0.5;
  transition: 0.4s ease;
}

.custom__slide[data-scale="scaleDown"] > div {
  transform: scale(0.9);
  transition: 0.4s ease;
}

.custom__slide[data-scale="initial"] > div {
  transform: scale(1);
  transition: 0.4s ease;
}

.custom__slide[data-inactive="opacity"].is-visible,
.custom__slide[data-inactive="opacity"].is-active {
  opacity: 1;
  transition: 0.4s ease;
}

.custom__slide[data-scale="scaleUp"] > div {
  transform: scale(1.05);
  opacity: 1;
  transition: 0.4s ease;
}

/*
  Make sure the splide track is over the slider arrows
*/

.splide__track {
  z-index: 2 !important;
}

/* Slider Skeleton */

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.skeleton__slide {
  background: linear-gradient(
    -45deg,
    var(--dark-opacity-02),
    var(--dark-opacity-04),
    var(--dark-opacity-06),
    var(--dark-opacity-08)
  );
  background-size: 200% 200%;
  /* Linking the animation to the element */
  animation: gradientAnimation 1s ease infinite;
}

/** Splide appear */

@keyframes appear {
  from {
    opacity: 0;
    /* transform: translateY(20px); */
  }
  to {
    opacity: 1;
    /* transform: translateY(0); */
  }
}

.splide--appear {
  animation: appear 0.4s ease;
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}

/* Utilities
Helper classes with ability to override anything that comes before it
*/

/* Here will be all the utility classes to avoid repeating css properties */

/* Max Widths */

.max-width-fullGrid {
  max-width: 1110px;
}

.ch60 {
  max-width: 60ch;
}

.ch50 {
  max-width: 50ch;
}

.ch40 {
  max-width: 40ch;
}

.ch30 {
  max-width: 30ch;
}

/* Positioning */

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.top {
  top: 0;
}
.top-s {
  top: var(--size-0);
}
.top-sm {
  top: var(--size-1);
}

.top-m {
  top: var(--size-2);
}

.top-l {
  top: var(--size-3);
}

.top-xl {
  top: var(--size-4);
}

.top-xxl {
  top: var(--size-5);
}

.right {
  right: 0;
}

.right-s {
  right: var(--size-0);
}

.right-sm {
  right: var(--size-1);
}

.right-m {
  right: var(--size-2);
}

.right-l {
  right: var(--size-3);
}

.right-xl {
  right: var(--size-4);
}

.right-xxl {
  right: var(--size-5);
}

.bottom {
  bottom: 0;
}

.bottom-s {
  bottom: var(--size-0);
}

.bottom-sm {
  bottom: var(--size-1);
}

.bottom-m {
  bottom: var(--size-2);
}

.bottom-l {
  bottom: var(--size-3);
}

.bottom-xl {
  bottom: var(--size-4);
}

.bottom-xxl {
  bottom: var(--size-5);
}

.left {
  left: 0;
}

.left-s {
  left: var(--size-0);
}

.left-sm {
  left: var(--size-1);
}

.left-m {
  left: var(--size-2);
}

.left-l {
  left: var(--size-3);
}

.left-xl {
  left: var(--size-4);
}

.left-xxl {
  left: var(--size-5);
}

/* Dimensions */

.full-width {
  width: 100%;
}
.full-height {
  height: 100%;
}

.width-s {
  width: var(--size-0);
}

.width-sm {
  width: var(--size-1);
}

.width-m {
  width: var(--size-2);
}

.width-l {
  width: var(--size-3);
}

.width-xl {
  width: var(--size-4);
}

.width-xxl {
  width: var(--size-5);
}

.width-xxxl {
  width: var(--size-6);
}

.height-s {
  height: var(--size-0);
}

.height-sm {
  height: var(--size-1);
}

.height-m {
  height: var(--size-2);
}

.height-l {
  height: var(--size-3);
}

.height-xl {
  height: var(--size-4);
}

.height-xxl {
  height: var(--size-5);
}

.height-xxxl {
  height: var(--size-6);
}

/* Flex */

/* Row reverse */
.row-reverse {
  flex-direction: row-reverse !important;
}

/* Column reverse */
.col-reverse {
  flex-direction: column-reverse !important;
}

/* Flex Shortcuts */

.flex-col-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.flex-col-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-col-sb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flex-col-sa {
  display: flex;
  flex-direction: column;
  align-items: space-around;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

.align-start {
  align-items: flex-start;
}

.align-sb {
  align-items: space-between;
}

.align-sa {
  align-items: space-around;
}

.align-stretch {
  align-items: stretch;
}

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

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

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

.justify-sb {
  justify-content: space-between;
}

.justify-sa {
  justify-content: space-around;
}

.justify-stretch {
  justify-content: stretch;
}

.flex-row-start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.flex-row-end {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

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

.flex-row-sb {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex-row-sa {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.no-wrap {
  flex-wrap: nowrap;
}

.wrap {
  flex-wrap: wrap;
}

.shrink-0 {
  flex-shrink: 0;
}

.shrink-1 {
  flex-shrink: 1;
}

.shrink-2 {
  flex-shrink: 2;
}

.shrink-3 {
  flex-shrink: 3;
}

.shrink-4 {
  flex-shrink: 4;
}

/* 
* Margins
*/

.margin-centered-h {
  margin: 0 auto;
}

.margin-centered-v {
  margin: auto 0;
}

/* Margin top */
.m-top-none {
  margin-top: 0 !important;
}

.m-top-xxs {
  margin-top: var(--size-00);
}

.m-top-xs {
  margin-top: var(--size-0);
}
.m-top-s {
  margin-top: var(--size-1);
}

.m-top-sm {
  margin-top: var(--size-2);
}
.m-top-m {
  margin-top: var(--size-3);
}
.m-top-l {
  margin-top: var(--size-4);
}

.m-top-xl {
  margin-top: var(--size-5);
}

.m-top-xxl {
  margin-top: var(--size-6);
}

/* Margin bottom */
.m-bottom-none {
  margin-bottom: 0 !important;
}
.m-bottom-xxs {
  margin-bottom: var(--size-00);
}

.m-bottom-xs {
  margin-bottom: var(--size-0);
}
.m-bottom-s {
  margin-bottom: var(--size-1);
}

.m-bottom-sm {
  margin-bottom: var(--size-2);
}
.m-bottom-m {
  margin-bottom: var(--size-3);
}
.m-bottom-l {
  margin-bottom: var(--size-4);
}

.m-bottom-xl {
  margin-bottom: var(--size-5);
}

.m-bottom-xxl {
  margin-bottom: var(--size-6);
}

/* Margin right */

.m-right-xxs {
  margin-right: var(--size-00);
}

.m-right-xs {
  margin-right: var(--size-0);
}
.m-right-s {
  margin-right: var(--size-1);
}

.m-right-sm {
  margin-right: var(--size-2);
}
.m-right-m {
  margin-right: var(--size-3);
}
.m-right-l {
  margin-right: var(--size-4);
}

.m-right-xl {
  margin-right: var(--size-5);
}

.m-right-xxl {
  margin-right: var(--size-6);
}

/* Margin lefts */

.m-left-xxs {
  margin-left: var(--size-00);
}

.m-left-xs {
  margin-left: var(--size-0);
}
.m-left-s {
  margin-left: var(--size-1);
}

.m-left-sm {
  margin-left: var(--size-2);
}
.m-left-m {
  margin-left: var(--size-3);
}
.m-left-l {
  margin-left: var(--size-4);
}

.m-left-xl {
  margin-left: var(--size-5);
}

.m-left-xxl {
  margin-left: var(--size-6);
}

.m-left-g {
  margin-left: var(--default-drag-n-drop-gutter);
}
.m-right-g {
  margin-right: var(--default-drag-n-drop-gutter);
}
.m-top-g {
  margin-top: var(--default-drag-n-drop-gutter);
}
.m-bottom-g {
  margin-bottom: var(--default-drag-n-drop-gutter);
}

.m-left-span1 {
  margin-left: 5.856%;
}

.m-right-span1 {
  margin-right: 5.856%;
}

.m-top-span1 {
  margin-top: 5.856%;
}

.m-bottom-span1 {
  margin-bottom: 5.856%;
}

.m-left-span1-g {
  margin-left: calc((5.856% * 1) + (1 * var(--default-drag-n-drop-gutter)));
}

.m-right-span1-g {
  margin-right: calc((5.856% * 1) + (1 * var(--default-drag-n-drop-gutter)));
}

.m-top-span1-g {
  margin-top: calc((5.856% * 1) + (1 * var(--default-drag-n-drop-gutter)));
}

.m-bottom-span1-g {
  margin-bottom: calc((5.856% * 1) + (1 * var(--default-drag-n-drop-gutter)));
}

/* Paddings */

.p-none {
  padding: 0px;
}

.p-xxxs {
  padding: 2px;
}
.p-xxs {
  padding: var(--size-00);
}
.p-xs {
  padding: var(--size-0);
}
.p-s {
  padding: var(--size-1);
}
.p-sm {
  padding: var(--size-2);
}
.p-m {
  padding: var(--size-3);
}
.p-l {
  padding: var(--size-4);
}
.p-xl {
  padding: var(--size-5);
}
.p-xxl {
  padding: var(--size-6);
}

.p-90 {
  padding: var(--size-90);
}

.p-span1-g {
  padding: calc((5.856% * 1) + (1 * var(--default-drag-n-drop-gutter)));
}

.p-span1 {
  padding: 5.856%;
}

.p-span-g {
  padding: var(--default-drag-n-drop-gutter);
}

.p-span2 {
  padding: calc((5.856% * 2) + (1 * var(--default-drag-n-drop-gutter)));
}

.p-left-g {
  padding-left: var(--default-drag-n-drop-gutter);
}
.p-right-g {
  padding-right: var(--default-drag-n-drop-gutter);
}
.p-top-g {
  padding-top: var(--default-drag-n-drop-gutter);
}
.p-bottom-g {
  padding-bottom: var(--default-drag-n-drop-gutter);
}

.p-left-span1 {
  padding-left: 5.856%;
}

.p-right-span1 {
  padding-right: 5.856%;
}

.p-top-span1 {
  padding-top: 5.856%;
}

.p-bottom-span1 {
  padding-bottom: 5.856%;
}

.p-left-span1-g {
  padding-left: calc((5.856% * 1) + (1 * var(--default-drag-n-drop-gutter)));
}

.p-right-span1-g {
  padding-right: calc((5.856% * 1) + (1 * var(--default-drag-n-drop-gutter)));
}

.p-top-span1-g {
  padding-top: calc((5.856% * 1) + (1 * var(--default-drag-n-drop-gutter)));
}

.p-bottom-span1-g {
  padding-bottom: calc((5.856% * 1) + (1 * var(--default-drag-n-drop-gutter)));
}

.p-top-none {
  padding-top: 0 !important;
}
.p-top-xxs {
  padding-top: var(--size-00);
}
.p-top-xs {
  padding-top: var(--size-0);
}
.p-top-s {
  padding-top: var(--size-1);
}
.p-top-sm {
  padding-top: var(--size-2);
}
.p-top-m {
  padding-top: var(--size-3);
}
.p-top-l {
  padding-top: var(--size-4);
}
.p-top-xl {
  padding-top: var(--size-5);
}
.p-top-xl {
  padding-top: var(--size-6);
}

.p-top-90 {
  padding-top: var(--size-90);
}

.p-bottom-none {
  padding-bottom: 0 !important;
}
.p-bottom-xxs {
  padding-bottom: var(--size-00);
}
.p-bottom-xs {
  padding-bottom: var(--size-0);
}
.p-bottom-s {
  padding-bottom: var(--size-1);
}
.p-bottom-sm {
  padding-bottom: var(--size-2);
}
.p-bottom-m {
  padding-bottom: var(--size-3);
}
.p-bottom-l {
  padding-bottom: var(--size-4);
}
.p-bottom-xl {
  padding-bottom: var(--size-5);
}
.p-bottom-xxl {
  padding-bottom: var(--size-6);
}

.p-bottom-90 {
  padding-bottom: var(--size-90);
}

.p-right-none {
  padding-right: 0 !important;
}
.p-right-xxs {
  padding-right: var(--size-00);
}
.p-right-xs {
  padding-right: var(--size-0);
}
.p-right-s {
  padding-right: var(--size-1);
}
.p-right-sm {
  padding-right: var(--size-2);
}
.p-right-m {
  padding-right: var(--size-3);
}
.p-right-l {
  padding-right: var(--size-4);
}
.p-right-xl {
  padding-right: var(--size-5);
}
.p-right-xxl {
  padding-right: var(--size-6);
}

.p-right-90 {
  padding-right: var(--size-90);
}

.p-left-none {
  padding-left: 0 !important;
}
.p-left-xxs {
  padding-left: var(--size-00);
}
.p-left-xs {
  padding-left: var(--size-0);
}
.p-left-s {
  padding-left: var(--size-1);
}
.p-left-sm {
  padding-left: var(--size-2);
}
.p-left-m {
  padding-left: var(--size-3);
}
.p-left-l {
  padding-left: var(--size-4);
}
.p-left-xl {
  padding-left: var(--size-5);
}
.p-left-xxl {
  padding-left: var(--size-6);
}

.p-left-90 {
  padding-left: var(--size-90);
}

/* Handles the images in a responsive manner */

.img__wrapper {
  width: 100%;
  height: auto;
}

.img__wrapper img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  -o-object-position: center;
  object-position: center;
  /* aspect-ratio: 4/5; */
  border-radius: inherit;
}

.img__wrapper[data-crop="circle"] {
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}

.img__wrapper[data-fit="cover"] img {
  -o-object-fit: cover;
  object-fit: cover;
}

.img__wrapper[data-fit="contain"] img {
  -o-object-fit: contain;
  object-fit: contain;
}

.img__wrapper[data-position="top"] img {
  -o-object-position: top;
  object-position: top;
}

.img__wrapper[data-ratio="1/1"] img {
  aspect-ratio: 1/1;
}

.img__wrapper[data-ratio="4/5"] img {
  aspect-ratio: 4/5;
}

.img__wrapper[data-ratio="16/9"] img {
  aspect-ratio: 16/9;
}

.img__wrapper[data-ratio="3/2"] img {
  aspect-ratio: 3/2;
}

.img__wrapper[data-ratio="4/3"] img {
  aspect-ratio: 4/3;
}

@media screen and (max-width: 560px) {
  .img__wrapper[data-ratio="4/5"] img {
    aspect-ratio: 1/1;
  }
}

/* Fits */

:is([data-fit="cover"]) {
  object-fit: cover;
}

:is([data-fit="contain"]) {
  object-fit: contain;
}

/* Story */

:is([data-ratio="story"]) {
  aspect-ratio: var(--ratio-story);
}

@support not (aspect-ratio: 9/16) {
  :is([data-ratio="story"]) {
    .element::before {
      float: left;
      padding-top: 177.78%;
      content: "";
    }

    .element::after {
      display: block;
      content: "";
      clear: both;
    }
  }
}

/* Video Youtube */

:is([data-ratio="video-landscape"]) {
  aspect-ratio: var(--ratio-widescreen);
}

/* Portrait */

:is([data-ratio="portrait"]) {
  aspect-ratio: var(--ratio-portrait);
}

/* Rectangle */

:is([data-ratio="landscape"]) {
  aspect-ratio: var(--ratio-landscape);
}

:is([data-ratio="widescreen"]) {
  aspect-ratio: var(--ratio-widescreen);
}

/* Square */

:is([data-ratio="square"]) {
  aspect-ratio: var(--ratio-square);
}

/* Golden */

:is([data-ratio="golden"]) {
  aspect-ratio: var(--ratio-golden);
}

/* Gaps */

/* Disable gap */

.gap-none {
  gap: 0;
}

.gap-xs {
  gap: var(--size-00);
}

.gap-s {
  gap: var(--size-0);
}

.gap-sm {
  gap: var(--size-1);
}

.gap-m {
  gap: var(--size-2);
}

.gap-lg {
  gap: var(--size-3);
}

.gap-xl {
  gap: var(--size-4);
}

.gap-xxl {
  gap: 4.6875rem; /* 75px */
}

/* Mega gaps & Margin- adding gaps that are larger than a columns width */

.gap-span1-g {
  gap: calc((5.856% * 1) + (1 * var(--default-drag-n-drop-gutter)));
}

.gap-span1-2g {
  gap: calc((5.856% * 1) + (2 * var(--default-drag-n-drop-gutter)));
}

.mega-margin-0__left {
  margin-left: calc((5.856% * 1) + (1 * var(--default-drag-n-drop-gutter)));
}

.mega-margin-0__right {
  margin-right: calc((5.856% * 1) + (1 * var(--default-drag-n-drop-gutter)));
}

.mega-margin-1__left {
  margin-left: calc((5.856% * 1) + (2 * var(--default-drag-n-drop-gutter)));
}

.mega-margin-1__right {
  margin-right: calc((5.856% * 1) + (2 * var(--default-drag-n-drop-gutter)));
}

.mega-offset__left {
  left: -5.5rem !important;
}

.mega-offset__right {
  right: -5.5rem !important;
}

/* Remove Disable Mega Gaps & Margins on smaller devices */
@media screen and (max-width: 992px) {
  .gap-span1-g,
  .gap-span1,
  .gap-span1-2g {
    gap: unset;
  }

  .m-left-span1,
  .m-left-span1-g,
  .m-right-span1,
  .m-right-span1-g {
    margin-left: unset;
    margin-right: unset;
  }
}

/* Non flex gap */

.flow-xs > * + * {
  margin-top: var(--size-0);
}

.flow-s > * + * {
  margin-top: var(--size-1);
}

.flow-sm > * + * {
  margin-top: var(--size-2);
}

.flow-m > * + * {
  margin-top: var(--size-3);
}

.flow-lg > * + * {
  margin-top: var(--size-5);
}

.flow-xl > * + * {
  margin-top: var(--size-7);
}

/* Text Alignement */

.text-center {
  text-align: center;
  text-wrap: balance;
}

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

.text-right {
  text-align: right;
}

/* Radiuses */

.radius-xs {
  border-radius: var(--radius-00);
}

.radius-s {
  border-radius: var(--radius-0);
}

.radius-m {
  border-radius: var(--radius-1);
}

.radius-lg {
  border-radius: var(--radius-2);
}

.radius-pill {
  border-radius: var(--radius-pill);
}

.radius-circle {
  border-radius: var(--radius-circle);
}

/* Borders */
.border-top-divider {
  border-top: 1px solid var(--bg-grey-tint-1);
}

/* Shadows */

.shadow-1 {
  box-shadow: var(--shadow-1);
}

.shadow-2 {
  box-shadow: var(--shadow-2);
}

.shadow-3 {
  box-shadow: var(--shadow-3);
}

.shadow-4 {
  box-shadow: var(--shadow-4);
}

.shadow-5 {
  box-shadow: var(--shadow-5);
}

/* Media Queries */

/* Mobile */
@media screen and (max-width: 560px) {
  .m-hidden {
    display: none !important;
  }
  .p-span1 {
    padding: 30px;
  }
  .m-wrap {
    flex-wrap: wrap;
  }
  .m-wrap-center {
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
  }
  .m-row {
    flex-direction: row !important;
  }
  .m-row-reverse {
    flex-direction: row-reverse !important;
  }
  .m-col {
    flex-direction: column !important;
  }
  .m-col-reverse {
    flex-direction: column-reverse !important;
  }

  .m-center {
    justify-content: center;
    text-align: center;
  }
  .m-left {
    justify-content: flex-start;
    text-align: left;
  }
  .m-align-center {
    align-items: center;
  }
  .m-align-left {
    align-items: flex-start;
  }

  .m-justify-center {
    justify-content: center;
  }
  .m-justify-left {
    justify-content: flex-start;
  }

  .m-display-h3 {
    font-size: 26px;
    line-height: 32px;
    letter-spacing: var(--font-letterspacing-7);
    font-weight: var(--font-weight-3);
    font-family: var(--display-font);
    font-feature-settings: "ss02";
  }
  .m-display-h2 {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: var(--font-letterspacing-7);
    font-weight: var(--font-weight-3);
    font-family: var(--display-font);
    font-feature-settings: "ss02";
  }

  .m-p-s {
    padding: var(--size-1);
  }

  .m-p-sm {
    padding: var(--size-2);
  }

  .m-p-m {
    padding: var(--size-3);
  }

  .m-gap-s {
    gap: var(--size-0);
  }

  .m-gap-sm {
    gap: var(--size-1);
  }

  .m-gap-m {
    gap: var(--size-2);
  }

  .m-gap-lg {
    gap: var(--size-3);
  }
}

/* Small Tablet */
@media only screen and (min-width: 560px) and (max-width: 768px) {
  .sm-hidden {
    display: none !important;
  }
  .sm-wrap {
    flex-wrap: wrap;
  }
  .sm-wrap-center {
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
  }
  .sm-row {
    flex-direction: row !important;
  }
  .sm-row-reverse {
    flex-direction: row-reverse !important;
  }
  .sm-col {
    flex-direction: column !important;
  }
  .sm-col-reverse {
    flex-direction: column-reverse !important;
  }
  .sm-center {
    justify-content: center;
    text-align: center;
  }
  .sm-align-center {
    align-items: center;
  }
}

/* Large Tablet */
@media screen and (min-width: 768px) and (max-width: 992px) {
  .l-hidden {
    display: none !important;
  }
  .l-wrap {
    flex-wrap: wrap;
  }
  .l-wrap-center {
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
  }
  .l-row {
    flex-direction: row !important;
  }
  .l-row-reverse {
    flex-direction: row-reverse !important;
  }
  .l-col {
    flex-direction: column !important;
  }
  .l-col-reverse {
    flex-direction: column-reverse !important;
  }
  .l-center {
    justify-content: center;
    text-align: center;
  }
  .l-align-center {
    align-items: center;
  }
}

/* Anything below 992px */
@media screen and (max-width: 992px) {
  .all-bp-top-padding-removed {
    padding-top: 0 !important;
  }
  .all-bp-hidden {
    display: none !important;
  }
  .all-bp-wrap {
    flex-wrap: wrap;
  }
  .all-bp-wrap-center {
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
  }
  .all-bp-row {
    flex-direction: row !important;
  }
  .all-bp-row-reverse {
    flex-direction: row-reverse !important;
  }
  .all-bp-col {
    flex-direction: column !important;
  }
  .all-bp-col-reverse {
    flex-direction: column-reverse !important;
  }
  .all-bp-center {
    justify-content: center;
    text-align: center;
  }
  .all-bp-align-center {
    align-items: center;
  }
}

/* Hide on desktop */

@media screen and (min-width: 992px) {
  .desktop-hidden {
    display: none !important;
  }
}

/* Animations from animate.css */

@-webkit-keyframes wobble {
  from {
    transform: translate3d(0, 0, 0);
  }

  15% {
    transform: translate3d(-2%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    transform: translate3d(-2%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    transform: translate3d(0, 0, 0);
  }

  15% {
    transform: translate3d(-2%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    transform: translate3d(2%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    transform: translate3d(-2%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* .wobble {
	animation-name: wobble;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
  } */

@-webkit-keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  10% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  20% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(1, 1, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse-faster {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.pulse-initial {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

.pulse-faster {
  -webkit-animation-name: pulse-faster;
  animation-name: pulse-faster;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

/* Misceleanous */

.no-underline {
  text-decoration: none;
}

.cover {
  object-fit: cover;
  width: 100%;
}

.contain {
  object-fit: contain;
  width: 100%;
  object-position: left bottom;
}

/* Variables */

:root {
  /* TYPOGRAPHY */

  --display-font: "Figtree", sans-serif;
  --text-font: "Figtree", sans-serif;

  --section-container-width: calc(100vw - 3.75rem);
  --font-weight-0: 400;
  --font-weight-1: 500;
  --font-weight-2: 600;
  --font-weight-3: 700;

  --font-lineheight-00: 0.95;
  --font-lineheight-0: 1.1;
  --font-lineheight-1: 1.17;
  --font-lineheight-2: 1.18;
  --font-lineheight-3: 1.2;
  --font-lineheight-4: 1.22;
  --font-lineheight-5: 1.25;
  --font-lineheight-6: 1.33;
  --font-lineheight-7: 1.38;
  --font-lineheight-8: 1.4;
  --font-lineheight-9: 1.44;
  --font-lineheight-10: 1.5;

  --font-letterspacing-1: normal; /* - 0.1px */
  --font-letterspacing-2: normal; /* - 0.2px */
  --font-letterspacing-3: normal; /* - 0.3px */
  --font-letterspacing-4: normal; /* - 0.4px */
  --font-letterspacing-5: normal; /* - 0.5px */
  --font-letterspacing-6: normal; /* - 0.6px */
  --font-letterspacing-7: normal; /* - 0.7px */
  --font-letterspacing-8: normal; /* - 0.8px */
  --font-letterspacing-9: normal; /* - 0.9px */
  --font-letterspacing-10: normal; /* - 1px */

  --font-size-000: 0.75rem; /* 12px */
  --font-size-00: 0.875rem; /* 14px */
  --font-size-0: 1rem; /* 16px */
  --font-size-1: 1.125rem; /* 18px */
  --font-size-2: 1.25rem; /* 20px */
  --font-size-3: 1.375rem; /* 22px */
  --font-size-4: 1.75rem; /* 28px */
  --font-size-5: 2rem; /* 32px */
  --font-size-6: 2.375rem; /* 38px */
  --font-size-7: 2.375rem; /* 38px */
  --font-size-8: 2.875rem; /* 46px */
  --font-size-9: 3.625rem; /* 58px */

  /* To be set with testing */
  --font-size-fluid-0: clamp(0.75rem, 2vw, 1rem);
  --font-size-fluid-1: clamp(1rem, 3vw, 1.125rem);
  --font-size-fluid-2: clamp(1.125rem, 4vw, 1.25rem);
  --font-size-fluid-3: clamp(1.75rem, 4vw, 2.25rem);
  --font-size-fluid-4: clamp(2.5rem, 6vw, 3rem);
  --font-size-fluid-5: clamp(42px, calc(2.625rem + ((1vw - 3.2px) * 1.0417)), 52px);

  /* COLORS */

  --primary-accent: #ff7900;
  --lilac-accent: #573ddc;
  --dark: #253141;
  --neutral: #f2ebe6;
  --placeholder: #f9f7f5;
  --white: #ffffff;
  --orange-accent: #ffb300;
  --green-accent: #28d794;
  --pink-accent: #ef1088;
  --grey-accent: #6c6967;
  --dark-inactive: #cdc6c1;

  --nav-text-gray: #4b607c;

  /* Revenue Rebels */

  --rr-purple: #907bf7;
  --rr-dark: #00093c;
  --rr-green: #a9efd4;

  /* Could be added in editor as option */
  --ux-bg-gray: #fcfcfc;

  --error: #cb2e0b;

  --dark-opacity-08: rgba(44, 59, 78, 0.8);
  --dark-opacity-06: rgba(44, 59, 78, 0.6);
  --dark-opacity-04: rgba(44, 59, 78, 0.4);
  --dark-opacity-02: rgba(44, 59, 78, 0.2);
  --dark-opacity-01: rgba(44, 59, 78, 0.1);
  --dark-opacity-005: rgba(44, 59, 78, 0.05);

  --primary-opacity-08: rgba(255, 121, 0, 0.8);
  --primary-opacity-06: rgba(255, 121, 0, 0.6);
  --primary-opacity-04: rgba(255, 121, 0, 0.4);
  --primary-opacity-02: rgba(255, 121, 0, 0.2);
  --primary-opacity-01: rgba(255, 121, 0, 0.1);
  --primary-opacity-005: rgba(255, 121, 0, 0.05);

  /* Backgrounds */

  --bg-dark-tint-3: var(--dark);
  --bg-dark-tint-3-05: rgba(37, 49, 65, 0.5);
  --bg-dark-tint-2: #c9cbcf;
  --bg-dark-tint-2-05: rgba(201, 203, 207, 0.5);
  /* Editor BG */
  --bg-dark-tint-1: #e3e5e8;
  --bg-dark-tint-1-05: rgba(227, 229, 232, 0.5);
  --bg-dark-tint-0: #f1f2f3;
  --bg-dark-tint-0-05: rgba(241, 242, 243, 0.5);

  --bg-primary-tint-3: var(--primary-accent);
  --bg-primary-tint-2: #ffc999;
  --bg-primary-tint-2-05: rgba(255, 201, 153, 0.5);
  /* Editor BG */
  --bg-primary-tint-1: #ffe4cc;
  --bg-primary-tint-1-05: rgba(255, 228, 204, 0.5);
  --bg-primary-tint-0: #fff1e5;
  --bg-primary-tint-0-05: rgba(255, 241, 229, 0.5);

  --bg-lilac-tint-3: var(--lilac-accent);
  --bg-lilac-tint-3-05: rgba(87, 61, 220, 0.5);
  --bg-lilac-tint-2: #b5aaee;
  --bg-lilac-tint-2-05: rgba(181, 170, 238, 0.5);
  /* Editor BG */
  --bg-lilac-tint-1: #d8d3f8;
  --bg-lilac-tint-1-05: rgba(216, 211, 248, 0.5);
  --bg-lilac-tint-0: #ece9fc;
  --bg-lilac-tint-0-05: rgba(236, 233, 252, 0.5);

  --bg-orange-tint-3: var(--orange-accent);
  --bg-orange-tint-3-05: rgba(255, 179, 0, 0.5);
  --bg-orange-tint-2: #ffe099;
  --bg-orange-tint-2-05: rgba(255, 224, 153, 0.5);
  /* Editor bg */
  --bg-orange-tint-1: #fff0cc;
  --bg-orange-tint-1-05: rgba(255, 240, 204, 0.5);
  --bg-orange-tint-0: #fff8e5;
  --bg-orange-tint-0-05: rgba(255, 248, 229, 0.5);

  --bg-green-tint-3: var(--green-accent);
  --bg-green-tint-3-05: rgba(40, 215, 148, 0.5);
  --bg-green-tint-2: #a9efd4;
  --bg-green-tint-2-05: rgba(169, 239, 212, 0.5);
  /* Editor bg */
  --bg-green-tint-1: #d4f7ea;
  --bg-green-tint-1-05: rgba(212, 247, 234, 0.5);
  --bg-green-tint-0: #eafbf4;
  --bg-green-tint-0-05: rgba(234, 251, 244, 0.5);

  --bg-pink-tint-3: var(--pink-accent);
  --bg-pink-tint-3-05: rgba(239, 16, 136, 0.5);
  --bg-pink-tint-2: #f8a0cf;
  --bg-pink-tint-2-05: rgba(248, 160, 207, 0.5);
  /* Editor bg */
  --bg-pink-tint-1: #fccfe6;
  --bg-pink-tint-1-05: rgba(252, 207, 230, 0.5);
  --bg-pink-tint-0: #fde7f3;
  --bg-pink-tint-0-05: rgba(253, 231, 243, 0.5);

  --bg-gray-tint-3: var(--grey-accent);
  --bg-gray-tint-3-05: rgba(108, 105, 103, 0.5);
  --bg-grey-tint-2: #d9d3ce;
  --bg-grey-tint-2-05: rgba(217, 211, 206, 0.5);
  /* Editor bg */
  --bg-grey-tint-1: #f2ece8;
  --bg-grey-tint-1-05: rgba(242, 236, 232, 0.5);
  --bg-grey-tint-0: #f9f8f6;
  --bg-grey-tint-0-05: rgba(249, 248, 246, 0.5);
  --bg-ux-bg-gray: var(--ux-bg-gray);
  --bg-ux-bg-gray-05: rgba(252, 252, 252, 0.5);
  --bg-white: var(--white);
  --bg-white-05: rgba(255, 255, 255, 0.5);

  /* Product Grays */
  --bg-product-gray-80: #bccadc;
  --bg-product-gray-80-05: rgba(188, 202, 220, 0.5);
  --bg-product-gray-89: #dae2ec;
  --bg-product-gray-89-05: rgba(218, 226, 236, 0.5);
  --bg-product-gray-92: #e4eaf1;
  --bg-product-gray-92-05: rgba(228, 234, 241, 0.5);
  --bg-product-gray-94: #ebeff5;
  --bg-product-gray-94-05: rgba(235, 239, 245, 0.5);
  --bg-product-gray-96: #f1f4f9;
  --bg-product-gray-96-05: rgba(241, 244, 249, 0.5);
  --bg-product-gray-98: #f8fafc;
  --bg-product-gray-98-05: rgba(248, 250, 252, 0.5);

  /* Chips */

  --chip-rose-93: #fddde8;
  --chip-forest-93: #ddfde2;
  --chip-leather-93: #fdeddd;
  --chip-pink-93: #fdddf3;
  --chip-lilac-93: #e2ddfd;
  --chip-ocean-93: #ddf8fd;
  --chip-emerald-93: #ddfded;
  --chip-wood-93: #fdf8dd;
  --chip-olive-93: #f8fddd;
  --chip-purple-93: #edddfd;
  --chip-gray-93: #f1f4f9;

  /* SIZES */

  --grid-gutter: 1.875rem; /* 30px */

  --size-00: 0.625rem; /* 10px */
  --size-0: 0.938rem; /* 15px */
  --size-1: 1.25rem; /* 20px */
  --size-2: 1.875rem; /* 30px */
  --size-3: 2.5rem; /* 40px */
  --size-4: 3.125rem; /* 50px */
  --size-5: 3.75rem; /* 60px */
  --size-6: 4.063rem; /* 65px */
  --size-7: 6.25rem; /* 100px */
  --size-90: 5.625rem; /* 90px */

  --size-fluid-1: clamp(0.5rem, 1vw, 1rem); /* From 8px to 16px */
  --size-fluid-2: clamp(1rem, 2vw, 1.5rem); /* From 16px to 24px */
  --size-fluid-3: clamp(1.5rem, 3vw, 2rem); /* From 24px to 32px */
  --size-fluid-4: clamp(2rem, 4vw, 3rem); /* From 32px to 48px */
  --size-fluid-5: clamp(4rem, 5vw, 5rem); /* From 64px to 80px */
  --size-fluid-6: clamp(5rem, 7vw, 7.5rem); /* From 80px to 120px */
  --size-fluid-7: clamp(7.5rem, 10vw, 10rem); /* From 120px to 160px */
  --size-fluid-8: clamp(10rem, 20vw, 15rem); /* From 160px to 240px */
  --size-fluid-9: clamp(15rem, 30vw, 20rem); /* From 240px to 320px */
  --size-fluid-10: clamp(20rem, 40vw, 30rem); /* From 320px to 480px */

  --size-content-1: 20ch;
  --size-content-2: 45ch;
  --size-content-3: 60ch;

  /* BORDER RADIUS */
  --radius-00: 0.25rem; /* 4px */
  --radius-0: 0.375rem; /* 6px */
  --radius-1: 0.5rem; /* 8px */
  --radius-2: 0.625rem; /* 10px */
  --radius-pill: 15%/70%;
  --radius-capsule: 30%/50%;
  --radius-circle: 100%;

  /* ASPECT RATIOS */

  --ratio-square: 1;
  --ratio-landscape: 4/3;
  --ratio-dsr: 6/4;
  --ratio-portrait: 3/4;
  --ratio-story: 9/16;
  --ratio-widescreen: 16/9;
  --ratio-ultrawide: 18/5;
  --ratio-golden: 1.618/1;

  /* SHADOWS */
  --shadow-1: 0px 1px 4px 0px var(--dark-opacity-02);
  --shadow-2: 0px 1.5px 6px 0px var(--dark-opacity-02);
  --shadow-3: 0px 3px 12px 0px var(--dark-opacity-02);
  --shadow-4: 0px 3px 12px 0px var(--dark-opacity-02);
  --shadow-5: 0px 5px 20px 0px var(--dark-opacity-02);

  /* ANIMATIONS */

  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
  --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
  --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
  --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
  --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
  --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
  --ease-in-4: cubic-bezier(0.9, 0, 1, 1);
  --ease-in-5: cubic-bezier(1, 0, 1, 1);
  --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
  --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
  --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
  --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
  --ease-out-5: cubic-bezier(0, 0, 0, 1);
  --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
  --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
  --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
  --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
  --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
  --ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
  --ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25);
  --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
  --ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
  --ease-elastic-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
  --ease-squish-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
  --ease-squish-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
  --ease-squish-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
  --ease-squish-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
  --ease-squish-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);

  --animation-fade-in: std-fade-in 0.5s var(--ease-3);
  --animation-fade-in-bloom: std-fade-in-bloom 2s var(--ease-3);
  --animation-fade-out: std-fade-out 0.5s var(--ease-3);
  --animation-fade-out-bloom: std-fade-out-bloom 2s var(--ease-3);
  --animation-scale-up: std-scale-up 0.5s var(--ease-3);
  --animation-scale-up-quick: std-scale-up 0.3s var(--ease-1);
  --animation-scale-down: std-scale-down 0.5s var(--ease-3);
  --animation-slide-out-up: std-slide-out-up 0.5s var(--ease-3);
  --animation-slide-out-down: std-slide-out-down 0.5s var(--ease-3);
  --animation-slide-out-right: std-slide-out-right 0.5s var(--ease-3);
  --animation-slide-out-left: std-slide-out-left 0.5s var(--ease-3);
  --animation-slide-in-up: std-slide-in-up 0.5s var(--ease-3);
  --animation-slide-in-down: std-slide-in-down 0.5s var(--ease-3);
  --animation-slide-in-right: std-slide-in-right 0.5s var(--ease-3);
  --animation-slide-in-left: std-slide-in-left 0.5s var(--ease-3);
  --animation-slide-in-right-short: std-slide-in-right-short 0.3s var(--ease-1);
  --animation-slide-in-left-short: std-slide-in-left-short 0.3s var(--ease-1);
  --animation-shake-x: std-shake-x 0.75s var(--ease-out-5);
  --animation-shake-y: std-shake-y 0.75s var(--ease-out-5);
  --animation-spin: std-spin 2s linear infinite;
  --animation-ping: std-ping 5s var(--ease-out-3) infinite;
  --animation-blink: std-blink 1s var(--ease-out-3) infinite;
  --animation-float: std-float 3s var(--ease-in-out-3) infinite;
  --animation-bounce: std-bounce 2s var(--ease-squish-2) infinite;
  --animation-pulse: std-pulse 2s var(--ease-out-3) infinite;
}

@media screen and (max-width: 480px) {
  :root {
    --section-container-width: calc(100vw - 1.865rem);
  }
}

@keyframes std-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes std-fade-in-bloom {
  0% {
    opacity: 0;
    filter: brightness(1) blur(20px);
  }
  10% {
    opacity: 1;
    filter: brightness(2) blur(10px);
  }
  100% {
    opacity: 1;
    filter: brightness(1) blur(0);
  }
}
@keyframes std-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes std-fade-out-bloom {
  100% {
    opacity: 0;
    filter: brightness(1) blur(20px);
  }
  10% {
    opacity: 1;
    filter: brightness(2) blur(10px);
  }
  0% {
    opacity: 1;
    filter: brightness(1) blur(0);
  }
}
@keyframes std-scale-up {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1);
  }
}
@keyframes std-scale-down {
  to {
    transform: scale(0.75);
  }
}
@keyframes std-slide-out-up {
  to {
    transform: translateY(-100%);
  }
}
@keyframes std-slide-out-down {
  to {
    transform: translateY(100%);
  }
}
@keyframes std-slide-out-right {
  to {
    transform: translateX(100%);
  }
}
@keyframes std-slide-out-left {
  to {
    transform: translateX(-100%);
  }
}
@keyframes std-slide-in-up {
  from {
    transform: translateY(100%);
  }
}
@keyframes std-slide-in-down {
  from {
    transform: translateY(-100%);
  }
}
@keyframes std-slide-in-right {
  from {
    transform: translateX(-100%);
  }
}
@keyframes std-slide-in-left {
  from {
    transform: translateX(100%);
  }
}
@keyframes std-slide-in-right-short {
  from {
    transform: translateX(-80%);
  }
}
@keyframes std-slide-in-left-short {
  from {
    transform: translateX(80%);
  }
}

@keyframes std-shake-x {
  0%,
  100% {
    transform: translateX(0%);
  }
  20% {
    transform: translateX(-5%);
  }
  40% {
    transform: translateX(5%);
  }
  60% {
    transform: translateX(-5%);
  }
  80% {
    transform: translateX(5%);
  }
}
@keyframes std-shake-y {
  0%,
  100% {
    transform: translateY(0%);
  }
  20% {
    transform: translateY(-5%);
  }
  40% {
    transform: translateY(5%);
  }
  60% {
    transform: translateY(-5%);
  }
  80% {
    transform: translateY(5%);
  }
}
@keyframes std-spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes std-ping {
  90%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes std-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes std-float {
  50% {
    transform: translateY(-25%);
  }
}
@keyframes std-bounce {
  25% {
    transform: translateY(-20%);
  }
  40% {
    transform: translateY(-3%);
  }
  0%,
  60%,
  100% {
    transform: translateY(0);
  }
}
@keyframes std-pulse {
  50% {
    transform: scale(0.9, 0.9);
  }
}

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

body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	min-height: 100vh;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
}

/* The scroll behavior smooth should not be enabled globally to not conficlt with the gsap scroll based animations -- only enable when anchor links are present at the template or module level */
html {
	overflow-x: hidden;
	height: fit-content;
}


main {

}

svg {
	shape-rendering: auto;
}

/* Force the HubSpot Wrapper to be ignored */

.hs_cos_wrapper {
 display: contents!important;
}

/* Make the body wrapper full width */

.body-wrapper {
  width: 100%;
}

/* Hide the select default select chevron */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}

/* Hide the hidden form field */

.js-hidden-field {
  display: none!important;
}


/*Remove tap highlight*/
body * {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}


/*Selection Style*/

::selection {
    background-color: var(--dark);
    color: white;
}

.hs-video-widget {
	height: 100%;
	width: 100%;
}

#main-content .container-fluid > .row-fluid-wrapper > .row-fluid {
  flex-wrap: wrap!important;
  gap: 0!important;
}

/*
	Storylane fullscreen 
*/



.sl-embed:fullscreen{
	scale: 0.9;
	padding: 0!important;
}

.sl-embed:fullscreen .sl-demo {
	height: auto!important;
	aspect-ratio: 1.68 / 1;
	max-width: min(1920px, 90vw);
	top: 50%!important;
	left: 50%!important;
	transform: translate(-50%, -50%);
}

.sl-embed:fullscreen::backdrop {
	background: var(--dark-opacity-06);
	cursor: zoom-out;
	backdrop-filter: blur(4px);
}

@media screen and (max-width: 768px) {
	.sl-embed:fullscreen .sl-demo {
		max-width: 100%;
		
	}
}

.demodesk-embed-close-button {
	width: 40px;
	background: var(--white);
}

.demodesk-embed-close-button path {
	fill: var(--dark);
}

@view-transition {
	navigation: auto;
}

#CybotCookiebotDialogHeader {
	display: none!important;
}