:root {

  /* ============ Color ============ */

  --capti-color--primary: #0b73eb;
  --capti-color--secondary: #f0f0f0;

  --capti-color--brand-brand: #0B73EB;
  --capti-color--brand-violet: #bb6bd9;
  --capti-color--brand-red: #EB5757;
  --capti-color--brand-orange: #F2994A;
  --capti-color--brand-green: #49834F;

  --capti-color--white: #fff;
  --capti-color--neutrual-100: #f0f5fa;

  --capti-color-rgb--primary: 11, 115, 235;

  /* ------------ Outline ------------ */
  --capti-color--outline-medium: #b8c5d3;
  --capti-color--outline-light: #e4eaf2;
  --capti-color--outline-brand: var(--capti-color--primary);
  --capti-color--outline-dark: #98a8b9;

  /* ------------ Text ------------ */
  --capti-color--text-primary: #05070a;
  --capti-color--text-secondary: #495A6E;
  --capti-color--text-color: var(--capti-color--primary);
  --capti-color--text-on-color: #fff;
  --capti-color--text-disabled: #98a8b9;

  /* ------------ Background ------------ */
  --capti-color--background-default: #fff;
  --capti-color--background-brand: var(--capti-color--primary);


  /* ============ Layout ============ */

  --capti-layout--container-max-width: 1144px;
  --capti-layout--container-padding-x: 20px;


  /* ============ Typography ============ */

  /* ------------ Font-Family ------------ */
  --capti-font-family--title: "Space Grotesk", Arial, sans-serif;
  --capti-font-family--body: "IBM Plex Sans", Arial, sans-serif;
  --capti-typography--font-family--title: "Space Grotesk", Arial, sans-serif;
  --capti-typography--font-family--body: "IBM Plex Sans", Arial, sans-serif;

  /* H1 */
  --capti-typography--h1-font-size: 64px;
  --capti-typography--h1-line-height: 78px;
  --capti-typography--h1-font-weight: 700;

  --capti-typography--h1-font-size--mobile: 44px;
  --capti-typography--h1-line-height--mobile: 56px;
  --capti-typography--h1-font-weight--mobile: 700;

  /* H2 */
  --capti-typography--h2-font-size: 48px;
  --capti-typography--h2-line-height: 54px;
  --capti-typography--h2-font-weight: 700;

  --capti-typography--h2-font-size--mobile: 36px;
  --capti-typography--h2-line-height--mobile: 44px;
  --capti-typography--h2-font-weight--mobile: 700;

  /* H3 */
  --capti-typography--h3-font-size: 32px;
  --capti-typography--h3-line-height: 40px;
  --capti-typography--h3-font-weight: 700;

  --capti-typography--h3-font-size--mobile: 32px;
  --capti-typography--h3-line-height--mobile: 40px;
  --capti-typography--h3-font-weight--mobile: 700;

  /* H4 */
  --capti-typography--h4-font-size: 28px;
  --capti-typography--h4-line-height: 34px;
  --capti-typography--h4-font-weight: 700;

  --capti-typography--h4-font-size--mobile: 26px;
  --capti-typography--h4-line-height--mobile: 32px;
  --capti-typography--h4-font-weight--mobile: 700;

  /* H5 */
  --capti-typography--h5-font-size: 24px;
  --capti-typography--h5-line-height: 28px;
  --capti-typography--h5-font-weight: 700;

  --capti-typography--h5-font-size--mobile: 20px;
  --capti-typography--h5-line-height--mobile: 24px;
  --capti-typography--h5-font-weight--mobile: 700;

  /* H6 */
  --capti-typography--h6-font-size: 20px;
  --capti-typography--h6-line-height: 24px;
  --capti-typography--h6-font-weight: 700;

  --capti-typography--h6-font-size--mobile: 16px;
  --capti-typography--h6-line-height--mobile: 24px;
  --capti-typography--h6-font-weight--mobile: 700;

  /* Quote */
  --capti-typography--quote-font-size: 24px;
  --capti-typography--quote-line-height: 28px;
  --capti-typography--quote-font-weight: 400;

  --capti-typography--quote-font-size--mobile: 20px;
  --capti-typography--quote-line-height--mobile: 28px;
  --capti-typography--quote-font-weight--mobile: 400;

  /* subtext */
  --capti-typography--subtext-font-size: 12px;
  --capti-typography--subtext-line-height: 20px;
  --capti-typography--subtext-weight: 400;
  --capti-typography--subtext-font-style: italic;

  /* ------------ Nav ------------ */
  /* Nav-1 */
  --capti-typography--nav-1-font-size: 18px;
  --capti-typography--nav-1-line-height: 24px;
  --capti-typography--nav-1-weight: 500;

  --capti-typography--nav-1-font-size--mobile: 18px;
  --capti-typography--nav-1-line-height--mobile: 24px;
  --capti-typography--nav-1-weight--mobile: 500;

  /* Nav-2 */
  --capti-typography--nav-2-font-size: 14px;
  --capti-typography--nav-2-line-height: 20px;
  --capti-typography--nav-2-weight: 500;


  --capti-typography--nav-2-font-size--mobile: 14px;
  --capti-typography--nav-2-line-height--mobile: 20px;
  --capti-typography--nav-2-weight--mobile: 500;

  /* ------------ Body ------------ */
  /* Body-L */
  --capti-typography--body-l-font-size: 20px;
  --capti-typography--body-l-line-height: 28px;
  --capti-typography--body-l-weight: 400;

  --capti-typography--body-l-font-size--mobile: 18px;
  --capti-typography--body-l-line-height--mobile: 24px;
  --capti-typography--body-l-weight--mobile: 400;

  /* Body-M */
  --capti-typography--body-m-font-size: 18px;
  --capti-typography--body-m-line-height: 24px;
  --capti-typography--body-m-weight: 400;

  --capti-typography--body-m-font-size--mobile: 16px;
  --capti-typography--body-m-line-height--mobile: 22px;
  --capti-typography--body-m-weight--mobile: 400;

  /* Body-S */
  --capti-typography--body-s-font-size: 16px;
  --capti-typography--body-s-line-height: 20px;
  --capti-typography--body-s-weight: 400;

  --capti-typography--body-s-font-size--mobile: 14px;
  --capti-typography--body-s-line-height--mobile: 20px;
  --capti-typography--body-s-weight--mobile: 400;

  /* ------------ Button ------------ */
  /* Button-L */
  --capti-typography--button-l-font-size: 20px;
  --capti-typography--button-l-line-height: 28px;
  --capti-typography--button-l-weight-bold: 700;

  /* Button-S */
  --capti-typography--button-s-font-size: 16px;
  --capti-typography--button-s-line-height: 18px;
  --capti-typography--button-s-weight-bold: 700;

  /* =========================== ============================= */

  --Neutral-700: #495A6E;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/capti-site/themes/capti/new/fonts/zYXxKVElMYYaJe8bpLHnCwDKhdTEG46kmUZQCX598fQbGYrYALZg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/capti-site/themes/capti/new/fonts/zYXxKVElMYYaJe8bpLHnCwDKhdTEG46kmUZQCX598fQbGYTYAA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/capti-site/themes/capti/new/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxQKYbABA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/capti-site/themes/capti/new/fonts/zYXzKVElMYYaJe8bpLHnCwDKr932-G7dytD-Dmu1syxeKYY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/capti-site/themes/capti/new/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPb94C-s0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/capti-site/themes/capti/new/fonts/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

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

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

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

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, 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;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

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

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 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;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

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

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 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, IE 10+, and Firefox.
 */

details {
  display: block;
}

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

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* ==========================================================================
   GLOBAL FOCUS STYLES - WCAG 2.1 AA Compliance
   ========================================================================== */

/* Remove default browser focus outline for all elements */
*:focus {
  outline: none;
}

/* Focus-visible styles for keyboard navigation (modern browsers) */
*:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Fallback for older browsers that don't support focus-visible */
.js-focus-visible-polyfill {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Specific focus styles for different element types */
button:focus-visible,
button.js-focus-visible-polyfill {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
input.js-focus-visible-polyfill,
textarea.js-focus-visible-polyfill,
select.js-focus-visible-polyfill {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-color: #2563eb;
}

a:focus-visible,
a.js-focus-visible-polyfill {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  *:focus-visible,
  .js-focus-visible-polyfill {
    outline: 3px solid currentColor;
    outline-offset: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *:focus-visible,
  .js-focus-visible-polyfill {
    transition: none;
  }
}

/* ==========================================================================
   END GLOBAL FOCUS STYLES
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--capti-font-family--body), sans-serif;
  margin: 0;
  background-color: #fff;
  overflow-x: clip;
}

/* Skip to main content link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--capti-color--text-primary);
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
  border-radius: 4px;
  font-weight: 600;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 6px;
}


/* ============ Typography ============ */

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--capti-typography--font-family--title);
  color: var(--capti-color--text-primary);
  margin: 0;
}

.quote,
.nav-1,
.nav-2,
.subtext,
.body-l,
.body-m,
.body-s,
.button-l,
.button-s {
  font-family: var(--capti-font-family--body);
  color: var(--capti-color--text-primary);
  margin: 0;
}

.h1 {
  font-size: var(--capti-typography--h1-font-size);
  line-height: var(--capti-typography--h1-line-height);
  font-weight: var(--capti-typography--h1-font-weight);
}

.h2 {
  font-size: var(--capti-typography--h2-font-size);
  line-height: var(--capti-typography--h2-line-height);
  font-weight: var(--capti-typography--h2-font-weight);
}


.h3 {
  font-size: var(--capti-typography--h3-font-size);
  line-height: var(--capti-typography--h3-line-height);
  font-weight: var(--capti-typography--h3-font-weight);
}

.h4 {
  font-size: var(--capti-typography--h4-font-size);
  line-height: var(--capti-typography--h4-line-height);
  font-weight: var(--capti-typography--h4-font-weight);
}

.h5 {
  font-size: var(--capti-typography--h5-font-size);
  line-height: var(--capti-typography--h5-line-height);
  font-weight: var(--capti-typography--h5-font-weight);
}

.h6 {
  font-size: var(--capti-typography--h6-font-size);
  line-height: var(--capti-typography--h6-line-height);
  font-weight: var(--capti-typography--h6-font-weight);
}

.quote {
  font-size: var(--capti-typography--quote-font-size);
  line-height: var(--capti-typography--quote-line-height);
  font-weight: var(--capti-typography--quote-font-weight);
}

.nav-1 {
  font-size: var(--capti-typography--nav-1-font-size);
  line-height: var(--capti-typography--nav-1-line-height);
  font-weight: var(--capti-typography--nav-1-weight);
}

.nav-2 {
  font-size: var(--capti-typography--nav-2-font-size);
  line-height: var(--capti-typography--nav-2-line-height);
  font-weight: var(--capti-typography--nav-2-weight);
}

.subtext {
  font-size: var(--capti-typography--subtext-font-size);
  line-height: var(--capti-typography--subtext-line-height);
  font-weight: var(--capti-typography--subtext-weight);
  font-style: var(--capti-typography--subtext-font-style);
}


/* ------------ Typography Body ------------ */

.body-l {
  font-size: var(--capti-typography--body-l-font-size);
  line-height: var(--capti-typography--body-l-line-height);
  font-weight: var(--capti-typography--body-l-weight);
}

.body-m {
  font-size: var(--capti-typography--body-m-font-size);
  line-height: var(--capti-typography--body-m-line-height);
  font-weight: var(--capti-typography--body-m-weight);
}

.body-s {
  font-size: var(--capti-typography--body-s-font-size);
  line-height: var(--capti-typography--body-s-line-height);
  font-weight: var(--capti-typography--body-s-weight);
}

/* ------------ Typography Button ------------ */

.button-l {
  font-size: var(--capti-typography--button-l-font-size);
  line-height: var(--capti-typography--button-l-line-height);
  font-weight: var(--capti-typography--button-l-weight-bold);
}

.button-s {
  font-size: var(--capti-typography--button-s-font-size);
  line-height: var(--capti-typography--button-s-line-height);
  font-weight: var(--capti-typography--button-s-weight-bold);
}

@media (max-width: 600px) {

  .h1 {
    font-size: var(--capti-typography--h1-font-size--mobile);
    line-height: var(--capti-typography--h1-line-height--mobile);
    font-weight: var(--capti-typography--h1-font-weight--mobile);
  }


  .h2 {
    font-size: var(--capti-typography--h2-font-size--mobile);
    line-height: var(--capti-typography--h2-line-height--mobile);
    font-weight: var(--capti-typography--h2-font-weight--mobile);
  }

  .h3 {
    font-size: var(--capti-typography--h3-font-size--mobile);
    line-height: var(--capti-typography--h3-line-height--mobile);
    font-weight: var(--capti-typography--h3-font-weight--mobile);
  }

  .h4 {
    font-size: var(--capti-typography--h4-font-size--mobile);
    line-height: var(--capti-typography--h4-line-height--mobile);
    font-weight: var(--capti-typography--h4-font-weight--mobile);
  }

  .h5 {
    font-size: var(--capti-typography--h5-font-size--mobile);
    line-height: var(--capti-typography--h5-line-height--mobile);
    font-weight: var(--capti-typography--h5-font-weight--mobile);
  }

  .h6 {
    font-size: var(--capti-typography--h6-font-size--mobile);
    line-height: var(--capti-typography--h6-line-height--mobile);
    font-weight: var(--capti-typography--h6-font-weight--mobile);
  }

  .quote {
    font-size: var(--capti-typography--quote-font-size--mobile);
    line-height: var(--capti-typography--quote-line-height--mobile);
    font-weight: var(--capti-typography--quote-font-weight--mobile);
  }

  .nav-1 {
    font-size: var(--capti-typography--nav-1-font-size--mobile);
    line-height: var(--capti-typography--nav-1-line-height--mobile);
    font-weight: var(--capti-typography--nav-1-weight--mobile);
  }

  .nav-2 {
    font-size: var(--capti-typography--nav-2-font-size--mobile);
    line-height: var(--capti-typography--nav-2-line-height--mobile);
    font-weight: var(--capti-typography--nav-2-weight--mobile);
  }

  /* ------------ Typography Body ------------ */

  .body-l {
    font-size: var(--capti-typography--body-l-font-size--mobile);
    line-height: var(--capti-typography--body-l-line-height--mobile);
    font-weight: var(--capti-typography--body-l-weight--mobile);
  }

  .body-m {
    font-size: var(--capti-typography--body-m-font-size--mobile);
    line-height: var(--capti-typography--body-m-line-height--mobile);
    font-weight: var(--capti-typography--body-m-weight--mobile);
  }

  .body-s {
    font-size: var(--capti-typography--body-s-font-size--mobile);
    line-height: var(--capti-typography--body-s-line-height--mobile);
    font-weight: var(--capti-typography--body-s-weight--mobile);
  }
}

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


.svg-white>svg>path {
  fill: var(--capti-color--white);
}


/* ============ Link ============ */

.link {
  color: var(--capti-color--text-color);
}

.link:hover {
  color: var(--capti-color--brand-violet);
}

.link:hover svg path {
  fill: var(--capti-color--brand-violet);
}

.link--underlined {
  text-decoration: underline;
}

/* Disabled links */
.disabled a {
  color: var(--capti-color--text-disabled) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.7;
}

.disabled a:hover {
  text-decoration: none !important;
}


/* ============ template ============ */

/* Ensure all elements use border-box for consistent sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}


#main-content {
  overflow-x: clip;
  overflow-y: visible;
}

/* Add proper width constraints and centering for the container */
.container {
  max-width: var(--capti-layout--container-max-width);
  padding: 0 var(--capti-layout--container-padding-x);
  margin: 0 auto;
  /* Center the container horizontally */
  padding: 0 16px;
  /* Add horizontal padding for smaller screens */
  width: 100%;
  /* Ensure the container spans the full width of its parent */
}

/* Ensure sections do not overflow the container */
section {
  width: 100%;
  /* Ensure sections do not exceed the container width */
}

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0 -16px;
}

.col {
  padding: 0 16px;
}

/* ============ Additional ============ !!!!!!!!!!!!!!!!!!!!!!!!  TODO: !!!!!!!!!!!!!!!!!!!!!!!!! */

.mt16 {
  margin-top: 16px;
}

.mt-12 {
  margin-top: 12px;
}

.mr-auto {
  margin-right: auto;
}

.mr-4 {
  margin-right: 4px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-12 {
  margin-bottom: 12px;
}

.ml_-12 {
  margin-left: -12px;
}

.mb_-4 {
  margin-bottom: -4px;
}


.height-1024 {
  height: 1024px;
}

.height-380 {
  height: 380px;
}

.w-100 {
  width: 100%;
}


.hide {
  display: none;
}

/* ========================= accordion ========================== */

.accordion {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-template-areas: "text image";
  align-self: stretch;
  gap: 80px;
}

.accordion--revert {
  grid-template-areas: "image text";
  grid-template-columns: 3fr 2fr;
}

.accordion--revert .accordion__text-blcok {
  grid-area: text;
}

.accordion--revert .accordion__image {
  grid-area: image;
}

.accordion__text-blcok {
  display: flex;
  max-width: 592px;
  padding: var(--Primitives-16, 16px) 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  flex: 1 0 0;
  grid-area: text;
}

.accordion__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Primitives-16, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) {

  .accordion,
  .accordion--revert {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "image";
    margin: 80px 0px 0px;
    gap: 20px;
  }

  .accordion h2 {
    text-align: center;
  }

  .accordion__text-blcok {
    gap: 32px;
    max-width: 100%;
  }
}

.accordion__image {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: image;
}

.accordion__image img {
  transition: opacity 0.3s ease-in-out;
  max-width: 448px;
  width: 100%;
  height: auto;
}

.accordion-header {
  display: flex;
  gap: 12px;
  background: none;
  border: none;
  color: var(--capti-color--text-color);
  text-align: left;
  padding: 0;
  cursor: pointer;
  transition: color 0.3s ease;
}

.accordion-item__header-icon {
  height: 36px;
  width: 36px;
}

.accordion-item__header-icon svg {
  height: 36px;
  width: 36px;
}

.accordion-item .accordion-item__header-icon {
  transition: transform 0.3s ease;
}

.accordion-item.open .accordion-item__header-icon {
  transform: rotateZ(135deg);
  transition: transform 0.3s ease;
}

.accordion-item.open .accordion-item__header-icon>svg>path {
  fill: var(--capti-color--text-primary);
}

.accordion-item.open .accordion-header {
  color: var(--capti-color--text-primary);
}

.accordion-item.open .accordion-header:hover {
  text-decoration: unset;
}

.accordion-item.open .accordion-body {
  max-height: 1000px;
  /* Достатньо велика висота для плавного відкриття */
}

.accordion-body p {
  margin: 16px 0;
}

/* Removing the hover underline effect */
/* .accordion-header:hover {
  text-decoration: underline;
} */

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.accordion-body.open {
  max-height: calc(1000px + 32px);
  min-height: calc(254px + 32px);
}

.assertion {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: 12px;
  /*max-width: 552px;*/
  /*min-width: 500px;*/
  padding: 12px;
  border-radius: 24px;
  border: 1px solid var(--capti-color--outline-medium, #B8C5D3);
}

.block-image-title-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "text image"; 
    gap: 80px;
    align-items: center;
}

.block-image-title-list--reverse {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "image text"; 
}

.block-image-title-list__text-block {
    display: flex;
    flex-direction: column;
    gap: 40px;
    grid-area: text; 
}

.block-image-title-list__image {
    grid-area: image;
}

.block-image-title-list__list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (max-width: 600px) {
    .block-image-title-list {
        grid-template-columns: 1fr;
        grid-template-areas:
            "text"
            "image"; 
    }
}
.bullet-point-subtext {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.bullet-point-subtext__text-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bullet-point-subtext__title {
  font-size: var(--capti-typography--h5-font-size);
  line-height: var(--capti-typography--h5-line-height);
  font-weight: var(--capti-typography--h5-font-weight);
}

.bullet-point-subtext__subtitle {
  font-size: var(--capti-typography--body-m-font-size);
  line-height: var(--capti-typography--body-m-line-height);
  font-weight: var(--capti-typography--body-m-font-weight);
}


@media (max-width: 600px) {

  .bullet-point-subtext__title {
    font-size: var(--capti-typography--h6-font-size);
    line-height: var(--capti-typography--h6-line-height);
    font-weight: var(--capti-typography--h6-font-weight);
  }

  .bullet-point-subtext__subtitle {
    font-size: var(--capti-typography--body-s-font-size);
    line-height: var(--capti-typography--body-s-line-height);
    font-weight: var(--capti-typography--body-s-font-weight);
  }
}

.bullet-point-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 352px;
  margin: 0 auto;
}

.bullet-point-vertical__text-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bullet-point-vertical__text-block .h5 {
  margin: 0;
  text-align: center;
}

.bullet-point-vertical__text-block p {
  margin: 0;
  text-align: center;
}

.bullet-point {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.bullet-point__icon {
  width: 36px;
  height: 36px;
}

.bullet-point__text {
  margin: 0;
}

.bullet-point.bullet-point--small .bullet-point__text-block p {
  margin: 0;
}

.bullet-point--56 {
  justify-content: start;
  align-items: flex-start;
}

.button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 8px 32px;
  border-radius: 32px;
  border: none;
  font-size: var(--capti-typography--button-l-font-size);
  line-height: var(--capti-typography--button-l-line-height);
  font-weight: var(--capti-typography--button-l-weight-bold);
  font-family: var(--capti-typography--button-l-font-family);
  overflow: hidden;
  text-decoration: none;
  gap: 8px;
  cursor: pointer;
  text-wrap: nowrap;
}

.button--primary {
  color: #fff;
  background-color: var(--capti-color--outline-brand);
}

.button--primary:hover {
  background-color: var(--capti-color--outline-brand);
}

.button--primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.16;
  border: 1px solid var(--capti-color--outline-brand);
  border-radius: 32px;
  transition: left 0.3s ease-in-out;
}

