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

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

/* Gutter for modules that do not bring their own wrapper — HubSpot's core Rich
   text, Header, Image, Button, Form and so on — so their content does not run to
   the screen edge on mobile.

   Keyed on the absence of a .content-wrapper, which is the actual condition:
   this theme's modules each wrap their own content (and several are deliberately
   edge to edge), while HubSpot's core modules do not wrap anything.

   NOT keyed on widget-type-custom_widget: HubSpot puts that class on *every* v2
   module in a drag-and-drop area, including its own Header and Rich text, so
   excluding it would exclude everything. Verified on /receptiewerkplaats, where a
   core header renders as
   .widget-type-custom_widget > .hs_cos_wrapper_type_module > .hs_cos_wrapper_type_header.

   NOT on .dnd-column either: a column can hold both a core module and a
   full-width custom one, and padding the column would inset both. */
.dnd-module:not(:has(.content-wrapper)) {
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

@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 {
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
  font-family: 'ITC Avant Garde Gothic', sans-serif;
  font-weight: 500;
}

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

@media (max-width: 767px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 28px;
  }
}

/* Lists */

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

/* Tighter than the browser default (~40px), which eats a lot of a phone's
   width. Nothing sets it above this breakpoint, so the default still applies
   on desktop. */
@media (max-width: 767px) {
  ul,
  ol {
    padding-left: 25px;
  }
}

ul li,
ol li {
  margin-bottom: 5px;
}

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;
  text-align: center;
  white-space: normal;
  border-radius: 30px;
  border: 1px solid var(--secondary-color);
  background-color: #ffffff;
  display: inline-flex;
  padding: 10px 25px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--secondary-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  transition: color 0.25s, background-color 0.25s, border 0.25s;
}

@media (max-width: 767px) {
  button,
  .button,
  .hs-button {
    padding: 10px 15px 10px;
    gap: 3px;
  }
}

button svg,
.button svg,
.hs-button svg {
  position: relative;
  bottom: -1px;
  height: 24px;
  width: 24px;
}

button svg path,
.button svg path,
.hs-button svg path {
  transition: fill 0.25s;
}

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: #E6E6E6;
}

button:hover,
.button:hover,
.hs-button:hover {
  background-color: var(--secondary-color);
  color: #ffffff;
}

button:hover svg path,
.button:hover svg path,
.hs-button:hover svg path {
  fill: #ffffff;
}

/** Transparent version **/
button.is-transparent,
.button.is-transparent,
.hs-button.is-transparent {
  border: 1px solid #ffffff;
  background-color: transparent;
  color: #ffffff;
}

button.is-transparent svg path,
.button.is-transparent svg path,
.hs-button.is-transparent svg path {
  fill: #ffffff;
}

button.is-transparent:hover,
.button.is-transparent:hover,
.hs-button.is-transparent:hover {
  border: 1px solid var(--secondary-color);
  background-color: var(--secondary-color);
  color: #ffffff;
}

button.is-transparent.with-green-hover:hover,
.button.is-transparent.with-green-hover:hover,
.hs-button.is-transparent.with-green-hover:hover {
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
  color: #ffffff;
}

/** Blue version **/
button.is-blue,
.button.is-blue,
.hs-button.is-blue {
  border: 1px solid var(--secondary-color);
  background-color: var(--secondary-color);
  color: #ffffff;
}

button.is-blue svg path,
.button.is-blue svg path,
.hs-button.is-blue svg path {
  fill: #ffffff;
}

button.is-blue:hover,
.button.is-blue:hover,
.hs-button.is-blue:hover {
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
  color: #ffffff;
}

button.is-blue.with-white-hover:hover,
.button.is-blue.with-white-hover:hover,
.hs-button.is-blue.with-white-hover:hover {
  border: 1px solid #ffffff;
  background-color: #ffffff;
  color: var(--secondary-color);
}

button.is-blue.with-white-hover:hover svg path,
.button.is-blue.with-white-hover:hover svg path,
.hs-button.is-blue.with-white-hover:hover svg path {
  fill: var(--secondary-color);
}

/** Green version **/
/** Blue version **/
button.is-green,
.button.is-green,
.hs-button.is-green {
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
  color: #ffffff;
}

button.is-green svg path,
.button.is-green svg path,
.hs-button.is-green svg path {
  fill: #ffffff;
}

button.is-green:hover,
.button.is-green:hover,
.hs-button.is-green:hover {
  border: 1px solid var(--secondary-color);
  background-color: var(--secondary-color);
  color: #ffffff;
}

button.is-full,
.button.is-full,
.hs-button.is-full {
  width: 100%;
}
/* 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.8rem;
  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;
}


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

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

/* Breadcrumbs — rendered by templates/partials/breadcrumbs.html.
   Semantic nav > ol > li; the separator is drawn in CSS so screen readers do not
   read it out. */

.breadcrumbs {
    margin-top: 30px;
    margin-bottom: 5px;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--secondary-color);
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "-";
}

.breadcrumbs__link {
    color: var(--secondary-color);
}

.breadcrumbs__link:hover {
    text-decoration: underline;
}

.breadcrumbs__current {
    font-weight: 500;
}

body:has(.error-page) .breadcrumbs {
    display: none;
}
.whatsapp-button {
    position: fixed;
    right: 80px;
    bottom: 40px;
    z-index: 50;
    transition: bottom 0.25s, top 0.25s;
}

@media (max-width: 767px) {
    .whatsapp-button {
        right: 20px;
    }

    .whatsapp-button svg {
        width: 80px;
        height: 80px;
    }
}

.whatsapp-button.opacity {
    opacity: 0;
}

.whatsapp-button.absolute {
    position: absolute;
    top: -40px !important;
    bottom: unset;
}

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

:root {
  --header-top-height: 64px;
  --header-bottom-height: 115px;
  --header-height: calc(var(--header-top-height) + var(--header-bottom-height));
}

@media (max-width: 1440px) {
  :root {
    --header-bottom-height: 95px;
  }
}

body {
  margin-top: var(--header-top-height);
}

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

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /*height: var(--header-height);*/
  background: transparent;
  z-index: 1000;
}

.header.is-mobile-menu-open .mobile-menu__block {
  display: flex;
  flex-direction: column;
  opacity: 1;
}

.header .hs-menu-wrapper ul {
  display: flex;
}

.header .hs-menu-wrapper ul li a {
  color: #ffffff;
}

.header__container {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 26px;
}

.header__container {
  padding-top: 16px;
  padding-bottom: 26px;
}

@media (max-width: 1199px) {
  .header__container {
    justify-content: center;
    padding-bottom: 16px;
  }
}

.header__top {
  height: var(--header-top-height);
  background: linear-gradient(-65deg, var(--primary-color) 50%, var(--secondary-color) 50%);
  position: relative;
  z-index: 10;
}

.top-bar__content-mobile {
  display: none;
}

@media (max-width: 1199px) {
  .header__top {
    background: linear-gradient(-65deg, var(--primary-color) 0%, var(--primary-color) 95px, var(--secondary-color) 95px);
  }

  .top-bar__content-desktop {
    display: none;
  }

  .top-bar__content-mobile {
    display: block;
  }

  .hs-tools-menu {
    display: none !important;
  }
}

.header__top .content-wrapper {
  height: 100%;
}

.header__top .hs-menu-wrapper ul {
  gap: 10px 40px;
}

.header__top .hs-menu-wrapper ul li.active a {
  text-decoration: underline;
}

.header__top .hs-menu-wrapper ul li a {
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
}

.header__top .hs-menu-wrapper ul li a:hover {
  text-decoration: underline;
}

.header__top .hs-menu-wrapper ul li a[href*='mailto'],
.header__top .hs-menu-wrapper ul li a[href*='tel'] {
  position: relative;
  padding-left: 25px;
}

.header__top .hs-menu-wrapper ul li a[href*='mailto']::before,
.header__top .hs-menu-wrapper ul li a[href*='tel']::before {
  position: absolute;
  left: 0;
  top: -3px;
}

.header__top .hs-menu-wrapper ul li a[href*='mailto']::before {
  content: url('https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/email-icon.svg');
}

.header__top .hs-menu-wrapper ul li a[href*='tel']::before {
  content: url('https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/phone-icon.svg');
}

.top-bar__row {
  display: flex;
  height: 100%;
  gap: 20px;
  justify-content: space-between;
  align-content: center;
}

.top-bar__col {
  display: flex;
  align-items: center;
}

