/* 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.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! 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;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 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 ButtonText;
}

/**
 * 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 {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}
html,
body{
  /* Mobile menu drawer uses transform: translateX(100%) which contributes to
     the document overflow rectangle. Hide horizontal overflow so the page
     can't be dragged sideways on mobile. Applied to both html + body so the
     viewport gets the clip regardless of overflow propagation rules. */
  overflow-x: hidden;
}
body{
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
* {
  scrollbar-color: #E81E63 #ffffff !important;
}
/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


.row-fluid .span1,
.row-fluid .span2,
.row-fluid .span3,
.row-fluid .span4,
.row-fluid .span5,
.row-fluid .span6,
.row-fluid .span7,
.row-fluid .span8,
.row-fluid .span9,
.row-fluid .span10,
.row-fluid .span11,
.row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
  .row-fluid .span1 {
    width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span2 {
    width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span3 {
    width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span4 {
    width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span5 {
    width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span6 {
    width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span7 {
    width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span8 {
    width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span9 {
    width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span10 {
    width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
  }
  
  .row-fluid .span11 {
    width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
  }
  
}


.ef-module{
  padding: 20px 0;
}

.inner-wrapper {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}


/* For short conent */
.body-wrapper{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
[data-global-resource-path="Epic Fusion/templates/partials/footer.html"] {
  margin-top: auto;
}
.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;
}
@media (max-width: 1440px) {
  body .dnd-section,
  body .content-wrapper--vertical-spacing {
    padding: 60px 1rem;
  }
}
@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
  body .dnd-section,
  body .content-wrapper--vertical-spacing {
    padding: 40px 20px;
  }
}

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

/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body {
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* Paragraphs */

p,
li {
  font-size: 1rem;
  margin: 0 0 1.4rem;
}
/* ─────────────────────────────────────────────────────────────────────
   MODULE BULLET LISTS — horizontal dash style (Trello #379)

   Sandra: every <ul> rendered inside a module's rich-text content
   surface uses a horizontal dash (—) instead of the native dot. The
   dash inherits the module's text color via currentColor, so when an
   editor changes Content Color the bullet automatically follows.

   Strictly scoped to module content classes; navigation menus, blog
   post body, and other system lists are NOT touched.
   ───────────────────────────────────────────────────────────────────── */

.hs_cos_wrapper_type_rich_text ul,
.hs_cos_wrapper_type_inline_rich_text ul,
.rt-module-cm-content ul,
.rti-content ul,
.card-description ul,
.hero-content ul,
.faq-accordion__content-inner ul,
.timeline__description ul,
.event-info__value ul,
.testimonial__quote ul,
.facts-table__value ul,
.project-details__section-content ul,
.card.card--pricing .card__header ul,
.card.card--pricing .card__body ul:not(.card__features) {
  list-style: none;
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}

.hs_cos_wrapper_type_rich_text li,
.hs_cos_wrapper_type_inline_rich_text li,
.rt-module-cm-content li,
.rti-content li,
.card-description li,
.hero-content li,
.faq-accordion__content-inner li,
.timeline__description li,
.event-info__value li,
.testimonial__quote li,
.facts-table__value li,
.project-details__section-content li,
.card.card--pricing .card__header li,
.card.card--pricing .card__body ul:not(.card__features) li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 0.5rem;
  text-indent: 0;
}

.hs_cos_wrapper_type_rich_text li::marker,
.hs_cos_wrapper_type_inline_rich_text li::marker,
.rt-module-cm-content li::marker,
.rti-content li::marker,
.card-description li::marker,
.hero-content li::marker,
.faq-accordion__content-inner li::marker,
.timeline__description li::marker,
.event-info__value li::marker,
.testimonial__quote li::marker,
.facts-table__value li::marker,
.project-details__section-content li::marker,
.card.card--pricing .card__header li::marker,
.card.card--pricing .card__body ul:not(.card__features) li::marker {
  content: "";
  color: transparent;
}

.hs_cos_wrapper_type_rich_text li::before,
.hs_cos_wrapper_type_inline_rich_text li::before,
.rt-module-cm-content li::before,
.rti-content li::before,
.card-description li::before,
.hero-content li::before,
.faq-accordion__content-inner li::before,
.timeline__description li::before,
.event-info__value li::before,
.testimonial__quote li::before,
.facts-table__value li::before,
.project-details__section-content li::before,
.card.card--pricing .card__header li::before,
.card.card--pricing .card__body ul:not(.card__features) li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: currentColor;
  font-weight: 700;
}

/* Restore default disc bullets inside blog post body — Sandra explicitly
   asked NOT to touch the existing pink-dash treatment there (the rule
   in css/templates/blog.css wins on its own due to load order, but we
   also cancel our own rule here defensively). */
.blog-post__body .hs_cos_wrapper_type_rich_text li::before,
.blog-post__body .hs_cos_wrapper_type_inline_rich_text li::before {
  content: none;
}
/* Anchors */

a {
  cursor: pointer;
}
div:not(.blog-post__meta)
  > a:not(.menu__link):not(.ef-popup__close-button):not(.cta_button):not(
    .blog-post__tag-link
  ):not(.interactive-tabs-nav-item),
p
  > a:not(.menu__link):not(.ef-popup__close-button):not(.cta_button):not(
    .blog-post__tag-link
  ):not(.interactive-tabs-nav-item),
span
  > a:not(.menu__link):not(.ef-popup__close-button):not(.cta_button):not(
    .blog-post__tag-link
  ):not(.interactive-tabs-nav-item) {
  display: inline;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
a[href^="mailto:"] {
  hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
  white-space: nowrap;
}
/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1.4rem;
  font-weight: 700;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
div {
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 4;
  -webkit-hyphenate-limit-chars: 6 3 4;
  -webkit-hyphenate-limit-lines: 3;
  -webkit-hyphenate-limit-last: always;
  -webkit-hyphenate-limit-zone: 8%;
  -moz-hyphens: auto;
  -moz-hyphenate-limit-chars: 6 4 4;
  -moz-hyphenate-limit-lines: 2;
  -moz-hyphenate-limit-last: always;
  -moz-hyphenate-limit-zone: 8%;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: 6 4 4;
  -ms-hyphenate-limit-lines: 3;
  -ms-hyphenate-limit-last: always;
  -ms-hyphenate-limit-zone: 8%;
  hyphens: auto;
  hyphenate-limit-chars: 6 4 4;
  hyphenate-limit-lines: 3;
  hyphenate-limit-last: always;
  hyphenate-limit-zone: 8%;
}
/* Lists */

ul,
ol {
  margin: 0 0 1.4rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-left: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 0.7rem;
}

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid #ccc;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}

/* Custom Typography by the original website*/

h1 {
  font-size: 110px;
  font-weight: 700;
}
h2,
.h2 {
  font-size: 90px;
  font-weight: 700;
}

h3,
.h3 {
  font-size: 20px;
  font-weight: 700;
}

h4,
.h4 {
  font-size: 18px;
}

h5,
.h5,
h6,
.h6 {
  font-size: 16px;
}
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: #d0d0d0;
  border-color: #d0d0d0;
  color: #e6e6e6;
}

/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}
body form .hs-button,
body form input[type="submit"],
a.cta_button.link {
  background-color: #e81e63;  
  color: #fff;
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  padding: 12px 24px;
  fill: #fff;
  text-align: center;
  transition: all 0.3s;
  fill: var(--e-global-color-7fa7d87);
  color: var(--e-global-color-7fa7d87);
  font-family: "Suisse Semi Bold", Sans-serif;
  font-size: var(--e-global-typography-primary-font-size);
  font-weight: var(--e-global-typography-primary-font-weight);
  line-height: var(--e-global-typography-primary-line-height);
  color: var(--e-global-color-974ce01);
  border-radius: 0px 0px 0px 0px;
  padding: 15px 15px 15px 15px;
  box-shadow: none;
  text-decoration: none;
}

[data-popup-on="true"] a.cta_button.link {
  font-size: 24px;
  padding: 20px 35px 20px 30px;
}
body .form-w.--green_dark form input[type="submit"],
a.cta_button.link.--green_dark {
  background-color: #3a5c38;
  border: 0;
  border-radius: 0;
}
body .form-w.--green_dark form input[type="submit"]:hover,
a.cta_button.link.--green_dark:hover {
  background-color: #9cdd5b;
  border: 0;
  border-radius: 0;
}
body .form-w.--green_light form input[type="submit"],
a.cta_button.link.--green_light {
  background-color: #9cdd5b;
  border: 0;
  border-radius: 0;
}
body .form-w.--green_light form input[type="submit"]:hover,
a.cta_button.link.--green_light:hover {
  background-color: #3a5c38;
}

.hidden {
  display: none;
}
.accordion-trigger {
  cursor: pointer;
}
.accordion-panel {
  transition: max-height 0.3s ease-out;
  overflow: hidden;
  max-height: initial;
}

.accordion-panel.hidden {
  max-height: 0;
}
.button-cm-module {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}
div#download-form {
  margin-top: 32px;
}
.ef-button-cm[data-style="primary"] a.cta_button,
button.comment-reply-to,
button.comment-reply-to:hover {
  background-color: #e81e63;
  color: #fff;
}
button.comment-reply-to,
button.comment-reply-to:hover {
  padding: 10px 30px;
  margin-bottom: 20px;
  border: 0;
}
.ef-button-cm[data-style="secondary"] a.cta_button {
  background-color: #00194b;
  color: #fff;
}
.ef-button-cm[data-style="tertiary"] a.cta_button {
  background-color: #ee7c0d;
  color: #fff;
}
/* Fields */

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.7rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

form fieldset {
  max-width: 100% !important;
}

/* ─────────────────────────────────────────────────────────────────────
   FORM ALIGNMENT FIXES — Sandra 2026-04-22 (Trello #373)

   Issue 1: Old editor full-width fields (form-columns-1) get an inline
   `width: 95%` from HubSpot's per-form inline CSS, while half-width
   fields (form-columns-2) stay at 100% — creating a 5% / ~20px right-
   edge mismatch when 1-field rows and 2-field rows are stacked. Force
   100% on text-like inputs to keep right edges aligned. Checkboxes /
   radios are intentionally excluded so they keep their natural size.

   Issue 2: New editor (Form Component / hsfc-Form) wraps every step
   with a `.hsfc-Step__Content` that ships with `padding: ... 40px`
   from HubSpot. That pushes the visible field content 40px right of
   the form's outer edge, breaking flush-with-headline alignment
   (e.g. inside lp-hero or split layouts). Zero out the horizontal
   padding so the form content lines up with the form wrapper.
   ───────────────────────────────────────────────────────────────────── */

/* Issue 1 — old editor right-edge alignment */
form fieldset.form-columns-1 input.hs-input:not([type="checkbox"]):not([type="radio"]),
form fieldset.form-columns-1 select.hs-input,
form fieldset.form-columns-1 textarea.hs-input {
  width: 100% !important;
}

/* Issue 2 — new editor flush-with-headline */
form.hsfc-Form .hsfc-Step__Content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

/* Validation */

.hs-form-required {
  color: #EF6B51;
}

.hs-input.invalid.error {
  border-color: #EF6B51;
}

.hs-error-msg {
  color: #EF6B51;
  margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


  /* Search button input field and suggestions */
  .body-container-wrapper .hs-search-field__button {
    padding: 15px;
  }

  .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
    margin-left: 6px;
    margin-bottom: 0;
  }

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: #fff;
  }

  .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
    padding: 10px;
  }

  .body-container-wrapper .hs-search-field__suggestions li a {
    color: #494A52;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color 0.3s;
  }




div#download-form input[type="text"],
div#download-form input[type="email"] {
  height: 52px;
}

div.input {
  position: relative;
}
.hs_email input,
.hs_firstname input,
.hs_lastname input {  
  color: #00194b;
}
[data-form-mode="icons"] .hs_email input,
[data-form-mode="icons"] .hs_firstname input,
[data-form-mode="icons"] .hs_lastname input {
  padding-left: 56px !important;  
}


[data-form-mode="icons"] .hs_email div.input:before,
[data-form-mode="icons"] .hs_firstname div.input:before,
[data-form-mode="icons"] .hs_lastname div.input:before {
  background-color: #e81e63;
  display: inline-block;
  margin-right: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  font-weight: 900 !important;
  line-height: 1 !important;
  font-style: normal !important;
  color: #fff;
  font-size: 16px;
  width: 46px;
  padding: 10px;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 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;
}

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

/* Header DND sections */

.header .dnd-section {
  padding: 0;
}

/* Header container */

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__row-1 {
  padding-top: 1rem;
}

.header__row-1,
.header__row-2 {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

@media (max-width: 1150px) and (min-width: 767px) {
  .header__column {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .header__container {
    flex-direction: column;
    padding: 1rem 0 0;
  }


  .header__row-1 {
    padding-top: 0;
  }

  .header__row-2 {
    justify-content: center;
    padding: 0;
  }

  nav.menu.menu--mobile ul.no-list{
    margin-top: 32px;
  }
}

/* Navigation skipper */

.header__skip {
  height: 1px;
  left: -1000px;
  overflow: hidden;
  position: absolute;
  text-align: left;
  top: -1000px;
  width: 1px;
}

.header__skip:hover,
.header__skip:focus,
.header__skip:active {
  height: auto;
  left: 0;
  overflow: visible;
  top: 0;
  width: auto;
}

/* Logo */

.header__logo {
  align-items: center;
  display: flex;
  height: auto;
  margin-right: auto;
  max-width: 310px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .header__logo {
    margin: 0 auto;
    width: 100%;
    margin-right: auto;
    margin-left: 20px;
  }
}

.header__logo img {
  max-width: 100%;
}
@media (max-width: 767px) {
  .header__logo img {
    max-width: 222px!important;
  }
}

.header__logo .logo-company-name {
  font-size: 1.167rem;
  margin-top: 0.7rem;
}

.header__logo--main {
  padding: 23px 0;
}


@media(max-width: 767px){
  .header__logo--main {
    padding-top: 0
  }
}
/* Search bar */

.header__search {
  padding: 0 1rem;
  width: auto;
}



.hs-search-field__form {
  position: relative;
}

.header__search .hs-search-field__label {
  flex-basis: auto;
}



.header__search .hs-search-field__input {
  
  height: 45px;
  padding: 0 0.7rem;
}



.header__search .hs-search-field__button {
  padding: 0;
  fill: #000;
  background-color: transparent;
  border: none;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

.header__search .hs-search-field__button svg {
  height: 25px;
}


.header__search .hs-search-field--open .hs-search-field__input {
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  max-width: 100%;
}

.header__search .hs-search-field--open .hs-search-field__suggestions {
  background-color: #FFF;
  border: 2px solid #D1D6DC;
  border-radius: 0 0 6px 6px;
  border-top-width: 1px;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.header__search .hs-search-field__suggestions li {
  border-top: 1px solid #D1D6DC;
  font-size: 0.875rem;
}

.header__search .hs-search-field__suggestions li a {
  color: #494A52;
  padding: 0.35rem 0.7rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

.header__search .hs-search-field__suggestions #results-for {
  display: none;
}

@media (min-width: 767px) {
  .header__search form {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

  .header__search label {
    margin: 0 1rem 0 0;
  }

  .header__search .hs-search-field__input {
    width: auto;
  }
}

@media (max-width: 767px) {
  .header__search {
    border-top: 2px solid #CED4DB;
    order: 1;
    padding: 1.05rem;
  }
}

/* Language switcher — sibling of nav and contact button in row-2.
   Desktop: sits between nav and KONTAKT, inline. Mobile: cloned by main.js
   into the menu list above KONTAKT (original hidden, clone shown).
   Visual styles live in the module's scoped CSS. */

.header__lang-switcher {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .header__row-2 > .header__navigation {
    flex: 0 1 auto;
  }
  .header__lang-switcher {
    margin: 0 0.75rem;
    margin-bottom: 20px;
  }
}

/* Mobile: hide the in-header copy; show the cloned version inside the menu */
@media (max-width: 767px) {
  .header__row-2 > .header__lang-switcher {
    display: none;
  }
  .menu__item--cloned-lang {
    padding: 8px 0;
    list-style: none;
  }
  .menu__item--cloned-lang .header__lang-switcher {
    display: block;
    padding: .35rem 1.225rem;
  }

  /* Dark-bg context: mobile menu overlay is navy, invert the switcher
     colors here (module's scoped CSS can't reach these selectors). */
  .menu__item--cloned-lang .ef-lang-switcher__link {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 24px;
    line-height: 1.2;
  }
  .menu__item--cloned-lang .ef-lang-switcher__link:hover,
  .menu__item--cloned-lang .ef-lang-switcher__link:focus,
  .menu__item--cloned-lang .ef-lang-switcher__link--active {
    color: #fff !important;
  }
  .menu__item--cloned-lang .ef-lang-switcher__sep {
    color: rgba(255, 255, 255, 0.35) !important;
  }
}

@media (max-width: 767px) {
  .header__language-switcher {
    border-top: 2px solid #CED4DB;
    padding-left: 1.05rem;
    padding-right: 0;
  }

  .header__language-switcher .lang_list_class {
    border: none;
    box-shadow: unset;
    display: block;
    left: 30px;
    opacity: 1;
    padding: 0 1.05rem;
    top: 0;
    visibility: visible;
  }

  .header__language-switcher .lang_list_class li {
    background-color: inherit;
    font-size: 0.917rem;
  }

  .header__language-switcher--label-current {
    display: none;
  }

  .header__language-switcher .globe_class {
    background-image: none;
  }

  .header__language-switcher .lang_list_class li:hover{
    background-color: inherit;
  }

  .header__language-switcher .lang_list_class:before,
  .header__language-switcher .lang_list_class:after {
    content: none;
  }
  /* V1 lang switcher updates to keep "in line" w/ v0 mobile styles */
  .header__language-switcher .hs-language-switcher__menu {
    display: block;
    box-shadow:none!important;
    background: transparent;
  }
  .header__language-switcher .hs-language-switcher__menu a {
    font-size: 20px!important;
  }
  .header__language-switcher .hs-language-switcher__button {
    display: none;
  }
  }

/* Navigation */

#nav-toggle {
  display: none;
}

/* Mobile toggles */

@media (max-width: 767px) {
  .header__navigation,
  .header__search,
  .header__language-switcher {
    display: none;
    width: 100%;
  }
  body .menu__item--depth-1{
    border: 0;
  }
  body .menu--mobile {
    display: block;
    padding: 25px 20px 0px 40px;
  }
  .header__navigation.open,
  .header__search.open,
  .header__language-switcher.open {
    background-color: #F8FAFC;
    display: block;
    left: 0;
    min-height: calc(100vh - 115px);
    position: absolute;
    right: 0;
    top: 75px;
    z-index: 2;
  }

  .header__navigation--toggle,
  .header__search--toggle,
  .header__language-switcher--toggle,
  .header__close--toggle {
    cursor: pointer;
    margin: 0 5vw;
    position: relative;
  }

  .header__navigation--toggle.hide,
  .header__search--toggle.hide,
  .header__language-switcher--toggle.hide {
    display: none;
  }


  .header__search--toggle.open,
  .header__language-switcher--toggle.open {
    display: block;
    margin-left: 0;
    margin-right: auto;
  }

  .header__navigation--toggle:after,
  .header__search--toggle:after,
  .header__language-switcher--toggle:after {
    display: none;
    font-size: 1.083rem;
    font-weight: 600;
    position: absolute;
    left: 40px;
    text-transform: uppercase;
    top: -10px;
  }

  .header__navigation--toggle.open:after,
  .header__search--toggle.open:after,
  .header__language-switcher--toggle.open:after {
    display: block;
    word-break: normal;
  }

  .header__navigation--toggle {
    background-size: cover;
    height: 25px;
    width: 25px;
    position: absolute;
    top: 40px;
    right: 0;
  }

  .header__language-switcher--toggle {
    background-image: url(//static.hsappstatic.net/cos-LanguageSwitcher/static-1.1/img/globe.png);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__language-switcher--toggle:after {
    content: "Language";
  }

  .header__search--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
    background-size: cover;
    height: 25px;
    width: 25px;
    display: none;
  }

  .header__search--toggle:after {
    content: "Search";
  }

  .header__close--toggle {
    background-repeat: no-repeat;
    background-size: 110%;
    display: none;
    height: 25px;
    margin-right: 0;
    width: 36px;
    position: absolute;
    top: 32px;
    right: 24px;
    z-index: 999;
  }

  .header__close--toggle.show {
    display: block;
  }
  .motion {
    tranfsorm: rotate(0deg); 
    transition: all 0.3s ease-in-out; 
  }

  /* Lines */

  span.burger-items { 
    display: block;
    height: 2px; 
    margin-bottom: 6px;
    color: var( --e-global-color-855c6be );
  }

  span.visual {
    background-color: var( --e-global-color-855c6be );
  }

  span.motion {
    transform: rotate(0deg); 
    transition: all 0.2s ease-in-out; 
    transition-delay: 0.2s; 
  }

  span.size-s.motion {
    transform: translateY(0) scale(1);
  }

  /* Set different line width */

  .header__close--toggle span.size-s {
    width: 50%;
  }

  .header__close--toggle span.size-l {
    width: 100%;
  }

  .header__close--toggle span.size-m {
    width: 68%;
  }

  /*------ Hover animation ------*/

  .header__close--toggle.show > .motion {
    transform: rotate(90deg);
  }

  .header__close--toggle.show span.size-s {
    transform: translateY(18px) scale(0);
  }

  .header__close--toggle.show span.size-l {
    transform: translateY(0) rotate(45deg);
  }

  .header__close--toggle.show span.size-m {
    transform: translateY(-9px) rotate(-45deg);
    width: 100%;
  }


  .header__navigation.header--element{
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    position: fixed;
    top: 0;
    height: 100%;
    max-width: 100%;
    z-index: 998;
    background-color: #00194B;
    color: #fff;
  }
  .header__navigation.header--element.open {
    transform: translateX(0); 
  }
}

body .menu__link {
  transition: .4s;
  line-height: 0px;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: normal;
  text-transform: uppercase;
  text-decoration: none;
  font-family: "Suisse Int Regular", sans-serif;
}
body header .menu__item--depth-1{
  transition: .4s;
}
@media(min-width: 768px){
body header .menu__item--depth-1:hover{
transform: scale(1.2);
}
}
body header .menu__item--depth-1:hover .menu__link{
  color: #E81E63;
}
@media (max-width: 767px){
  body .menu .menu__link:hover{
    transform: scale(1);  
  }
  body .menu .menu__link:hover{
    color: #E81E63;
  }
  body .menu__link{
    font-size: 24px;
    line-height: 1.2;
  }
}



.header__contact-button {
  display: none;
}
li.menu__item.menu__item--depth-1.menu__item--cloned-button .header__contact-button {
  display: block;
  margin-left: 1.225rem;
}
@media(min-width: 768px){
.header__contact-button {
  position: relative;
  top: -10px;        
  margin-left: 30px;
  display: block;
}
}
.header__contact-button a.cta_button.link{
  padding: 8px 15px 8px 15px;
  font-family: "Suisse Int Regular", sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.header__contact-button a.cta_button.link:hover{
  transform: scale(1.2);
}


.newsletter-footer-banner-button a{
  display: block!important;

}
/* 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%;
}
/* =====================================================================
   _cards.css — Shared card component styles
   =====================================================================
   Common ground rules for ALL card-based modules in the Epic Fusion
   theme. Included via main.css at the theme level so it loads on
   every page automatically.

   Modules that should include this:
     - cards.module
     - card-slider.module
     - knowledge-hub-slider.module
     - event-cards.module
     - blog/blog-posts-listing.module
     - pricing-card.module

   Purpose:
     Single source of truth for buttons, tag badges, typography, hover
     effects, and search/filter controls. Eliminates visual
     inconsistencies across modules (Christian's QA feedback 2026-04-17).
   ===================================================================== */


/* ─────────────────────────────────────────────────────────────────────
   1. CARD BUTTONS — all card CTAs / action links
   ───────────────────────────────────────────────────────────────────── */

/* Base button style: auto-width, compact, uppercase, sharp corners.
   Every card module's button class should also carry this class or
   inherit these rules. */
/* .card-btn is the canonical button class. All card modules add it
   alongside their module-specific class (e.g. class="card-btn event-card__btn").
   .card-button covers the legacy cards.module (CTA/link buttons). */
.card-btn,
.card-button a,
.card-button .cta_button,
.card-button .ef-button-cm a {
  display: inline-block !important;
  padding: 10px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-decoration: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: opacity 0.2s ease;
  color: #fff !important;
  background-color: #e81e63 !important;
}

.card-btn:hover,
.card-btn:focus,
.card-button a:hover,
.card-button a:focus,
.card-button .cta_button:hover,
.card-button .cta_button:focus,
.card-button .ef-button-cm a:hover,
.card-button .ef-button-cm a:focus {
  opacity: 0.88;
  border-radius: 0 !important;
  text-decoration: none !important;
}


/* ─────────────────────────────────────────────────────────────────────
   2. TAG BADGES — category labels on card images
   ───────────────────────────────────────────────────────────────────── */

/* Tag badge: single class, single element. All modules use
   .blog-post__tags directly as the badge (span or a).
   Per-tag color overrides via inline style="background-color: ..." */
.blog-post__tags {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  font-size: 14px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8.4px 16.8px;
  margin: 10px;
  color: #fff !important;
  text-decoration: none !important;
  background-color: var(--e-global-color-205a833, #e81e63);
}
/* ─────────────────────────────────────────────────────────────────────
   3. CARD TYPOGRAPHY — titles, descriptions, metadata
   ───────────────────────────────────────────────────────────────────── */

/* Shared title style — Suisse Int Regular (per Sandra 2026-04-19: Regular,
   not Black, across all card modules). Blog listing uses <h2> without
   .card-title class, so selector list includes .blog-posts-listing-wrapper h2.
   !important needed to override theme's h1–h6 → Suisse Int Black rule. */
.card-title,
.card-slider-card__title,
.khs-card__title,
.event-card__title,
.blog-posts-listing-wrapper h2,
.blog-posts-listing-wrapper h2 a {
  font-family: "Suisse Semi Bold", Sans-serif!important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.1;
  color: #00194b;
}



.card-title.h1 {
  font-family: "Suisse Semi Bold", Sans-serif!important;
  font-size: 26px!important;
line-height: 28px!important;
}
  .card-title.h2 {
  font-size: 24px!important;
  line-height: 26px!important;
  font-family: "Suisse Semi Bold", Sans-serif!important;
}
  .card-title.h3 {
  font-size: 20px!important;
  line-height: 22px!important;
  font-family: "Suisse Semi Bold", Sans-serif!important;
}

.card-title.h4 {
    font-size: 18px!important;
    line-height: 20px!important;
    font-family: "Suisse Semi Bold", Sans-serif!important;
}
.card-title.h5 {
    font-size: 16px!important;
    font-weight: normal;
    line-height: 22px!important;
    font-family: "Suisse Semi Bold", Sans-serif!important;
    }
    .card-title.h6 {
    font-size: 14px!important;
    font-weight: normal;
    line-height: 22px!important;
    font-family: "Suisse Semi Bold", Sans-serif!important;
    }


/* Shared description style — matches blog-and-news reference (16px, navy).
   Canonical class: .card-desc — module-specific aliases kept for backward compat. */
.card-desc,
.card-description,
.card-slider-card__description,
.khs-card__description,
.event-card__description {
  font-size: 16px !important;
  line-height: 1.4;
  color: #00194b;
}

/* Shared metadata (author, date) */
.card-slider-card__date,
.khs-card__date,
.event-card__date,
.blog-post__timestamp {
  font-size: 13px;
  color: #6b7280;
}


/* ─────────────────────────────────────────────────────────────────────
   4. CARD CONTAINER + HOVER + IMAGE + CONTENT + MODIFIERS
   ───────────────────────────────────────────────────────────────────── */

/* Base card container — flex column with bg, overflow, radius 0.
   Canonical aliases: .card-slider-card, .khs-card, .event-card,
   .blog-index__post, .card-item. */
.card-slider-card,
.khs-card,
.event-card,
.blog-index__post,
.card-item {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover lift + shadow — unified value across all card modules */
.card-slider-card:hover,
.khs-card:hover,
.event-card:hover,
.blog-index__post:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

/* Card image wrapper — relative container for tag badge + overflow for zoom.
   Height unified at 260px (matches online blog-and-news reference).
   Only exception: khs whitepaper 3-col variant overrides to 550px. */
.card-slider-card__image,
.khs-card__image,
.event-card__image,
.cover-img {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
}
[is-whitepaper="true"] .khs-card__image {
  height: 550px;
}

.card-slider-card__image img,
.khs-card__image img,
.event-card__image img,
.cover-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Image zoom on card hover */
.card-slider-card:hover .card-slider-card__image img,
.khs-card:hover .khs-card__image img,
.event-card:hover .event-card__image img,
.blog-index__post:hover .cover-img img {
  transform: scale(1.05);
}

/* Card content / body — padded flex column that grows to fill card height */
.card-slider-card__content,
.khs-card__body,
.event-card__content {
  display: flex;
  flex-direction: column;
  padding: 20px;
  flex: 1 1 auto;
}

/* cards.module has no nested content wrapper — apply padding to direct
   children so image (.visual-asset) stays full-width while text/button inset. */
.card-item > .card-title,
.card-item > .card-description,
.card-item > .card-button,
.card-item > .full-name {
  padding-left: 20px;
  padding-right: 20px;
}

.card-item > .card-title:first-child,
.card-item > .visual-asset + .card-title {
  padding-top: 20px;
}

.card-item > .card-button:last-child {
  padding-bottom: 20px;
}

/* Card footer — same horizontal padding as content, reduced vertical */
.event-card__footer,
.card-slider-card__footer,
.khs-card__footer {
  padding: 0 20px 20px;
}

/* Past event / archived modifier — faded, full opacity on hover */
.card-slider-card--past,
.event-card--past {
  opacity: 1;
}

.card-slider-card--past:hover,
.event-card--past:hover {
  opacity: 1;
}


/* ─────────────────────────────────────────────────────────────────────
   5. SEARCH + FILTER CONTROLS — shared between blog-index, KHS, etc.
   ───────────────────────────────────────────────────────────────────── */

/* Canonical HTML structure:
   <div class="content-wrapper t4 filter">
     <div class="blog-search v2">
       <div class="hs-search-field">
         <div class="hs-search-field__bar">
           <form class="hs-search-field__form">
             <input class="hs-search-field__input" ...>
           </form>
         </div>
       </div>
     </div>
     <div class="blog-filter">
       <select ...>...</select>
     </div>
   </div>
*/

.content-wrapper.t4.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.blog-search.v2 {
  flex: 0 0 auto;
}

/* Search input + filter select — unified visual (Sandra 2026-04-19):
   same font-size, white bg, navy text, no grey border. Tag page selected
   option must be readable (navy text beats theme color:#fff rule). */
input#search_input-input,
input[type="text"].hs-search-field__input,
input[type="search"].hs-search-field__input,
.blog-filter select {
  font-size: 16px !important;
  height: 55px;
  background-color: #fff !important;
  color: #00194b !important;
  border: 0 !important;
  border-radius: 0 !important;
}

input#search_input-input,
input[type="text"].hs-search-field__input,
input[type="search"].hs-search-field__input {
  padding: 10px;
}

/* Native select arrow replaced by navy chevron (visible on white bg) */
.blog-filter select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 0 32px 0 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='%2300194b' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.6875 6.49219L8.46484 11.4961C8.30078 11.6328 8.13672 11.6875 8 11.6875C7.83594 11.6875 7.67188 11.6328 7.53516 11.5234L2.28516 6.49219C2.01172 6.24609 2.01172 5.80859 2.25781 5.5625C2.50391 5.28906 2.94141 5.28906 3.1875 5.53516L8 10.1289L12.7852 5.53516C13.0312 5.28906 13.4688 5.28906 13.7148 5.5625C13.9609 5.80859 13.9609 6.24609 13.6875 6.49219Z' fill='%2300194b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

.blog-filter select::-ms-expand {
  display: none;
}

/* Mobile: stack search + filter vertically (matches certificates-hubdb
   filter behavior). Lives here next to the base rule because external CSS
   loads after the inline theme-overrides.css and would otherwise win on
   equal specificity. */
@media (max-width: 767px) {
  .content-wrapper.t4.filter {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .blog-search,
  .blog-search.v2,
  .blog-filter {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
  }
  .blog-search {
    margin-right: 0;
  }
}

/* Search suggestions dropdown (HubSpot native search) */
.hs-search-field__suggestions {
  background-color: #fff;
  display: none;
  left: 0;
  max-width: 98%;
  padding: 10px !important;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 10;
}


/* ─────────────────────────────────────────────────────────────────────
   5b. CARD META — author + date row below card content
   ───────────────────────────────────────────────────────────────────── */

.blog-post__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 30px;
  margin-bottom: 0;
  border-top: 1px solid var(--e-global-color-f45b286);
  border-bottom: 3px solid #fff;
  position: relative;
  z-index: 999;
}

.blog-post__meta a {
  text-decoration: none;
  font-size: 14px;
}

.blog-post__meta i {
  font-size: 14px;
}

.blog-post__meta *,
.blog-post__meta span,
.blog-post__meta a,
.blog-post__meta i,
.blog-post__meta .blog-post__tags {
  line-height: 1;
}

.blog-post__meta span,
.blog-post__meta a {
  font-weight: normal;
}

.blog-post__meta > span,
.blog-post__meta > a,
.blog-post__meta > div {
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.blog-post__timestamp {
  display: block;
  font-size: 14px;
  color: #6b7280;
}

span.separator {
  font-size: 16px;
  font-weight: 100;
  color: var(--e-global-color-855c6be);
}

span.date {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tag badge icon (when used inline) */
.blog-post__tags svg {
  height: auto;
  margin-right: 0.35rem;
  width: 15px;
}


/* ─────────────────────────────────────────────────────────────────────
   6. DATE FORMAT — German standard DD.MM.YYYY
   ───────────────────────────────────────────────────────────────────── */

/* No CSS needed — dates are formatted in HubL via
   datetimeformat("%d.%m.%Y"). This section is a documentation marker
   to remind developers that the canonical date format across all
   modules is DD.MM.YYYY (German standard).

   Modules using publish_date_localized should migrate to:
     post.publish_date|datetimeformat("%d.%m.%Y")
   for consistency. */


/* ─────────────────────────────────────────────────────────────────────
   7. NAV ARROWS — slider navigation buttons
   ───────────────────────────────────────────────────────────────────── */

/* All slider nav buttons use .nav-btn (single class, all modules). */
.nav-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: opacity 0.2s ease;
  box-shadow: none !important;
  outline: none !important;
}

.nav-btn svg {
  width: 20px !important;
  height: 20px !important;
}

.nav-btn:disabled,
.nav-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

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

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}