/* 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;
}

/* 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));
    }
  
}
.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.)
*/

/* 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 {
  font-size: 1rem;
  margin: 0 0 1.4rem;
}

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1.4rem;
}

/* 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;
}
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;
}

.register-colorful-btn {
    background-image: url("https://9293953.fs1.hubspotusercontent-eu1.net/hubfs/9293953/register-stroke.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: fit-content;
    padding: 26px 24px;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.8px;
    color: #222;
    text-wrap: nowrap;
    display: block;
}
/* 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;
}

/* 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;
}


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


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

/* 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;
    }
}

.hero-register-section-bckgr-image {
    padding-inline: 15px;
    padding-block: 48px;
}

@media screen and (max-width: 750px) {
    .hero-register-section-bckgr-image {
        background:
            linear-gradient(
                0deg,
                rgba(255, 255, 255, 0.8) 0%,
                rgba(255, 255, 255, 0.8) 100%
            ),
            url("https://9293953.fs1.hubspotusercontent-eu1.net/hubfs/9293953/black-and-white-buildings.jpg")
                lightgray 50% / cover no-repeat;
        position: relative;
    }

    .hero-register-section-bckgr-image::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 8px;
        background-image: url("https://9293953.fs1.hubspotusercontent-eu1.net/hubfs/9293953/colorful-border.svg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
}

/******************* 404 Error Page *******************/
.error-page-wrapper {
    height: 80vh;
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.error-page {
    width: 100%;
}

/* ==========================================================================
   Website header

   ONE stylesheet, ONE consumer per value.

   Every value in here arrives as a CSS custom property published by
   css/theme-overrides.css from the theme's Header settings, and is read in
   exactly one place below. Nothing else in the theme styles the header:
   theme-overrides.css deliberately writes no header rules, because it loads
   after main.css and would silently beat this file.

   Reading the fallbacks:

     var(--x)              required - the field has a default, so it is always
                           published. Clearing the field in the theme editor
                           falls back to the browser default, on purpose.
     var(--x, var(--y))    optional - empty means "inherit --y". The fallback
                           is always another token, never a literal, so a value
                           can never disagree with itself across two files.

   Three layers may set the same token, weakest to strongest. They all set
   token values only, so no rule here needs !important:

     1. :root in theme-overrides.css     - theme settings, site-wide
     2. the .hdr--* classes below        - the page's "Header style" choice
     3. an inline style on .body-wrapper - that page's own overrides

   Adding a header value: add the field, publish one token in
   theme-overrides.css section 7, read it once here. There is no third place.

   Set by templates/layouts/base.html; see that file for how a page resolves
   to a variant.
   ========================================================================== */

body {
  position: relative;
}

.body-no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Fallback for a wrapper carrying no variant class - a template that renders
   the header without extending base.html. Degrades to the solid look rather
   than to an unset (invalid) background. Declared before the variants so they
   win on source order. */
.body-wrapper {
  --header-bg-top: var(--header-bg-base);
  --header-text-top: var(--header-text-base);
}

/* --- Variants -------------------------------------------------------------
   These set token values only - they never style the header directly. */

.hdr--solid {
  --header-bg-top: var(--header-bg-base);
  --header-text-top: var(--header-text-base);
}

.hdr--transparent {
  --header-bg-top: transparent;
  --header-text-top: var(--header-text-on-transparent, var(--header-text-base));
}

/* --- Position ------------------------------------------------------------- */

.hdr--sticky .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.hdr--static .header {
  position: relative;
}

/* A fixed header is out of the flow, so the page must reserve its height.
   Only the solid variant does - a transparent header is meant to sit over the
   first section. --header-height is measured by the script in base.html. */
.hdr--sticky.hdr--solid #main-content {
  padding-top: var(--header-height, 0px);
}

/* --- The bar -------------------------------------------------------------- */