.top-bar__col p {
  margin: 0;
  font-size: 13px;
  font-style: normal;
  color: #ffffff;
  font-weight: 600;
}

.top-bar__content-mobile__phone {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  color: #ffffff;
}

.header__main {
  height: var(--header-bottom-height);
  background: transparent;
  transition: background 0.25s, opacity 0.25s, height 0.25s;
  position: relative;
  z-index: 10;
}

.header__main.is-hidden {
  pointer-events: none;
  opacity: 0 !important;
  z-index: -1;
  height: 0;
}

.header__main.has-overlay {
  background: rgba(0, 45, 89, 0.8);
  height: 100px;
}

@media (max-width: 1199px) {
  .header__main.has-overlay {
    height: 85px;
  }
}

.header__main.has-overlay .header__logo {
  margin-top: 5px;
}

.header__main.has-overlay .header__logo svg {
  height: 44px;
}

.header__main.has-overlay .header_navigation {
  padding-top: 15px;
}

.header__main .header__logo {
  transition: margin-top 0.25s;
}

.header__main .header__logo svg {
  transition: height 0.25s;
}

.header_navigation {
  display: flex;
  align-items: center;
  padding-top: 32px;
  transition: padding-top 0.25s;
}

@media (max-width: 1440px) {
  .header_navigation {
    padding-top: 25px;
  }

  .header__logo svg {
    height: 55px;
    width: auto;
  }
}

@media (max-width: 1199px) {
  .header__main.is-background {
    background: rgba(0, 0, 0, 0.65);
  }

  .header__main.is-background .logo-link svg path {
    fill: #ffffff !important;
  }

  .header_navigation {
    display: none;
  }

  .header__logo {
    margin-top: 5px;
  }
}

@media (max-width: 767px) {
  /* Also overrides the has-overlay variant, which sets its own 44px. */
  .header__logo svg,
  .header__main.has-overlay .header__logo svg {
    height: 45px;
    width: auto;
  }
}

.header__container .hs-menu-wrapper ul {
  gap: 10px 28px;
}

.header__container .hs-menu-wrapper ul li a {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  padding: 5px 20px;
  transition: background 0.25s;
  border-radius: 50px;
}

.header__container .hs-menu-wrapper ul li.active a,
.header__container .hs-menu-wrapper ul li a:hover {
  background: var(--primary-color);
}

@media (max-width: 1440px) {
  .header__container .hs-menu-wrapper ul li a {
    font-size: 20px;
  }
}

.mobile-menu-trigger {
  background: transparent !important;
  border: none;
  padding: 0;
  margin: 0;
  display: none;
}

@media (max-width: 1199px) {
  .mobile-menu-trigger {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    padding-right: 5px;
    position: relative;
    z-index: 10;
  }

  .mobile-menu-trigger span {
    display: block;
    height: 4px;
    border-radius: 3px;
    background: #ffffff;
    transition: all 0.25s;
  }

  .mobile-menu-trigger span:first-child {
    width: 25px;
  }

  .mobile-menu-trigger span:nth-child(2) {
    width: 25px;
    margin-right: 10px;
  }

  .mobile-menu-trigger span:last-child {
    width: 25px;
    margin-right: 20px;
  }

  .header.is-mobile-menu-open .mobile-menu-trigger span:nth-child(2) {
    margin-right: -6px;
  }

  .header.is-mobile-menu-open .mobile-menu-trigger span:last-child {
    margin-right: 4px;
  }
}

.mobile-menu__block {
  display: none;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 120px;
  background: var(--secondary-color);
  overflow: auto;
  animation: animate-opacity 0.25s forwards;
}

@media (min-width: 1199px) {
  .mobile-menu__block {
    display: none !important;
  }
}

.header.is-mobile-menu-open .mobile-menu-trigger span:first-child {
  width: 20px;
  transform: rotate(-40deg) translate(-1px, 8px);
}

.header.is-mobile-menu-open .mobile-menu-trigger span:last-child {
  transform: rotate(-40deg) translate(2px, -9px);
}

.header.is-mobile-menu-open .mobile-menu-trigger span:nth-child(2) {
  width: 40px;
  transform: rotate(43deg);
}

.mobile-menu__wrapper {
  padding: 65px 0 30px;
}

.mobile-menu__wrapper .hs-menu-wrapper > ul {
  display: flex !important;
  flex-direction: column;
}

.mobile-menu__wrapper .hs-menu-wrapper > ul > li {
  padding: 0 15px;
  margin-bottom: -1px;
  transition: background 0.4s;
}

.mobile-menu__wrapper .hs-menu-wrapper > ul > li > a {
  display: block;
  padding: 18px 25px 14px;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-bottom-color 0.4s;
}

.mobile-menu__wrapper .hs-menu-wrapper > ul > li:last-child > a {
  border-bottom: 0;
}

.mobile-menu__wrapper .submenu-toggle {
  background: transparent;
  width: 50px;
  height: 55px;
  margin: 0;
  position: absolute;
  right: 20px;
  top: 0;
  padding: 0;
  border: none;
}

.mobile-menu__wrapper {
  flex-grow: 1;
}

.mobile-menu__controls {
  padding: 0 15px;
  display: flex;
  justify-content: center;
}