.button--primary:hover::before {
  left: 0;
}

.button--primary-white {
  color: var(--capti-color--outline-brand);
  background-color: white;
}

.button--primary-white:hover {
  background-color: white;
}

.button--primary-white::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: var(--capti-color--outline-brand);
  opacity: 0.16;
  border: 1px solid white;
  border-radius: 32px;
  transition: left 0.3s ease-in-out;
}

.button--primary-white:hover::before {
  left: 0;
}

.button--secondary {
  color: var(--capti-color--text-color);
  border: 2px solid var(--capti-color--outline-brand);
  background-color: transparent;
}

.button--secondary:hover {
  background-color: transparent;
}

.button--secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: var(--capti-color--background-brand);
  opacity: 0.16;
  border: 1px solid var(--capti-color--background-brand);
  border-radius: 32px;
  transition: left 0.3s ease-in-out;
}

.button--secondary:hover::before {
  left: 0;
}

.button--secondary-white {
  color: white;
  border: 2px solid white;
  background-color: transparent;
}

.button--secondary-white:hover {
  background-color: transparent;
}

.button--secondary-white::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.16;
  border: 1px solid white;
  border-radius: 32px;
  transition: left 0.3s ease-in-out;
}

.button--secondary-white:hover::before {
  left: 0;
}

.button--big {
  justify-content: center;
  align-items: center;
  height: 54px;
  padding: 8px 32px;
  font-size: var(--capti-typography--button-l-font-size);
  line-height: var(--capti-typography--button-l-line-height);
  font-weight: var(--capti-typography--button-l-weight-bold);
  font-family: var(--capti-typography--button-l-font-family);
}


.button--small {
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 8px 24px;
  font-size: var(--capti-typography--button-s-font-size);
  line-height: var(--capti-typography--button-s-line-height);
  font-weight: var(--capti-typography--button-s-weight-bold);
  font-family: var(--capti-typography--button-s-font-family);
}

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

.button--fit-content-width {
  width: fit-content;
}

.button--play-video {
  width: 100px;
  height: 100px;
  padding: 36px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 64px;
  border: 1px solid var(--Outline-Light, #E4EAF2);
  background: rgba(255, 255, 255, 0.80);
}

.button--play-video svg {
  padding-left: 8px;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.chip {
  display: flex;
  padding: var(--Primitives-8, 8px) var(--Primitives-12, 12px);
  justify-content: center;
  align-items: center;
  gap: var(--Primitives-8, 8px);
  border-radius: var(--R-big, 32px);
  width: fit-content;
}

.chip--green {
  color: var(--capti-color--brand-green);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.88) 100%), var(--Brand-Green, #49834F);
}

.chip--green svg path {
  fill: var(--capti-color--brand-green);
}

.chip--red {
  color: var(--capti-color--brand-red);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.88) 100%), var(--Brand-Red, #EB5757);
}

.chip--red svg path {
  fill: var(--capti-color--brand-red);
}

.chip--orange {
  color: var(--capti-color--brand-orange);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.88) 100%), var(--Brand-Orange, #F2994A);
}

.chip--orange svg path {
  fill: var(--capti-color--brand-orange);
}

.chip--violet {
  color: var(--capti-color--brand-violet);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.88) 100%), var(--Brand-Violet, #9B51E0);
}

.chip--violet svg path {
  fill: var(--capti-color--brand-violet);
}

.chip--blue {
  color: var(--capti-color--brand-brand);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.88) 100%), var(--Brand-Blue, #0B73EB);
}

.chip--blue svg path {
  fill: var(--capti-color--brand-brand);
}

