@charset "UTF-8";
/*
 * Contrast reference:
 * https://contrast-grid.eightshapes.com/?version=1.1.0&background-colors=&foreground-colors=%23a2acd7%2C%20Blue%2010%0D%0A%23354691%2C%20Blue%2020%0D%0A%23313b68%2C%20Blue%2030%0D%0A%23252e56%2C%20Blue%2040%0D%0A%231d264e%2C%20Blue%2050%0D%0A%230e1639%2C%20Blue%2060%0D%0A%23fcfbf7%2C%20Gold%2010%0D%0A%23f8f6ec%2C%20Gold%2020%0D%0A%23f3efdd%2C%20Gold%2030%0D%0A%23c7b361%2C%20Gold%2040%0D%0A%2381702d%2C%20Gold%2050%0D%0A%23ffffff%2C%20Gray%2010%0D%0A%23f9f9fa%2C%20Gray%2020%0D%0A%23ededef%2C%20Gray%2030%0D%0A%23d4d4d9%2C%20Gray%2040%0D%0A%23696c76%2C%20Gray%2050%0D%0A%233c3f4c%2C%20Gray%2060%0D%0A%2323272f%2C%20Gray%2070%0D%0A%23219655%2C%20Green&es-color-form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-form__show-contrast=aa&es-color-form__show-contrast=aa18
 */
/*
 * Shared breakpoints settings to use within `@media`.
 */