.mobile-cta {
  background: var(--primary-color);
  text-align: center;
  padding: 14px 25px;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobile-cta p {
  margin: 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  color: #ffffff;
}

.mobile-menu__socials {
  margin: 0;
  padding: 0 25px;
}

.mobile-menu__socials .social-links {
  justify-content: center;
}

@media (max-width: 1199px) {
  body:has(.header.is-mobile-menu-open) {
    overflow: hidden;
  }
}

@keyframes animate-opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.footer {
    position: relative;
    padding-top: 80px;
    padding-bottom: 35px;
    background-color: var(--secondary-color);
}

@media (max-width: 919px) {
    .footer {
        padding-top: 50px;
    }
}

.footer * {
    color: #ffffff !important;
    font-size: 14px !important;
}

.footer p {
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 0;
}

.footer h2 {
    line-height: normal;
    margin-bottom: 28px;
}

.footer ul li {
    margin-bottom: 8px;
}

.footer a:hover {
    text-decoration: underline;
}

.footer__row {
    display: flex;
    gap: 25px;
}

.footer__col.is-first {
    width: calc(30% - (75px / 4));
}

.footer__col.is-second {
    width: calc(15% - (75px / 4));
}

.footer__col.is-third {
    width: calc(40% - (75px / 4));
}

.footer__col.is-fourth {
    width: calc(15% - (75px / 4));
}

/* The site-wide rich-text gutter in objects/_containers-dnd.css indents this
   against the logo above it — the footer columns supply their own spacing. */
.footer__short-description .widget-type-rich_text {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 1199px) {
    .footer__row {
        flex-wrap: wrap;
    }

    .footer__col.is-first {
        width: calc(35% - (75px / 4));
    }

    .footer__col.is-second {
        width: calc(20% - (75px / 4));
    }

    .footer__col.is-third {
        width: calc(30% - (75px / 4));
    }
}

@media (max-width: 919px) {
    .footer__row {
        gap: 25px 50px;
    }

    .footer__col.is-third {
        order: unset;
    }

    .footer__col.is-third,
    .footer__col.is-first,
    .footer__col.is-second,
    .footer__col.is-fourth {
        width: auto;
    }
}

@media (max-width: 500px) {
    .footer__col.is-third,
    .footer__col.is-first,
    .footer__col.is-second,
    .footer__col.is-fourth {
        width: 100%;
    }
}

.footer__col.is-bottom-first {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.footer__col.is-bottom-last {
    width: 30%;
}

@media (max-width: 1199px) {
    .footer__col.is-bottom-first,
    .footer__col.is-bottom-last {
        width: 100%;
    }
}

.footer__main {
    padding-bottom: 34px;
}

.footer__col.has-top-padding {
    padding-top: 52px;
}

@media (max-width: 919px) {
    .footer__col.has-top-padding {
        padding-top: 22px;
    }
}

.footer__logo {
    display: block;
    margin-bottom: 25px;
}

@media (max-width: 767px) {
    .footer__logo svg {
        height: 45px;
        width: auto;
    }
}

.footer__navigation {
    margin-top: 0;
}

.footer__navigation .hs-menu-item a {
    line-height: 25px;
}

.footer__time-tables {
    display: flex;
    justify-content: center;
    gap: 20px;
}

@media (max-width: 1199px) {
    .footer__time-tables {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
}

@media (max-width: 919px) {
    .footer__time-tables {
        justify-content: flex-start;
        align-items: flex-start;
    }
}

.footer .sm--availability-schedule-table th {
    text-align: left;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 18px;
}

.footer .sm--availability-schedule-table td {
    padding: 10px 25px 1px 0;
    border: none;
}

.footer table {
    background-color: transparent;
    max-width: 300px;
    border: none !important;
}

.footer__certificates {
    margin-top: 40px;
}

.footer__certificates .hs-image__grid__list {
    justify-content: flex-start;
}

.footer__certificates .hs-image__grid__list__item {
    align-self: flex-start;
    flex-basis: 35px !important;
    aspect-ratio: auto !important;
    overflow: initial;
}

.footer__certificates .hs-image__grid__list__item__image {
/*     object-fit: none; */
    width: 30px;
    aspect-ratio: auto !important;
    height: initial;
}

.footer__bottom {
    padding-top: 35px;
    border-top: 1px solid rgba(255, 255, 255, 0.50);
}

.footer__bottom .created-by {
    text-align: right;
}

@media (max-width: 1199px) {
    .footer__bottom .created-by {
        text-align: left;
    }
}

.footer__bottom-navigation ul {
    display: flex;
    gap: 15px 30px;
    flex-wrap: wrap;
}

.footer__bottom-navigation .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: row;
}

.footer .social-links__icon{
  height: 34px;
  width: 34px;
}
/* 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%;
}
.media-text.text-on-right > .row-fluid,
.media-text.text-on-left > .row-fluid {
    max-width: 1540px !important;
}

.media-text.text-on-right > .row-fluid > .widget-span:last-child {
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    padding: 60px 100px;
    margin-top: 60px;
    width: 50%;
    height: 100%;
}

.media-text.text-on-right > .row-fluid > .widget-span:first-child .hs-image-widget {
    width: 860px;
    max-width: initial !important;
    height: 600px !important;
    border-radius: 300px 10px 10px 300px;
    object-fit: cover;
}

.media-text.text-on-left > .row-fluid > .widget-span:first-child {
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    padding: 60px 100px;
    margin-top: 60px;
    position: relative;
    z-index: 5;
    width: 50%;
    height: 100%;
}

.media-text.text-on-left > .row-fluid > .widget-span:last-child .hs-image-widget {
    width: 860px;
    max-width: initial !important;
    height: 600px !important;
    border-radius: 10px 300px 300px 10px;
    object-fit: cover;
    margin-left: -110px;
}
.inner-page-hero {
    position: relative;
    height: 470px;
    background: var(--secondary-color);
}

body:has(.error-page) .inner-page-hero {
    height: 270px;
}

@media (max-width: 767px) {
    .inner-page-hero {
        position: relative;
        height: 370px;
    }
}

.inner-page-hero .content-wrapper {
    height: 100%;
}

.inner-page-hero::before {
    content: '';
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.inner-page-hero__inner {
    position: relative;
    z-index: 10;
    color: #ffffff;
    text-align: center;
    max-width: 920px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.inner-page-hero__inner.is-knowledge-base {
    align-items: flex-end;
    justify-content: flex-end;
    max-width: 100%;
}

.inner-page-hero__featured-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inner-page-hero__inner h1 {
    margin-bottom: 0;
    color: #ffffff;
    margin-top: 80px;
}

@media (max-width: 767px) {
    .inner-page-hero__inner h1 {
        margin-top: 40px;
    }

}

.inner-page-hero__inner .button.is-cta {
    margin-top: 35px;
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.50);
}

.footer-bottom p {
    margin-bottom: 0;
}

.footer-bottom > .row-fluid > .dnd-column:first-child p {
    display: flex;
    gap: 10px 25px;
}
.knowledge-base__inner {
    display: flex;
    gap: 40px;
    padding: 40px 0;
}

.knowledge-base__sidebar {
    width: 290px;
}

/* Full width now the filter sidebar is gone (services moved to HubDB). */
.knowledge-base__main {
    width: 100%;
    padding-bottom: 35px;
}

@media (max-width: 1199px) {
    .knowledge-base__inner {
        flex-wrap: wrap;
    }

    .knowledge-base__sidebar,
    .knowledge-base__main {
        width: 100%;
    }
}


.knowledge-base__sidebar .filters__reset-button {
    max-width: 290px;
}

.knowledge-base__sidebar-heading {
    font-size: 22px;
    margin-bottom: 10px;
    padding-left: 20px;
}

.knowledge-base__filter-form {
    border-radius: 10px;
    border: 1px solid #E9E9E9;
    padding: 20px;
}

.knowledge-base__filter-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 6px;
    margin-top: 8px;
}

.knowledge-base__filter-item input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.knowledge-base__filter-item label {
    position: relative;
    gap: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0;
}

.knowledge-base__filter-item label::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #002D59;
    background: #ffffff;
}

.knowledge-base__filter-item input:checked ~ label::before {
    background: #002D59;
}

.knowledge-base__search-form form {
    position: relative;
    margin-bottom: 25px;
}

.knowledge-base__search-form form input[type=search] {
    border-radius: 30px;
    border: 1px solid #000;
    height: 48px;
    font-size: 16px;
    padding: 10px 20px 8px;
}

.knowledge-base__search-form form input[type=search]::-webkit-search-decoration,
.knowledge-base__search-form form input[type=search]::-webkit-search-cancel-button,
.knowledge-base__search-form form input[type=search]::-webkit-search-results-button,
.knowledge-base__search-form form input[type=search]::-webkit-search-results-decoration {
    display: none;
}

.knowledge-base__search-form form button {
    position: absolute;
    border: none;
    top: 2px;
    right: 2px;
    background: transparent !important;
}

.kb-card {
    display: flex;
    margin-bottom: 20px;
    border-radius: 300px 15px 15px 300px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
}

.kb-card__featured-image {
    width: 220px;
}

.kb-card__featured-image img {
    width: 100%;
    height: 100%;
    border-radius: 300px 0 0 300px;
    object-fit: cover;
    display: block;
}

.kb-card__content {
    width: calc(100% - 220px);
    padding: 40px 35px;
}

@media (max-width: 767px) {
    .kb-card {
        flex-wrap: wrap;
        border-radius: 100px 15px 15px 50px;
    }

    .kb-card__featured-image img {
        border-radius: 100px 15px 0 0;
        height: 260px;
    }

    .kb-card__featured-image,
    .kb-card__content {
        width: 100%;
    }
}

@media (max-width: 500px) {
    .kb-card__featured-image img {
        height: 200px;
    }
}

.kb-card__heading {
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
    margin-bottom: 15px;
}

@media (max-width: 767px) {
    .kb-card__heading {
        font-size: 20px;
        line-height: 26px;
    }
}

.kb-card__excerpt p {
    margin-bottom: 15px;
}

.knowledge-base__meta {
    margin-bottom: 35px;
}

.body-container--knowledge-base-post {
    margin-top: 45px;
    margin-bottom: 80px;
}

.knowledge-base__body {
    max-width: 840px;
    margin: auto;
}

.knowledge-base__body .media-and-text {
    margin-top: 80px;
}

.knowledge-base__body .media-and-text {
    margin-left: -250px;
    margin-right: -250px;
}

@media (max-width: 1359px) {
    .knowledge-base__body .media-and-text {
        margin-left: -150px;
        margin-right: -150px;
    }
}

@media (max-width: 1199px) {
    .knowledge-base__body .media-and-text {
        margin-left: 0;
        margin-right: 0;
    }
}

.knowledge-base__tags {
    display: flex;
    margin-top: 20px;
}

.knowledge-base__tags svg {
    width: 20px;
    height: auto;
    margin-bottom: -4px;
    margin-right: 10px;
}

.knowledge-base__related-posts {
    background: rgba(0, 45, 89, 0.1);
    padding-top: 75px;
    padding-bottom: 75px;
}

@media (max-width: 1700px) {
    .knowledge-base__related-posts {
        padding-top: 55px;
    }
}

@media (max-width: 1199px) {
    .knowledge-base__related-posts {
        padding-top: 45px;
    }
}

.knowledge-base__related-list {
    display: flex;
    gap: 30px;
}

.knowledge-base__related-post {
    /* Column so .knowledge-base__related-content can grow into the leftover
       height; the cards themselves are already stretched by the flex row. */
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
    width: calc((100% - (30px * 2)) / 3);
}