header.header {
  width: 100%;
  position: relative;
  z-index: var(--header-z-index);
  padding-inline: var(--header-padding-inline);
  background-color: var(--header-bg-top);
  box-shadow: var(--header-shadow-top);
  /* No background-color transition - the swap between the at-top and scrolled
     states is meant to be instant. The links transition their own colour. */
  transition: box-shadow var(--header-shadow-speed) ease;

  /* One property drives every piece of header text - links, the dropdown
     caret - so each state only redeclares it once. */
  --header-text: var(--header-text-top);

  /* The hamburger gets its own, because a page can colour it per state. Each
     state resolves: that page's colour, then the theme's bar colour, then
     the text colour above. */
  --header-burger-color: var(--header-mobile-burger-color-top, var(--header-mobile-burger-color, var(--header-text)));

  /* Same idea for the logo: one pair of properties is what the img reads, and
     each state redeclares the pair with its own image's width and height.
     --header-logo-box-height is deliberately *not* redeclared per state - it
     is the one height the bar is built on, so a swapped-in logo of a different
     size is scaled to fit rather than moving the bar. Only the breakpoint
     changes it, because that is a different layout rather than a state. */
  --header-logo-width: var(--header-logo-width-base, auto);
  --header-logo-height: var(--header-logo-height-base, auto);
  --header-logo-box-height: var(--header-logo-height-base, auto);
}

header.header.is-scrolled {
  background-color: var(--header-bg-scrolled);
  box-shadow: var(--header-shadow-scrolled);
  --header-text: var(--header-text-scrolled, var(--header-text-top));
  --header-burger-color: var(--header-mobile-burger-color-scrolled, var(--header-mobile-burger-color, var(--header-text)));
  --header-logo-width: var(--header-logo-width-scrolled, var(--header-logo-width-base, auto));
  --header-logo-height: var(--header-logo-height-scrolled, var(--header-logo-height-base, auto));
}

/* Mobile menu open: the panel fills the screen, so it needs a solid
   background whatever the variant is. Declared after .is-scrolled so it wins
   when a page is both scrolled and open. */
header.header.active {
  height: 100%;
  background-color: var(--header-bg-menu-open, var(--header-bg-scrolled));
  --header-text: var(--header-text-scrolled, var(--header-text-base));
  /* The close (X) sits on that solid background, so it takes the scrolled
     colour too. */
  --header-burger-color: var(--header-mobile-burger-color-scrolled, var(--header-mobile-burger-color, var(--header-text)));
}

.header-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  position: relative;
  width: 100%;
  margin-inline: auto;
  max-width: var(--header-max-width);
  padding-block: var(--header-padding-block);
  column-gap: var(--header-column-gap);
}

/* --- Logo ----------------------------------------------------------------- */

/* The box is what the bar is sized by, and its height is fixed for the whole
   breakpoint. Every logo variant is contained inside it, so the scroll swap
   and the menu-open swap change which image shows without moving anything. */
.header-container .logo-wrapper {
  flex-grow: 1;
  display: flex;
  align-items: center;
  height: var(--header-logo-box-height, auto);
}

.header-container .logo-wrapper img {
  /* Always contain: an image whose own width/height do not match the box is
     letterboxed inside it, never cropped and never stretched. */
  object-fit: contain;
  object-position: left center;
  /* block, because @hubspot/logo puts the img in an <a> and an inline image
     would add the baseline descender to the bar's height. */
  display: block;
  /* Both come from the image's width and height in the picker. */
  width: var(--header-logo-width, auto);
  height: var(--header-logo-height, auto);
  /* The guard that keeps a taller variant from growing the bar. It repeats the
     box height rather than saying 100% because of that same <a>: a percentage
     max-height needs a parent with a definite height, and the anchor's is
     auto, so 100% would silently resolve to none. */
  max-width: 100%;
  max-height: var(--header-logo-box-height, none);
}

/* --- Language switcher ---------------------------------------------------- */

.lang-switcher a {
  color: var(--header-lang-color, var(--header-text));
}

/* HubSpot ships its own globe sprite; this replaces it with the themed one.
   !important is HubSpot's - the sprite is set in their stylesheet, which loads
   after the theme's. */
.globe_class {
  background-image: var(--header-lang-globe) !important;
}

/* --- Desktop menu --------------------------------------------------------- */

.header-nav-menu ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--header-menu-gap);
}

.header-nav-menu li {
  position: relative;
  padding-block: var(--header-menu-item-padding-block);
}