/* default global context */
:root {
  --L-breakpoint: 58em;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */
::selection {
  background-color: #b3d4fc;
  text-shadow: none;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/* ==========================================================================
   Browser CSS resets and default styles
   ========================================================================== */
/*
 * Basic typography and color style.
 */
html {
  box-sizing: border-box;
  height: 100%;
}

/*
 * Set box-sizing globally to handle padding and border widths.
 * Reset all margins.
 */
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
}

/*
 * Make body 100% height and reset spacing.
 */
body {
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-size: 100%;
  background-color: #fff;
}

main {
  position: relative;
  z-index: 1;
  margin-top: 4rem;
}
@media (min-width: 58em) {
  main {
    margin-top: 7.25rem;
  }
}

/*
 * Headings are always just a bit bigger than general text:
 * https://csswizardry.com/2016/02/managing-typography-on-large-apps/
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1.25em;
}

/*
 * Reset normalize.css behavior.
 */
h1 {
  margin-top: 0;
  margin-bottom: 0;
}

/*
 * Links have low affordance.
 * https://www.w3.org/TR/CSS21/ui.html#propdef-cursor
 */
a:hover {
  cursor: pointer;
}

/*
 * Full-width images.
 */
img {
  max-width: 100%;
  height: auto;
}

/*
 * Hide visually and from screen readers.
 */
[hidden] {
  display: none !important;
}

/*
 * Make sure textarea takes on height automatically.
 * Allow only vertical resizing of textareas. (h5bp)
 */
textarea {
  height: auto;
  resize: vertical;
}

/*
 * Darker strong color.
 */
strong {
  font-weight: 700;
}

/*
 * Localize blockquotes.
 */
blockquote::before {
  content: "„";
}
blockquote::after {
  content: "“";
}

/* ==========================================================================
   Print styles. (h5bp)
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
  *,
  *:before,
  *:after {
    /* Always enforce this to ensure better readability, printing and paint savings when printing on paper. */
    background: #fff !important;
    color: #000 !important; /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
@font-face {
  font-family: "Archivo";
  src: url("../font/Archivo-Regular.woff2") format("woff2"), url("../font/Archivo-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../font/Archivo-Thin.woff2") format("woff2"), url("../font/Archivo-Thin.woff") format("woff");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../font/Archivo-SemiBold.woff2") format("woff2"), url("../font/Archivo-SemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../font/DMSans-Regular.woff2") format("woff2"), url("../font/DMSans-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../font/DMSans-Medium.woff2") format("woff2"), url("../font/DMSans-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
html {
  font-family: "DM Sans", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #1A1C1F;
}

/* page headers */
h1,
h2,
h3,
h4,
h5 {
  font-family: "Archivo", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

h1 {
  font-size: 2.25rem;
  line-height: 120%;
  letter-spacing: -0.02em;
}
@media (min-width: 58em) {
  h1 {
    font-size: 4rem;
  }
}

/* subheaders */
h2 {
  font-size: 2rem;
  line-height: 120%;
  letter-spacing: 0.005em;
}
@media (min-width: 58em) {
  h2 {
    font-size: 3.5rem;
  }
}

h3 {
  font-size: 1.5rem;
  line-height: 120%;
}
@media (min-width: 58em) {
  h3 {
    font-size: 2.5rem;
  }
}

h4 {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 2rem;
}
@media (min-width: 58em) {
  h4 {
    font-size: 1.5rem;
  }
}

h5 {
  line-height: 125%;
  letter-spacing: 0.025em;
}
@media (min-width: 58em) {
  h5 {
    font-size: 1.25rem;
  }
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; /* 1 */
}
.visually-hidden:focus, .visually-hidden:active {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit;
}

.community {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 3rem 1.5rem 4.5rem;
  background: #F4F7F9;
}
@media (min-width: 58em) {
  .community {
    padding: 5rem 2.5rem 7.5rem;
  }
}
@media (min-width: 85em) {
  .community {
    padding: 5rem 7.5rem 7.5rem;
  }
}
.community .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 80em;
  justify-content: center;
  width: 100%;
}
.community .bg-triangle {
  height: auto;
  position: absolute;
  width: 10rem;
  top: 26rem;
  right: 0rem;
}
@media (min-width: 58em) {
  .community .bg-triangle {
    width: 18rem;
    top: 14rem;
    right: 0rem;
  }
}
.community .bg-pic {
  height: auto;
  position: absolute;
  width: 6rem;
  top: 27rem;
  left: 0rem;
}
@media (min-width: 58em) {
  .community .bg-pic {
    width: 15rem;
    top: 22rem;
    left: 0rem;
  }
}
.community .titles {
  margin-bottom: 4.5rem;
  max-width: 46em;
}
.community .titles h1 {
  padding-bottom: 1.5rem;
}
.community .titles p {
  font-size: 1rem;
  text-align: center;
  color: #585D62;
}
.community .cards {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  gap: 1.5rem;
  z-index: 1;
  width: 100%;
}
@media (min-width: 58em) {
  .community .cards {
    flex-direction: row;
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }
}
@media (min-width: 85em) {
  .community .cards {
    margin-left: 7.5rem;
    margin-right: 7.5rem;
  }
}
.community .cards .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 1 auto;
  width: 100%;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  padding-left: 2rem;
  background: #FFFFFF;
}
.community .cards .card > img {
  width: 6.5rem;
  height: 6.5rem;
  align-self: flex-start;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.community .cards .card p {
  padding-right: 2rem;
  padding-bottom: 1.5rem;
  text-align: start;
  font-size: 16px;
  color: #585D62;
  flex-grow: 1;
}

.timeline {
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
  width: 100%;
}
@media (min-width: 58em) {
  .timeline {
    margin-top: 5.5rem;
  }
}
.timeline .divider {
  border: 0;
  border-top: 1px solid #DADFE5;
}
.timeline .row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem 7.875rem;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 58em) {
  .timeline .row {
    margin-bottom: 3rem;
    flex-direction: row;
  }
}
.timeline .column-left {
  font-family: "Archivo", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 100;
  font-size: 2rem;
  line-height: 2rem;
}
@media (min-width: 58em) {
  .timeline .column-left {
    line-height: 4rem;
    font-size: 4rem;
  }
}
@media (min-width: 58em) {
  .timeline .left-years {
    width: 12rem;
  }
}
@media (min-width: 58em) {
  .timeline .left-nums {
    width: 5rem;
  }
}
.timeline .column-mid {
  font-family: "Archivo", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  align-items: center;
}
@media (min-width: 58em) {
  .timeline .column-mid {
    font-size: 2rem;
  }
}
@media (min-width: 58em) {
  .timeline .mid-years {
    width: 17.625rem;
  }
}
@media (min-width: 58em) {
  .timeline .mid-nums {
    width: 24rem;
  }
}
.timeline .column-right {
  margin-top: 0.5rem;
  color: #585D62;
}
@media (min-width: 58em) {
  .timeline .column-right {
    width: 30.375rem;
  }
}

.grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.grid .row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 58em) {
  .grid .row {
    flex-direction: row;
    gap: 3rem;
  }
}
.grid .column {
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  width: 100%;
  border-top: 4px solid #DADFE5;
  color: #585D62;
}
@media (min-width: 58em) {
  .grid .column {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}
.grid .column h4 {
  color: #1A1C1F;
}
.grid .column strong {
  color: #1A1C1F;
}
.grid .column-spacer {
  width: 100%;
}
.grid .grid-icon {
  width: 6.5rem;
  height: auto;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}

.primary-button button {
  border-radius: 999px;
  border: 0rem;
  font-family: "Archivo", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.0125em;
  color: #FFFFFF;
  white-space: nowrap;
}
.primary-button .small {
  font-size: 1rem;
  padding: 0.5rem 1.5rem;
}
@media (min-width: 58em) {
  .primary-button .small {
    padding: 0.5rem 2.5rem;
  }
}
.primary-button .large {
  font-size: 1.125rem;
  padding: 1.125rem 2rem;
}
@media (min-width: 58em) {
  .primary-button .large {
    padding: 1.5rem 3rem;
  }
}
.primary-button .primary {
  background: linear-gradient(87.21deg, #4787F0 0%, #6451F2 100%);
}
.primary-button .dark {
  background: rgba(26, 28, 31, 0.4);
}

.secondary-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: "Archivo", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  column-gap: 0.25rem;
  border-bottom: 1px solid #DADFE5;
  padding-bottom: 0.25rem;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.0125em;
  color: #1A1C1F;
  text-decoration: none;
  white-space: nowrap;
}
.secondary-button.dark {
  color: #FFFFFF;
  border-bottom-color: #2B2F33;
}

.interested {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #1A1C1F;
  padding: 4.5rem 1.5rem 1.5rem 1.5rem;
}
@media (min-width: 58em) {
  .interested {
    padding: 7.5rem 2.5rem 3rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .interested {
    padding: 7.5rem 7.5rem 3rem 7.5rem;
  }
}
.interested .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  max-width: 80em;
  background: linear-gradient(45.31deg, rgba(255, 137, 6, 0.75) -0.55%, rgba(241, 91, 71, 0.75) 50.25%, rgba(229, 49, 112, 0.75) 100%);
  padding: 2.5rem 1.5rem;
  width: 100%;
}
@media (min-width: 58em) {
  .interested .inner {
    padding: 7.5rem;
  }
}
.interested .inner h1 {
  display: flex;
  align-items: center;
  color: #FFFFFF;
  margin-bottom: 1.5rem;
}
.interested .inner p {
  font-family: "Archivo", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 0.0015em;
  color: #FFFFFF;
  margin-bottom: 2.5rem;
}
@media (min-width: 58em) {
  .interested .inner p {
    margin-bottom: 3rem;
    font-size: 1.5rem;
  }
}

.about-reasons {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1.5rem 2.5rem;
}
@media (min-width: 58em) {
  .about-reasons {
    padding: 5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .about-reasons {
    padding: 5rem 7.5rem;
  }
}
.about-reasons .container {
  display: flex;
  flex-direction: column;
  max-width: 80em;
  width: 100%;
}
.about-reasons .bg-triangle {
  height: auto;
  position: absolute;
  width: 5rem;
  top: -1rem;
  right: 0;
}
@media (min-width: 58em) {
  .about-reasons .bg-triangle {
    width: 14rem;
    top: 0;
  }
}
.about-reasons h5 {
  text-align: center;
}
@media (min-width: 58em) {
  .about-reasons {
    padding-top: 4.5rem;
  }
}
@media (min-width: 58em) {
  .about-reasons .title {
    max-width: 12em;
    font-size: 2.5rem;
  }
}
.about-reasons .btn {
  margin-top: 3rem;
}
@media (min-width: 58em) {
  .about-reasons .btn {
    margin-top: 6.5rem;
  }
}

.about-mission {
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
  padding: 4.5rem 1.5rem;
  background: #F4F7F9;
  z-index: -2;
  overflow: hidden;
}
@media (min-width: 58em) {
  .about-mission {
    padding: 7.5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .about-mission {
    padding: 7.5rem;
  }
}
.about-mission .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80em;
}
.about-mission .container .text {
  align-items: flex-start;
}
.about-mission h2 {
  color: #1A1C1F;
  line-height: 1.25;
  font-size: 1.75rem;
}
@media (min-width: 58em) {
  .about-mission h2 {
    font-size: 3.5rem;
    line-height: 4.5rem;
  }
}
.about-mission .bg-pic {
  position: absolute;
  z-index: -1;
  width: 8rem;
  height: 8rem;
  bottom: -3rem;
  right: -1.25rem;
}
@media (min-width: 58em) {
  .about-mission .bg-pic {
    width: 15rem;
    height: 15rem;
    bottom: -3rem;
    right: -1.25rem;
  }
}

.about-past {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 4.5rem 1.5rem;
  background: #FFFFFF;
}
@media (min-width: 58em) {
  .about-past {
    padding: 7.5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .about-past {
    padding: 7.5rem;
  }
}
.about-past .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80em;
  width: 100%;
}
.about-past .container .header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 2rem;
}
@media (min-width: 58em) {
  .about-past .container .header {
    margin-bottom: 5.5rem;
  }
}
.about-past .container .header img {
  width: 4.5rem;
  height: auto;
}
.about-past .container .header ul {
  list-style-type: none;
  padding-left: 2rem;
}
@media (min-width: 58em) {
  .about-past .container .header ul {
    padding-left: 2.5rem;
  }
}
.about-past .container .header h2 {
  color: #1A1C1F;
}
@media (min-width: 58em) {
  .about-past .container .header h2 {
    line-height: 4.5rem;
  }
}
.about-past .container .header h5 {
  margin-bottom: 0.5rem;
}
@media (min-width: 58em) {
  .about-past .container .header h5 {
    margin-bottom: 1rem;
  }
}
.about-past .container .body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: "Archivo", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  letter-spacing: 0.0015em;
  color: #585D62;
  width: 100%;
}
@media (min-width: 58em) {
  .about-past .container .body {
    flex-direction: row;
    font-size: 1.5rem;
  }
}
.about-past .container .body .story {
  width: 100%;
  padding-bottom: 2rem;
  border-bottom: 4px solid #DADFE5;
  margin-bottom: 2rem;
}
@media (min-width: 58em) {
  .about-past .container .body .story {
    padding-right: 4rem;
    padding-bottom: 0;
    border-right: 4px solid #DADFE5;
    border-bottom: 0;
    margin-bottom: 0;
  }
}
.about-past .container .body .story * + p {
  margin-top: 1.5rem;
}
.about-past .container .body .quote {
  width: 100%;
  flex-grow: 1;
  flex-direction: column;
}
@media (min-width: 58em) {
  .about-past .container .body .quote {
    padding-left: 4rem;
  }
}
.about-past .container .body .quote h3 {
  color: #1A1C1F;
}