.chip--transparent {
  background: transparent;
  border: 1px solid var(--capti-color--outline-dark, #98A8B9);
  color: var(--capti-color--text-secondary, #495A6E);
}

.chip--green,
.chip--red,
.chip--orange,
.chip--violet,
.chip--blue {
  font-family: var(--Font-Body, "IBM Plex Sans");
  font-size: var(--Primitives-16, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  /* 125% */
}

.faq-question {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: 32px 24px 32px 32px;
  border-radius: 24px;
  border: 1px solid var(--capti-color--outline-medium);
}

.faq-question__header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.faq-question__header-text-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-question__question {
  flex-grow: 1;
}

.faq-question__content-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  transition: all 0.3s ease;
}

.faq-question__content-wrap.open {
  grid-template-rows: 1fr;
  margin-top: 24px;
}

.faq-question__content {
  overflow: hidden;
}

.faq-question__content p {
  margin: 0;
}

.faq-question__icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.faq-question__icon.open {
  transform: rotate(180deg);
}

.faq-question__path {
  opacity: 0;
  transition: opacity 0.3s ease;
  fill: #0B73EB;
  transition: fill 0.3s ease;
}

.faq-question__path--plus {
  opacity: 1;
}

.faq-question__icon.open .faq-question__path--plus {
  opacity: 0;
}

.faq-question__icon.open .faq-question__path--minus {
  opacity: 1;
}

.faq-question__svg {
  width: 28px;
  height: 28px;
  transition: transform 0.3s ease;
}

/**
 * MailChimp Form Component Styles
 * WCAG 2.1 AA Compliant Implementation with Progressive Disclosure
 * 
 * This component handles the MailChimp subscription form that appears 
 * in articles and on the main page newsletter section.
 * 
 * Features:
 * - Progressive disclosure: Email field first, then additional fields on interaction
 * - Email validation with WCAG-compliant error messaging
 * - Screen reader announcements for all state changes
 * - Respects prefers-reduced-motion
 * - Full keyboard accessibility
 * - Focus management
 */

/* ================================= Form Container ================================= */

.sing-up__form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "email"
    "additional-fields"
    "subscribe";
  gap: 20px;
  align-items: start;
  justify-content: center;
}

.sing-up__input-block--email {
  grid-area: email;
}

.sing-up__additional-fields {
  grid-area: additional-fields;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "firs last"
    "position position"
    "school school"
    "state state";
  gap: 20px;
}

.sing-up__input-block--firs-name {
  grid-area: firs;
}

.sing-up__input-block--last-name {
  grid-area: last;
}

.sing-up__input-block--position {
  grid-area: position;
}

.sing-up__input-block--school {
  grid-area: school;
}

.sing-up__input-block--state {
  grid-area: state;
}

.sing-up__subscribe {
  grid-area: subscribe;
  margin: 0 auto;
}

.sing-up__br {
  display: block;
}

/* ================================= Input Fields ================================= */

.sing-up__input-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sing-up__form-input-label {
  margin: 0 16px;
}

.sing-up__form-input {
  display: flex;
  justify-content: center;
  height: 56px;
  padding: 12px 24px;
  align-items: center;
  gap: 8px;
  border-radius: 32px;
  border: 1px solid var(--Outline-Dark, #98a8b9);
  background: var(--Background-Default, #fff);
}

/* ================================= Progressive Form Enhancement ================================= */

/* Hide additional fields initially */
.sing-up__additional-fields {
  /* Initially hidden */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-20px);
  transition: max-height 0.4s cubic-bezier(0.4, 0.0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
    overflow 0s linear 0s; /* Immediate change to hidden */
}

/* Show additional fields when expanded */
.sing-up__additional-fields[aria-expanded="true"] {
  max-height: 1000px;
  /* Large enough to fit all fields */
  opacity: 1;
  transform: translateY(0);
  overflow: visible; /* Ensure focus outlines are not clipped */
  transition: max-height 0.4s cubic-bezier(0.4, 0.0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
    overflow 0s linear 0.4s; /* Delayed change to visible after animation */
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .sing-up__additional-fields {
    transition: none;
    transform: none;
  }

  .sing-up__additional-fields[aria-expanded="true"] {
    transform: none;
    overflow: visible; /* Immediately visible for reduced motion */
  }
}

/* Individual field animation */
.sing-up__additional-fields .sing-up__input-block {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.sing-up__additional-fields[aria-expanded="true"] .sing-up__input-block {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation for multiple fields */
.sing-up__additional-fields[aria-expanded="true"] .sing-up__input-block:nth-child(1) {
  transition-delay: 0.1s;
}

.sing-up__additional-fields[aria-expanded="true"] .sing-up__input-block:nth-child(2) {
  transition-delay: 0.15s;
}

.sing-up__additional-fields[aria-expanded="true"] .sing-up__input-block:nth-child(3) {
  transition-delay: 0.2s;
}

.sing-up__additional-fields[aria-expanded="true"] .sing-up__input-block:nth-child(4) {
  transition-delay: 0.25s;
}

.sing-up__additional-fields[aria-expanded="true"] .sing-up__input-block:nth-child(5) {
  transition-delay: 0.3s;
}

/* ================================= Error States ================================= */

/* Error message styles - friendly and informative */
.sing-up__error-message {
  display: none;
  margin-top: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  background-color: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #1e40af;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.sing-up__error-message:not(:empty) {
  display: block;
}

/* Input gentle guidance state */
.sing-up__form-input.error {
  border-color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.05);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.sing-up__form-input.error:focus {
  outline-color: #3b82f6;
  border-color: #1d4ed8;
}

/* ================================= Focus States ================================= */

/* Focus states for accessibility */
.sing-up__form-input:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-color: #2563eb;
}

.sing-up__subscribe:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* ================================= Loading States ================================= */

/* Loading state for submit button */
.sing-up__subscribe.loading {
  opacity: 0.7;
  cursor: not-allowed;
  position: relative;
}

.sing-up__subscribe.loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Success state for submit button */
.sing-up__subscribe.success {
  background-color: #10b981;
  border-color: #059669;
  color: white;
  cursor: default;
  opacity: 1;
}

.sing-up__subscribe.success:hover {
  background-color: #10b981;
  border-color: #059669;
}

/* Success state for form */
.sing-up__form.form-success {
  background-color: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ================================= Responsive Design ================================= */

@media (max-width: 600px) {
  .sing-up__form {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sing-up__additional-fields {
    grid-template-columns: 1fr;
    grid-template-areas:
      "firs"
      "last"
      "position"
      "school"
      "state";
    gap: 16px;
  }

  .sing-up__br {
    display: none;
  }

  /* Mobile progressive disclosure adjustments */
  .sing-up__additional-fields[aria-expanded="true"] .sing-up__input-block:nth-child(1) {
    transition-delay: 0.1s;
  }

  .sing-up__additional-fields[aria-expanded="true"] .sing-up__input-block:nth-child(2) {
    transition-delay: 0.12s;
  }

  .sing-up__additional-fields[aria-expanded="true"] .sing-up__input-block:nth-child(3) {
    transition-delay: 0.14s;
  }

  .sing-up__additional-fields[aria-expanded="true"] .sing-up__input-block:nth-child(4) {
    transition-delay: 0.16s;
  }

  .sing-up__additional-fields[aria-expanded="true"] .sing-up__input-block:nth-child(5) {
    transition-delay: 0.18s;
  }
}

@media (max-width: 460px) {
  .sing-up__form {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sing-up__additional-fields {
    gap: 12px;
  }
}

/* ================================= Accessibility ================================= */

/* Screen Reader Only */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Honeypot field for MailChimp form */
.field-shift.hidden {
  display: none;
}
/* ========================= Hero ========================== */

.hero-secondary {
  position: relative;
  background-color: rgba(var(--capti-color-rgb--primary), 0.13);
  overflow: hidden;
}

.hero-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 228px;
  height: 140px;
  background: url(/capti-site/themes/capti/new/images/bubble-top-right-mobile.svg) no-repeat right top;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

.hero-secondary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 379px;
  height: 684px;
  background: url(/capti-site/themes/capti/new/images/bubble-bottom-left-mobile.svg) no-repeat left top;
  background-size: contain;
  pointer-events: none;
}

@media (min-width: 900px) {
  .hero-secondary {
    min-height: 700px;
  }

  .hero-secondary::before {
    background-image: url(/capti-site/themes/capti/new/images/bubble-top-left.svg);
    width: 50%;
    height: auto;
    padding-bottom: 50%;
    left: 0;
    right: auto;
  }

  .hero-secondary::after {
    background-image: url(/capti-site/themes/capti/new/images/bubble-bottom-right.svg);
    background-size: cover;
    width: 600px;
    height: 600px;
    left: auto;
    right: 0;
  }
}

.hero-secondary__image-wrap {
  position: relative;
  isolation: isolate;
  margin-bottom: 36px;
}

.hero-secondary__image {
  position: relative;
  display: block;
}

.hero-secondary__image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: clamp(10%, 50vw, 50%) 50%;
}

@media (min-width: 900px) {
  .hero-secondary__image-wrap {
    width: 50%;
    transition: width 0.3s ease-in-out;
    margin-left: auto;
    margin-bottom: 0;
  }

  .hero-secondary__image {
    height: calc(100vh - 76px);
    min-height: 700px;
  }

  .hero-secondary__image img {
    height: 100%;
  }

  .hero-secondary .container {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
  }

  .hero-secondary__content {
    max-width: 60%;
  }
}

@media (min-width: 1200px) {
  .hero-secondary__image {
    height: calc(100vh - 84px);
  }

  .hero-secondary__content {
    max-width: 50%;
  }
}

.hero-secondary__content {
  position: relative;
  color: var(--capti-color--text-primary);
  z-index: 2;
}

.hero-secondary__title {
  color: var(--capti-color--text-primary);
  margin-bottom: 24px;
}

.hero-secondary__title + .hero-secondary__subtitle {
  margin-bottom: 16px;
}

@media (min-width: 900px) {
  .hero-secondary__title {
    margin-bottom: 32px;
  }

  .hero-secondary__title + .hero-secondary__subtitle {
    margin-bottom: 24px;
  }
}

.hero-secondary__subtitle {
  color: var(--capti-color--text-primary);
  margin-bottom: 24px;
}

@media (min-width: 900px) {
  .hero-secondary__subtitle {
    margin-bottom: 56px;
  }
}

.hero-secondary__description {
  color: var(--capti-color--text-primary);
  margin-bottom: 48px;
}

@media (min-width: 900px) {
  .hero-secondary__description {
    margin-bottom: 0;
  }
}

.hero-secondary__list {
  margin: 16px 0 48px;
  padding-left: 40px;
}

.hero-secondary__list-item {
  position: relative;
  list-style: none;
}

.hero-secondary__list-item::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(/capti-site/themes/capti/new/images/circle_check.svg) no-repeat center center;
  background-size: contain;
  filter: drop-shadow(0 4px 12px rgba(11, 115, 235, 0.50));
  position: absolute;
  left: -42px;
  top: 0;
}

.hero-secondary__list-item + .hero-secondary__list-item {
  margin-top: 16px;
}

.hero-secondary__list-item p {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .hero-secondary__list {
    margin: 24px 0 0;
  }
}

/* ==================== Hero Secondary Variants ======================== */

.hero-secondary--variant .hero-secondary__image-wrap {
  margin-top: -10px;
}

.hero-secondary--variant .hero-secondary__image img {
  object-position: clamp(40%, 50vw, 50%) 50%;
}

@media (min-width: 900px) {
  .hero-secondary--variant .hero-secondary__image-wrap {
    margin-top: 0;
    width: 100%;
  }

  .hero-secondary--variant .hero-secondary__image img {
    object-position: calc(50% + 20vw) 50%;
  }
}

@media (min-width: 1450px) {
  .hero-secondary--variant .hero-secondary__image-wrap {
    width: clamp(70%, 75vw, 85%);
  }

  .hero-secondary--variant .hero-secondary__image img {
    object-position: clamp(10%, 50vw, 50%) 50%;
  }
}
.responsive-image {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}

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

.report-card {
    position: relative;
    display: flex;
    width: 100%;
    padding: 20px 24px 40px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    border-radius: 24px;
    background:
        radial-gradient(
            50% 40% at 50% 50%,
            rgba(11, 115, 235, 0.6) 0%,
            rgba(255, 255, 255, 0) 100%
        ) center 50px / 180px 180px no-repeat,
        linear-gradient(
            90deg,
            var(--Background-Brand, rgba(11, 115, 235, 0.16)) 0%,
            var(--Brand-Violet, rgba(187, 107, 217, 0.16)) 100%
        ),
        var(--Background-Default, #fff);
    overflow: hidden;
}
.report-card img {
    width: 160px;
    height: 160px;
    z-index: 10;
}

.report__title {
    margin-top: 24px;
    margin-bottom: 8px;
}

.report__description {
    margin: 0 0 16px;
    text-align: center;
}

.report-card__icon {
    gap: 8px;
    height: 24px;
}

.section-description-container {
    display: flex;
    max-width: 1120px;
    padding: 32px 40px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: var(--R-big, 32px);
    background: linear-gradient(90deg, var(--Background-Brand, rgba(11, 115, 235, 0.16)) 0%, var(--Brand-Violet, rgba(187, 107, 217, 0.16)) 100%), var(--Background-Default, #FFF);
}

@media (max-width: 600px) {
    .section-description-container {
        margin-left: -16px;
        margin-right: -16px;
        border-radius: 0;
    }
}

.see-also-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px 16px 16px;
  flex: 1 0 0;
  border-radius: 32px;
  border: 1px solid var(--capti-color--outline-medium);
}

.see-also-card__content {
  display: flex;
  align-items: center;
  gap: 24px;
}

.see-also-card .see-also-card__square-icon {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  border-radius: 16px;
}

.see-also-card .see-also-card__square-icon svg {
  top: 56%;
}

.see-also-card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.see-also-card__title {
  margin: 0;
}

.see-also-card__description {
  font-size: var(--capti-typography--body-m-font-size);
  font-weight: var(--capti-typography--body-m-font-weight);
  line-height: var(--capti-typography--body-m-line-height);
  margin: 0;
}

.see-also-card__description {
  font-size: var(--capti-typography--body-m-font-size);
  font-weight: var(--capti-typography--body-m-font-weight);
  line-height: var(--capti-typography--body-m-line-height);
  margin: 0;
}

.see-also-card__link {
  display: flex;
  justify-content: flex-end;
}

.see-also-card__more-icon {
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.see-also-card__more-icon svg {
  width: 36px;
  height: 36px;
}


@media (max-width: 600px) {

  .see-also-card {
    gap: 4px;
    padding: 20px;
  }


  .see-also-card .see-also-card__square-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }

  .see-also-card .see-also-card__square-icon svg {
    top: 59%;
  }

}

.service-card {
    display: flex;
    padding: var(--Primitives-32, 32px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Primitives-32, 32px);
    align-self: stretch;
    border-radius: 24px;
    border: 1px solid var(--capti-color--outline-medium);
}

.service-card__title-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    align-self: stretch;
}
.square-icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 20px;
  min-height: 20px;
  border-radius: var(--R-small, 8px);
  /*background: linear-gradient(0deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.90) 100%), var(--Background-Brand, #0B73EB); */
}

.square-icon img {
  width: 100%;
  height: 100%;
}

.square-icon__placeholder,
.square-icon__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
}

.square-icon svg {
  width: 100%;
  height: 100%;
}

.square-icon--36 {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
}

.square-icon--36 .square-icon__icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}

.square-icon--56 {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
}

.square-icon--56 .square-icon__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

.square-icon--72 {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  border-radius: 16px;
}

.square-icon--72 .square-icon__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
}

.square-icon--92 {
  width: 92px;
  height: 92px;
  min-width: 92px;
  min-height: 92px;
  border-radius: 24px;
}

.square-icon--92 .square-icon__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}