.header-nav-menu ul li a {
  display: block;
  position: relative;
  padding: var(--header-menu-link-padding-block) var(--header-menu-link-padding-inline);
  font-family: var(--header-menu-font-family, inherit);
  font-size: var(--header-menu-font-size);
  font-style: var(--header-menu-font-style, normal);
  font-weight: var(--header-menu-font-weight);
  line-height: var(--header-menu-line-height);
  letter-spacing: var(--header-menu-letter-spacing);
  text-transform: var(--header-menu-text-transform);
  color: var(--header-text);
  transition: color var(--header-menu-hover-speed) ease;
}

.header-nav-menu ul li a:hover {
  color: var(--header-text-hover, var(--header-text));
}

.header-nav-menu ul li a.is-active {
  font-weight: var(--header-menu-active-weight);
  color: var(--header-text-active, var(--header-text));
}

/* Both hover options run through this one rule: "text colour only" is the
   same thing with --header-menu-underline-thickness set to 0, so switching
   effect in theme settings never changes which rules apply. The active link
   shows the same effect permanently. */
.header-nav-menu ul li a::after {
  content: "";
  position: absolute;
  bottom: var(--header-menu-underline-offset);
  left: 0;
  width: 0;
  height: var(--header-menu-underline-thickness);
  background-color: var(--header-menu-underline-color, var(--header-accent));
  transition: width var(--header-menu-hover-speed) ease;
}

.header-nav-menu ul li a:hover::after,
.header-nav-menu ul li a.is-active::after {
  width: 100%;
}

/* --- Desktop CTA ---------------------------------------------------------- */

/* The last menu item, when the header menu module marks it as the register
   link. The mobile panel restyles the same element in the media query at the
   bottom of this file - later in the same stylesheet, so it wins there without
   the min-width media query this used to need in theme-overrides.css. */
.header-nav-menu ul li a.register {
  background-color: var(--header-register-bg);
  color: var(--header-register-color, var(--header-text));
  font-family: var(--header-register-font-family, var(--header-menu-font-family, inherit));
  font-size: var(--header-register-font-size, var(--header-menu-font-size));
  font-style: var(--header-register-font-style, var(--header-menu-font-style, normal));
  font-weight: var(--header-register-font-weight, var(--header-menu-font-weight));
  letter-spacing: var(--header-register-letter-spacing);
  padding: var(--header-register-padding-block) var(--header-register-padding-inline);
  border: var(--header-register-border-width)
          var(--header-register-border-style)
          var(--header-register-border-color, currentColor);
  border-radius: var(--header-register-radius);
  transition: background-color var(--header-register-speed) ease,
              color var(--header-register-speed) ease,
              opacity var(--header-register-speed) ease;
}

.header-nav-menu ul li a.register:hover {
  background-color: var(--header-register-hover-bg, var(--header-register-bg));
  color: var(--header-register-hover-color, var(--header-register-color, var(--header-text)));
  opacity: var(--header-register-hover-opacity);
}

.header-nav-menu ul li a.register::after {
  display: none;
}

/* --- Dropdown ------------------------------------------------------------- */

.header-nav-menu .dropdown .main-link {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: var(--header-dropdown-caret-gap);
}

/* The caret. A CSS triangle, so its two "border" widths are its size. */
.header-nav-menu .dropdown .main-link::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: relative;
  border-top: var(--header-dropdown-caret-height) solid transparent;
  border-left: var(--header-dropdown-caret-width) solid
               var(--header-dropdown-caret-color, var(--header-text));
  border-bottom: var(--header-dropdown-caret-height) solid transparent;
  transform: rotate(90deg);
  transition: border-left-color var(--header-dropdown-speed) ease;
}

.header-nav-menu .dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + var(--header-dropdown-offset));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background: var(--header-dropdown-bg);
  border: var(--header-dropdown-border-width)
          var(--header-dropdown-border-style)
          var(--header-dropdown-border-color, var(--header-accent));
  border-radius: var(--header-dropdown-radius);
  box-shadow: var(--header-dropdown-shadow);
}

.header-nav-menu li:hover .dropdown-content {
  display: block;
}