.partners {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 2.5rem 1.5rem 4.5rem;
  background: #F4F7F9;
  overflow: hidden;
}
@media (min-width: 58em) {
  .partners {
    padding: 5rem 2.5rem 5.5rem;
  }
}
@media (min-width: 85em) {
  .partners {
    padding: 5rem 7.5rem 5.5rem;
  }
}
.partners .container {
  display: flex;
  flex-direction: column;
  max-width: 80em;
  text-align: center;
  width: 100%;
}
.partners .bg-triangle {
  position: absolute;
  width: 12rem;
  height: 14rem;
  top: 20rem;
  right: -5rem;
}
@media (min-width: 58em) {
  .partners .bg-triangle {
    width: 26rem;
    height: 30rem;
    top: 24rem;
    right: -8rem;
  }
}
.partners .titles {
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 58em) {
  .partners .titles {
    margin-bottom: 3rem;
  }
}
.partners .titles h1 {
  padding-bottom: 1.5rem;
}
.partners .titles p {
  text-align: center;
  color: #585D62;
  max-width: 60ch;
}
@media (min-width: 58em) {
  .partners .titles p {
    font-size: 1.5rem;
  }
}

.advantages {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4.5rem 1.5rem;
}
@media (min-width: 58em) {
  .advantages {
    padding: 7.5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .advantages {
    padding: 7.5rem;
  }
}
.advantages .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80em;
  justify-content: center;
  width: 100%;
}
.advantages h2 {
  margin-bottom: 4.5rem;
}
.advantages .button {
  margin-top: 2.5rem;
  text-align: center;
}
@media (min-width: 85em) {
  .advantages .button {
    margin-top: 4.5rem;
  }
}

.samples {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 4.5rem 1.5rem 0;
  background: #F4F7F9;
  overflow: hidden;
  width: 100%;
}
@media (min-width: 58em) {
  .samples {
    padding: 7.5rem 2.5rem 0;
  }
}
@media (min-width: 85em) {
  .samples {
    padding: 7.5rem 7.5rem 0;
  }
}
.samples .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80em;
  width: 100%;
}
.samples .bg-triangle {
  position: absolute;
  width: 10rem;
  height: 11rem;
  top: -3rem;
  right: 0;
}
@media (min-width: 58em) {
  .samples .bg-triangle {
    width: 20rem;
    height: 24rem;
    top: 0;
    right: -3.5rem;
  }
}
.samples h2 {
  margin-bottom: 2.5rem;
}
@media (min-width: 58em) {
  .samples h2 {
    margin-bottom: 4.5rem;
  }
}
.samples .slideshow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 3rem;
  width: 100%;
}
.samples .slideshow .btn-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.samples .slideshow .btn-row a {
  font-family: "Archivo", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  border: 0rem;
  background-color: rgba(218, 223, 229, 0.4);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.075em;
  color: #585D62;
}
@media (min-width: 58em) {
  .samples .slideshow .btn-row a {
    padding: 0.75rem 2rem;
    font-size: 1.125rem;
  }
}
.samples .slideshow .btn-row a:hover {
  background-color: #FFFFFF;
}
.samples .slideshow .btn-row a.active {
  background-color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
.samples .slideshow .btn-row a.active:not(.stopped)::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background: #F15B47;
  animation: slideshow 5s infinite linear;
  transform-origin: left;
}
@keyframes slideshow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.samples .slideshow .images {
  z-index: 1;
}
.samples .slideshow .images img {
  box-shadow: 0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);
  display: none;
}
.samples .slideshow .images img.active {
  display: block;
}

.benefits {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 9rem 1.5rem 4.5rem;
  margin-top: -4.5rem;
  background: #1A1C1F;
  position: relative;
}
@media (min-width: 58em) {
  .benefits {
    padding: 15rem 7.5rem 7.5rem;
  }
}
@media (min-width: 85em) {
  .benefits {
    padding: 15rem 7.5rem 7.5rem;
  }
}
.benefits .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80em;
  width: 100%;
}
.benefits .bg-pic {
  position: absolute;
  width: 6rem;
  height: 6rem;
  right: 3rem;
  top: 0;
}
@media (min-width: 58em) {
  .benefits .bg-pic {
    width: 12rem;
    height: 12rem;
    right: 3rem;
    top: 0;
  }
}
.benefits h2 {
  color: #FFFFFF;
  margin-bottom: 3rem;
}
@media (min-width: 58em) {
  .benefits h2 {
    margin-bottom: 5.5rem;
  }
}
.benefits .cards {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  z-index: 1;
  width: 100%;
}
@media (min-width: 58em) {
  .benefits .cards {
    flex-direction: row;
  }
}
.benefits .cards .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 1 auto;
  width: 100%;
  padding: 2.5rem 2rem;
  background: #2B2F33;
}
.benefits .cards .card h4 {
  color: #FFFFFF;
}
.benefits .cards .card img {
  height: 6.5rem;
  align-self: flex-start;
  margin-bottom: 2.5rem;
}