.square-icon--brand svg path {
  fill: var(--capti-color--brand-brand);
}

.square-icon--orange svg path {
  fill: var(--capti-color--brand-orange);
}

.square-icon--violet svg path {
  fill: var(--capti-color--brand-violet);
}

.square-icon--green svg path {
  fill: var(--capti-color--brand-green);
}

.square-icon--red svg path {
  fill: var(--capti-color--brand-red);
}

.square-icon--gray svg path {
  fill: var(--Neutral-700, #495A6E);
}

.subcategory {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  color: var(--capti-color--text-primary);
}

.subcategory a {
  color: var(--capti-color--text-primary);
  cursor: pointer;
  text-decoration: none;
  cursor: pointer;
}

.subcategory a:hover {
  color: var(--capti-color--text-color);
}

.subcategory:hover {
  color: var(--capti-color--text-color);
}

.subcategory--subtext {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  height: 58px;
  gap: 2px;
}

.subcategory--subtext:hover {
  color: var(--capti-color--text-primary);
}

.subcategory--subtext i {
  color: var(--capti-color--text-secondary);
}

.subcategory__subtext {
  color: var(--Text-Secondary, #495A6E);
  /* subtext */
  font-family: "IBM Plex Sans";
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  line-height: 20px;
  /* 166.667% */
}

.subcategory--small {
  height: 44px;
}

.subcategory--with-subtext {
  display: flex;
  flex-direction: column;
  height: fit-content;
  align-items: flex-start;
  padding-top: 12px;
}

@media (max-width: 1201px) {

  .subcategory {
    flex-direction: row !important;
    width: fit-content !important;
    border: none !important;
    height: 48px;
  }

  .subcategory a.nav {
    border: none !important;
    height: 48px !important;
  }

  .subcategory--with-subtext {
    flex-direction: row;
  }
}

.svg-wrap {
  display: flex;
  align-items: center;
  align-self: center;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background-color: #f0f0f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  height: 600px;
}

.testimonial-card.testimonial--first {
  grid-column: span 2;
}

.testimonial-card.testimonial--first .responsive-image {
  width: 100%;
}

.testimonial-card .responsive-image {
  height: 100%;
  width: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
}

.testimonial-card__image-container {
  position: relative;
  line-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.testimonial-card__image {
  display: flex;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  cursor: pointer;
  transition: transform 0.6s ease;
  transform-origin: center;
  transform: scale(1.01);
}

.testimonial-card__image:hover {
  transform: scale(1.08);
}

.testimonial-card__overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-self: stretch;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 256px;
  padding: 24px;
  box-sizing: border-box;
  gap: 16px;
  border-radius: 0px 0px 24px 24px;
  background: linear-gradient(180deg,
      var(--Background-Brand, rgba(11, 115, 235, 0.33)) 0%,
      var(--Brand-Violet, rgba(187, 107, 217, 0.33)) 100%),
    rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(calc(var(--sds-size-blur-100) / 2));
}

.testimonial-card__quote {
  font-family: var(--capti-font-family--body);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  color: var(--capti-color--white);
}

.testimonial-card__author-info {
  height: 64px;
}

.testimonial-card__author-name {
  display: block;
  font-weight: bold;
  font-family: var(--capti-font-family--body);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  color: var(--capti-color--white);
  margin-bottom: 6px;
}

.testimonial-card__author-title {
  display: block;
  font-size: 0.9em;
  opacity: 0.8;
  font-family: var(--capti-font-family--body);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  color: var(--capti-color--white);
}


@media (min-width: 992px) {
  .testimonials-page__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .testimonials-page__header {
    margin-bottom: 50px;
  }
}

@media (max-width: 767px) {

  .testimonial-card {
    flex: 0 0 85%;
    height: 460px;
    max-width: 320px;
    scroll-snap-align: center;
  }

  .testimonial-card__overlay {
    display: flex;
    height: 220px;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex-shrink: 0;
    align-self: stretch;
  }

  .testimonial-card__quote {
    font-family: var(--capti-font-family--body);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: var(--capti-color--white);
  }

  .testimonial-card__author-info {
    height: fit-content;
  }
}

.testimonial-video {
  position: relative;
}

.testimonial-video__player-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.9);
  padding: 20px;
  z-index: 1000;
}

.testimonial-video__close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

.testimonial-video__player {
  width: 560px;
  height: 315px;
}

.testimonial-video-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.testimonial-video-modal.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.testimonial-video-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.testimonial-video-modal__content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(75vw, 1200px);
  height: min(75vh, 675px);
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 767px) {
  .testimonial-video-modal__content {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(100%, 1200px);
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.testimonial-video-modal__player {
  width: 100%;
  height: 100%;
  background: #000;
  aspect-ratio: 16/9;
}

.testimonial-video-modal__close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  z-index: 10000;
}

.testimonial-video-modal__close:hover {
  opacity: 0.7;
}


@media (max-width: 767px) {
  .testimonial-video-modal__close {
    top: -120px;
  }
}


.John_R_Ploehs .testimonial-card__author-info {
  height: 84px;
}

.John_R_Ploehs .testimonial-card__quote {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Змінні анімації - можна легко налаштовувати */
:root {
  --avatar-transition-duration: 800ms;
  --testimonial-fade-duration: 400ms;
  /* Зменшуємо для швидшої зміни тексту */
  --opacity-transition-duration: 500ms;
  --scale-transition-duration: 300ms;
  --testimonial-container-transition: 500ms;
}

/* Основний контейнер слайдера */
.testimonial-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

/* Основний контейнер для зображень і тексту */
.slider-container {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.images-viewport {
  width: 112px;
  height: 60px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Трек з усіма зображеннями */
.images-track {
  display: flex;
  position: relative;
  /* Видаляємо початковий зсув, оскільки тепер центрування відбувається через justify-content */
  will-change: transform;
}

/* Поважаємо налаштування користувача щодо зменшення руху */
@media (prefers-reduced-motion: reduce) {
  .images-track {
    transition: none;
  }
}

/* Стилі для кнопок аватарів */
.avatar-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: opacity var(--opacity-transition-duration) ease;
  /* Плавний перехід для opacity всієї кнопки */
}

/* Накладання зображень */
.avatar-btn:not(:first-child) {
  margin-left: -16px;
  /* Накладання на 16px для 40px аватарів */
}

/* Зображення аватарів */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transform: scale(1);
  z-index: 1;
  transition: transform var(--scale-transition-duration) ease,
    box-shadow var(--scale-transition-duration) ease,
    z-index 0s var(--scale-transition-duration);
}

/* Поважаємо налаштування користувача щодо зменшення руху */
@media (prefers-reduced-motion: reduce) {
  .avatar {
    transition: none;
  }
}

/* Приховуємо зображення після четвертого (створюємо ефект кінця черги) */
.avatar-btn.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--opacity-transition-duration) ease;
}

/* Видимі елементи */
.avatar-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--opacity-transition-duration) ease;
}

/* Активний аватар (крайній правий видимий) */
.testimonial-slider .avatar-btn.active .avatar {
  transform: scale(1.1) !important;
  z-index: 10 !important;
  box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3) !important;
}