.header-nav-menu .dropdown-content ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--header-dropdown-padding);
}

.header-nav-menu .dropdown-content li {
  min-width: var(--header-dropdown-min-width);
  border-bottom: var(--header-dropdown-divider-width) solid
                 var(--header-dropdown-divider-color, var(--header-accent));
}

.header-nav-menu .dropdown-content a {
  white-space: nowrap;
  padding: var(--header-dropdown-link-padding);
  font-family: var(--header-dropdown-font-family, inherit);
  font-size: var(--header-dropdown-font-size);
  font-style: var(--header-dropdown-font-style, normal);
  font-weight: var(--header-dropdown-font-weight);
  line-height: normal;
  color: var(--header-dropdown-text);
  transition: color var(--header-dropdown-speed) ease,
              font-weight var(--header-dropdown-speed) ease;
}

.header-nav-menu .dropdown-content a:hover {
  font-weight: var(--header-dropdown-hover-weight);
  color: var(--header-dropdown-hover-color, var(--header-dropdown-text));
}

.header-nav-menu .dropdown-content a::after {
  display: none;
}

/* Shown only inside the mobile panel; the rule lives here so the desktop
   dropdown's own list styling stays in one block. */
.header-nav-menu .dropdown-content ul li.back-btn {
  border-top: unset;
  display: none;
  cursor: pointer;
}

/* --- Hamburger ------------------------------------------------------------
   Shown only under the mobile breakpoint (see the media query below), but
   declared here so the bar geometry stays next to its animation. */