.process {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 4.5rem 1.5rem;
  overflow: hidden;
}
@media (min-width: 58em) {
  .process {
    padding: 7.5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .process {
    padding: 7.5rem;
  }
}
.process .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80em;
  width: 100%;
}
.process .button {
  margin-top: 1rem;
  text-align: center;
}
@media (min-width: 58em) {
  .process .button {
    margin-top: 2rem;
  }
}

.partner-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 4.5rem 1.5rem 1rem;
  background-color: #F4F7F9;
  overflow: hidden;
}
@media (min-width: 58em) {
  .partner-grid {
    padding: 7.5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .partner-grid {
    padding: 7.5rem;
  }
}
.partner-grid .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80em;
  width: 100%;
}
.partner-grid h2 {
  margin-bottom: 2.5rem;
}
@media (min-width: 58em) {
  .partner-grid h2 {
    margin-bottom: 4.5rem;
  }
}
.partner-grid .button {
  margin-top: 4.5rem;
  text-align: center;
}
.partner-grid .partner-cards-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  z-index: 1;
  margin-bottom: 1.5rem;
  width: 100%;
}
@media (min-width: 58em) {
  .partner-grid .partner-cards-row {
    flex-direction: row;
  }
}
.partner-grid .partner-cards-row .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 2.5rem 1.5rem;
  background: #FFFFFF;
  text-decoration: none;
}
.partner-grid .partner-cards-row .card img {
  margin-bottom: 1.5rem;
  width: auto;
  height: 4rem;
}
.partner-grid .partner-cards-row .card p {
  color: #585D62;
}
.partner-grid .partner-cards-row .card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 2.5rem 1.5rem;
}

.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 2.5rem 1.5rem 4.5rem;
  background: #F4F7F9;
  overflow: hidden;
}
@media (min-width: 58em) {
  .product {
    padding: 5rem 2.5rem 5.5rem;
  }
}
@media (min-width: 85em) {
  .product {
    padding: 5rem 7.5rem 5.5rem;
  }
}
.product .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80em;
  width: 100%;
}
.product .bg-triangle {
  position: absolute;
  width: 10rem;
  height: 11;
  top: 15rem;
  right: 0rem;
}
@media (min-width: 58em) {
  .product .bg-triangle {
    width: 22.625rem;
    height: 26.313rem;
    top: 31.813rem;
    right: 0rem;
  }
}
.product .bg-pic {
  position: absolute;
  width: 10rem;
  height: 11rem;
  left: 0rem;
  top: 45rem;
}
@media (min-width: 58em) {
  .product .bg-pic {
    width: 15.563rem;
    height: 15.063rem;
    left: 0rem;
    top: 36.75rem;
  }
}
.product .titles {
  margin-bottom: 3rem;
}
@media (min-width: 58em) {
  .product .titles {
    margin-bottom: 4.5rem;
    padding-left: 9.6rem;
    padding-right: 9.6rem;
  }
}
.product .titles h1 {
  margin-bottom: 1.5rem;
}
.product .titles p {
  text-align: center;
  color: #585D62;
}
@media (min-width: 58em) {
  .product .titles p {
    font-size: 1.5rem;
  }
}
.product .cards {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  z-index: 1;
  margin-bottom: 3rem;
  width: 100%;
}
@media (min-width: 58em) {
  .product .cards {
    margin-bottom: 4.5rem;
    flex-direction: row;
  }
}
.product .cards .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 1 auto;
  width: 100%;
  padding: 2.5rem 2rem;
  background: #FFFFFF;
}
.product .cards .card h4 {
  margin-bottom: 1.5rem;
}
.product .cards .card img {
  height: 6.5rem;
  align-self: flex-start;
  margin-bottom: 1.5rem;
}
.product .cards .card p {
  text-align: start;
  font-size: 16px;
  color: #585D62;
}

.extensibility {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4.5rem 1.5rem 1.5rem;
}
@media (min-width: 58em) {
  .extensibility {
    padding: 7.5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .extensibility {
    padding: 7.5rem;
  }
}
.extensibility .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80em;
  width: 100%;
}
.extensibility .caption-title {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  width: 100%;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 58em) {
  .extensibility .caption-title {
    flex-direction: row;
    margin-bottom: 0;
  }
}
.extensibility .caption-title h2 {
  width: 100%;
}
@media (min-width: 58em) {
  .extensibility .caption-title h2 {
    margin-bottom: 4.5rem;
  }
}
.extensibility .caption-title p {
  width: 100%;
  color: #585D62;
}

.industry {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 4.5rem 1.5rem;
  background: #1A1C1F;
}
@media (min-width: 58em) {
  .industry {
    padding: 7.5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .industry {
    padding: 7.5rem;
  }
}
.industry .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80em;
  width: 100%;
}
.industry .caption-title {
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
  gap: 1.5rem;
}
@media (min-width: 58em) {
  .industry .caption-title {
    flex-direction: row;
    margin-bottom: 5.5rem;
  }
}
.industry .caption-title h2 {
  width: 100%;
  color: #FFFFFF;
}
.industry .caption-title p {
  width: 100%;
  color: #BCC1C6;
  vertical-align: bottom;
}
.industry .image-holder {
  display: flex;
  flex-direction: row;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
@media (min-width: 58em) {
  .industry .image-holder {
    flex-direction: row;
  }
}
.industry .image-holder .links {
  width: 100%;
}
.industry .image-holder .links ul {
  padding: 0;
  list-style-type: none;
  gap: 0.5rem;
  position: relative;
}
.industry .image-holder .links ul li {
  width: 100%;
  margin-bottom: 0.25rem;
  scroll-margin-top: 4.5rem;
}
@media (min-width: 58em) {
  .industry .image-holder .links ul li {
    margin-bottom: 0;
  }
}
.industry .image-holder .links ul li a {
  font-weight: 500;
  font-size: 1.25rem;
  text-decoration: none;
  letter-spacing: 0.0075em;
  color: #9199A1;
  padding: 1rem 1.5rem;
  display: block;
  background: #2B2F33;
}
@media (min-width: 58em) {
  .industry .image-holder .links ul li a {
    display: inline-block;
    width: 50%;
    background: none;
  }
}
.industry .image-holder .links ul li a:hover {
  background: #2B2F33;
}
.industry .image-holder .links ul li.selected a {
  background: #43464A;
}
@media (min-width: 58em) {
  .industry .image-holder .links ul li.selected a {
    background: #2B2F33;
  }
}
.industry .image-holder .links ul li.selected h5 {
  color: #FFFFFF;
}
.industry .image-holder .links ul li.selected figure {
  display: block;
  background: #43464A;
}
@media (min-width: 58em) {
  .industry .image-holder .links ul li.selected figure {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: #2B2F33;
  }
}
.industry .image-holder .links ul li figure {
  padding: 1.5rem;
  scroll-margin-top: 4rem;
  display: none;
  background: #2B2F33;
}
.industry .image-holder .links ul li figure img {
  margin-bottom: 1rem;
  width: 100%;
  height: auto;
}
.industry .image-holder .links ul li figure figcaption {
  color: #BCC1C6;
}

.product-process {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 4.5rem 1.5rem;
  background: #FFFFFF;
}
@media (min-width: 58em) {
  .product-process {
    padding: 7.5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .product-process {
    padding: 7.5rem;
  }
}
.product-process .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80em;
  width: 100%;
}
.product-process .caption-title {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}
@media (min-width: 58em) {
  .product-process .caption-title {
    flex-direction: row;
  }
}
.product-process .caption-title h2 {
  width: 100%;
}
.product-process .caption-title .caption-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 1.5rem;
  width: 100%;
}
@media (min-width: 58em) {
  .product-process .caption-title .caption-link {
    padding-top: 0.75rem;
  }
}
.product-process .caption-title .caption-link p {
  color: #585D62;
}
.product-process .button {
  text-align: center;
}
@media (min-width: 58em) {
  .product-process .button {
    margin-top: 2.5rem;
  }
}