/* Неактивні аватари */
.testimonial-slider .avatar-btn:not(.active) .avatar {
  transform: scale(1) !important;
  z-index: 1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Фокус для accessibility */
.avatar-btn:focus-visible {
  outline: 2px solid #2c3e50;
  outline-offset: 4px;
  border-radius: 50%;
}

/* Контейнер для тексту відгуків */
.testimonial-text-container {
  flex: 1;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  transition: all var(--testimonial-container-transition) ease-in-out, transform var(--testimonial-container-transition) ease-in-out;
}

/* Елементи відгуків */
.testimonial-item {
  font-size: 16px;
  font-style: italic;
  color: #2c3e50;
  line-height: 20px;
  opacity: 1;
  transition: opacity var(--testimonial-fade-duration) ease-in-out;
}

.testimonial-item>p {
  padding: 0;
  margin: 0;
}

.testimonial-item.testimonial-hidden {
  opacity: 0;
}

/* Видаляємо testimonial-visible, оскільки за замовчуванням opacity: 1 */

/* Поважаємо налаштування користувача щодо зменшення руху */
@media (prefers-reduced-motion: reduce) {
  .testimonial-item {
    transition: none;
  }
}

/* =================== ВЕРТИКАЛЬНИЙ СЛАЙДЕР =================== */

/* Модифікатор для вертикального слайдера */
.testimonial-slider--vertical {
  max-width: 1240px;
  /* Менша ширина для вертикального варіанту */
}

.testimonial-slider--vertical .slider-container {
  flex-direction: column-reverse;
  gap: 6px;
  align-items: flex-end;
  /* Все притиснуто до правої сторони */
}

.testimonial-slider--vertical .testimonial-text-container {
  text-align: left;
  /* Текст притиснутий до лівого боку */
  align-self: flex-end;
}

.testimonial-slider--vertical .testimonial-text-container .testimonial-item p.quote {
  text-align: left;
  font-style: normal;
}

.testimonial-slider--vertical .images-viewport {
  align-self: flex-end;
  /* Притиснути до правої сторони */
  margin-right: 0;
  /* Видалити додатковий margin */
}

/* Респонсивність для вертикального слайдера */
@media (max-width: 768px) {
  .testimonial-slider--vertical {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .testimonial-slider--vertical .slider-container {
    gap: 16px;
  }

  .testimonial-slider--vertical .slider-container {
    align-items: center;
  }

  .testimonial-slider--vertical .testimonial-text-container {
    max-width: 100%;
    text-align: center;
    align-self: center;
    /* На мобільних пристроях центрувати */
  }

  .testimonial-slider--vertical .testimonial-text-container .testimonial-item {
    text-align: center;
    font-size: 1rem;
  }

  .testimonial-slider--vertical .images-viewport {
    align-self: center;
    /* На мобільних центрувати */
    margin-right: 24px;
  }
}
.vertical-bullet-points {
    display: grid;
    gap: 80px;
    margin: 120px 0px 0px;
}

.vertical-bullet-points__text-block {
    display: flex;
    flex-direction: column;
    gap: 32px;
    text-align: center;
}

.vertical-bullet-points__methods {
    display: grid ;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 32px;
}
.video-light-box {
  position: relative;
  grid-area: video;
  border: 2px solid #a7cae3;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  max-height: 300px;
  width: auto;
}

.video-light-box__button {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--Outline-Light, #E4EAF2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.80);
  cursor: pointer;
  pointer-events: none;
  padding: 20px;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.5s ease, box-shadow 0.5s ease;
  overflow: visible;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.video-light-box:hover .video-light-box__button {
  transform: translate(-50%, -50%) scale(1.1) translateZ(10px);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-light-box__button svg {
  pointer-events: none;
  padding-left: 8px;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
  transform: scale(1.1);
}

.video-light-box:hover .video-light-box__button svg {
  transform: scale(1.25);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.video-light-box__thumbnail-wrap {
  position: relative;
  grid-area: video;
  overflow: hidden;
  cursor: pointer;
  max-height: 300px;
  height: 300px;
  width: auto;
}

.video-light-box__thumbnail-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1f2057;
  opacity: 0.8;
  transition: opacity 0.6s ease;
}

.video-light-box:hover .video-light-box__thumbnail-wrap::after {
  opacity: 0.6;
}

.video-light-box__thumbnail {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
}

/*
 * Universal Video Player Modal Styles
 */
.video-player-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-player-modal.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.video-player-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.video-player-modal__content {
    position: relative;
    width: min(90vw, 1200px);
    z-index: 10000;
}

.video-player-modal__player-container {
    position: relative;
    width: 100%;
    background: #000;
    aspect-ratio: 16/9;
    padding-bottom: 56.25%; /* Fallback for browsers that don't support aspect-ratio */
    height: 0;
    overflow: hidden;
}

.video-player-modal__player-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* Place close button always in top-right of video */
.video-player-modal__player-container {
    position: relative;
}
.video-player-modal__close {
    position: absolute;
    top: -45px;
    right: 0;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    z-index: 10001;
    line-height: 1;
}

.video-player-modal__close:hover {
    opacity: 0.7;
}

.video-player-modal__close:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 4px;
    border-radius: 4px;
}

@media (max-width: 767px) {
    .video-player-modal__content {
        width: 100vw;
        height: auto;
    }
    .video-player-modal__close {
        top: -55px;
        right: 12px;
        z-index: 2;
    }
}

.book-opening {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.faq {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 120px 0;
}


.faq__title {
    font-size: var(--capti-typography--h2-font-size, 32px);
    line-height: var(--capti-typography--h2-line-height, 40px);
    font-weight: var(--capti-typography--h2-font-weight, 700);
    margin: 0;
}

.faq__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 736px;
}


@media (max-width: 768px) {
    .faq {
        margin: 40px 0;
    }

    .faq__title {
        font-size: 44px;
        line-height: 54px;
        font-weight: bold;
    }
}
footer {
  margin-top: 80px !important;
  background-color: var(--capti-color--background-default);
}

.footer__content {
  padding: 80px 0 80px;
  border-top: 1px solid var(--capti-color--outline-medium);
}

.footer__categories {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 28px;
  row-gap: 24px;
  align-items: start;
  margin-bottom: 40px;
}

@media (max-width: 1023px) {
  .footer__categories {
    grid-template-columns: 1fr;
  }

  .footer__categores--pair {
    display: flex;
    flex-direction: row;
    gap: 20px;
  }

  .footer__category {
    width: 100%;
  }

  .footer__category-list {
    padding: 0 !important;
  }

  .footer__category--about {
    margin-bottom: 84px;
  }
}

/*
@media (max-width: 623px) {
    .footer__categores--pair {
        flex-direction: column;
    }
}
    */

.footer__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.footer__column {
  flex: 1;
  padding: 0 10px;
}

.footer__category h4 {
  margin: 12px 0;
}

.footer__category-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 0 24px;
  padding-left: 0;
}

.footer__category-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}


.footer__category-link {
  color: var(--capti-color--text-primary);
  text-decoration: none;
  margin: 8px 0;
}

.footer__category-link:hover {
  color: var(--capti-color--text-color);
}

.footer__contact-us .button {
  padding: 8px 24px;
}

.footer__contact-us__description {
  color: var(--capti-color--text-secondary);
  font-size: var(--capti-typography--body-s-font-size);
  line-height: var(--capti-typography--body-s-line-height);
  margin: 0 0 16px;
}

.footer__contact-us__contacts {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

.footer__contact-us__contact {
  display: flex;
  height: 32px;
  align-items: center;
  align-self: stretch;
  gap: 12px;
  font-size: var(--capti-typography--body-s-font-size);
  line-height: var(--capti-typography--body-s-line-height);
  color: var(--capti-color--text-primary);
  text-decoration: none;
}


.footer__contact-us__contact svg path {
  fill: var(--capti-color--text-primary);
}

.footer__edtech-badge,
.footer__aicpa-badge,
.footer__essa-badge {
  position: absolute;
  bottom: 0;
  height: 88px;
  width: auto;
}

.footer__edtech-badge {
  left: 0;
}

.footer__aicpa-badge {
  left: 94px;
}

.footer__essa-badge {
  left: 188px;
}

@media (max-width:600px) {

  .footer__edtech-badge,
  .footer__aicpa-badge,
  .footer__essa-badge {
    height: 44px;
  }

  .footer__edtech-badge {
    left: 0;
  }

  .footer__aicpa-badge {
    left: 60px;
  }

  .footer__essa-badge {
    left: 120px;
  }
}

.footer__social {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  max-width: 256px;
  width: 100%;
}

.footer__social svg {
  height: 28px;
  width: 28px;
}

.footer__column--logo {
  display: flex;
  align-items: center;
}

.footer__column--logo img {
  height: 40px;
  margin-right: 10px;
}

.footer__column--links {
  display: flex;
  gap: 20px;
}

.footer__column--links a {
  color: #007bff;
  text-decoration: none;
}

.footer__column--links a:hover {
  text-decoration: underline;
}

.footer__copyright-logo img {
  height: 48px;
}

.footer__copyright {
  display: flex;
  flex-direction: column;
}


.footer__copyright-logo {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}

.footer__copyright-text {
  color: var(--capti-color--text-disabled);
  margin-bottom: 32px;
}

.footer__copyright-links {
  display: flex;
  align-items: left;
  gap: 32px;
}

.ConfirmCookie__dialog {
  position: fixed;
  z-index: 1000;
  max-width: 700px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  margin: 0 auto;
  padding: 16px 24px;
  border-radius: 16px;
  background-color: #0b72ea;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
  color: rgba(255, 255, 255, .9);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  transition: transform .2s linear
}

.ConfirmCookie__dialog,
.ConfirmCookie__dialog *,
.ConfirmCookie__dialog ::after,
.ConfirmCookie__dialog ::before {
  box-sizing: border-box
}

.ConfirmCookie__dialog--hidden {
  transform: translateY(500px)
}

.ConfirmCookie__message_paragraph {
  max-width: 470px
}

.ConfirmCookie__message_paragraph a::before,
.ConfirmCookie__message_paragraph span::before {
  content: attr(data-content)
}

.ConfirmCookie__message_paragraph a:link,
.ConfirmCookie__message_paragraph a:visited {
  color: #fff;
  text-decoration: underline
}

.ConfirmCookie__message_paragraph a:focus,
.ConfirmCookie__message_paragraph a:hover {
  color: #fff;
  text-decoration: none
}

.ConfirmCookie__agree-button {
  background-color: transparent;
  border: 2px solid #fff;
  border-radius: 30px;
  margin-top: 16px;
  width: 100%;
  padding: 13px 30px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  transition: background .3s, color .3s;
  cursor: pointer
}

.ConfirmCookie__agree-button:focus,
.ConfirmCookie__agree-button:hover {
  background-color: #fff;
  color: #0b72ea;
  outline: 0
}

@media (min-width:600px) {
  .ConfirmCookie__dialog {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px;
    column-gap: 16px;
    border-radius: 32px
  }

  .ConfirmCookie__agree-button {
    margin-top: 0;
    margin-left: auto;
    width: auto
  }
}

.gwt-DialogBox button:not([id*=Cancel]) {
  display: inline-block;
  background: none;
  border: 0;
  height: auto;
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 140%;
  color: #fff;
  -webkit-transition: all .2s ease;
  transition: all .2s ease
}

.header__logo-icon {
  height: 32px;
}

.header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  padding: 12px 48px;
  background-color: #fff;
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.075), 0 -2px 0 #fff;
}

.header__nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #fff;
}

.header__logo-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: 24px;
}

@media (min-width: 480px) {
  .header__logo-block {
    margin-right: 32px;
  }
}

@media (max-width: 1201px) {
  .header {
    padding: 8px 16px;
  }

  .header__logo {
    margin-right: auto;
  }

  .header__nav .header__ul {
    position: fixed !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 0px !important;
    top: 74px !important;
    right: 0px !important;
    left: 0px !important;
    background-color: #fff !important;
    width: 100% !important;
    max-height: calc(100vh - 74px) !important;
    overflow-y: auto !important;
    --header-height: 76px !important;
    height: calc(100vh - var(--header-height)) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  }

  .header__nav .header__ul--visible {
    padding-left: 16px;
    padding-right: 16px;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    overflow: hidden;
  }

  .header__nav .header__ul li {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    height: 76px !important;
    height: max-content !important;
    padding: 0 16px !important;
    /*    border-bottom: 2px solid var(--capti-color--outline-light) !important; */
    box-sizing: border-box !important;
  }

  .header__nav .header__ul li a:not(.button) {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    height: 76px !important;
    padding: 0 !important;
    margin: 0 16px !important;
  }

  /* Mobile styles for dropdown buttons */
  .header__nav .header__ul li button.header__button {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    height: 76px !important;
    padding: 0 !important;
    margin: 0 16px !important;
    background: none !important;
    border: none !important;
    text-align: left !important;
    cursor: pointer !important;
  }

  .header__nav .header__ul li button.header__button .header__button-icon {
    display: block !important;
  }

  .header__nav .header__ul li.subcategory a:not(.button) {
    height: 48px !important;
  }

  .header__nav .header__ul li.subcategory:not(.subcategory--subtext) {
    flex-direction: row !important;
    padding: 0 !important;
  }

  .header__nav .header__ul .header-menu-readbasix__our-unique-advantages li a {
    height: 48px !important;
    margin: 0 0 0 4px !important;
  }

  .header__nav .header__ul li.subcategory.subcategory--subtext {
    padding: 0 !important;
  }

  .header__nav .header__ul li.subcategory.subcategory--subtext>* {
    width: 100%;
  }

  .header__nav .header__ul li.subcategory.subcategory--subtext .subcategory__subtext {
    margin: -16px 0 16px 32px;
  }

  .header__button {
    padding: 12px 8px !important;
    font-size: var(--capti-typography--button-l-font-size) !important;
    line-height: var(--capti-typography--button-l-line-height) !important;
    font-weight: var(--capti-typography--button-l-weight-bold) !important;
    font-family: var(--capti-typography--font-family), sans-serif !important;
    color: var(--capti-color--text-primary) !important;
  }

  .header__button-icon {
    display: block !important;
  }

  .header__book-a-demo,
  .header .button.button--primary {
    padding: 0px 24px !important;
    height: 40px !important;
  }

  .header__hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    margin: 0 0 0 16px !important;
    padding: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
  }

  .header__menu {
    position: inherit !important;
    display: grid !important;
    visibility: hidden;
    padding: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    z-index: 1000 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border: none !important;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(-20px);
    /*  transition: opacity 0.6s ease, transform 0.6s ease, max-height 0.6s ease, visibility 0.6s ease; */
  }
}

.header__logo {
  display: flex;
  height: 48px;
  width: auto;
}

.header__divider {
  display: block;
  width: 1px;
  height: 60px;
  background-color: var(--capti-color--outline-medium);
}

.header__ul {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  list-style-type: none;
  padding: 0;
  margin: 0 16px 0 0;
}

.header__item,
.header__li {
  position: relative;
}

@media (max-width: 1201px) {
  .header__li {
    border-bottom: 2px solid var(--capti-color--outline-light) !important;
  }
}

.header__button {
  padding: 12px 16px;
  font-family: var(--capti-typography--font-family), sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: bold;
  color: var(--capti-color--text-primary);
  background-color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-wrap: nowrap;
  transition: color 0.3s;
  box-sizing: border-box;
  /* Include padding and border in the element's total width and height */
}

.header__button:hover {
  color: var(--capti-color--text-color);
}

.header__button-icon {
  display: none;
  transition: transform 0.6s ease;
}

.header__button-icon--rotated {
  transform: rotate(180deg);
}

@media (max-width: 1201px) {
  .header__button-icon {
    display: block !important;
  }
}

.header__button--selected {
  border-bottom: 2px solid var(--capti-color--text-color);
}

@media (max-width: 1201px) {

  .header__button--selected::before {
    content: '';
    position: absolute;
    top: 2px;
    left: -16px;
    width: 4px;
    height: 70px;
    background-color: var(--capti-color--text-color);
    border-radius: 32px;
    border-bottom: 2px solid var(--capti-color--outline-light) !important;
  }

  .header__button--selected {
    border-bottom: none;
  }
}

.header__button--colored {
  background-color: var(--capti-color--outline-brand);
  border-bottom: 2px solid var(--capti-color--outline-brand);
}

.header__hamburger {
  display: none;
  height: 40px;
  width: 40px;
  color: var(--capti-color--text-color);
  background-color: transparent;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  border: none;
  padding: 0;
}

.header__hamburger:hover {
  background-color: #f7fbff;
}

.header__hamburger-box {
  width: 24px;
  height: 20px;
  display: inline-block;
  position: relative;
}

.header__hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -1.5px;
}