@media (max-width: 1199px) {
    .knowledge-base__related-list {
        flex-wrap: wrap;
    }

    .knowledge-base__related-post {
        width: calc((100% - (30px)) / 2);
    }
}

@media (max-width: 767px) {
    .knowledge-base__related-post {
        width: 100%;
    }
}

.knowledge-base__related-image {
    width: 100%;
    height: 310px;
    object-fit: cover;
    display: block;
}

/* Column layout so the button can be pushed to the card foot — titles and
   excerpts vary in length, and without this the buttons sit at three different
   heights across a row. */
.knowledge-base__related-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 30px 30px 40px;
}

.knowledge-base__related-content h3 {
    margin-bottom: 20px;
}

.knowledge-base__related-excerpt {
    margin-bottom: 20px;
}

/* Takes up the slack above it, so every button lands on the same baseline.
   align-self stops it stretching to the full card width. */
.knowledge-base__related-content .button {
    margin-top: auto;
    align-self: flex-start;
}

.knowledge-base__cta {
    width: 480px;
    border-radius: 20px 20px 0 0;
    padding: 20px 50px 20px;
    background: var(--primary-color);
}

@media (max-width: 767px) {
    .knowledge-base__cta {
        padding: 20px 20px 20px;
    }
}

.knowledge-base__cta h2 {
    color: #FFF;
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 10px;
}

.knowledge-base__cta .button {
    width: 100%;
}
/* News index — a featured card across the full width, then a three-up grid.
   Cards reuse the theme's white/rounded/shadow treatment. */

.news {
    padding: 30px 0 70px;
}

.news__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.news__empty {
    margin: 0;
}

/* Card */
.news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.news-card a {
    color: var(--secondary-color);
}

.news-card__media {
    display: block;
}

.news-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.news-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px;
}

.news-card__title {
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.3;
}

.news-card__excerpt {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 22px;
}

.news-card__excerpt p {
    margin: 0;
}

/* Keeps every button on the same baseline regardless of title length. */
.news-card__button {
    margin-top: auto;
    align-self: flex-start;
    font-size: 14px;
    padding: 8px 18px;
}

.news-card__button svg {
    width: 18px;
    height: 18px;
}

/* Featured — image beside the copy instead of above it. */
.news-card--featured {
    flex-direction: row;
    align-items: stretch;
}

.news-card--featured .news-card__media {
    flex: 0 0 50%;
}

.news-card--featured .news-card__image {
    height: 590px;
    aspect-ratio: auto;
}

.news-card--featured .news-card__body {
    flex: 1 1 auto;
    justify-content: center;
    padding: 40px;
}

.news-card--featured .news-card__title {
    font-size: 26px;
}

.news-card--featured .news-card__excerpt {
    font-size: 15px;
}

/* The grid cards push their button to the card foot; the featured card centres
   its content instead, so the auto margin would strand the button at the bottom. */
.news-card--featured .news-card__button {
    margin-top: 0;
}

/* ==========================================================================
   News post — hero, then breadcrumbs, then the article's own featured image.
   ========================================================================== */

.news-post {
    position: relative;
    z-index: 10;
    /* Sits below the hero like every other inner page. It used to overlap it
       with a negative margin; the client asked for the image under the header
       instead (DP-44), so the offset is gone and the block flows normally. */
    padding-bottom: 0;
}

.news-post__back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    /* Navy: this used to sit on the dark hero and was white. With the block no
       longer overlapping, white on white would be invisible. */
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: 500;
}

/* The theme's global a:hover turns links blue; hold the navy and underline. */
.news-post__back:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

.news-post__featured {
    /* The figure is what actually bounds the width — a max-width on the img
       alone cannot exceed its parent. */
    max-width: 1280px;
    margin: 0 auto 40px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
}

.news-post__featured img {
    display: block;
    width: 100%;
    max-width: 1280px;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.news-post__article {
    max-width: 840px;
    margin: 0 auto;
}

.news-post__title {
    margin: 25px 0;
}

.news-post__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 25px;
    font-size: 14px;
}

.news-post__tags svg {
    width: 14px;
    height: 14px;
    fill: var(--primary-color);
}

.news-post__tag-link {
    color: var(--secondary-color);
    text-decoration: underline;
}

.news-post__body {
    font-size: 16px;
    line-height: 26px;
}

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

.news-post__body img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
}

.news-post__body :is(td, th) {
    padding: 6px;
}

@media (max-width: 767px) {
    .news-post__featured {
        margin-bottom: 25px;
        border-radius: 15px;
    }
}

/* Pagination */
.news__pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 45px;
}

.news__pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 8px 14px;
    border: 1px solid var(--secondary-color);
    border-radius: 30px;
    color: var(--secondary-color);
    font-size: 14px;
    transition: background-color 0.25s, color 0.25s;
}

.news__pagination-link:hover,
.news__pagination-link.is-current {
    background: var(--secondary-color);
    color: #ffffff;
}