.support {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4.5rem 1.5rem;
  background: #F4F7F9;
}
@media (min-width: 58em) {
  .support {
    padding: 7.5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .support {
    padding: 7.5rem;
  }
}
.support .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80em;
  width: 100%;
}
.support .titles {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 58em) {
  .support .titles {
    flex-direction: row;
    margin-bottom: 5.5rem;
  }
}
.support .titles h2 {
  width: 100%;
}
.support .titles p {
  width: 100%;
  color: #585D62;
}
@media (min-width: 58em) {
  .support .titles p {
    margin-top: 0.75rem;
  }
}
.support .cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  z-index: 1;
  width: 100%;
}
@media (min-width: 58em) {
  .support .cards {
    flex-direction: row;
  }
}
.support .cards .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 1 auto;
  width: 100%;
  padding: 2.5rem 2rem;
  row-gap: 1.5rem;
  background: #FFFFFF;
}
.support .cards .card p {
  text-align: start;
  font-size: 16px;
  color: #585D62;
  flex-grow: 1;
}

.used {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4.5rem 1.5rem;
}
@media (min-width: 58em) {
  .used {
    padding: 7.5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .used {
    padding: 7.5rem;
  }
}
.used .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80em;
  width: 100%;
}
.used h2 {
  margin-bottom: 2.5rem;
}
@media (min-width: 58em) {
  .used h2 {
    margin-bottom: 4.5rem;
  }
}
.used .image-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.used .image-container .logos {
  display: flex;
  flex-direction: row;
  column-gap: 1rem;
}
.used .image-container .logos a {
  padding: 0.75rem;
}
@media (min-width: 58em) {
  .used .image-container .logos a {
    padding: 1.5rem;
  }
}
.used .image-container .logos a img {
  height: 2.5rem;
}
.used .image-container .logos a.active {
  background: #F4F7F9;
}
.used .image-container .logos a:hover {
  background: #F4F7F9;
}
.used .image-container .images .image {
  position: relative;
  width: 100%;
  display: none;
  padding: 0;
  justify-content: flex-end;
  background-size: cover;
  background-repeat: no-repeat;
}
.used .image-container .images .image.active {
  display: flex;
}
@media (min-width: 58em) {
  .used .image-container .images .image {
    padding: 4.5rem 0 4.5rem 4.5rem;
  }
}
.used .image-container .images .image article {
  max-width: 43rem;
  padding: 2.5rem 1.5rem;
  background-color: #F4F7F9;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 58em) {
  .used .image-container .images .image article {
    padding: 4.5rem;
  }
}
.used .image-container .images .image article h3 {
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}
.used .image-container .images .image article p {
  font-size: 16px;
  color: #585D62;
  margin-bottom: 1.5rem;
}
@media (min-width: 58em) {
  .used .image-container .images .image article p {
    margin-bottom: 2.5rem;
  }
}
.used .image-container .images .image article div {
  color: #1A1C1F;
  margin-bottom: 0.5rem;
}

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 1.5rem 1.5rem 0;
}
@media (min-width: 58em) {
  .intro {
    padding: 5rem 2.5rem 0;
  }
}
@media (min-width: 85em) {
  .intro {
    padding: 5rem 7.5rem 0;
  }
}
.intro .container {
  align-items: center;
  width: 100%;
}
.intro .titles {
  margin-bottom: 2.5rem;
}
@media (min-width: 58em) {
  .intro .titles {
    margin-bottom: 3rem;
  }
}
.intro .titles h1 {
  margin-bottom: 1.5rem;
  max-width: 25ch;
}
.intro .titles p {
  font-size: 1.5rem;
  font-family: "Archivo", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  align-items: center;
  text-align: center;
  letter-spacing: 0.005em;
  color: #585D62;
}
@media (min-width: 58em) {
  .intro .titles p {
    font-size: 2rem;
  }
}
.intro .buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 2.5rem;
  margin-bottom: 4rem;
}
@media (min-width: 58em) {
  .intro .buttons {
    column-gap: 3rem;
    margin-bottom: 7.5rem;
  }
}
.intro .screenshot {
  width: 100%;
  height: auto;
}
.intro .home-bg-pic {
  position: absolute;
  width: 6rem;
  height: 6rem;
  left: 0rem;
  bottom: 7rem;
  z-index: -1;
}
@media (min-width: 58em) {
  .intro .home-bg-pic {
    width: 15rem;
    height: 15rem;
    left: 0rem;
    top: 30rem;
  }
}
.intro .home-triangle-gradient {
  position: absolute;
  width: 10rem;
  height: 12rem;
  right: 0rem;
  bottom: 1rem;
  z-index: -1;
}
@media (min-width: 58em) {
  .intro .home-triangle-gradient {
    width: 25rem;
    height: 29rem;
    right: 0rem;
    top: 20rem;
  }
}