.header__hamburger-inner,
.header__hamburger-inner::before,
.header__hamburger-inner::after {
  width: 24px;
  height: 3px;
  background-color: #05070A;
  border-radius: 1.5px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

.header__hamburger-inner::before,
.header__hamburger-inner::after {
  content: '';
  display: block;
}

.header__hamburger-inner::before {
  top: -7px;
}

.header__hamburger-inner::after {
  bottom: -7px;
}

/* Active state - Cross animation */
.header__hamburger--active .header__hamburger-inner {
  transform: rotate(45deg);
}

.header__hamburger--active .header__hamburger-inner::before {
  top: 0;
  transform: rotate(90deg);
}

.header__hamburger--active .header__hamburger-inner::after {
  bottom: 0;
  transform: rotate(90deg);
}

.header__menu {
  display: grid;
  position: fixed;
  top: 84px;
  left: 50%;
  transform: translateY(-10px);
  width: 80%;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 24px;
  box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 1201px) {

  .header__menu {
    border-radius: 0;
  }
}


.header__menu--visible {
  /*display: flex!important;*/
  display: grid !important;
  border-top: 1px solid var(--capti-color--outline-light) !important;
  visibility: visible;
  opacity: 1;
  max-height: 1000px;
  transform: translateY(0);
  overflow: visible;
}

/* Desktop animation */
@media (min-width: 1202px) {

  .header__menu {
    border-radius: 0;
    transform: translateX(-50%) translateY(-10px);
  }

  .header__menu--visible {
    transform: translateX(-50%) translateY(0);
  }
}

/* Mobile animation */
@media (max-width: 1201px) {
  .header__menu--visible {
    visibility: visible;
    opacity: 1;
    max-height: unset;
    transform: translateY(0) !important;
  }
}

.header__menu ul {
  padding-left: 0;
}


@media (max-width: 1440px) {

  .header__button {
    padding: 12px 8px;
    font-size: var(--capti-typography--button-s-font-size);
    line-height: var(--capti-typography--button-s-line-height);
    font-weight: var(--capti-typography--button-s-weight-bold);
    font-family: var(--capti-typography--font-family), sans-serif;
    color: var(--capti-color--text-primary);
  }
}

/* ================================ ReadBasix ================================ */

.header-menu-readbasix {
  display: none;
  grid-template-columns: 656px 1fr;
  grid-template-areas:
    "categories unique"
    "testimonials unique";
  transform: translateX(-50%);
  width: 960px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 24px;
  z-index: 1200;
}

@media (min-width: 1699px) {
  .header-menu-readbasix {
    position: absolute;
    top: 62px !important;
    left: 0% !important;
    transform: translateX(0%) !important;
    ;
  }
}

.header-menu-readbasix__main {
  display: grid;
}

.header-menu-readbasix__categories {
  grid-area: categories;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 32px 48px 24px;
}

.header__menu-subcategory-icon-after svg {
  width: 32px;
  height: 32px;
}

.header__menu-subcategory-icon-after svg path {
  fill: var(--capti-color--brand-orange);
}

.header-menu-readbasix__testimonials-block {
  grid-area: testimonials;
  display: flex;
  padding: 16px 48px 16px 40px;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%), var(--Background-Brand, #0B73EB);
  border-radius: 0 0 0 24px;
  height: 92px;
}

.header-menu-readbasix__testimonial {
  display: flex;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  width: 100%;
  /* Ensure it takes up the full width of its parent */
  position: relative;
  /* Ensure child elements with absolute positioning are positioned relative to this container */
}

.header-menu-readbasix__testimonial>i {
  color: var(--capti-color--text-primary, #05070A);
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  line-height: 20px;
  /* 125% */
}

.header-menu-readbasix__avatar-stack {
  display: flex;
  align-items: center;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.92) 100%), var(--Background-Brand, #0B73EB);
  width: 66px;
}

.header-menu-readbasix__avatar-stack> :nth-child(2),
.header-menu-readbasix__avatar-stack> :nth-child(3) {
  margin-left: -12px;
  margin-left: -17px;
}

.header-menu-readbasix__all-testimonials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--capti-color--text-color, #0B73EB);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  /* 112.5% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
}

.header-menu-readbasix__our-unique-advantages {
  grid-area: unique;
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  align-items: flex-start;
  align-self: stretch;
  gap: 12px;
  padding: 32px 48px 40px 48px;
  background: linear-gradient(90deg, var(--Background-Brand, rgba(11, 115, 235, 0.16)) 0%, var(--Brand-Violet, rgba(187, 107, 217, 0.16)) 100%), var(--Background-Default, #FFF);
  border-radius: 0 24px 24px 0;
}

.header-menu-readbasix__our-unique-advantages h6 {
  padding: 12px 0;
  margin: 0;
}

.header-menu-readbasix__our-unique-advantages ul {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  align-items: flex-start;
  align-self: stretch;
  gap: 12px;
}

.header-menu-readbasix__our-unique-advantages ul .subcategory.subcategory--small {
  gap: 12px;
}

.header-menu-readbasix__category-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  color: var(--capti-color--text-primary);
}