.menu-toggle {
  position: relative;
  display: none;
  justify-content: center;
  align-items: center;
  width: var(--header-mobile-burger-width);
  height: var(--header-mobile-burger-height);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.menu-toggle .line {
  position: absolute;
  right: 0;
  width: var(--header-mobile-burger-width);
  height: var(--header-mobile-burger-bar-height);
  background: var(--header-burger-color);
  border-radius: var(--header-mobile-burger-bar-radius);
  transition: all var(--header-mobile-burger-speed) ease;
}

.menu-toggle .line:first-child {
  top: calc(50% - var(--header-mobile-burger-gap));
}

.menu-toggle .line:nth-child(2) {
  top: 50%;
}

.menu-toggle .line:nth-child(3) {
  top: calc(50% + var(--header-mobile-burger-gap));
}

.menu-toggle.active .line:first-child {
  transform: rotate(45deg);
  top: 50%;
}

.menu-toggle.active .line:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active .line:nth-child(3) {
  transform: rotate(-45deg);
  top: 50%;
}

/* ==========================================================================
   Mobile menu

   Everything below the breakpoint. It is the last block in the file on
   purpose: at equal specificity these rules win over the desktop ones above,
   so the panel can restyle the same elements without a specificity contest.
   ========================================================================== */





@media (max-width: 1200px) {
  .header-container {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr min-content min-content;
    grid-template-areas:
        "logo lang toggle"
        "menu menu menu";
  }

  .logo-wrapper {
    grid-area: logo;
  }

  /* Mobile logo sizing. Each value falls back to the base image's, so leaving
     the mobile images empty renders exactly as the bar above. .is-scrolled is
     listed too: it is more specific than the base rule, and below the
     breakpoint the mobile logo is the one that shows whether or not the page
     is scrolled - the src priority in base.html says the same thing. */
  header.header,
  header.header.is-scrolled {
    --header-logo-width: var(--header-logo-width-mobile, var(--header-logo-width-base, auto));
    --header-logo-height: var(--header-logo-height-mobile, var(--header-logo-height-base, auto));
    --header-logo-box-height: var(--header-logo-height-mobile, var(--header-logo-height-base, auto));
  }

  /* Declared after .is-scrolled so it wins when a page is both scrolled and
     open, matching how the background and text colours are ordered above. The
     box height is left alone - opening the menu must not move the bar. */
  header.header.active {
    --header-logo-width: var(--header-logo-width-menu-open, var(--header-logo-width-mobile, var(--header-logo-width-base, auto)));
    --header-logo-height: var(--header-logo-height-menu-open, var(--header-logo-height-mobile, var(--header-logo-height-base, auto)));
  }

  .lang-switcher {
    grid-area: lang;
  }

  .menu-wrapper {
    grid-area: menu;
    display: block;
    grid-column: 1 / -1;
  }

  .menu-toggle {
    grid-area: toggle;
    display: flex;
  }

  .header-nav-menu {
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Closed state. js/main.js toggles .is-open on this element; it used to
     write an inline display, which no selector could override - and an inline
     style is why the panel could never be animated. */
  .header-nav-menu ul {
    flex-direction: column;
    width: 100%;
    display: none;
    padding: 0;
    gap: var(--header-mobile-row-gap);
    padding-block: var(--header-mobile-panel-padding-block);
    height: calc(100vh - var(--header-mobile-panel-height-offset));
    justify-content: unset;
    background-color: var(--header-mobile-panel-bg, transparent);
  }

  .header-nav-menu ul.is-open {
    display: flex;
  }



  .header-nav-menu li {
    width: 100%;
    padding-block: var(--header-mobile-row-padding-block);
    border-bottom: var(--header-mobile-divider-width)
                   var(--header-mobile-divider-style)
                   var(--header-mobile-divider-color, var(--header-accent));
  }

  .header-nav-menu li:last-child {
    border-bottom: unset;
  }

  /* Typography for the panel links comes from Mobile menu > Menu rows, not
     from the desktop menu settings - the two run at different sizes on
     different backgrounds. Each token falls back to its desktop counterpart. */
  .header-nav-menu ul li a {
    padding: var(--header-mobile-link-padding-block)
             var(--header-mobile-link-padding-inline);
    font-family: var(--header-mobile-link-font-family, var(--header-menu-font-family, inherit));
    font-size: var(--header-mobile-link-font-size);
    font-style: var(--header-mobile-link-font-style, normal);
    font-weight: var(--header-mobile-link-font-weight);
    letter-spacing: var(--header-mobile-link-letter-spacing);
    text-transform: var(--header-mobile-link-text-transform);
    text-align: var(--header-mobile-link-text-align);
    color: var(--header-mobile-link-color, var(--header-text));
  }

  /* The hover and active colours still win when the theme sets them; left
     empty they follow the panel's link colour rather than the header's. */
  .header-nav-menu ul li a:hover {
    color: var(--header-text-hover, var(--header-mobile-link-color, var(--header-text)));
  }

  .header-nav-menu ul li a.is-active {
    color: var(--header-text-active, var(--header-mobile-link-color, var(--header-text)));
  }

  .header-nav-menu ul li a::after {
    display: none;
  }

  .header-nav-menu .dropdown .main-link::before {
    transform: rotate(0);
  }

  .header-nav-menu .dropdown {
    position: unset;
  }

  .header-nav-menu .dropdown-content {
    box-shadow: unset;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    transition: transform var(--header-mobile-submenu-speed) ease;
    display: block;
  }

  .header-nav-menu .dropdown-content.is-active {
    transform: translateX(var(--header-mobile-submenu-offset));
  }

  .header-nav-menu .dropdown-content ul li.back-btn {
    border-top: unset;
    display: block;
  }

  .header-nav-menu .dropdown-content ul li.back-btn span {
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
    gap: var(--header-mobile-back-gap);
    padding: var(--header-mobile-back-padding);
    font-size: var(--header-mobile-back-font-size);
    font-style: normal;
    font-weight: var(--header-mobile-back-font-weight);
    line-height: normal;
    color: var(--header-mobile-back-color, var(--header-dropdown-text));
  }

  .header-nav-menu .dropdown-content ul li.back-btn span::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: relative;
    border-top: var(--header-mobile-arrow-height) solid transparent;
    border-left: var(--header-mobile-arrow-width) solid
                 var(--header-mobile-arrow-color, var(--header-dropdown-text));
    border-bottom: var(--header-mobile-arrow-height) solid transparent;
    transform: rotate(180deg);
  }

  /* The same element as the desktop CTA, restyled top to bottom. Every
     property the desktop rule sets is re-set here, so nothing leaks across
     the breakpoint except the transition. */
  .header-nav-menu ul li a.register {
    display: block;
    margin-block: var(--header-mobile-register-margin-top)
                  var(--header-mobile-register-margin-bottom);
    margin-inline: auto;
    width: var(--header-mobile-register-width);
    padding: var(--header-mobile-register-padding-block)
             var(--header-mobile-register-padding-inline);
    background-color: var(--header-mobile-register-bg, transparent);
    background-image: none;
    border: var(--header-mobile-register-border-width)
            var(--header-mobile-register-border-style)
            var(--header-mobile-register-border-color, currentColor);
    border-radius: var(--header-mobile-register-radius);
    font-size: var(--header-mobile-register-font-size);
    font-style: normal;
    font-weight: var(--header-mobile-register-font-weight);
    line-height: normal;
    letter-spacing: var(--header-mobile-register-letter-spacing);
    color: var(--header-mobile-register-color, var(--header-register-color));
    text-align: var(--header-mobile-register-text-align);
    text-wrap: nowrap;
    transition: opacity var(--header-mobile-register-speed) ease;
  }

  .header-nav-menu ul li a.register:hover {
    background-color: var(--header-mobile-register-bg, transparent);
    color: var(--header-mobile-register-color, var(--header-register-color));
    opacity: var(--header-mobile-register-hover-opacity);
  }
}

/* ==========================================================================
   Landing-page header

   templates/partials/header-no-navigation.html - a logo-only header used by
   templates/landing-page.html. It renders HubSpot's boilerplate markup rather
   than the bar above, so it keeps its own handful of rules. Moved here when
   css/components/_header.css was deleted; the rest of that file styled markup
   this theme never renders.
   ========================================================================== */

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

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

.header__logo img {
  object-fit: contain;
  max-width: 100%;
  height: auto;
}

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

@media (max-width: 1200px) {
  .header__logo {
    margin: 0 auto;
    width: 100%;
  }
} 
footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  /* border-top: 2px solid #f1f1f1; */
}