.flexibility {
  justify-content: center;
  position: relative;
  display: flex;
  padding: 9rem 1.5rem 4.5rem 1.5rem;
  margin-top: -4.5rem;
  background-color: #1A1C1F;
}
@media (min-width: 58em) {
  .flexibility {
    padding: 15rem 2.5rem 7.5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .flexibility {
    padding: 15rem 7.5rem 7.5rem 7.5rem;
  }
}
.flexibility .container {
  align-items: center;
  width: 100%;
}
.flexibility .caption-title {
  display: flex;
  flex-direction: column;
  column-gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 58em) {
  .flexibility .caption-title {
    flex-direction: row;
    margin-bottom: 4.5rem;
  }
}
.flexibility .caption-title .headers {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.flexibility .caption-title .headers h2 {
  color: #FFFFFF;
  margin-bottom: 1.5rem;
}
@media (min-width: 58em) {
  .flexibility .caption-title .headers h2 {
    margin-bottom: 4.5rem;
  }
}
.flexibility .caption-title .headers p {
  font-size: 16px;
  color: #BCC1C6;
}
@media (min-width: 58em) {
  .flexibility .caption-title .headers p {
    padding-top: 3rem;
  }
}
.flexibility .cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  z-index: 1;
  width: 100%;
  margin-bottom: 3rem;
}
@media (min-width: 58em) {
  .flexibility .cards {
    margin-bottom: 4.5rem;
    flex-direction: row;
  }
}
.flexibility .cards .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 2.5rem 2rem;
  background: #2B2F33;
}
.flexibility .cards .card h4 {
  margin-bottom: 1.5rem;
  color: #FFFFFF;
}
.flexibility .cards .card img {
  height: 6.5rem;
  align-self: flex-start;
  margin-bottom: 1.5rem;
}
.flexibility .cards .card p {
  text-align: start;
  font-size: 16px;
  color: #BCC1C6;
}
.flexibility .secondary-button {
  border-bottom: 1px solid #2B2F33;
  color: #FFFFFF;
}

.advantages {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 1.5rem;
}
@media (min-width: 58em) {
  .advantages {
    padding: 7.5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .advantages {
    padding: 7.5rem;
  }
}
.advantages .container {
  align-items: flex-start;
  width: 100%;
}
.advantages h2 {
  margin-bottom: 3rem;
  max-width: 36.75rem;
}
@media (min-width: 58em) {
  .advantages h2 {
    margin-bottom: 4.5rem;
  }
}
.advantages .link {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem;
  text-align: center;
}
@media (min-width: 58em) {
  .advantages .link {
    margin-top: 4.5rem;
  }
}

.scroller {
  display: flex;
  justify-content: center;
  padding: 4.5rem 1.5rem;
  background: #F4F7F9;
  width: 100%;
}
@media (min-width: 58em) {
  .scroller {
    padding: 7.5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .scroller {
    padding: 7.5rem;
  }
}
.scroller .container {
  width: 100%;
}
.scroller h2 {
  margin-bottom: 3rem;
}
@media (min-width: 58em) {
  .scroller h2 {
    margin-bottom: 4.5rem;
  }
}
.scroller .pic-text {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: 3rem;
  justify-content: space-between;
}
@media (min-width: 58em) {
  .scroller .pic-text {
    flex-direction: row;
  }
}
.scroller .pic-text .texts {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 58em) {
  .scroller .pic-text .texts {
    gap: 3rem;
  }
}
.scroller .pic-text .texts .text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  vertical-align: middle;
  width: auto;
}
@media (min-width: 58em) {
  .scroller .pic-text .texts .text {
    width: 24rem;
  }
}
.scroller .pic-text .texts .text h4 {
  margin-bottom: 0.5rem;
}
.scroller .pic-text .texts .text p {
  font-size: 16px;
  color: #585D62;
}
.scroller .pic-text .texts .text img {
  height: 24.125rem;
}

.satisfied {
  display: flex;
  justify-content: center;
  padding: 4.5rem 1.5rem 4.5rem;
  width: 100%;
}
@media (min-width: 58em) {
  .satisfied {
    padding: 7.5rem 2.5rem 4.5rem;
  }
}
@media (min-width: 85em) {
  .satisfied {
    padding: 7.5rem 7.5rem 4.5rem;
  }
}
.satisfied .container {
  width: 100%;
}
.satisfied .titles {
  margin-bottom: 3rem;
}
@media (min-width: 58em) {
  .satisfied .titles {
    margin-bottom: 4.5rem;
  }
}
.satisfied .logos {
  display: flex;
  flex-direction: row;
  gap: 2rem 2rem;
  align-items: center;
  flex-wrap: wrap;
}
@media (min-width: 58em) {
  .satisfied .logos {
    gap: 1.5rem 3rem;
  }
}
.satisfied .logos img {
  height: 1.5rem;
  filter: grayscale(1);
}

.quotes {
  display: flex;
  justify-content: center;
  padding: 0 0 4.5rem;
  width: 100%;
}
@media (min-width: 58em) {
  .quotes {
    padding: 0 2.5rem 7.5rem;
  }
}
@media (min-width: 85em) {
  .quotes {
    padding: 0 7.5rem 7.5rem;
  }
}
.quotes .scroll-wrapper {
  width: 100%;
  max-width: 80em;
}
@media (min-width: 58em) {
  .quotes .scroll-wrapper {
    overflow: hidden;
  }
}
.quotes .quote-container {
  display: flex;
  flex-direction: row;
  column-gap: 1.5rem;
  overflow: auto;
  padding: 0 1.5rem;
  width: 100%;
}
@media (min-width: 58em) {
  .quotes .quote-container {
    padding: 0;
  }
}
.quotes .quote-container .quote-card {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  padding: 1.5rem;
  position: relative;
  width: 80vw;
  background: #FFFFFF url("/assets/img/icons/quote-mark.svg") no-repeat;
  background-position-x: calc(100% - 1.5rem);
  background-position-y: calc(100% - 1.5rem);
  background-size: 4rem;
  border: 2px solid #F0F4F7;
}
@media (min-width: 58em) {
  .quotes .quote-container .quote-card {
    padding: 4.5rem;
    width: 49.5rem;
    background-position-x: calc(100% - 2.5rem);
    background-position-y: calc(100% - 2.5rem);
    background-size: initial;
  }
}
.quotes .quote-container .quote-card .quotation {
  flex-grow: 1;
  font-family: "Archivo", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.0015em;
  color: #1A1C1F;
  margin-bottom: 2rem;
}
@media (min-width: 58em) {
  .quotes .quote-container .quote-card .quotation {
    font-size: 1.5rem;
    margin-bottom: 3rem;
  }
}
.quotes .quote-container .quote-card .person {
  display: flex;
  flex-direction: column;
}
.quotes .quote-container .quote-card .person .images {
  display: flex;
  align-items: flex-end;
  margin-bottom: 1rem;
}
.quotes .quote-container .quote-card .person .images .avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 999px;
}
@media (min-width: 58em) {
  .quotes .quote-container .quote-card .person .images .avatar {
    width: 5rem;
    height: 5rem;
  }
}
.quotes .quote-container .quote-card .person .images .company-logo {
  padding: 0.5rem 0.75rem;
  background: white;
  box-shadow: 0px 16px 24px rgba(26, 28, 31, 0.06), 0px 2px 6px rgba(26, 28, 31, 0.04), 0px 0px 1px rgba(26, 28, 31, 0.04);
  border-radius: 999px;
  transform: translateX(-1rem);
  height: 2rem;
  width: auto;
  display: block;
}
@media (min-width: 58em) {
  .quotes .quote-container .quote-card .person .images .company-logo {
    padding: 0.75rem 1rem;
    height: 3rem;
  }
}
.quotes .quote-container .quote-card .person p {
  color: #72797F;
  font-size: 0.875rem;
}
@media (min-width: 58em) {
  .quotes .quote-container .quote-card .person p {
    font-size: 1rem;
  }
}

.contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 2.5rem 1.5rem 0;
}
@media (min-width: 58em) {
  .contacts {
    padding: 5rem 2.5rem 0;
  }
}
@media (min-width: 85em) {
  .contacts {
    padding: 5rem 7.5rem 0;
  }
}
.contacts .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 80em;
  width: 100%;
}
.contacts .bg-triangle {
  width: 22.625rem;
  height: auto;
  position: absolute;
  top: 21.313rem;
  right: 0rem;
}
.contacts .bg-pic {
  width: 17rem;
  height: auto;
  position: absolute;
  top: 44.125rem;
  left: 0rem;
}
.contacts .bottom-border {
  width: 100%;
  position: absolute;
  top: 84rem;
}
.contacts h1 {
  margin-bottom: 1.5rem;
  max-width: 56rem;
}
.contacts p {
  max-width: 56rem;
  font-family: "Archivo", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 1rem;
  letter-spacing: 0.0015em;
  color: #585D62;
}
@media (min-width: 58em) {
  .contacts p {
    font-size: 1.5rem;
  }
}
.contacts form {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 1;
  max-width: 62.25rem;
  width: 100%;
  background: #F4F7F9;
  margin-top: 3rem;
  text-align: left;
}
@media (min-width: 58em) {
  .contacts form {
    margin-top: 4.5rem;
    padding: 4.5rem 6rem;
  }
}
.contacts form .big-label {
  margin-bottom: 0.75rem;
  font-family: "Archivo", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: #1A1C1F;
}
@media (min-width: 58em) {
  .contacts form .big-label {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }
}
.contacts form .radio {
  margin-bottom: 1.5rem;
  width: 100%;
}
@media (min-width: 58em) {
  .contacts form .radio {
    margin-bottom: 3rem;
  }
}
.contacts form .option {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.75rem;
  gap: 0.75rem;
}
.contacts form .option label {
  width: 100%;
}
.contacts form input[type=radio] {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #1A1C1F;
}
.contacts form input[type=radio]:checked {
  background-color: #1A1C1F;
  border: 6px solid;
}
.contacts form input[type=text] {
  width: 100%;
  height: 3rem;
  margin-bottom: 1.5rem;
  border: none;
  padding: 0.75rem 1rem;
  gap: 0.5rem;
  background: #FFFFFF;
  color: #585D62;
}
@media (min-width: 58em) {
  .contacts form input[type=text] {
    margin-bottom: 3rem;
  }
}
.contacts form textarea {
  width: 100%;
  height: 9rem;
  margin-bottom: 1.5rem;
  border: none;
  padding: 0.75rem 1rem;
  gap: 0.5rem;
  background: #FFFFFF;
  color: #585D62;
  resize: none;
}
@media (min-width: 58em) {
  .contacts form textarea {
    margin-bottom: 3rem;
  }
}