@media (max-width: 1201px) {

  .header-menu-readbasix {
    position: inherit;
    top: 0;
    left: 0;
    transform: unset;
    grid-template-columns: 1fr;
    grid-template-areas:
      "categories"
      "unique"
      "testimonials";
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .header-menu-readbasix__categories {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 0 24px 0;
  }

  .header__menu-subcategories {
    margin-bottom: 0px !important;
  }

  .header-menu-readbasix__testimonials-block {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    padding: 16px 16px 0;
    height: fit-content;
    background: none;
  }

  .header-menu-readbasix__testimonial {
    max-width: 400px;
  }

  .header__nav .header__ul li a:not(.button).header-menu-readbasix__all-testimonials {
    justify-content: flex-end !important;
  }

  .header-menu-readbasix__our-unique-advantages {
    padding: 24px 48px;
    border-radius: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
  }
}

/* ================================ RESEARCH ================================ */

.header-menu-research {
  display: none;
  grid-template-columns: 1fr 1fr 1fr;
  transform: translateX(-50%);
  width: 960px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 24px;
  z-index: 1000;
  /* Ensure the menu appears above other elements */
  padding: 32px 32px 32px 40px;
  align-items: flex-start;
  gap: 40px;
}

@media (min-width: 1699px) {

  .header-menu-research {
    position: absolute;
    top: 62px !important;
    left: 0% !important;
    transform: translateX(0%) !important;
    ;
  }
}

.header-menu-research__researcher-addendum {
  position: relative;
  display: flex;
  padding: 140px 20px 20px 20px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: var(--R-small, 8px);
  background:
    url(/capti-site/themes/capti/new/images/opening_book.png) no-repeat left 50px top 16px,
    linear-gradient(180deg, var(--Brand-Violet, rgba(187, 107, 217, 0.20)) 0%, var(--Background-Brand, rgba(11, 115, 235, 0.20)) 100%),
    var(--Background-Default, #FFF);
  background-size: auto, cover;
  overflow: hidden;
}

.header-menu-research__researcher-addendum-bg-circle {
  position: absolute;
  isolation: isolate;
  left: -20px;
  bottom: 0px;
  width: 282px;
  height: 282px;
  border-radius: 282px;
  background: linear-gradient(180deg, var(--Background-Brand, rgba(11, 115, 235, 0.18)) 0%, var(--Background-Brand, rgba(11, 115, 235, 0.18)) 100%), var(--Background-Default, #FFF);
  filter: blur(50px);
}

.header-menu-research__researcher-addendum-text {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.header-menu-research__researcher-addendum p {
  color: var(--capti-color--text-secondary);
  margin: 0;
}

.header-menu-research__sara-and-rise {
  position: absolute;
  bottom: 27px;
  left: 40px;
  color: var(--capti-color--text-secondary);
}

@media (max-width: 1201px) {
  .header-menu-research {
    position: inherit;
    grid-template-columns: 1fr;
    top: 0px;
    left: 0;
    transform: none;
    width: 100%;
    border: none;
    border-radius: 0px;
    z-index: 1000;
    /* Ensure the menu appears above other elements */
    padding: 0px;
    align-items: flex-start;
    gap: 0px;
    box-shadow: none;
  }

  .header-menu-research__researcher-addendum {
    padding: 40px 16px 24px 152px;
    margin: 24px -16px 0;
    border-radius: 0;
    background:
      url(/capti-site/themes/capti/new/images/opening_book.png) no-repeat left -50px top 16px,
      linear-gradient(180deg, var(--Brand-Violet,
          rgba(187, 107, 217, 0.20)) 0%,
        var(--Background-Brand, rgba(11, 115, 235, 0.20)) 100%),
      var(--Background-Default, #FFF);

    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
  }

  .header-menu-research__researcher-addendum-bg-circle {
    position: absolute;
    isolation: isolate;
    left: -100px;
    bottom: -100px;
    width: 282px;
    height: 282px;
    border-radius: 282px;
    background: linear-gradient(180deg, var(--Background-Brand, rgba(11, 115, 235, 0.18)) 0%, var(--Background-Brand, rgba(11, 115, 235, 0.18)) 100%), var(--Background-Default, #FFF);
    filter: blur(50px);
  }

  .header-menu-research__sara-and-rise {
    position: inherit !important;
    bottom: 0px;
    left: 0px;
    margin-left: 16px;
    margin-top: 42px;
    margin-bottom: 24px;
    font-size: 12px;
    line-height: 18px;
  }

  .header-menu-support__educators-maual {
    padding: 40px 16px 24px 152px;
    margin: 24px -16px 0;
    border-radius: 0;
    background:
      url(/capti-site/themes/capti/new/images/opening_book.png) no-repeat left -50px top 16px,
      linear-gradient(180deg, var(--Brand-Violet,
          rgba(187, 107, 217, 0.20)) 0%,
        var(--Background-Brand, rgba(11, 115, 235, 0.20)) 100%),
      var(--Background-Default, #FFF);

    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
  }

  .header-menu-support__educators-maual-bg-circle {
    position: absolute;
    isolation: isolate;
    left: -100px;
    bottom: -100px;
    width: 282px;
    height: 282px;
    border-radius: 282px;
    background: linear-gradient(180deg, var(--Background-Brand, rgba(11, 115, 235, 0.18)) 0%, var(--Background-Brand, rgba(11, 115, 235, 0.18)) 100%), var(--Background-Default, #FFF);
    filter: blur(50px);
  }
}

/* ================================ PROFESSIONAL LEARNING ================================ */
.header-menu-professional-learning {
  display: none;
  grid-template-columns: 1fr 1fr 196px;
  width: 960px;
  padding: 32px 40px;
  align-items: flex-start;
  gap: 40px;
  border-radius: 24px;
}

.header-menu-professional-learning__first-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 1699px) {

  .header-menu-professional-learning {
    position: absolute;
    top: 62px !important;
    left: 0% !important;
    transform: translateX(0%) !important;
    ;
  }
}

.header-menu-professional-learning__tailored-learning-subtext {
  color: var(--capti-color--text-secondary);
  color: #495A6E;
  margin-top: 16px;
  display: block;
}

.header-menu-professional-learning__video-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  margin-bottom: 16px;
}

@media (min-width: 1201px) {

  .header-menu-professional-learning__tailored-learning-subtext {
    margin-top: 0;
  }

  .header-menu-professional-learning__video-container {
    margin-bottom: 0;
  }
}

.header-menu-professional-learning__video-button {
  width: 192px;
}

.header-menu-professional-learning__video-placeholder-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  width: 196px;
  height: 120px;
  overflow: hidden;
}

.header-menu-professional-learning__video-placeholder {
  position: absolute;
  width: auto;
  height: 172px;
  border-radius: 12px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), var(--Color-Neutral-neutral-lighter, #CCC);
}

@media (max-width: 1201px) {

  .header__menu.header-menu-professional-learning.header__menu--visible .header-menu-professional-learning__first-col li.subcategory.subcategory--with-subtext {
    flex-direction: column !important;
    gap: 0;
    align-items: flex-start !important;
  }

  .header__menu.header-menu-professional-learning.header__menu--visible .header-menu-professional-learning__first-col li.subcategory.subcategory--with-subtext i {
    margin-top: -8px;
    margin-left: 16px;
  }


  .header-menu-professional-learning__video-placeholder {
    width: 117%;
    height: auto;
    max-width: 480px;
    margin: 0 auto;
  }
}

.header-menu-professional-learning__video {
  width: 196px;
  height: 120px;
  border-radius: 12px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), var(--Color-Neutral-neutral-lighter, #CCC);
}

@media (max-width: 1201px) {
  .header-menu-professional-learning {
    position: inherit !important;
    grid-template-columns: 1fr;
    width: 100%;
    padding: 0;
    gap: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  .header-menu-professional-learning__video-container {
    padding: 24px 16px;
    align-items: center;
  }

  .header-menu-professional-learning__video-container>.button.button--secondary {
    width: 192px;
  }

  .header-menu-professional-learning__video {
    width: 192px;
    height: 120px;
  }
}

/* ================================ SUPPORT ================================ */

.header-menu-support {
  display: none;
  grid-template-columns: 280px auto;
  transform: translateX(-50%);
  width: 1264px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 24px;
  z-index: 1000;
  align-items: flex-start;
  top: 78px;
}

@media (min-width: 2220px) {

  .header-menu-support {
    position: absolute;
    top: 50px !important;
    left: 0% !important;
    transform: translateX(0%) !important;
    ;
  }
}

.header-menu-support__colored-bg {
  display: flex;
  width: 280px;
  padding: 32px 0px 32px 32px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  background: linear-gradient(90deg, var(--Background-Brand, rgba(11, 115, 235, 0.16)) 0%, var(--Brand-Violet, rgba(187, 107, 217, 0.16)) 100%), var(--Background-Default, #FFF);
  border-radius: 24px 0 0 24px;
  box-sizing: border-box;
}

.header-menu-support__list {
  list-style: none;
}

.header-menu-support__list-title {
  position: absolute;
  left: 32px;
  display: flex;
  height: 56px;
  width: 248px;
  padding: 16px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: var(--R-medium, 24px) 0px 0px var(--R-medium, 24px);
  box-sizing: border-box;
  text-decoration: none;
  color: var(--capti-color--text-primary);
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.header-menu-support__list-title:hover {
  color: var(--capti-color--text-color);
}

.header-menu-support__list-title--selected {
  background: var(--Background-Default, #FFF);
  color: var(--capti-color--text-primary);
  pointer-events: none;
}

.header-menu-support__list-title--user-reference {
  top: 32px;
}

.header-menu-support__list-title--rostering-reference {
  top: 88px;
}

.header-menu-support__list-title--family-support {
  top: 144px;
}

.header-menu-support__li-content {
  display: none;
  grid-template-columns: 320px 1fr 1fr;
  padding: 32px 32px 32px 48px;
}

.header-menu-support__li-content--visible {
  display: grid;
}

.header-menu-support__rostering-reference {
  grid-template-columns: 320px 1fr;
}

.header-menu-support__rostering-reference-rostering-manual {
  position: relative;
  display: flex;
  height: 328px;
  padding: 0px 40px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: var(--R-small, 8px);
  background:
    url(/capti-site/themes/capti/new/images/opening_book.png) no-repeat right 98px top 146px,
    linear-gradient(180deg, var(--Brand-Violet, rgba(187, 107, 217, 0.20)) 0%, var(--Background-Brand, rgba(11, 115, 235, 0.20)) 100%),
    var(--Background-Default, #FFF);
  background-size: 248px auto, cover;
  overflow: hidden;
}

.header-menu-support__rostering-reference-text {
  display: flex;
  flex-direction: column;
  justify-self: center;
  gap: 8px;
}

.header-menu-support__rostering-reference-text>p {
  width: 350px;
  color: var(--Text-Secondary, #495A6E);
  /* Body/Body-S */
  font-family: var(--Font-Body, "IBM Plex Sans");
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  /* 125% */
  margin: 0;
}

.header-menu-support__educators-maual {
  position: relative;
  display: flex;
  padding: 140px 24px 20px 24px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: var(--R-small, 8px);
  background:
    url(/capti-site/themes/capti/new/images/opening_book.png) no-repeat left 50px top 16px,
    linear-gradient(180deg, var(--Brand-Violet, rgba(187, 107, 217, 0.20)) 0%, var(--Background-Brand, rgba(11, 115, 235, 0.20)) 100%),
    var(--Background-Default, #FFF);
  background-size: auto, cover;
  overflow: hidden;
}

.header-menu-support__educators-maual-bg-circle {
  position: absolute;
  isolation: isolate;
  left: -20px;
  bottom: 0px;
  width: 282px;
  height: 282px;
  border-radius: 282px;
  background: linear-gradient(180deg, var(--Background-Brand, rgba(11, 115, 235, 0.18)) 0%, var(--Background-Brand, rgba(11, 115, 235, 0.18)) 100%), var(--Background-Default, #FFF);
  filter: blur(50px);
}

.header-menu-support__educators-maual-text {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.header-menu-support__educators-maual p {
  color: var(--capti-color--text-secondary);
  margin: 0;
}

/* ================================ ABOUT ================================ */

.header__menu--about {
  grid-template-columns: 1fr 1fr;
  max-width: 960px;
  padding: 32px 63px 32px 40px;
  align-items: flex-start;
  width: 960px;
  gap: 40px;
  border-radius: 24px;
  background: var(--Background-Default, #FFF);
  box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.25);
  top: 78px;
}

@media (min-width: 2000px) {

  .header__menu--about {
    position: absolute;
    top: 50px !important;
    left: 0% !important;
    transform: translateX(0%) !important;
    ;
  }
}

.header__menu--about img {
  position: absolute;
  right: 32px;
  bottom: 0;
}

@media (max-width: 600px) {
  .header__menu--about img {
    display: none;
  }
}

.header__menu-subcategories,
.header__menu-contacts {
  flex-grow: 1
}

.header__menu-subcategories {
  width: 100%;
  margin-bottom: 0px;
}

@media (max-width: 1201px) {

  .header__menu--about {
    grid-template-columns: 1fr;
    align-items: flex-start;
    max-width: 100%;
    padding: 0;
    gap: 24px;
    border-radius: 0;
    background: var(--Background-Default, #FFF);
    box-shadow: none;
  }

  .header__menu-subcategories {
    margin-bottom: 32px;
  }

  .header__menu-contacts {
    margin-bottom: 24px;
    margin-left: 16px;
  }

  .header__menu-contacts__br {
    display: none;
  }
}

@media (max-width: 600px) {

  .header__menu--about {
    flex-direction: column;
  }

  .header__menu-subcategories {
    width: 100%;
  }

  .header__menu-subcategories {
    margin-bottom: 0px;
  }
}

/* ================================ BOOK A DEMO ================================ */

.header__book-a-demo {
  display: none;
  position: relative;
  padding: 8px 32px;
  height: 60px;
  font-size: 18px;
  line-height: 32px;
  font-weight: 600;
  font-family: 'inter', sans-serif;
  color: var(--capti-color--text-on-color);
  border: none;
  border-radius: 32px;
  cursor: pointer;
  overflow: hidden;
  cursor: pointer;
  text-wrap: nowrap;
  min-width: 180px;
  margin-left: auto;
}

@media (min-width: 600px) {
  .header__book-a-demo {
    display: inline-flex;
  }
}

@media (max-width: 1201px) {
  .header__book-a-demo {
    padding: 0px 24px;
    height: 40px;
  }
}

.no-scroll {
  overflow: hidden;
}

@media (max-width: 1201px) {
  .header-menu-support {
    position: inherit !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    grid-template-columns: 1fr;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .header-menu-support__colored-bg {
    display: none;
  }

  .header__nav .header__ul li.header-menu-support__list {
    padding: 0 !important;
  }

  .header-menu-support__list-title {
    position: relative;
    left: 0;
    width: 100%;
    padding: 16px;
    border-radius: 0;
  }

  .header-menu-support__list-title--user-reference {
    top: 0;
  }

  .header-menu-support__list-title--rostering-reference {
    top: 0;
  }

  .header-menu-support__list-title--family-support {
    top: 0;
  }

  .header-menu-support__li-content {
    display: none;
    grid-template-columns: 1fr;
    padding: 0 16px;
    width: 100%;
  }

  .header-menu-support__li-content--visible {
    display: grid;
  }

  .header-menu-support__rostering-reference {
    grid-template-columns: 1fr;
  }

  .header-menu-support__rostering-reference-rostering-manual {
    padding: 24px 16px;
    height: auto;
    background-size: 120px auto, cover;
    background-position: right 16px center, center;
    overflow: hidden;
  }

  .header-menu-support__rostering-reference-text>p {
    width: 100%;
    max-width: 240px;
  }

  .header-menu-support__educators-maual {
    padding: 40px 16px 24px 152px;
    margin: 24px -32px 0;
    border-radius: 0;
    background:
      url(/capti-site/themes/capti/new/images/opening_book.png) no-repeat left -50px top 16px,
      linear-gradient(180deg, var(--Brand-Violet,
          rgba(187, 107, 217, 0.20)) 0%,
        var(--Background-Brand, rgba(11, 115, 235, 0.20)) 100%),
      var(--Background-Default, #FFF);

    width: calc(100vw + 32px);
    margin-left: calc(-50vw + 50% - 16px);
    position: relative;
    left: -16px;
  }

  .header-menu-support__educators-maual-bg-circle {
    position: absolute;
    isolation: isolate;
    left: -100px;
    bottom: -100px;
    width: 282px;
    height: 282px;
    border-radius: 282px;
    background: linear-gradient(180deg, var(--Background-Brand, rgba(11, 115, 235, 0.18)) 0%, var(--Background-Brand, rgba(11, 115, 235, 0.18)) 100%), var(--Background-Default, #FFF);
    filter: blur(50px);
  }

  .header__nav .header__ul .header-menu-support>ul>li:last-child {
    border-bottom: 0 !important;
  }
}

#navigation {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 1000;
}

#navigation .menuBar {
  padding: 12px 48px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.075), 0 -2px 0 #fff;
}

@media (max-width: 1201px) {
  #navigation .menuBar {
    padding: 8px 16px;
  }
}

#navigation .menuBar .container {
  max-width: none;
}

#navigation .menuBar .row {
  grid-template-columns: 289px 1fr;
  width: auto;
}

#navigation .menuBar h1.capti-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 289px;
  height: 60px;
  margin: 0;
}

#navigation .menuBar h1.capti-logo::before {
  content: '';
  display: block;
  width: 1px;
  height: 60px;
  background-color: var(--capti-color--outline-medium);
  position: absolute;
  left: 130px;
  top: 0;
}

#navigation .menuBar h1.capti-logo::after {
  content: '';
  display: block;
  width: 134px;
  height: 36px;
  margin-top: 4px;
  background: url(/capti-site/themes/capti/new/images/logo/ReadBasix.svg) no-repeat center center;
  background-size: contain;
  background-position: center center;
}

#navigation .menuBar h1.capti-logo a {
  display: inline-block;
  width: 106px;
  height: 48px;
  background: url(/capti-site/themes/capti/new/images/logo/Capti.svg) no-repeat center center;
  background-size: contain;
  background-position: center center;
}

#navigation .menuBar [role="navigation"] {
  display: flex;
  align-items: center;
}

#navigation .menuBar [role="navigation"] input[type="checkbox"],
#navigation .menuBar [role="navigation"] .labelmenutext {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

#navigation .menuBar [role="navigation"] #check1 + label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 auto;
  padding: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  width: 24px;
  height: 20px;
}

#navigation .menuBar [role="navigation"] #check1 + label .horizont1 {
  display: block;
  top: 50%;
  margin-top: -1.5px;
}

#navigation .menuBar [role="navigation"] #check1 + label .horizont1,
#navigation .menuBar [role="navigation"] #check1 + label .horizont1::before,
#navigation .menuBar [role="navigation"] #check1 + label .horizont1::after {
  width: 24px;
  height: 3px;
  background-color: #05070A;
  border-radius: 1.5px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

#navigation .menuBar [role="navigation"] #check1 + label .horizont1::before,
#navigation .menuBar [role="navigation"] #check1 + label .horizont1::after {
  content: '';
  display: block;
}

#navigation .menuBar [role="navigation"] #check1 + label .horizont1::before {
  top: -7px;
}

#navigation .menuBar [role="navigation"] #check1 + label .horizont1::after {
  bottom: -7px;
}

/* Active state - Cross animation */
#navigation .menuBar [role="navigation"] #check1:checked + label .horizont1 {
  transform: rotate(45deg);
}

#navigation .menuBar [role="navigation"] #check1:checked + label .horizont1::before {
  top: 0;
  transform: rotate(90deg);
}

#navigation .menuBar [role="navigation"] #check1:checked + label .horizont1::after {
  bottom: 0;
  transform: rotate(90deg);
}

@media (min-width: 768px) {
  #navigation .menuBar [role="navigation"] #check1 + label {
    display: none;
  }
}

#navigation .menuBar [role="navigation"] ul[role="menubar"]{
  display: none;
  position: fixed;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0px;
  top: 74px;
  right: 0;
  left: 0;
  padding: 0 16px;
  list-style-type: none;
  background-color: #fff;
  width: 100%;
  max-height: calc(100vh - 74px);
  overflow-y: auto;
  --header-height: 76px;
  height: calc(100vh - var(--header-height));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

@media (min-width: 768px) {
  #navigation .menuBar [role="navigation"] ul[role="menubar"]{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    position: static;
    visibility: visible;
    opacity: 1;
    overflow: visible;
    transform: none;
    padding: 0;
    margin: 0 16px 0 0;
  }
}

#navigation .menuBar [role="navigation"] #check1:checked ~ ul[role="menubar"] {
  display: flex;
  visibility: visible;
  opacity: 1;
}

#navigation .menuBar [role="navigation"] ul[role="menubar"] > li {
  position: relative;
  width: 100%;
  border-bottom: 2px solid var(--capti-color--outline-light);
}

@media (min-width: 768px) {
  #navigation .menuBar [role="navigation"] ul[role="menubar"] > li {
    width: auto;
    border-bottom: 0;
  }

  #navigation .menuBar [role="navigation"] ul[role="menubar"] li.menuitemli-accountmenu {
    margin-left: auto;
  }
}

#navigation .menuBar [role="navigation"] ul[role="menubar"] li.menuitemli-library,
#navigation .menuBar [role="navigation"] ul[role="menubar"] li.menuitemli-voices,
#navigation .menuBar [role="navigation"] ul[role="menubar"] li.menuitemli-shopping_cart,
#navigation .menuBar [role="navigation"] ul[role="menubar"] li.menuitemli-help-tutuorial,
#navigation .menuBar [role="navigation"] ul[role="menubar"] li.menuitemli-student-settings,
#navigation .menuBar [role="navigation"] ul[role="menubar"] li.menuitemli-log_out {
  display:  none;
}

#navigation .menuBar [role="navigation"] ul[role="menubar"] > li > a,
#navigation .menuBar [role="navigation"] ul[role="menubar"] > li > label {
  font-family: var(--capti-typography--font-family), sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: bold;
  color: var(--capti-color--text-primary);
  cursor: pointer;
  text-decoration: none;
  text-wrap: nowrap;
  transition: color 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  height: 76px;
  padding: 0;
  margin: 0 16px;
  text-align: left;
}