@media (max-width: 991px) {
    .news__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .news-card--featured .news-card__body {
        padding: 25px;
    }

    .news-card--featured .news-card__title {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    /* Featured falls back to the stacked card layout. */
    .news-card--featured {
        flex-direction: column;
    }

    .news-card--featured .news-card__media {
        flex: 1 1 auto;
    }

    /* Drop the fixed height once the card stacks. */
    .news-card--featured .news-card__image {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 575px) {
    .news {
        padding: 20px 0 50px;
    }

    .news__grid {
        grid-template-columns: 1fr;
    }
}
/* Service card — shared by the services grid and the related block on a service
   detail page. Lives here rather than in services-grid/module.css because module
   CSS is only served when that module renders: the detail page uses the card
   without the grid, so scoped styles would never load there. */

.service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* Media + icon badge */
.service-card__media {
    position: relative;
}

.service-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.service-card__icon {
    position: absolute;
    left: 20px;
    /* Half the badge height, so it straddles the image's bottom edge. */
    bottom: -35px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #FFF;
}

/* The icon tag wraps its svg in a hs_cos_wrapper span, so the badge's flex
   centring lands on that wrapper rather than the svg — centre it too. */
.service-card__icon .hs_cos_wrapper_type_icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The icon tag outputs an inline <svg>, so colour it with fill. */
.service-card__icon svg {
    width: 25px;
    height: 25px;
    fill: var(--primary-color);
}

/* Body */
.service-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 15px;
    padding: 32px 20px 20px;
}

/* Links default to the theme's anchor colour (a lighter blue), so pull them back
   to navy — same override the vehicle cards use. */
.service-card a {
    color: var(--secondary-color);
}

.service-card__title {
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
}

/* Both states go theme green. focus-visible rather than focus so the heading
   does not light up on a mouse click, only on keyboard arrival. The outline is
   recoloured rather than removed — it is the only thing marking where a keyboard
   user is. */
.service-card__title a {
    /* Eased out rather than linear so the colour settles instead of stopping
       dead. Only `color` is transitioned — the focus outline stays instant,
       since a focus indicator that fades in reads as lag to a keyboard user. */
    transition: color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.service-card__title a:hover,
.service-card__title a:focus-visible {
    color: var(--primary-color);
}

.service-card__title a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Keep the button on the baseline of every card regardless of title length. */
.service-card__button {
    margin-top: auto;
    align-self: flex-start;
    font-size: 14px;
    padding: 8px 18px;
}

.service-card__button svg {
    width: 18px;
    height: 18px;
}
:root {
    --hsf-background__padding: 0;
    --hsf-button__border-radius: 30px;
    --hsf-button__padding: 10px 25px 10px;
    --hsf-row__vertical-spacing: 15px;
    --hsf-field-input__background-color: #FFFFFF;
    --hsf-field-input__border-color: #E9E9E9;
    --hsf-field-input__border-radius: 5px;
    --hsf-field-input__padding: 15px 15px;
}

[data-hsfc-id=Renderer] .hsfc-RichText p {
    margin-bottom: 20px;
}

[data-hsfc-id=Renderer] .hsfc-TextareaInput {
    height: 258px;
}

/* ==========================================================================
   File upload fields

   HubSpot's --hsf-* custom properties theme the text inputs but not
   input[type=file], which the browser renders natively — hence the raw
   "Choose file / No file chosen" control sitting among styled fields.

   Styled on the native input rather than a HubSpot wrapper class, so this holds
   whichever form editor produced the markup. Quermo solved the same problem on
   .hs-fieldtype-file, which is the legacy editor's class and does not exist here.

   The button's label text is set by the browser and cannot be changed in CSS —
   a Dutch-locale browser shows "Bestand kiezen", an English one "Choose file".
   ========================================================================== */

[data-hsfc-id=Renderer] input[type="file"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--hsf-field-input__border-color, #E9E9E9);
    border-radius: var(--hsf-field-input__border-radius, 5px);
    background: var(--hsf-field-input__background-color, #FFFFFF);
    color: var(--secondary-color);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

[data-hsfc-id=Renderer] input[type="file"]:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ::file-selector-button is the standard; the -webkit- form covers Safari
   before 14.1. They cannot be combined in one rule — an unknown pseudo-element
   invalidates the whole selector list — so the declarations are repeated. */
[data-hsfc-id=Renderer] input[type="file"]::file-selector-button {
    margin: 0 14px 0 0;
    padding: 8px 20px;
    border: 0;
    border-radius: var(--hsf-button__border-radius, 30px);
    background: var(--secondary-color);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

[data-hsfc-id=Renderer] input[type="file"]::-webkit-file-upload-button {
    margin: 0 14px 0 0;
    padding: 8px 20px;
    border: 0;
    border-radius: var(--hsf-button__border-radius, 30px);
    background: var(--secondary-color);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

[data-hsfc-id=Renderer] input[type="file"]:hover::file-selector-button {
    background: var(--primary-color);
}

[data-hsfc-id=Renderer] input[type="file"]:hover::-webkit-file-upload-button {
    background: var(--primary-color);
}
.sticky-icons {
    position: absolute;
    right: 0;
    top: 200px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 1439px) {
    .sticky-icons {
        top: 180px;
    }
}

.sticky-icons li {
    margin: 0;
    justify-content: flex-end;
    padding: 0;
    text-align: right;
}

.sticky-icons li img {
    width: 60px;
    height: auto;
}

@media (max-width: 1439px) {
    .sticky-icons li img {
        width: 40px;
    }
}

@media (max-width: 991px) {
    .sticky-icons {
        display: none;
    }
}

/* 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;
  }
}
/* Skip link — hidden until focused, then pinned to the top-left above the fixed
   header. Uses clip-path rather than display:none, which would take it out of
   the tab order and defeat the purpose. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--secondary-color);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border-bottom-right-radius: 10px;
  transform: translateY(-100%);
  transition: transform 0.2s;
}

.skip-link:focus {
  color: #ffffff;
  transform: translateY(0);
  outline: 2px solid var(--primary-color);
  outline-offset: -2px;
}

/* Section */
.highlights > .row-fluid > .widget-span {
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
}

@media (min-width: 768px) {
    .highlights > .row-fluid > .widget-span:not(:last-child)::after {
        content: '';
        position: absolute;
        right: -15px;
        top: 0;
        height: 100%;
        width: 1px;
        border-right: 1px solid rgba(0, 45, 89, 0.2);
    }
}

@media (max-width: 767px) {
    .highlights > .row-fluid > .widget-span:not(:last-child) {
        border-bottom: 1px solid rgba(0, 45, 89, 0.2);
        margin-bottom: 60px;
        padding-bottom: 40px;
    }
}

/** Gearbox **/
:root {
    /** Default */
    --c-fg-default: #2d2d2d;
    --c-bg-default: #f5f5f5;

    /** Block */
    --c-fg-block: #2d2d2d;
    --c-bg-block: #ebebeb;

    /** Accent */
    --c-fg-accent: #ffffff;
    --c-bg-accent: #385921;

    /** Action */
    --c-fg-action: #385921;
    --c-bg-action: #85d54f;

    /** Input */
    --c-fg-input: #2d2d2d;
    --c-bg-input: #ffffff;

    /** Element Settings */
    --c-page-foreground: var(--c-fg-default);
    --c-page-background: var(--c-bg-default);

    /** Forms */
    --checkbox-style: cadar-default;
    --c-forms-input-label-foreground: var(--c-fg-default);
    --c-forms-input-label-background: transparent;
    --c-forms-input-checkbox-box-background: var(--c-bg-default);
    --c-forms-input-checkbox-box-border: var(--c-bg-input);
    --c-forms-input-checkbox-box-hover-border: var(--c-bg-accent);
    --c-forms-input-checkbox-checked-box-background: var(--c-bg-default);
    --c-forms-input-checkbox-checked-box-border: var(--c-bg-input);
    --c-forms-input-checkbox-checked-box-hover-border: var(--c-bg-accent);
    --d-forms-input-checkbox-box-radius: 5px;
    --c-forms-input-checkbox-tick: var(--c-bg-accent);

    --d-forms-input-select-radius: 5px;
    --c-forms-input-select-border: var(--c-bg-input);
    --c-forms-input-select-hover-border: var(--c-bg-accent);
    --c-forms-input-select-foreground: var(--c-fg-input);
    --c-forms-input-select-background: var(--c-bg-input);
    --c-forms-input-select-hover-foreground: var(--c-fg-input);
    --c-forms-input-select-hover-background: var(--c-bg-input);

    --d-forms-input-button-radius: 5px;
    --c-forms-input-button-foreground: var(--c-fg-action);
    --c-forms-input-button-background: var(--c-bg-action);
    --c-forms-input-button-border: var(--c-bg-action);
    --c-forms-input-button-hover-foreground: var(--c-fg-accent);
    /* Lighten($c-bg-accent, 20%) */
    --c-forms-input-button-hover-background: #629f3b;
    --c-forms-input-button-hover-border: #629f3b;

    --d-forms-input-text-radius: 5px;
    --c-forms-input-text-foreground: var(--c-fg-input);
    --c-forms-input-text-background: var(--c-bg-input);
    --c-forms-input-text-hover-foreground: var(--c-fg-input);
    --c-forms-input-text-hover-background: var(--c-bg-input);
    --c-forms-input-text-placeholder: #999999; /* Lighten(#000, 40%) */

    --c-forms-slider-text-foreground: #555555; /* Lighten(#2d2d2d, 20%) */
    --c-forms-slider-text-background: transparent;
    --c-forms-slider-bar: var(--c-bg-block);
    --c-forms-slider-bar-active: var(--c-bg-accent);
    --c-forms-slider-handle-inner: var(--c-bg-accent);
    --c-forms-slider-handle-outer: #ffffff;
    --c-forms-slider-border: #d9d9d9; /* Lighten(#000, 85%) */
    --c-forms-slider-handle-shadow: #e6e6e6; /* Lighten(#000, 90%) */

    /** Layout */
    --offer-style: simple;
    --offer-image-placeholder-height: 66.66666%;
    --button-style: solid;
    --offer-decoration-target: content;
    --base-z-index: 100;

    /** Spacing */
    --d-spacing-xxl: 40px;
    --d-spacing-xl: 30px;
    --d-spacing-lg: 20px;
    --d-spacing-md: 15px;
    --d-spacing-sm: 10px;
    --d-spacing-xs: 5px;

    /** Typography */
    --s-font-xxl: 28px;
    --s-font-xl: 20px;
    --s-font-lg: 18px;
    --s-font-md: 15px;
    --s-font-sm: 13px;

    /** Dimensions */
    --d-page-width: 1200px;
    --d-offer-width: 33%;

    /** Breakpoints */
    --breakpoint-xs: 0;
    --breakpoint-sm: 544px;
    --breakpoint-md: 758px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1920px;

    /** Borders */
    --d-border-radius: 5px;
    --d-border-radius-btn: 5px;
    --d-border-lg: 4px;
    --d-border-md: 2px;
    --d-border-sm: 1px;

    /** Misc */
    --print-font-family: sans-serif;
}
.offer-details__inner {
    display: flex;
    gap: 40px;
    min-height: 600px;
    margin-top: -300px;
    position: relative;
    z-index: 10;
}

@media (max-width: 1199px) {
    .offer-details__inner {
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .offer-details__inner {
        margin-top: -200px;
    }
}

.offer-details__main {
    width: 60%;
}

@media (max-width: 1199px) {
    .offer-details__main {
        width: 100%
    }
}

.offer-details__sidebar {
    width: 40%;
    margin-bottom: 35px;
}

@media (max-width: 1199px) {
    .offer-details__sidebar {
        width: 100%
    }
}

/* Car name and edition over the hero image. Shown wherever the layout stacks —
   1199px is where the sidebar drops below the main column, so from there down
   the name and price are several screens away and the visitor swipes the
   gallery with no idea which car is on screen. Hidden from assistive tech in
   the template: the sidebar keeps the single h1. */
.offer-details__mobile-title {
    display: none;
}

@media (max-width: 1199px) {
    .offer-details__mobile-title {
        display: block;
        margin-bottom: 20px;
        /* Sits on the dark hero photo, which the layout is pulled up over. */
        color: #fff;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    }

    .offer-details__mobile-title-name {
        display: block;
        font-size: 26px;
        font-weight: 700;
        line-height: 1.15;
    }

    .offer-details__mobile-title-edition {
        display: block;
        margin-top: 6px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.35;
    }
}

/** Back to overview button **/
.offer-details__back-to-overview-btn {
    margin-bottom: 28px;
    /* inline-flex so the hit area and the focus ring wrap the label rather than
       stretching the full width of the column. */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    /* The link sits on the hero photo, which is light in places. */
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

/* The theme's global `a:hover, a:focus` sets #0048b8, and at 0,1,1 it outranks
   the 0,1,0 class rule above — so the link turned dark blue on the dark photo
   the moment it was touched or focused. On a phone a tap leaves it in that
   state, so it simply reads as unreadable. Two classes to win the specificity
   back rather than reaching for !important. */
.offer-details__back-to-overview-btn:hover,
.offer-details__back-to-overview-btn:focus,
.offer-details__back-to-overview-btn:focus-visible {
    color: #ffffff;
}

.offer-details__back-to-overview-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
    border-radius: 4px;
}

/** Gallery **/
.offer-details__gallery {
    margin-bottom: 40px;
}

.offer-details__gallery-frame {
    margin-bottom: 14px;
    position: relative;
}

.offer-details__gallery-image img {
    display: block;
    /*height: 560px;*/
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.offer-details__gallery-frame .swiper-button-next,
.offer-details__gallery-frame .swiper-button-prev {
    height: 85px;
    width: 45px;
}

.offer-details__gallery-frame .swiper-pagination.swiper-pagination-fraction {
    color: #ffffff;
    background: #000;
    padding: 4px 10px;
    bottom: 20px;
    width: 75px;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 12px;
}

.offer-details__gallery-frame .swiper-button-next,
.offer-details__gallery-frame .swiper-rtl .swiper-button-prev {
    right: 0;
    border-radius: 10px 0 0 10px;
    background: rgba(5, 45, 94, 0.90);
    padding: 30px 10px;
}

.offer-details__gallery-frame .swiper-button-prev,
.offer-details__gallery-frame .swiper-rtl .swiper-button-next {
    left: 0;
    border-radius: 0 10px 10px 0;
    background: rgba(5, 45, 94, 0.90);
    padding: 30px 10px;
}

.offer-details__gallery-frame .swiper-button-prev:after,
.offer-details__gallery-frame .swiper-rtl .swiper-button-next:after,
.offer-details__gallery-frame .swiper-button-next:after,
.offer-details__gallery-frame .swiper-rtl .swiper-button-prev:after {
    display: none;
}

.offer-details__zoom-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 10px;
    background: rgba(5, 45, 94, 0.80);
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border: none;
}

.offer-details__gallery-thumbnails .swiper-slide {
    width: 110px;
}

.offer-details__gallery-thumbnail img {
    width: 110px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

/** Offer box **/
.offer-details__box {
    margin-bottom: 25px;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    min-height: 100px;
    overflow: hidden;
}

.offer-details__box-section {
    padding: 20px;
}

.offer-details__box-section.has-top-contact-details {
    background: var(--secondary-color);
    color: #ffffff;
}

.offer-details__box-section.has-top-contact-details a {
    color: #ffffff !important;
}

.offer-details__tabs {
    margin-bottom: 45px;
    --swiper-pagination-bullet-horizontal-gap: 0;
    --swiper-pagination-bullet-border-radius: 10px 10px 0 0;
    --swiper-pagination-color: #ffffff;
    --swiper-pagination-bullet-inactive-color: #E9E9E9;
}

.offer-details__tabs .swiper-pagination {
    position: static;
    text-align: left;
    display: flex;
    gap: 6px;
}

.offer-details__tabs .swiper-pagination-bullet {
    display: flex;
    align-items: center;
    padding: 8px 70px 3px 25px;
    border: 1px solid #E9E9E9;
    border-bottom: 0;
    width: auto;
    height: 40px;
    text-align: center;
    opacity: 1;
    font-size: 14px;
    font-weight: 700;
}

.offer-details__tabs .swiper-slide {
    height: auto;
}

.offer-details__tabs .swiper:not(.swiper-initialized) .swiper-wrapper {
    flex-direction: column;
}

.offer-details__tabs .swiper:not(.swiper-initialized) .offer_details__tab:not(.is-first) {
   display: none;
}

@media (min-width: 768px) {
    .offer-details__tabs .offer_details__tab {
        display: block !important;
    }
}

.offer-details__tabs .swiper:not(.swiper-initialized) .swiper-slide {
    margin-bottom: 25px;
}

.offer-details__tabs .offer_details__tab-toggle-on-mobile {
    display: none;
}

.offer-details__tabs .swiper:not(.swiper-initialized) .offer_details__tab-toggle-on-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 15px 15px;
    border-radius: 10px 10px 0 0;
    border: 1px solid rgba(28, 63, 127, 0.10);
}

.offer_details__tab-toggle-on-mobile .icon {
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 5px;
    border-radius: 5px;
    background: #E9E9E9;
    border: none;
    height: 25px;
    width: 25px;
}

.offer_details__tab-toggle-on-mobile .icon svg {
    width: 10px;
    height: 10px;
}

.offer_details__tab-toggle-on-mobile .icon svg path {
    fill: var(--secondary-color);
}

.offer_details__tab-toggle-on-mobile.is-collapsed .icon svg {
    transform: rotate(180deg);
}

.offer-details__tabs .swiper:not(.swiper-initialized) .offer_details__tab {
    border-radius: 0 0 10px 10px;
    opacity: 1;
    height: auto;
}

.offer_details__tab {
    background: #ffffff;
    border-radius: 0 10px 10px 10px;
    padding: 30px 24px;
    border: 1px solid rgba(28, 63, 127, 0.10);
    opacity: 0;
    height: 0;
}

.offer-details__tabs .swiper .swiper-slide.swiper-slide-active .offer_details__tab {
    opacity: 1;
    height: auto;
}

.offer_details__tab table {
    border: none;
    width: 100%;
    margin-bottom: 0;
}

.offer_details__tab table th,
.offer_details__tab table td {
    border: none;
    border-bottom: 1px solid rgba(28, 63, 127, 0.10);
    padding: 10px 20px 10px 0;
    font-size: 14px;
    font-weight: 500;
    width: 65%;
}

.offer_details__tab table th:first-child,
.offer_details__tab table td:first-child {
    width: 35%;
}

.offer_details__tab table tr:last-child th,
.offer_details__tab table tr:last-child td {
    border-bottom: none;
}

.offer-details__contacts {
    display: flex;
    gap: 15px;
    align-items: center;
}

.offer-details__contacts figure {
    margin: 0;
}

.offer-details__contacts figure img {
    display: block;
}

.offer-details__info {
    background: #ffffff;
}

.offer-details__info-title {
    color: var(--secondary-color);
    font-size: 40px;
    font-weight: 600;
    line-height: 40px;
    margin-bottom: 15px;
    margin-top: 15px;
}

@media (max-width: 1199px) {
    .offer-details__info-title {
        font-size: 35px;
        line-height: 35px;
    }
}

.offer-details__info-edition {
    font-weight: 700;
    margin-bottom: 25px;
}

.offer-details__price {
    margin-bottom: 10px;
}

.offer-details__price strong {
    font-size: 28px;
    font-weight: 600;
    padding-right: 10px;
}

.offer-details__price small {
    font-size: 14px;
    font-weight: 500;
}

.offer-details__button {
    margin-bottom: 25px;
}

.offer-details__packages-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 5px;
}

.offer-details__package input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.offer-details__package label {
    position: relative;
    display: flex;
    margin-bottom: 0;
    gap: 35px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px 12px 50px;
    border-radius: 10px;
    border: 1px solid #E9E9E9;
    background: #FFF;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.offer-details__package label::before {
    content: url("https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/package-radio.svg");
    position: absolute;
    left: 15px;
    top: 17px;
}

.offer-details__package input:checked ~ label {
    background: var(--secondary-color);
    color: #ffffff;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
    border-radius: 10px 10px 0 0;
    border-color: var(--secondary-color);
}

.offer-details__package input:checked ~ label::before {
    content: url("https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/package-radio-active.svg");
}

.offer-details__package label strong {
    font-size: 18px;
    font-weight: 600;
}

@media (max-width: 1199px) {
    .offer-details__package label strong {
        font-size: 18px;
    }
}

.offer-details__package label span {
    font-size: 16px;
    line-height: 30px;
    font-weight: 500;
}

.offer-details__package-wrapper {
    margin-bottom: 15px;
}

.offer-details__package-wrapper:has(input:checked) .offer-details__package-details  {
    display: block;
}

.offer-details__package-details {
    border-radius: 10px;
    display: none;
    border: 1px solid #E9E9E9;
    padding-bottom: 15px;
    padding-top: 25px;
    margin-top: -12px;
    background-image: url('https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/BOVAG-logo.jpg');
    background-position: bottom 12px right 12px;
    background-repeat: no-repeat;
    background-size: 50px auto;
}

.offer-details__package-details ul {
    list-style: none;
    padding-left: 20px;
    margin-left: 0;
    margin-bottom: 0;
}

.offer-details__package-details ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 6px;
}

.offer-details__package-details ul li::before {
    content: url('https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/delivery-package-listing-bullet.svg');
    position: absolute;
    top: 2px;
    left: 0;
}

.offer-details__description {
    margin-bottom: 65px;
    margin-top: 65px;
}

@media (max-width: 1199px) {
    .offer-details__description {
        margin-bottom: 25px;
        margin-top: 25px;
    }
}

.offer-details__contacts.full-card .offer-details__contacts-avatar {
    width: 92px;
}

.offer-details__contacts.full-card .offer-details__contacts-avatar img {
    width: 92px;
    height: auto;
}

.offer-details__contacts.full-card {
    gap: 25px;
    align-items: flex-start;
}

.offer-details__contacts.full-card h3 {
    margin-bottom: 10px;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
}

.offer-details__contacts.full-card span {
    font-size: 14px;
}

.offer-details__box-heading {
    margin-bottom: 15px;
    padding-left: 15px;
}

.hs-modal-form {
    border-radius: 10px;
}

.gb-license-plate {
    display: flex;
    flex-flow: row nowrap;
    height: 60px;
    background-color: #fc0
}

.gb-license-plate__country {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    justify-content: center;
    background: #4e92df;
    padding: 0 10px;
    width: 70px;
    text-align: center
}

.gb-license-plate__country-icon {
    margin-top: 5px;
    background-image: url("https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/eu-license-plate.svg");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 32px;
    height: 40px;
    text-align: center
}

.gb-license-plate__country-code {
    flex-grow: 1;
    color: #fff;
    font-size: 18px;
    font-weight: 700
}

.gb-license-plate__title, input[type=text].gb-license-plate__title {
    color: #000;
    background-color: #fc0;
    margin-bottom: 0;
    min-width: 0;
    font-size: 15px;
    padding: 0 20px;
    line-height: 60px;
    border: none;
    outline: none;
    width: 100%;
}

.gb-license-plate__title::-webkit-input-placeholder, input[type=text].gb-license-plate__title::-webkit-input-placeholder {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #000
}

.gb-license-plate__title::-moz-placeholder, input[type=text].gb-license-plate__title::-moz-placeholder {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #000
}

.gb-license-plate__title::-ms-input-placeholder, input[type=text].gb-license-plate__title::-ms-input-placeholder {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #000
}

.gb-license-plate__title::placeholder, input[type=text].gb-license-plate__title::placeholder {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #000
}

.gb-license-plate .gb-form__field {
    width: 100%
}

input[type=text].gb-license-plate__title {
    height: 100%;
    font-weight: 700
}

input[type=text].gb-license-plate__title:active, input[type=text].gb-license-plate__title:focus, input[type=text].gb-license-plate__title:hover {
    color: #000;
    background-color: #fc0
}

.offer-details__request-form {
    width: 520px;
}

@media (max-width: 767px) {
    .offer-details__request-form {
        width: 270px;
    }
}

.fancybox__slide .f-button[data-fancybox-close] {
    margin-top: -10px;
    margin-right: -10px;
}

.offer-details__accessories-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
}

.offer-details__accessories-list li {
    padding: 6px 12px;
    border-radius: 5px;
    background: rgb(233, 233, 233);
    font-size: 14px;
    margin: 0;
}

#calculator {
    margin-top: 0 !important;
    margin-bottom: 40px !important;
}

/* ==========================================================================
   Sticky enquiry bar — phones only

   The price and the enquiry button live in the sidebar, which stacks below the
   gallery, the spec tabs and the dealership copy on a phone. This keeps both
   within reach without moving anything, so the desktop layout is untouched.
   ========================================================================== */

.offer-sticky {
    display: none;
}

@media (max-width: 767px) {
    .offer-sticky {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* Above the header's 1000 would cover the mobile menu when it opens;
           50 is the floating WhatsApp button, which this sits above. */
        z-index: 60;
        padding: 10px 16px;
        /* Keeps the bar clear of the home indicator on iOS. */
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        background: var(--secondary-color);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
    }

    .offer-sticky__info {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .offer-sticky__price {
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* Filled by AutoGeld once its script runs, so it is empty on first paint —
       no min-height, or the bar would carry a blank gap on a page where the
       calculator fails to load. */
    .offer-sticky__monthly {
        color: rgba(255, 255, 255, 0.75);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
    }

    .offer-sticky__monthly:empty {
        display: none;
    }

    .offer-sticky__actions {
        display: flex;
        gap: 8px;
        margin-left: auto;
    }

    .offer-sticky__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        /* 44px is the minimum comfortable touch target. */
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 50%;
        background: var(--primary-color);
        transition: background-color 0.2s ease;
    }

    .offer-sticky__btn:hover,
    .offer-sticky__btn:focus-visible {
        background: #559626;
    }

    .offer-sticky__btn:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    /* The icon tag wraps its SVG in an hs_cos_wrapper span, which is inline and
       leaves the glyph sitting off-centre in the button. */
    .offer-sticky__btn .hs_cos_wrapper_type_icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .offer-sticky__btn svg {
        width: 20px;
        height: 20px;
        fill: #fff;
    }

    /* Clears the bar so the last block on the page is not covered. */
    .offer-details {
        padding-bottom: 80px;
    }

    /* The bar carries WhatsApp itself, so the floating button is both redundant
       and directly underneath it. Flagged on the root element by detail.html. */
    .has-offer-sticky .whatsapp-button {
        display: none;
    }

    /* The HubSpot chat launcher is also pinned bottom-right and lands on the
       bar. Unlike the WhatsApp button it is a real support channel, so it is
       lifted clear rather than hidden. 70px is the bar's own height (44px
       button plus 10px padding either side) with a little room to spare.

       !important because the widget positions itself from its own stylesheet,
       and .has-offer-sticky keeps this to vehicle detail pages — everywhere
       else the launcher stays where it belongs. */
    .has-offer-sticky #hubspot-messages-iframe-container.widget-align-right {
        bottom: 70px !important;
    }
}
.gb-filter__group .gb-filter-slider {
    margin: var(--d-spacing-sm) auto 0;
    width: 95%;
}

.gb-filter__group .gb-slider-result {
    display: block;
    margin-top: var(--d-spacing-lg);
    color: var(--c-forms-slider-text-foreground);
    text-align: right;
}

.gb-filter__group .noUi-target {
    border-radius: 10px;
    background: var(--c-forms-slider-bar);
}

.gb-filter__group .noUi-connect {
    border-radius: 4px;
    background-color: var(--c-forms-slider-bar-active);
}

.gb-filter__group .noUi-handle {
    border: 1px solid var(--c-forms-slider-border);
    border-radius: 50%;
    background: var(--c-forms-slider-handle-outer);
    box-shadow: 0 0 7px 0 var(--c-forms-slider-handle-shadow);
    cursor: pointer;
}

.gb-filter__group .noUi-handle::before {
    content: '';
    display: block;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-forms-slider-handle-inner);
}

.gb-filter__group .noUi-handle::after {
    display: none;
}

.gb-filter__group .noUi-state-tap .noUi-connect,
.gb-filter__group .noUi-state-tap .noUi-origin {
    transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}

.gb-filter__group .noUi-state-drag * {
    cursor: inherit !important;
}

.gb-filter__group .noUi-horizontal {
    height: 7px;
}

.gb-filter__group .noUi-horizontal .noUi-handle {
    top: -8px;
    right: -10px;
    width: 20px;
    height: 20px;
}

.gb-filter__group .noUi-draggable {
    cursor: ew-resize;
}

/* Disabled state */
.gb-filter__group [disabled] .noUi-connect {
    background: #b8b8b8;
}

.gb-filter__group [disabled] .noUi-handle,
.gb-filter__group [disabled].noUi-handle,
.gb-filter__group [disabled].noUi-target {
    cursor: not-allowed;
}
.pagination__list {
    list-style: none;
    margin: 45px 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pagination__list a {
    display: block;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    padding: 5px 20px;
    color: var(--secondary-color);
}

.pagination__list a.is-active {
    color: #ffffff;
}

.pagination__list a.is-active {
    background: var(--secondary-color);
    border-radius: 18px;
}
.offers-overview__sorting {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.offers-overview__sorting select {
    border-radius: 10px;
    border: 1px solid #E9E9E9;
    width: 210px;
}
.filters__reset-button {
    margin-bottom: 25px;
    display: block;
    padding: 14px 16px;
    border-radius: 5px;
    background: #E9E9E9 !important;
    border: none;
    color: #FFF !important;
    font-size: 16px;
    font-weight: 700;
    width: 100%;
    cursor: not-allowed;
}

.filters__reset-button:not([disabled]) {
    background: var(--secondary-color) !important;
    transition: opacity 0.25s;
    cursor: pointer;
}

.filters__reset-button:not([disabled]):hover {
    opacity: 0.9;
}

.gb-filter__group {
    border-radius: 10px;
    border: 1px solid #E9E9E9;
    margin-bottom: 15px;
}

.gb-filter__group-header {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    cursor: pointer;
}

.gb-filter__group-collapse-btn {
    padding: 5px;
    border-radius: 5px;
    background: #E9E9E9;
    border: none;
    height: 25px;
    width: 25px;
}

.gb-filter__group.is-collapsed .gb-filter__group-collapse-btn svg {
    transform: rotate(180deg);
}

.gb-filter__group-collapse-btn svg {
    width: 10px;
    height: 10px;
}

.gb-filter__group-body {
    padding: 0 15px 10px;
}

.filter__item {
    margin-bottom: 10px;
}

.filter__item-paired {
    display: flex;
    gap: 10px;
}

.filter__item-paired .filter__item {
    width: calc((100% - 10px) / 2);
}

.filter__item--check-box input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.filter__item--check-box label {
    position: relative;
    gap: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.filter__item--check-box label::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #002D59;
    background: #ffffff;
}

.filter__item--check-box input:checked ~ label::before {
    background: #002D59;
}

.filter__item--select-box select {
    border-radius: 3px;
    border: 1px solid #002D59;
    cursor: pointer;
}

.gb-filter__sub-group {
    padding-left: 40px;
}

.gb-filter-toggle-on-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-radius: 10px;
    text-align: left;
    margin-bottom: 15px;
    padding: 15px 15px;
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
}

@media (min-width: 992px) {
    .gb-filter-toggle-on-mobile {
        display: none;
    }
}

.gb-filter-toggle-on-mobile.is-collapsed .icon svg {
    transform: rotate(180deg);
}

.gb-filter-toggle-on-mobile .icon {
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 5px;
    border-radius: 5px;
    background: #E9E9E9;
    border: none;
    height: 25px;
    width: 25px;
}

.gb-filter-toggle-on-mobile .icon svg {
    width: 10px;
    height: 10px;
}

.gb-filter-toggle-on-mobile .icon svg path {
    fill: var(--secondary-color)
}

@media (max-width: 991px) {
    .gb-filter__wrapper {
        display: none;
    }
}

@media (min-width: 992px) {
    .gb-filter__wrapper {
        display: block !important;
    }
}
.offer-card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgb(0, 0, 0, 0.15);
    overflow: hidden;
}

.offer-card p {
    margin: 0 0 5px;
}

.offer-card a {
    color: var(--secondary-color);
}

.offer-card p:last-child {
    margin: 0;
}

.offer-card__image-wrapper {
    margin: 0;
}

.offer-card__image {
    width: 100%;
    height: auto;
    display: block;
}

.offer-card__details {
    padding: 20px 30px 20px;
    border-bottom: 1px solid #D4D4D4;
    text-align: center;
    flex-grow: 1;
    height: 100%;
}

.offer-card__title {
    font-size: 22px;
    margin-bottom: 0;
}

.offer-card__overview {
    font-size: 14px;
    color: var(--primary-color)
}

.offer-card__overview span {
    color: var(--secondary-color)
}

.offer-card__price {
    padding: 20px 30px;
    text-align: center;
}

.offer-card__price-full {
    font-size: 22px;
    font-weight: 600;
}

.offer-card__price-full small {
    font-size: 13px;
}

.offer-card__price-lease {
    color: var(--primary-color)
}

.offer-card__price p:first-child {
    margin-bottom: 0;
}

.offer-card__price p:last-of-type {
    margin: 0;
}

.offer-card__cta {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 30px 30px;
}

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


.offer-card .swiper-pagination-bullet {
    opacity: 1;
    background: #ffffff;
}

.offer-card .swiper-pagination-bullet-active {
    background: var(--primary-color);
}
.offers-overview__page {
    margin-top: 45px;
    margin-bottom: 80px;
}

.offers-overview__main {
    width: calc(100% - (30px + 290px));
}

@media (max-width: 991px) {
    .offers-overview__main {
        width: 100%;
    }
}

.offers-overview__list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 15px;
    margin-top: 30px;
}

.offers-overview__list .offer-card {
    width: calc((100% - (15px * 2)) / 3);
}

@media (max-width: 1199px) {
    .offers-overview__list .offer-card {
        width: calc((100% - (15px * 1)) / 2);
    }
}

@media (max-width: 545px) {
    .offers-overview__list .offer-card {
        width: 100%;
    }
}

.offers-overview__list .offer-card__details {
    padding: 10px 15px 10px;
}

.offers-overview__list .offer-card__cta {
    padding-bottom: 20px;
}

.offers-overview__list .offer-card__price {
    padding-top: 10px;
    padding-bottom: 15px;
}

.offers-overview__list .offer-card__price-full {
    font-size: 20px;
}

.offers-overview__inner {
    display: flex;
    gap: 30px;
}

@media (max-width: 991px) {
    .offers-overview__inner {
        flex-wrap: wrap;
        gap: 15px;
    }
}

.offers-overview__inner.loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.offers-overview__filter {
    width: 290px;
    will-change: min-height;
}

@media (max-width: 991px) {
    .offers-overview__filter {
        width: 100%;
    }
}

/** Templates **/
.body-container--contact .hs-responsive-embed-wrapper.hs-responsive-embed {
    width: 100% !important;
    max-width: 100% !important;
}

.body-container--contact .hs_cos_wrapper_type_rich_text ul {
    padding: 0;
    margin-bottom: 45px;
    list-style: none;
}

.body-container--contact .hs_cos_wrapper_type_rich_text ul li {
    margin-bottom: 15px;
}

.body-container--contact .hs_cos_wrapper_type_rich_text ul li a:hover {
    text-decoration: underline;
}

.body-container--contact .hs_cos_wrapper_type_rich_text ul li a[href*="tel"],
.body-container--contact .hs_cos_wrapper_type_rich_text ul li a[href*="mailto"] {
    position: relative;
    padding-left: 30px;
    color: var(--secondary-color);
}

.body-container--contact .hs_cos_wrapper_type_rich_text ul li a::before {
    position: absolute;
    left: 0;
}

.body-container--contact .hs_cos_wrapper_type_rich_text ul li a[href*="tel"]::before {
    content: url('https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/phone-icon--green.svg');
}

.body-container--contact .hs_cos_wrapper_type_rich_text ul li a[href*="mailto"]::before {
    content: url('https://146362769.fs1.hubspotusercontent-eu1.net/hubfs/146362769/raw_assets/public/autodaan-theme/images/email-icon--green.svg');
}

body [data-hsfc-id=Renderer] .hsfc-RichText p,
body [data-hsfc-id=Renderer] .hsfc-FieldLabel{
  font-family: 'ITC Avant Garde Gothic' !important;
}
.body-container--appointment iframe {
    border: none;
    margin: 45px auto !important;
    max-width: 1240px;
    width: 100%;
}