.help {
  justify-content: center;
  display: flex;
  padding: 9rem 1.5rem 1.5rem 1.5rem;
  margin-top: -4.5rem;
  background: #1A1C1F;
}
@media (min-width: 58em) {
  .help {
    padding: 15rem 2.5rem 7.5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .help {
    padding: 15rem 7.5rem 7.5rem 7.5rem;
  }
}
.help .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 80em;
  width: 100%;
}
.help .caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2;
}
.help .caption .titles {
  display: flex;
  flex-direction: column;
  column-gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 58em) {
  .help .caption .titles {
    flex-direction: row;
    margin-bottom: 5.5rem;
  }
}
.help .caption .titles h2 {
  color: #FFFFFF;
  width: 100%;
  margin-bottom: 1.5rem;
}
@media (min-width: 58em) {
  .help .caption .titles h2 {
    flex-direction: row;
    margin-bottom: 0;
  }
}
.help .caption .titles p {
  font-size: 16px;
  color: #BCC1C6;
  width: 100%;
}
.help .cards {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 1.5rem;
  z-index: 1;
}
@media (min-width: 58em) {
  .help .cards {
    flex-direction: row;
  }
}
.help .cards .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 1 auto;
  width: 100%;
  padding: 2.5rem 2rem;
  background: #2B2F33;
}
.help .cards .card h4 {
  color: #FFFFFF;
}
.help .cards .card > img {
  height: 6.5rem;
  align-self: flex-start;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.help .cards .card p {
  flex-grow: 1;
  padding-bottom: 1.5rem;
  text-align: start;
  font-size: 16px;
  color: #BCC1C6;
}
.help .cards .card a {
  border-bottom-color: #43464A;
}

.l-header {
  display: flex;
  z-index: 2;
  padding: 0.5rem 1.5rem;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #FFFFFF;
  transition: all 0.15s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@media (min-width: 58em) {
  .l-header {
    justify-content: center;
    padding: 2rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .l-header {
    padding: 2rem 7.5rem;
  }
}
.l-header.scrolling {
  padding: 0 1.5rem;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid #F0F4F7;
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@media (min-width: 58em) {
  .l-header.scrolling {
    padding: 0.5rem 2.5rem;
  }
}
@media (min-width: 85em) {
  .l-header.scrolling {
    padding: 0.5rem 7.5rem;
  }
}
.l-header.menu-visible {
  height: 100%;
  position: fixed;
}
@media (min-width: 58em) {
  .l-header.menu-visible {
    height: auto;
  }
}
.l-header.menu-visible .l-header-main-menu {
  display: flex;
}
.l-header.menu-visible .l-header-buttons {
  display: flex;
}
.l-header.menu-visible .l-header-logo {
  position: absolute;
}
@media (min-width: 58em) {
  .l-header.menu-visible .l-header-logo {
    position: static;
  }
}
.l-header.menu-visible .menu-toggle {
  position: absolute;
}
@media (min-width: 58em) {
  .l-header.menu-visible .menu-toggle {
    position: static;
  }
}
.l-header .container {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 80em;
  width: 100%;
  justify-content: space-between;
}
@media (min-width: 58em) {
  .l-header .container {
    justify-content: center;
  }
}

.l-header-logo {
  top: 1.45rem;
  left: 1.5rem;
}
@media (min-width: 58em) {
  .l-header-logo {
    position: static;
  }
}
.l-header-logo img {
  max-height: 100%;
  width: auto;
  height: 1.125rem;
  display: block;
}
@media (min-width: 58em) {
  .l-header-logo img {
    height: 1.5rem;
  }
}

.l-header-main-menu {
  font-weight: 500;
  flex-grow: 1;
  position: absolute;
  top: 6rem;
  left: 0;
  width: 100%;
  display: none;
  align-items: center;
  justify-content: center;
}
@media (min-width: 58em) {
  .l-header-main-menu {
    display: flex;
    position: static;
    width: auto;
    height: auto;
    padding-left: 3.5rem;
    justify-content: flex-start;
  }
}
.l-header-main-menu ul {
  padding: 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style-type: none;
  gap: 0.5rem;
}
@media (min-width: 58em) {
  .l-header-main-menu ul {
    flex-direction: row;
  }
}
.l-header-main-menu ul li {
  font-size: 1.5rem;
}
@media (min-width: 58em) {
  .l-header-main-menu ul li {
    font-size: 1rem;
  }
}
.l-header-main-menu ul li img {
  height: 1.5rem;
}
.l-header-main-menu ul a {
  display: block;
  color: #585D62;
  padding: 0.875rem 1rem;
}
.l-header-main-menu ul a:hover {
  text-decoration: underline;
}

.l-header-buttons {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  width: 100vw;
  display: none;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 58em) {
  .l-header-buttons {
    gap: 2rem;
    flex-direction: row;
    position: static;
    width: auto;
    display: flex;
  }
}
.l-header-buttons a:first-of-type {
  font-weight: 500;
  color: #585D62;
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  align-items: center;
}
.l-header-buttons a:first-of-type:hover {
  text-decoration: underline;
}
.l-header-buttons a:first-of-type img {
  height: 1.25rem;
}
.l-header-buttons a:last-of-type button {
  padding: 1rem 2.5rem;
  font-size: 1.25rem;
}
@media (min-width: 58em) {
  .l-header-buttons a:last-of-type button {
    font-size: 1rem;
    padding: 0.5rem 2.5rem;
  }
}

.menu-toggle {
  height: 48px;
  border: 0;
  background: 0;
  font-weight: 500;
  color: #585D62;
  right: 1.5rem;
  top: 0.5rem;
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}
.menu-toggle::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background: url("/assets/img/icons/carbon_menu.svg") no-repeat center;
}
@media (min-width: 58em) {
  .menu-toggle {
    position: static;
    display: none;
  }
}

/* first level item */
.l-header-main-menu p,
.l-header-submenu-toggle,
.l-header-main-menu > ul > li > a {
  text-decoration: none;
}

.l-header-submenu-toggle {
  appearance: none;
  gap: 1rem;
  border: none;
  line-height: 1.5;
  text-align: left;
  background: none;
}
.l-header-submenu-toggle:hover {
  text-decoration: underline;
}
.l-header-submenu-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}
.l-header-submenu-toggle[aria-expanded=true] svg {
  transform: rotate(180deg);
}

.l-footer {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: #1A1C1F;
  padding: 4.5rem 1.5rem 4.5rem;
  width: 100%;
}
@media (min-width: 58em) {
  .l-footer {
    padding: 4.5rem 2.5rem 7.5rem;
  }
}
@media (min-width: 85em) {
  .l-footer {
    padding: 4.5rem 7.5rem 7.5rem;
  }
}
.l-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 80em;
  width: 100%;
}
.l-footer .l-footer-about-n-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 2rem 5.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #2B2F33;
}
@media (min-width: 58em) {
  .l-footer .l-footer-about-n-nav {
    flex-direction: row;
  }
}
.l-footer .l-footer-about-n-nav .l-footer-about {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.l-footer .l-footer-about-n-nav .l-footer-about img {
  height: 1.125rem;
  width: auto;
}
@media (min-width: 58em) {
  .l-footer .l-footer-about-n-nav .l-footer-about img {
    height: 1.5rem;
  }
}
.l-footer .l-footer-about-n-nav .l-footer-about .description {
  font-size: 16px;
  color: #FFFFFF;
  max-width: 36rem;
  display: inline-block;
}
.l-footer .l-footer-about-n-nav .contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}
.l-footer .l-footer-about-n-nav .contact a {
  font-size: 1.125rem;
  gap: 0.5rem;
}
.l-footer .l-footer-about-n-nav .contact img {
  max-width: none;
}
.l-footer .l-footer-about-n-nav .logos {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.l-footer .l-footer-about-n-nav .logos a {
  display: block;
  padding: 0.5rem;
}
.l-footer .l-footer-about-n-nav .logos a img {
  height: 2rem;
  width: 2rem;
  display: block;
  max-width: none;
}
.l-footer .l-footer-meta {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem 4.5rem;
  margin-top: 3rem;
  width: 100%;
  color: #9199A1;
}
@media (min-width: 58em) {
  .l-footer .l-footer-meta {
    gap: 0.75rem 4.5rem;
  }
}
.l-footer .l-footer-meta .l-footer-meta-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 58em) {
  .l-footer .l-footer-meta .l-footer-meta-text {
    gap: 1rem;
  }
}
.l-footer .l-footer-meta .l-footer-meta-text p {
  flex-grow: 1;
}
.l-footer .l-footer-meta .l-footer-meta-text .legal-links {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}
@media (min-width: 58em) {
  .l-footer .l-footer-meta .l-footer-meta-text .legal-links {
    flex-direction: row;
    gap: 1rem;
  }
}
.l-footer .l-footer-meta .l-footer-meta-text .legal-links a {
  font-size: 0.875rem;
}

/*
 *	Read more about this file at https://csswizardry.com/2013/04/shame-css/
 */
/* page headers */
h1 {
  text-align: center;
}

h3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h5 {
  color: #f15b47;
  margin-bottom: 1rem;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 80em;
}

html {
  scroll-behavior: smooth;
}
html.overflow-hidden {
  overflow: hidden;
}

/* Pagination for Concrete CMS */
.ccm-pagination-wrapper {
  margin-top: 2rem;
}
.ccm-pagination-wrapper .pagination {
  padding: 0;
  list-style-type: none;
  display: flex;
  gap: 1rem;
}
.ccm-pagination-wrapper .pagination a {
  color: #3c3f4c;
}
.ccm-pagination-wrapper .pagination a:hover {
  color: #3c3f4c;
}

/*# sourceMappingURL=main.css.map */