#navigation .menuBar [role="navigation"] ul[role="menubar"] > li > label::after {
  content: '';
  width: 16px;
  height: 10px;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxNiAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNi44NTE1NiA4Ljg5ODQ0TDAuNjAxNTYyIDIuNjQ4NDRDMC4wOTM3NSAyLjE3OTY5IDAuMDkzNzUgMS4zNTkzOCAwLjYwMTU2MiAwLjg5MDYyNUMxLjA3MDMxIDAuMzgyODEyIDEuODkwNjIgMC4zODI4MTIgMi4zNTkzOCAwLjg5MDYyNUw3Ljc1IDYuMjQyMTlMMTMuMTAxNiAwLjg5MDYyNUMxMy41NzAzIDAuMzgyODEyIDE0LjM5MDYgMC4zODI4MTIgMTQuODU5NCAwLjg5MDYyNUMxNS4zNjcyIDEuMzU5MzggMTUuMzY3MiAyLjE3OTY5IDE0Ljg1OTQgMi42NDg0NEw4LjYwOTM4IDguODk4NDRDOC4xNDA2MiA5LjQwNjI1IDcuMzIwMzEgOS40MDYyNSA2Ljg1MTU2IDguODk4NDRaIiBmaWxsPSIjMDUwNzBBIj48L3BhdGg+PC9zdmc+Cg==) center center / contain no-repeat;
  margin-left: auto;
  transition: transform 0.3s ease;
}

#navigation .menuBar [role="navigation"] ul[role="menubar"] > li > input[type=checkbox]:checked + label::after {
  transform: rotate(180deg);
}

#navigation .menuBar [role="navigation"] ul[role="menubar"] > li > a:hover,
#navigation .menuBar [role="navigation"] ul[role="menubar"] > li > label:hover {
  color: var(--capti-color--text-color);
}

@media (min-width: 768px) {
  #navigation .menuBar [role="navigation"] ul[role="menubar"] > li > a,
  #navigation .menuBar [role="navigation"] ul[role="menubar"] > li > label {
    display: inline-flex;
    height: auto;
    margin: 0;
    padding: 12px 8px;
    font-size: var(--capti-typography--button-s-font-size);
    line-height: var(--capti-typography--button-s-line-height);
    font-weight: var(--capti-typography--button-s-weight-bold);
    font-family: var(--capti-typography--font-family), sans-serif;
    color: var(--capti-color--text-primary);
  }

  #navigation .menuBar [role="navigation"] ul[role="menubar"] > li > label::after {
    width: 12px;
  }
}

@media (min-width: 1200px) {
  #navigation .menuBar [role="navigation"] ul[role="menubar"] > li > a,
  #navigation .menuBar [role="navigation"] ul[role="menubar"] > li > label {
    font-size: var(--capti-typography--button-l-font-size);
    line-height: var(--capti-typography--button-l-line-height);
    font-weight: var(--capti-typography--button-l-weight-bold);
    font-family: var(--capti-typography--font-family), sans-serif;
    color: var(--capti-color--text-primary);
  }

  #navigation .menuBar [role="navigation"] ul[role="menubar"] > li > label::after {
    width: 14px;
  }
}

#navigation .menuBar [role="navigation"] ul.submenu {
  display: none;
  flex-direction: column;
  padding: 0 32px 24px;
  list-style: none;
}

#navigation .menuBar [role="navigation"] input[type=checkbox]:checked ~ ul.submenu {
  display: flex;
}

@media (min-width: 768px) {
  #navigation .menuBar [role="navigation"] ul.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: 1px solid var(--capti-color--outline-light);
    padding: 16px 32px;
    border-radius: 24px;
    box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.25);
    margin-top: 10px;
    min-width: 200px;
  }

  #navigation .menuBar [role="navigation"] li.menuitemli-accountmenu ul.submenu {
    left: auto;
    right: 0;
  }
}

#navigation .menuBar [role="navigation"] ul.submenu a {
  display: inline-flex;
  align-items: center;
  font-size: var(--capti-typography--nav-1-font-size);
  line-height: var(--capti-typography--nav-1-line-height);
  font-weight: var(--capti-typography--nav-1-weight);
  color: var(--capti-color--text-primary);
  transition: color 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  height: 48px;
}

#navigation .menuBar [role="navigation"] ul.submenu a:hover {
  color: var(--capti-color--text-color);
}

.hint-popup {
  display: none;
}

/* ========================= Hero ========================== */

.hero {
  position: relative;
  background-color: var(--capti-color--primary);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  padding-bottom: 50%;
  background: url(/capti-site/themes/capti/new/images/bubble-top-left-mobile.svg) no-repeat right bottom;
  background-size: cover;
  z-index: 1;
}

.hero::after {
  content: '';
  position: absolute;
  top: calc(40vh - 190px);
  right: 0;
  width: 224px;
  height: 380px;
  background: url(/capti-site/themes/capti/new/images/bubble-bottom-right-mobile.svg) no-repeat left top;
  background-size: contain;
}

@media (min-width: 900px) {
  .hero {
    min-height: 700px;
  }

  .hero::before {
    background-image: url(/capti-site/themes/capti/new/images/bubble-top-left-desktop.svg);
  }

  .hero::after {
    background-image: url(/capti-site/themes/capti/new/images/bubble-bottom-right-desktop.svg);
    background-size: cover;
    width: 600px;
    height: 600px;
    top: auto;
    bottom: 0;
  }
}

.hero__image-wrap {
  position: relative;
  isolation: isolate;
}

.hero__image-wrap::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(to top,
      rgba(11, 115, 235, 1),
      rgba(11, 115, 235, 0));
  z-index: 1;
}

.hero__image {
  position: relative;
  display: block;
  height: 40vh;
}

.hero__image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(50%);
  background: url(/capti-site/themes/capti/new/images/bubble-middle-mobile.svg) no-repeat center center;
  background-size: contain;
  width: 400px;
  height: 700px;
  z-index: 1;
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: clamp(80%, -20vw, 100%) 50%;
}

@media (min-width: 900px) {
  .hero__image-wrap {
    width: 80%;
    transition: width 0.3s ease-in-out;
    margin-left: auto;
  }

  .hero__image-wrap::before {
    top: 0;
    bottom: auto;
    left: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(to right,
        rgba(11, 115, 235, 1),
        rgba(11, 115, 235, 0));
  }

  .hero__image::after {
    top: 0;
    transform: translateX(-50%);
    background-image: url(/capti-site/themes/capti/new/images/bubble-middle-desktop.svg);
    width: 870px;
    height: auto;
    background-size: 100% 100%;
  }

  .hero__image {
    height: calc(100vh - 76px);
    min-height: 700px;
  }

  .hero .container {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
  }

  .hero__content {
    max-width: 60%;
  }
}

@media (min-width: 1200px) {
  .hero__image-wrap {
    width: 60%;
  }

  .hero__image {
    height: calc(100vh - 84px);
  }

  .hero__content {
    max-width: 50%;
  }
}

.hero__content {
  position: relative;
  color: white;
  z-index: 2;
}

.hero__title {
  color: white;
  margin-bottom: 24px;
}

@media (min-width: 900px) {
  .hero__title {
    max-width: 360px;
    margin-bottom: 32px;
  }
}

@media (min-width: 1200px) {
  .hero__title {
    max-width: none;
  }
}

.hero__description {
  color: white;
  margin-bottom: 36px;
}

@media (min-width: 900px) {
  .hero__description {
    max-width: 360px;
    margin-bottom: 48px;
  }
}

@media (min-width: 1200px) {
  .hero__description {
    max-width: none;
  }
}

.hero__button-wrap {
  display: flex;
  gap: 16px;
  margin-bottom: 136px;
}

.hero__button-wrap .button {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 600px) {
  .hero__button-wrap {
    gap: 24px;
  }

  .hero__button-wrap .button {
    min-width: 220px;
    width: auto;
  }
}

@media (min-width: 900px) {
  .hero__button-wrap {
    margin-bottom: 0;
  }
}

.image-title-list .image-title-list--36 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
}

.image-title-list--36 .image-title-list__text-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.image-title-list {
  display: grid;
  gap: 80px;
  margin: 160px 0px 0px;
}

.image-title-list--image-left {
  grid-template-areas:
    "image text";
  grid-template-columns: fit-content(100%) 1fr;
}

.image-title-list--image-right {
  grid-template-areas:
    "text image";
  grid-template-columns: 1fr fit-content(100%);
}

.image-title-list__text-block {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.image-title-list__text-block-title {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.image-title-list__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-left: 0px;
  margin: 0;
}

.image-title-list__image {
  grid-area: image;
  height: auto;
}

@media (max-width: 768px) {

  .image-title-list {
    margin: 80px 0px 0px;
  }

  .image-title-list--image-left,
  .image-title-list--image-right {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "text";
  }

  .image-title-list__text-block {
    gap: 24px;
    margin: 24px 0;
  }

  .image-title-list {
    gap: 16px;
  }

}

.ready-to-make-a-difference {
  display: grid;
  padding: 120px 0;
  grid-template-columns: 1fr 1fr;
  gap: 74px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .ready-to-make-a-difference {
    padding: 80px 0 0;
  }
}

.ready-to-make-a-difference__title-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}

.ready-to-make-a-difference__title {
  font-size: var(--capti-typography--h2-font-size);
  line-height: var(--capti-typography--h2-line-height);
  font-weight: var(--capti-typography--h2-font-weight);
  margin: 0;
}

.ready-to-make-a-difference__subtitle {
  font-size: var(--capti-typography--body-l-font-size);
  line-height: var(--capti-typography--body-l-line-height);
  font-weight: var(--capti-typography--body-l-weight);
  margin: 0;
}

.ready-to-make-a-difference__link {
  width: 256px;
  text-decoration: none;
}

.ready-to-make-a-difference__image-wrap {
  position: relative;
}

.ready-to-make-a-difference__image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: fit-content;
  padding-top: 100px;
}


@media (max-width: 768px) {

  .ready-to-make-a-difference {
    grid-template-columns: 1fr;
    gap: 16px;
    text-align: center;
  }

  .ready-to-make-a-difference__title-block {
    align-items: center;
  }

  .ready-to-make-a-difference__title {
    font-size: var(--capti-typography--h3-font-size);
    line-height: var(--capti-typography--h3-line-height);
    font-weight: var(--capti-typography--h3-font-weight);
    margin: 0;
  }

  .ready-to-make-a-difference__subtitle {
    font-size: var(--capti-typography--body-s-font-size);
    line-height: var(--capti-typography--body-s-line-height);
    font-weight: var(--capti-typography--body-s-weight);
    margin: 0;
  }

  .ready-to-make-a-difference__link {
    width: fit-content;
  }

  .ready-to-make-a-difference__image-wrap {
    padding-top: 0;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    height: 310px;
  }

  .ready-to-make-a-difference__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ready-to-make-a-difference__image {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    padding-top: 0;
  }

}

.see-also {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin: 120px 0 0 0;
}

.see-also__title {
  font-size: var(--capti-typography--h2-font-size);
  font-weight: var(--capti-typography--h2-font-weight);
  line-height: var(--capti-typography--h2-line-height);
  margin: 0;
}

.see-also__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

@media (max-width: 600px) {

  .see-also {
    margin: 40px 0;
  }

  .see-also__title {
    font-size: 38px;
    font-weight: 700;
    line-height: 50px;
  }

  .see-also__content {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.see-what-people-say {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--R-medium, 24px);
  max-width: 1120px;
  padding: 66px 96px;
  gap: 40px;
  background: linear-gradient(90deg, var(--Brand-Green, rgba(73, 131, 79, 0.16)) 0%, var(--Background-Brand, rgba(11, 115, 235, 0.16)) 100%), var(--Background-Default, #FFF);
  margin: 120px 0;
}

@media (max-width: 600px) {
  .see-what-people-say {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.see-what-people-say__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.see-what-people-say__title {
  font-size: var(--capti-typography--h3-font-size);
  font-weight: var(--capti-typography--h3-font-weight);
  line-height: var(--capti-typography--h3-line-height);
  margin: 0;
}

.see-what-people-say__link {
  width: 256px;
  text-decoration: none;
}

@media (max-width: 768px) {

  .see-what-people-say {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 0;
    margin: 0 -16px;
    border-radius: 0;
    justify-content: center;
    text-align: center;
    width: unset;
  }

  .see-what-people-say__content {
    width: unset;
    align-items: center;
    margin: 0 24px;
  }

  .see-what-people-say__title {
    font-size: var(--capti-typography--h3-font-size);
    font-weight: var(--capti-typography--h3-font-weight);
    line-height: var(--capti-typography--h3-line-height);
    margin: 0;
  }

  .see-what-people-say__testimonials .testimonials-slider {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
  }

  .see-what-people-say .testimonials-slider__texts {
    color: red;
    width: unset;
    text-align: center;
  }
}

.vertical-bullet-points-row {
    display: grid;
    gap: 80px;
    margin: 120px 0px 0px;
}

.vertical-bullet-points-row__text-block {
    display: flex;
    flex-direction: column;
    gap: 32px;
    text-align: center;
}

.vertical-bullet-points-row__methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Dynamically adjust columns */
    gap: 32px;
}