footer .footer-wrapper .wrapper-up {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

footer .footer-wrapper .logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* width: 100%; */
  /* max-width: 420px; */
}

/* Rich text under the footer logo, 24px away from it */
footer .footer-wrapper .logo-wrapper .footer-logo-text {
  margin-top: 24px;
	max-width: 320px;
}

/* Keep the 24px exact by dropping the rich text's own outer margins */
footer .footer-wrapper .logo-wrapper .footer-logo-text > * > :first-child {
  margin-top: 0;
}

footer .footer-wrapper .logo-wrapper .footer-logo-text > * > :last-child {
  margin-bottom: 0;
}

/* Collapse the gap entirely when no rich text has been entered */
footer .footer-wrapper .logo-wrapper .footer-logo-text:has(> .hs_cos_wrapper:empty) {
  display: none;
}

footer .footer-wrapper .nav-and-social-wrapper {
  display: flex;
  flex-direction: row;
  gap: 80px;
}

/* Size, colour, weight and line height all come from Menu Titles Text in
   theme settings; see section 8 of theme-overrides.css. */
footer .footer-wrapper .nav-and-social-wrapper .social-wrapper p,
footer .footer-wrapper .nav-and-social-wrapper .nav-wrapper p,
footer .footer-wrapper .nav-and-social-wrapper .policies-nav p {
  font-style: normal;
  /* letter-spacing: 0.96px; */
  margin-bottom: 16px;
}

footer .footer-wrapper .nav-and-social-wrapper .policies-nav nav ul,
footer .footer-wrapper .nav-and-social-wrapper .nav-wrapper nav ul,
footer
.footer-wrapper
.nav-and-social-wrapper
.social-wrapper
.social-inner-wrapper
nav
.contact-nav {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

footer
.footer-wrapper
.nav-and-social-wrapper
.social-wrapper
.social-inner-wrapper {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  /* height: calc(100% - 44px); */
}

footer
.footer-wrapper
.nav-and-social-wrapper
.social-wrapper
nav:first-child
ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

footer
.footer-wrapper
.nav-and-social-wrapper
.social-wrapper
.social-inner-wrapper
nav:first-child
ul
li
a {
  display: block;
}

footer
.footer-wrapper
.nav-and-social-wrapper
.social-wrapper
nav
.social-icons {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 0;
}

footer
.footer-wrapper
.nav-and-social-wrapper
.social-wrapper
nav
.contact-nav
li
a,
footer .footer-wrapper .nav-and-social-wrapper .policies-nav nav ul li a,
footer .footer-wrapper .nav-and-social-wrapper .nav-wrapper nav ul li a,
footer
.footer-wrapper
.nav-and-social-wrapper
.social-wrapper
nav
.contact-nav
li
a {
  font-style: normal;
  /* letter-spacing: 1.12px; */
  display: block;
}

footer
.footer-wrapper
.nav-and-social-wrapper
.social-wrapper
nav
ul
li
a.linkedin {
  display: block;
  background-image: url("https://9293953.fs1.hubspotusercontent-eu1.net/hubfs/9293953/linkedin.svg");
  background-size: contain;
  width: 36px;
  height: 36px;
  opacity: 1;
  transition: all .25s ease;
}
footer
.footer-wrapper
.nav-and-social-wrapper
.social-wrapper
nav
ul
li
a.facebook {
  display: block;
  background-image: url("https://9293953.fs1.hubspotusercontent-eu1.net/hubfs/9293953/facebook.svg");
  background-size: contain;
  width: 36px;
  height: 36px;
  opacity: 1;
  transition: all .25s ease;
}
footer
.footer-wrapper
.nav-and-social-wrapper
.social-wrapper
nav
ul
li
a.instagram {
  display: block;
  background-image: url("https://9293953.fs1.hubspotusercontent-eu1.net/hubfs/9293953/instagram.svg");
  background-size: contain;
  width: 36px;
  height: 36px;
  opacity: 1;
  transition: all .25s ease;
}
footer
.footer-wrapper
.nav-and-social-wrapper
.social-wrapper
nav
ul
li
a.tik_tok {
  display: block;
  background-image: url("https://9293953.fs1.hubspotusercontent-eu1.net/hubfs/9293953/tiktok-icon.svg");
  background-size: contain;
  width: 36px;
  height: 36px;
  opacity: 1;
  transition: all .25s ease;
}

footer
.footer-wrapper
.nav-and-social-wrapper
.social-wrapper
nav
ul
li
a.youtube {
  display: block;
  background-image: url("https://9293953.fs1.hubspotusercontent-eu1.net/hubfs/9293953/youtube.svg");
  background-size: contain;
  width: 36px;
  height: 36px;
  opacity: 1;
  transition: all .25s ease;
}

footer .footer-wrapper .nav-and-social-wrapper .social-wrapper nav ul li a.linkedin:hover,
footer .footer-wrapper .nav-and-social-wrapper .social-wrapper nav ul li a.facebook:hover,
footer .footer-wrapper .nav-and-social-wrapper .social-wrapper nav ul li a.instagram:hover,
footer .footer-wrapper .nav-and-social-wrapper .social-wrapper nav ul li a.tik_tok:hover,
footer .footer-wrapper .nav-and-social-wrapper .social-wrapper nav ul li a.youtube:hover {
  opacity: 0.9;
}

footer .wrapper-down .copyrights p {
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  /* letter-spacing: 0.56px; */
  margin: 0;
}

.back-to-top {
  position: absolute;
  bottom: 35px;
  right: 15px;
}

.back-to-top button {
  display: none;
  position: relative;
  opacity: 0.8;
  background-color: #EA7624;
  border: none;
  border-radius: 50%;
  padding: 28px;
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.back-to-top button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  background-image: url("https://9293953.fs1.hubspotusercontent-eu1.net/hubfs/9293953/back-to-top.svg");
  width: 26px;
  height: 26px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

#backToTopBtn:hover {
  transform: scale(1.05);
}

#backToTopBtn button:hover {
  opacity: 1;
}

@media screen and (max-width: 750px) {
  footer {
    flex-direction: column;
  }

  .footer .footer-wrapper .wrapper-up {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer .footer-wrapper .wrapper-up .nav-and-social-wrapper {
    flex-direction: column;
    gap: 48px;
    width: 100%;
    margin-top: 56px;
  }
}