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

:root {
    --icon-height: 3rem;
    --fluid-8-16: clamp(0.5rem, 0.166rem + 1.6701vw, 1rem);
    --fluid-12-14: clamp(0.75rem, 0.6665rem + 0.4175vw, 0.875rem);
    --fluid-12-16: clamp(0.75rem, 0.583rem + 0.8351vw, 1rem);
    --fluid-14-16: clamp(0.875rem, 0.7915rem + 0.4175vw, 1rem);
    --fluid-16-24: clamp(1rem, 0.666rem + 1.6701vw, 1.5rem);
    --fluid-16-20: clamp(1rem, 0.833rem + 0.8351vw, 1.25rem);
    --fluid-16-30: clamp(1rem, 0.4154rem + 2.9228vw, 1.875rem);
    --fluid-16-32: clamp(1rem, 0.3319rem + 3.3403vw, 2rem);
    --fluid-18-32: clamp(1.125rem, 0.5404rem + 2.9228vw, 2rem);
    --fluid-18-48: clamp(1.125rem, -0.1276rem + 6.263vw, 3rem);
    --fluid-19-24: clamp(1.1875rem, 0.9787rem + 1.0438vw, 1.5rem);
    --fluid-20-32: clamp(1.25rem, 0.749rem + 2.5052vw, 2rem);
    --fluid-23-68: clamp(1.4375rem, -0.4414rem + 9.3946vw, 4.25rem);
    --fluid-24-32: clamp(1.5rem, 1.166rem + 1.6701vw, 2rem);
    --fluid-24-77: clamp(1.5rem, -0.7129rem + 11.0647vw, 4.8125rem);
    --fluid-32-40: clamp(2rem, 1.666rem + 1.6701vw, 2.5rem);
    --fluid-64-90: clamp(4rem, 2.9144rem + 5.428vw, 5.625rem);
    --fluid-72-120: clamp(4.5rem, 2.4958rem + 10.0209vw, 7.5rem);
    --fluid-95-166: clamp(5.9375rem, 2.973rem + 14.8225vw, 10.375rem);
    --fluid-288-303: clamp(18rem, 17.3737rem + 3.1315vw, 18.9375rem);
    --fluid-288-358: clamp(18rem, 15.0772rem + 14.6138vw, 22.375rem);
    --fluid-228-416: clamp(14.25rem, 6.4003rem + 39.2484vw, 26rem);
    --fluid-288-490: clamp(18rem, 9.5658rem + 42.1712vw, 30.625rem);
    --fluid-288-726: clamp(18rem, -0.2881rem + 91.4405vw, 45.375rem);
    --fluid-288-736: clamp(18rem, -0.7056rem + 93.5282vw, 46rem);
    --fluid-291-726: clamp(18.1875rem, 0.0247rem + 90.8142vw, 45.375rem);
    --fluid-320-768: clamp(20rem, 1.2944rem + 93.5282vw, 48rem);
    --fluid-320-799: clamp(20rem, 0rem + 100vw, 49.9375rem);
    --fluid-338-356: clamp(21.125rem, 20.3734rem + 3.7578vw, 22.25rem);
    --fluid-364-428: clamp(22.75rem, 20.0778rem + 13.3612vw, 26.75rem);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

body {
    font-family: Saira;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}

.body--no-scroll {
    overflow: hidden;
}

.section__responsive {
    max-width: var(--fluid-320-799);
}

.section__title {
    text-align: center;
}

.header {
    width: 100vw;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    top: 0;
    z-index: 2;
}

.header--scrolling {
    background-color: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(0.46875rem);
    backdrop-filter: blur(0.46875rem);
}

.menu--visible {
    display: block !important;
}

.header--mobile {
    background: var(--Primary-White-white-50, #FDFDFD);
}

.header__wrapper {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 2;
}

.header__container {
    display: flex;
    width: 100%;
    max-width: var(--fluid-320-799);
    margin: 0 auto;
    padding: var(--fluid-8-16) var(--fluid-16-32);
    justify-content: space-between;
    align-items: flex-end;
}

.header__logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header__logo>img {
    width: var(--fluid-72-120);
}

.header__menu-button {
    display: flex;
    min-width: 1.5rem;
    min-height: 1.5rem;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border: none;
    background: transparent;
}

.menu {
    display: none;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
}

.menu__icon {
    min-width: 1.125rem;
    min-height: 0.875rem;
    background-size: contain;
}

.menu__icon--close {
    min-width: 1.5rem;
    min-height: 1.5rem;
    background-size: cover;
}

.menu__list {
    max-width: var(--fluid-288-736);
    width: 100%;
    margin: 0 auto;
    display: flex;
    padding: 0.5rem 0 1.5rem 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.menu__item {
    list-style: none;
    width: 100%;
}

.menu__link {
    color: var(--Primary-Neutral-neutral-12, #141414);
    text-decoration: none;
    width: 100%;
    display: block;
}

.menu__item--active>.menu__link {
    color: var(--primary-red-red-500, #A91916);
    border-bottom: 0.25rem solid var(--primary-red-red-500, #A91916);
}

.menu__item:hover>.menu__link {
    color: var(--Primary-Red-red-400, #BA4745);
}

.menu__link--button {
    display: flex;
    padding: 0.625rem 1.25rem;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    flex: 1 0 0;
    border-radius: 0.125rem;
    background: var(--Primary-Neutral-neutral-12, #141414);
}

.overlay {
    display: none;
    width: 100%;
    height: 100vh;
    position: relative;
    top: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.20);
    -webkit-backdrop-filter: blur(0.09375rem);
    backdrop-filter: blur(0.09375rem);
}

.page {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5625rem;
    background: #FFF;
    width: 100vw;
    overflow: hidden;
}

.hero {
    z-index: 0;
    width: 100vw;
    display: flex;
    justify-content: center;
    position: relative;
}

.hero__content {
    height: var(--fluid-364-428);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    width: 100%;
}

.hero__image {
    max-width: 23.6489375rem;
    height: var(--fluid-364-428);
    object-fit: cover;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

.hero__vector {
    /* max-width: 20rem; */
    width: 100%;
    position: absolute;
    height: var(--fluid-364-428);
    flex-shrink: 0;
    right: 0;
    background: linear-gradient(90deg, #FDFDFD 56.58%, rgba(253, 253, 253, 0.00) 99.65%);
}

.hero__paragraph {
    display: flex;
    max-width: var(--fluid-288-490);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fluid-16-20);
    position: absolute;
    left: var(--fluid-16-32);
    top: var(--fluid-64-90);
}

.hero__title {
    align-self: stretch;
    z-index: 1;
    margin: 0 0;
}

.hero__subtitle {
    align-self: stretch;
    z-index: 1;
}

.hero__paragraph--vector {
    z-index: 0;
    width: 10.3880625rem;
    height: 5.760375rem;
    position: absolute;
    right: -4.1380625rem;
    bottom: 3.052125rem;
    border: 0.06475rem solid #FAFAFA;
    display: none;
}

.hero__paragraph--card {
    z-index: 0;
    width: 6.4723125rem;
    height: 5.533875rem;
    position: absolute;
    right: -0.2223125rem;
    bottom: -3.48175rem;
    border: 0.06475rem solid #FAFAFA;
    display: none;
}

.hero__paragraph--only-mobile {
    display: block;
}

.hero__more {
    display: flex;
    max-width: 18rem;
    width: 100%;
    padding: 0.625rem 1.25rem;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    position: absolute;
    left: var(--fluid-16-32);
    bottom: 1.4375rem;
    border-radius: 0.125rem;
    background: var(--Primary-Neutral-neutral-12, #141414);
}

.technologies {
    width: 100vw;
    height: var(--fluid-95-166);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: var(--primary-red-red-500, #A91916);
}

.technologies__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 1rem var(--fluid-16-32);
    gap: 0.625rem;
    height: 100%;
    position: relative;
}

.technologies__carousel-icons {
    position: absolute;
    max-width: var(--fluid-320-768);
    bottom: 0.981125rem;
    background: var(--primary-red-red-500, #A91916);
    bottom: 0.981125rem;
    width: 100%;
    height: var(--fluid-23-68);
    overflow: hidden;
}

.technologies__center {
    display: inline-flex;
    align-items: center;
    gap: 0.88375rem;
    /* width: 100%; */
    height: var(--fluid-18-48);
    animation: scroll 20s linear infinite;
    animation-play-state: running;
}

.technologies__first {
    position: absolute;
    z-index: 1;
    width: 2.8604375rem;
    height: var(--fluid-18-48);
    background: linear-gradient(90deg, #A91916 34.43%, rgba(169, 25, 22, 0.00) 107.83%);
}

.technologies__last {
    position: absolute;
    z-index: 1;
    right: 0;
    width: 3.8604375rem;
    height: var(--fluid-18-48);
    background: linear-gradient(270deg, #A91916 34.43%, rgba(169, 25, 22, 0.00) 107.83%);
}

.technologies__icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    height: 100%;
    width: auto;
    object-fit: cover;
}

.technologies__icon--widthx2 {
    width: calc(2 * 1.125rem);
}

.technologies__icon--widthx3 {
    width: calc(3 * 1.125rem);
}

.about {
    width: 100vw;
    display: flex;
    justify-content: center;
}

.about__content {
    display: flex;
    flex-direction: row;
}

.about__background {
    display: none;
}

.about__article {
    display: flex;
    padding: 1.5rem var(--fluid-16-32);
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
}

.about__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
}

.solutions {
    width: 100vw;
    display: flex;
    justify-content: center;
    background: var(--Primary-White-white-400, #F2F2F2);
}

.solutions__content {
    display: flex;
    padding: 1.5rem 0rem;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.solutions__content>.section__title {
    max-width: var(--fluid-288-726);
}

.solutions__group {
    display: flex;
    padding: 0rem var(--fluid-16-32);
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.solutions__card {
    display: flex;
    padding: 1.5rem;
    max-width: var(--fluid-288-358);
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    align-self: stretch;
    border-radius: 0.25rem;
    border: 0.0625rem solid var(--Primary-White-white-400, #F2F2F2);
    background: var(--Primary-White-white-50, #FDFDFD);
    box-shadow: 0rem 10.625rem 3rem 0rem rgba(209, 209, 209, 0.00), 0rem 6.8125rem 2.75rem 0rem rgba(209, 209, 209, 0.01), 0rem 3.8125rem 2.3125rem 0rem rgba(209, 209, 209, 0.05), 0rem 1.6875rem 1.6875rem 0rem rgba(209, 209, 209, 0.09), 0rem 0.4375rem 0.9375rem 0rem rgba(209, 209, 209, 0.10);
}

.solutions__card:hover {
    border-radius: 0.25rem;
    border: 0.1875rem solid var(--Primary-White-white-50, #FDFDFD);
    background: var(--Primary-Neutral-neutral-12, #141414);
    box-shadow: 0rem 15.1875rem 4.25rem 0rem rgba(0, 0, 0, 0.00), 0rem 9.6875rem 3.875rem 0rem rgba(0, 0, 0, 0.01), 0rem 5.4375rem 3.25rem 0rem rgba(0, 0, 0, 0.05), 0rem 2.4375rem 2.4375rem 0rem rgba(0, 0, 0, 0.09), 0rem 0.625rem 1.3125rem 0rem rgba(0, 0, 0, 0.10);
}

.solutions__icon {
    width: 5.375rem;
    height: 5rem;
}

.solutions__subicon--active {
    display: none;
}

.solutions__card:hover .solutions__subicon {
    display: none;
}

.solutions__card:hover .solutions__subicon--active {
    display: block;
}

.solutions__paragraph {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    align-self: stretch;
}

.solutions__name {
    align-self: stretch;
}

.solutions__description {
    align-self: stretch;
}

.projects {
    width: 100vw;
    display: flex;
    justify-content: center;
    padding: 1.5rem 0rem;
}

.projects__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 1.5rem;
}

.projects__content .section__title {
    max-width: var(--fluid-288-726);
}

.projects__container {
    display: flex;
    max-width: 20rem;
    flex-direction: column;
    gap: var(--fluid-24-77);
}

.project__card {
    width: 100%;
    height: 32.0625rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.625rem;
}

.project__card:hover>.project__background {
    background: var(--Primary-Red-red-50, #F3E9E9);
}

.project__card:hover .project__name {
    color: var(--Primary-Red-red-600, #781210);
}

.project__card:hover .project__description {
    color: var(--Primary-Red-red-600, #781210);
}

.project__card--left>.project__background {
    border-radius: 3.125rem 0.5625rem 0.5625rem 0rem;
}

.project__card--left .project__border {
    border-radius: 3.125rem 0rem 0rem 0rem;
    margin-left: 0.25rem;
    margin-top: 0.75rem;
}

.project__card--right>.project__background {
    border-radius: 0rem 3.125rem 0rem 0rem;
}

.project__card--right .project__border {
    border-radius: 0rem 3.125rem 0rem 0rem;
    margin-left: -1.625rem;
    margin-top: 0.75rem;
}

.project__background {
    position: absolute;
    max-width: 20rem;
    height: 29.0625rem;
    background: var(--primary-white-white-500, #EFEFEF);
}

.project__border {
    width: 21.125rem;
    height: 28.5rem;
    flex-shrink: 0;
    border: 0.0625rem solid var(--primary-red-red-500, #A91916);
}

.project__paragraph {
    position: relative;
    display: flex;
    width: 18rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 3.75rem;
    margin-left: 1rem;
}

.project__button {
    text-decoration: none;
    position: relative;
    display: flex;
    margin-left: 1rem;
    height: 2.8125rem;
    width: 18rem;
    padding: 0.625rem 1.25rem;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.125rem;
    border: 0.125rem solid var(--Primary-Red-red-400, #BA4745);
}

.project__photo,
.project__photo--hover {
    position: relative;
    width: 21.604875rem;
    height: 13.4375rem;
    flex-shrink: 0;
}

.project__photo--hover {
    display: none;
}

.project__card:hover>.project__photo {
    display: none;
}

.project__card:hover>.project__photo--hover {
    display: block;
}

.project__card--left>.project__photo,
.project__card--left>.project__photo--hover {
    left: 0.5rem;
}

.project__card--right>.project__photo,
.project__card--right>.project__photo--hover {
    left: -1.375rem;
}

.advantages {
    width: 100vw;
    display: flex;
    justify-content: center;
    padding: 1.5rem 0rem;
}

.advantages__content {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.advantages__content .section__title {
    max-width: var(--fluid-288-416);
    align-self: center;
}

.advantage__container {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

.advantage__pager {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
}

.advantage__pager--button {
    display: none;
    cursor: pointer;
}

.advantage__pager-dots {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.advantage__pager-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.625rem;
    background: var(--Primary-Red-red-100, #E4B8B7);
}

.advantage__pager-dot.advantage__pager-dot--active {
    width: 0.75rem;
    height: 3rem;
    border-radius: 0.625rem;
    background: var(--primary-red-red-500, #A91916);
}

.advantage__carousel {
    display: flex;
    width: 100%;
    padding: 0rem var(--fluid-16-32);
    align-items: flex-start;
    gap: 0.5rem;
}

.advantage_cards {
    display: flex;
    max-height: 34.125rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    flex: 1 0 0;
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.advantage_cards::-webkit-scrollbar {
    display: none;
}

.advantage__card {
    display: flex;
    cursor: pointer;
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    align-self: stretch;
    background: #FFF;
}

.advantage__card.advantage__card--active {
    border-radius: 1.25rem 0rem;
    box-shadow: 0rem 10.625rem 3rem 0rem rgba(209, 209, 209, 0.00), 0rem 6.8125rem 2.75rem 0rem rgba(209, 209, 209, 0.01), 0rem 3.8125rem 2.3125rem 0rem rgba(209, 209, 209, 0.05), 0rem 1.6875rem 1.6875rem 0rem rgba(209, 209, 209, 0.09), 0rem 0.4375rem 0.9375rem 0rem rgba(209, 209, 209, 0.10);
}

.advantage__card--active .advantage__title {
    color: var(--primary-red-red-500, #A91916);
}

.advantage__card--active .advantage__paragraph {
    color: var(--primary-red-red-500, #A91916);
}

.advantage__background {
    display: none;
}

.success-cases {
    width: 100vw;
    display: flex;
    flex-direction: column;
    padding-top: 1.5rem;
    justify-content: center;
}

.success-cases>.section__title {
    max-width: var(--fluid-291-726);
    align-self: center;
}

.success-cases__background {
    display: none;
}

.success-cases__content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    background: var(--Primary-White-white-400, #F2F2F2);
}

.success-cases__container {
    display: flex;
    width: 100%;
    padding: 1rem var(--fluid-16-32) 1.5rem var(--fluid-16-32);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.success-cases__carousel-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.success-cases__carousel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    align-self: stretch;
    overflow: hidden;
}

.success-cases__photo {
    display: flex;
    width: 18rem;
    height: 18rem;
    align-items: center;
    gap: 0.3965rem;
}

.success-cases__photo>picture {
    display: none;
}

.success-cases__photo>.success-cases__photo--active {
    display: block;
}

.success-cases__card--active {
    display: flex !important;
}

.success-cases__card {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    align-self: stretch;
}

.success-cases__description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
}

.success-cases__contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.success-cases__pager {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
}

.success-cases__pager-dots {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.success-cases__pager-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.625rem;
    background: var(--Primary-Red-red-200, #D79594);
}

.success-cases__pager-dot--active {
    width: 2rem;
    height: 0.5rem;
    border-radius: 0.625rem;
    background: var(--primary-red-red-500, #A91916);
}

.cta {
    width: 100vw;
    display: flex;
    background: #000;
    justify-content: center;
}

.cta__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.cta__contact {
    display: flex;
    padding: 0.625rem 1.25rem;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    align-self: stretch;
    border-radius: 0.125rem;
    background: var(--Primary-White-white-50, #FDFDFD);
}

.cta__contact>picture {
    height: 1.5rem;
}

.cta__content-wrapper {
    display: flex;
    width: 100vw;
    padding: 1.5rem var(--fluid-16-32);
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.cta__background-image {
    display: none;
}

.faq {
    width: 100vw;
    display: flex;
    justify-content: center;
    background: var(--Primary-White-white-50, #FDFDFD);
}

.faq_content {
    display: flex;
    width: 100%;
    padding: 1.5rem var(--fluid-16-32);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.faq__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    align-self: stretch;
}

.faq__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.faq__card {
    display: flex;
    padding: 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    gap: 1rem;
    border: 0.0625rem solid var(--Primary-White-white-400, #F2F2F2);
    background: var(--Primary-White-white-50, #FDFDFD);
}

.faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    cursor: pointer;
}

.faq__title {
    width: 100%;
}

.faq__question--button {
    border: none;
    background: transparent;
}

.faq__question--icon-closed {
    min-width: 1.5rem;
    min-height: 1.5rem;
    background-size: cover;
}

.faq__question--icon-opened {
    min-width: 1.5rem;
    min-height: 1.5rem;
    background-size: cover;
}

.faq__answer {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.footer {
    width: 100vw;
    display: flex;
    justify-content: center;
    background: var(--primary-white-white-500, #EFEFEF);
}

.footer__content {
    width: 100%;
    display: flex;
    padding: 1.5rem var(--fluid-16-32);
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.footer__logo {
    display: flex;
    width: 10.5625rem;
    height: 3.5625rem;
    justify-content: center;
    align-items: center;
}

.footer__columns {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
}

.footer__column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    align-self: stretch;
}

.footer__row--brand {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    flex-direction: column;
    gap: 1rem;
}

.footer__row--brand ul {
    padding-left: 1rem;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}

.footer__column--contact ul {
    padding-left: 0;
}

.footer__column--brand ul li,
.footer__column--contact>ul>li {
    list-style: none;
}

.footer__column--brand {
    max-width: 16.125rem;
}

.footer__social>ul {
    display: flex;
    align-items: flex-start;
    gap: 0.6875rem;
}

.footer__social-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}

.footer__social-icon--facebook {
    background-image: url('../coffee/images/footer_fb_24x24.svg');
    background-size: cover;
    background-repeat: no-repeat;
}

.footer__social-icon--instagram {
    background-image: url('../coffee/images/footer_ig_24x24.svg');
    background-size: cover;
    background-repeat: no-repeat;
}

.footer__social-icon--linkedin {
    background-image: url('../coffee/images/footer_li_24x24.svg');
    background-size: cover;
    background-repeat: no-repeat;
}

.footer__border {
    width: 100%;
    height: 0.0625rem;
    background: #A91916;
}

.footer__bottom {
    width: 100%;
}
@media screen and (min-width: 50rem) {

    :root {
        --fluid-14-16: clamp(0.875rem, 0.6662rem + 0.4175vw, 1rem);
        --fluid-16-20: clamp(1rem, 0.5825rem + 0.8351vw, 1.25rem);
        --fluid-16-80: clamp(1rem, -5.6806rem + 13.3612vw, 5rem);
        --fluid-20-32: clamp(1.25rem, -0.0026rem + 2.5052vw, 2rem);
        --fluid-24-32: clamp(1.5rem, 0.6649rem + 1.6701vw, 2rem);
        --fluid-30-90: clamp(1.875rem, -4.388rem + 12.5261vw, 5.625rem);
        --fluid-32-40: clamp(2rem, 1.1649rem + 1.6701vw, 2.5rem);
        --fluid-32-43: clamp(2rem, 0.8518rem + 2.2965vw, 2.6875rem);
        --fluid-32-48: clamp(2rem, 0.3299rem + 3.3403vw, 3rem);
        --fluid-32-50: clamp(2rem, 0.1211rem + 3.7578vw, 3.125rem);
        --fluid-32-80: clamp(2rem, -3.0104rem + 10.0209vw, 5rem);
        --fluid-32-90: clamp(2rem, -4.0543rem + 12.1086vw, 5.625rem);
        --fluid-40-50: clamp(2.5rem, 1.4562rem + 2.0877vw, 3.125rem);
        --fluid-47-75: clamp(2.9375rem, 0.0147rem + 5.8455vw, 4.6875rem);
        --fluid-78-125: clamp(4.875rem, -0.0311rem + 9.8121vw, 7.8125rem);
        --fluid-90-182: clamp(5.625rem, -3.9783rem + 19.2067vw, 11.375rem);
        --fluid-284-454: clamp(17.75rem, 0.0047rem + 35.4906vw, 28.375rem);
        --fluid-302-482: clamp(18.875rem, 0.0859rem + 37.5783vw, 30.125rem);
        --fluid-305-486: clamp(19.0625rem, 0.169rem + 37.7871vw, 30.375rem);
        --fluid-310-469: clamp(19.375rem, 2.7779rem + 33.1942vw, 29.3125rem);
        --fluid-312-469: clamp(19.5rem, 3.1117rem + 32.7766vw, 29.3125rem);
        --fluid-317-505: clamp(19.8125rem, 0.1883rem + 39.2484vw, 31.5625rem);
        --fluid-336-538: clamp(21rem, -0.0856rem + 42.1712vw, 33.625rem);
        --fluid-337-540: clamp(21.0625rem, -0.1275rem + 42.38vw, 33.75rem);
        --fluid-341-546: clamp(21.3125rem, -0.0862rem + 42.7975vw, 34.125rem);
        --fluid-355-568: clamp(22.1875rem, -0.0463rem + 44.4676vw, 35.5rem);
        --fluid-358-400: clamp(22.375rem, 20.6213rem + 8.7683vw, 25rem);
        --fluid-381-611: clamp(23.8125rem, -0.1959rem + 48.0167vw, 38.1875rem);
        --fluid-390-625: clamp(24.375rem, -0.1553rem + 49.0605vw, 39.0625rem);
        --fluid-416-540: clamp(26rem, 13.0564rem + 25.8873vw, 33.75rem);
        --fluid-420-630: clamp(26.25rem, 4.3293rem + 43.8413vw, 39.375rem);
        --fluid-424-679: clamp(26.5rem, -0.118rem + 53.2359vw, 42.4375rem);
        --fluid-428-684: clamp(26.75rem, 0.0277rem + 53.4447vw, 42.75rem);
        --fluid-441-488: clamp(27.5625rem, 22.6564rem + 9.8121vw, 30.5rem);
        --fluid-490-539: clamp(30.625rem, 25.5102rem + 10.2296vw, 33.6875rem);
        --fluid-515-787: clamp(32.1875rem, 3.795rem + 56.785vw, 49.1875rem);
        --fluid-768-1100: clamp(48rem, 13.3445rem + 69.3111vw, 68.75rem);
        --fluid-768-1190: clamp(48rem, 3.9499rem + 88.1002vw, 74.375rem);
        --fluid-800-988: clamp(50rem, 30.3758rem + 39.2484vw, 61.75rem);
        --fluid-800-1279: clamp(50rem, 0rem + 100vw, 79.9375rem);
    }

    .section__responsive {
        max-width: var(--fluid-800-1279);
    }

    .header__wrapper {
        display: flex;
        margin: 0 auto;
        flex-direction: row;
        align-items: center;
        max-width: var(--fluid-800-1279);
        padding: var(--fluid-16-20) var(--fluid-32-90);
        justify-content: space-between;
    }

    .header__container {
        flex-direction: column;
        max-width: 7.5rem;
        padding: 0;
        margin: 0;
    }

    .header__logo>img {
        width: 7.5rem;
    }

    .header__menu-button {
        display: none;
    }

    .menu {
        display: flex;
        width: unset;
    }

    .menu__list {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2.875rem;
        padding: 0;
        max-width: unset;
    }

    .page {
        gap: 0;
    }

    .hero__content {
        height: var(--fluid-428-684);
    }

    .hero__image {
        max-width: 26.484375rem;
        height: var(--fluid-428-684);
        flex-shrink: 0;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.29) 0%, rgba(255, 255, 255, 0.29) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat;
    }

    .hero__vector {
        max-width: 50rem;
        height: var(--fluid-428-684);
        flex-shrink: 0;
        background: linear-gradient(90deg, #FDFDFD 52.01%, rgba(253, 253, 253, 0.00) 71.81%);
    }

    .hero__paragraph {
        max-width: var(--fluid-490-539);
        gap: var(--fluid-20-32);
        left: var(--fluid-32-90);
        top: var(--fluid-90-182);
    }

    .hero__paragraph--vector {
        width: 12.5390625rem;
        height: 6.953125rem;
        flex-shrink: 0;
        display: block;
        right: -1.5625rem;
        bottom: 2.65625rem;
        border: 0.078125rem solid #FAFAFA;
    }

    .hero__paragraph--card {
        width: 7.8125rem;
        height: 6.6796875rem;
        flex-shrink: 0;
        display: block;
        right: -4.1875rem;
        bottom: -0.275rem;
        border: 0.078125rem solid #FAFAFA;
    }

    .hero__paragraph--only-mobile {
        display: none;
    }

    .hero__more {
        left: var(--fluid-32-90);
        display: flex;
        padding: 0.390625rem 0.78125rem;
        justify-content: center;
        align-items: center;
        gap: 0.15625rem;
        border-radius: 0.078125rem;
        background: var(--Primary-Neutral-neutral-12, #141414);
    }

    .technologies {
        height: 10.375rem;
    }

    .technologies__content {
        padding: 0;
        position: relative;
    }

    .technologies__content>.section__title {
        position: absolute;
        left: 2rem;
        top: 0.8125rem;
    }

    .technologies__carousel-icons {
        max-width: var(--fluid-768-1100);
        height: 4.25rem;
        bottom: 1.5rem;
        position: absolute;
        width: 100%;
        left: 2rem;
        padding: 0.375rem 0rem 0.875rem 0rem;
    }

    .technologies__center {
        height: 3rem;
        gap: 2.375rem;
    }

    .technologies__first {
        width: 5.875rem;
        height: 4.25rem;
    }

    .technologies__last {
        width: 4.625rem;
        height: 4.25rem;
    }

    .technologies__icon--widthx2 {
        width: calc(2 * var(--icon-height));
    }

    .technologies__icon--widthx3 {
        width: calc(3 * var(--icon-height));
    }

    .about__content {
        padding: 0 2rem 0 0;
        align-items: center;
        gap: var(--fluid-47-75);
    }

    .about__background {
        display: unset;
        position: relative;
    }

    .about__article {
        display: flex;
        width: var(--fluid-420-630);
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 0;
    }

    .about__image {
        width: var(--fluid-302-482);
        height: var(--fluid-317-505);
        flex-shrink: 0;
        border-radius: 0rem 0rem 3.90625rem 0rem;
        background: linear-gradient(0deg, rgba(82, 82, 82, 0.60) 0%, rgba(82, 82, 82, 0.60) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat;
    }

    .about__vector {
        position: absolute;
        top: 0;
        left: 0;
        width: var(--fluid-284-454);
        height: var(--fluid-305-486);
        flex-shrink: 0;
        stroke-width: 0.078125rem;
        stroke: #FFF;
    }

    .solutions__content {
        padding: 2rem;
        gap: 1.5rem;
    }

    .solutions__content .section__title {
        max-width: 45.375rem;
    }

    .solutions__group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1.25rem;
        padding: 0;
    }

    .solutions__card {
        max-width: var(--fluid-358-400);
    }

    .projects {
        padding: 2rem 0;
    }

    .projects__content {
        gap: 2rem;
    }

    .projects__content .section__title {
        width: 100%;
        max-width: 45.375rem;
        align-self: center;
    }

    .projects__container {
        gap: 2rem;
        max-width: 50rem;
        width: 100%;
    }

    .project__card.project__card--left {
        height: 26.625rem;
    }

    .project__card.project__card--right {
        height: 25.3125rem;
    }

    .project__background {
        max-width: 50rem;
        margin-top: 2.25rem;
    }

    .project__card--left .project__background {
        height: 21.9375rem;
    }

    .project__card--right .project__background {
        height: 20.375rem;
        width: 49.8125rem;
    }

    .project__card--left .project__border {
        border-radius: 3.75rem 0rem 0rem 0rem;
        margin-left: 1.9375rem;
        margin-top: 1.3125rem;
    }

    .project__card--right .project__border {
        border-radius: 0rem 3.75rem 0rem 0rem;
        margin-left: -0.375rem;
        margin-top: 1.3125rem;
        width: 48.375rem;
        height: 20.3125rem;
    }

    .project__border {
        width: 48.0625rem;
        height: 21.6875rem;
        flex-shrink: 0;
    }

    .project__paragraph {
        width: 18.9375rem;
        gap: 1.5rem;
    }

    .project__card--left>.project__paragraph {
        margin-top: 5.25rem;
        margin-left: 4rem;
    }

    .project__card--right>.project__paragraph {
        display: flex;
        width: 19.8125rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        margin-top: 4.5625rem;
        margin-left: 27.9375rem;
    }

    .project__card--left>.project__button {
        width: 18.9375rem;
        margin-left: 4rem;
    }

    .project__card--right>.project__button {
        width: 19.8125rem;
        margin-left: 27.9375rem;
    }

    .project__photo,
    .project__photo--hover {
        width: 33.0625rem;
        height: 20.5625rem;
    }

    .project__card--left>.project__photo,
    .project__card--left>.project__photo--hover {
        position: absolute;
        top: 0.1875rem;
        left: 25rem;
    }

    .project__card--right>.project__photo,
    .project__card--right>.project__photo--hover {
        position: absolute;
        left: -6.125rem;
        top: 0.225rem;
    }

    .advantages__content {
        height: var(--fluid-515-787);
    }

    .advantages__content .section__title {
        max-width: var(--fluid-416-540);
        position: absolute;
        top: var(--fluid-32-43);
        left: var(--fluid-30-90);
        text-align: start;
    }

    .advantage__container {
        max-width: var(--fluid-768-1190);
        max-height: var(--fluid-424-679);
        overflow: hidden;
        position: absolute;
        top: 4.3125rem;
        left: var(--fluid-30-90);
        padding: 0;
    }

    .advantage__pager {
        position: relative;
    }

    .advantage__pager--button {
        max-width: 0.9375rem;
        max-height: 0.9375rem;
        display: unset;
        border: none;
        position: absolute;
    }

    .advantage__pager--button-upward {
        top: 0;
    }

    .advantage__pager--button-downward {
        bottom: 0;
    }

    .advantage__pager--icon {
        min-width: 0.9375rem;
        min-height: 0.9375rem;
        background-size: cover;
    }

    .advantage__pager--button-upward>.advantage__pager--icon {
        background-image: url('../coffee/images/advantage_arrow_upward_15x15.png');
    }

    .advantage__pager--button-downward>.advantage__pager--icon {
        background-image: url('../coffee/images/advantage_arrow_downward_15x15.png');
    }

    .advantage__carousel {
        max-width: var(--fluid-336-538);
        margin-top: var(--fluid-78-125);
        padding: 0;
        gap: var(--fluid-20-32);
    }

    .advantage_cards {
        max-height: var(--fluid-341-546);
        gap: 1.25rem;
    }

    .advantage__background {
        display: block;
        position: absolute;
        max-width: var(--fluid-381-611);
        width: 100%;
        height: var(--fluid-390-625);
        flex-shrink: 0;
        right: 0rem;
    }

    .advantage__background>picture {
        display: none;
    }

    .advantage__background--active {
        display: block !important;
    }

    .advantage__background--vector {
        position: absolute;
        bottom: 0;
        right: 0;
        width: var(--fluid-337-540);
        height: var(--fluid-355-568);
        flex-shrink: 0;
        border-radius: 1.953125rem 0rem;
        background: #A91916;
    }

    .advantage__background--photo {
        position: absolute;
        top: 0;
        left: 0;
        width: var(--fluid-337-540);
        height: var(--fluid-355-568);
        flex-shrink: 0;
        border-radius: 1.953125rem 0rem;
        background: url(<path-to-image>) lightgray -6.0726875rem 0rem / 142.906% 100% no-repeat;
    }

    .advantage__background--photo>img {
        height: 100%;
        width: 100%;
    }

    .success-cases {
        padding: 2rem 0;
        gap: 1rem;
        position: relative;
    }

    .success-cases>.section__title {
        max-width: 45.375rem;
        width: 100%;
    }

    .success-cases__background {
        display: block;
        position: absolute;
        bottom: 0;
        height: var(--fluid-441-488);
        width: 100%;
        border-radius: 0.125rem;
        background: var(--primary-white-white-500, #EFEFEF);
    }

    .success-cases__content {
        background-color: unset;
        z-index: 1;
    }

    .success-cases__container {
        display: flex;
        flex-direction: row;
        max-width: var(--fluid-800-988);
        height: 30rem;
        padding: 0rem 2rem;
        align-items: flex-start;
        gap: var(--fluid-16-80);
    }

    .success-cases__carousel-wrapper {
        align-items: flex-start;
        gap: var(--fluid-32-48);
        flex: 1 0 0;
        margin-top: 4.375rem;
    }

    .success-cases__photo {
        width: 22.5rem;
        height: 30rem;
    }

    .success-cases__card {
        align-items: flex-start;
    }

    .cta__content {
        width: 100%;
        height: var(--fluid-310-469);
        gap: 0.390625rem;
        flex-direction: row;
        position: relative;
    }

    .cta__content-wrapper {
        display: flex;
        width: 23.1875rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        position: absolute;
        right: var(--fluid-32-90);
        align-self: anchor-center;
    }

    .cta__background-image {
        display: block;
        z-index: 0;
        width: 100%;
        height: var(--fluid-312-469);
        flex-shrink: 0;
        background: linear-gradient(270deg, #FFF -2.42%, #040507 -2.41%, #030305 48.94%, rgba(0, 0, 0, 0.00) 81.56%), url(<path-to-image>) lightgray -5.4408125rem -1.97775rem / 66.751% 117.917% no-repeat;
    }

    .faq_content {
        padding: var(--fluid-32-80) var(--fluid-32-90);
        gap: var(--fluid-24-32);
    }

    .faq__card {
        gap: 1.25rem;
    }

    .footer__row--brand {
        flex-direction: row;
    }

    .footer__content {
        padding: var(--fluid-32-50) var(--fluid-32-90);
    }
}
@media screen and (min-width: 80rem) {
    .section__responsive {
        max-width: 80rem;
    }

    .header__wrapper {
        max-width: 80rem;
        padding: 1.25rem 5.625rem;
    }

    .hero__content {
        height: 42.75rem;
    }

    .hero__image {
        max-width: 42.375rem;
        height: 42.75rem;
        flex-shrink: 0;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.29) 0%, rgba(255, 255, 255, 0.29) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat;
    }

    .hero__vector {
        max-width: 80rem;
        height: 42.75rem;
        flex-shrink: 0;
        background: linear-gradient(90deg, #FDFDFD 52.01%, rgba(253, 253, 253, 0.00) 71.81%);
    }

    .hero__paragraph {
        max-width: 33.6875rem;
        gap: 2rem;
        left: 5.6875rem;
        top: 11.375rem;
    }

    .hero__paragraph--vector {
        width: 20.0625rem;
        height: 11.125rem;
        flex-shrink: 0;
        right: -2.5rem;
        bottom: 4.25rem;
        border: 0.125rem solid #FAFAFA;
    }

    .hero__paragraph--card {
        width: 12.5rem;
        height: 10.6875rem;
        flex-shrink: 0;
        right: -6.6875rem;
        bottom: -0.4375rem;
        border: 0.125rem solid #FAFAFA;
    }

    .hero__more {
        left: 5.68rem;
    }

    .technologies {
        height: 9.25rem;
    }

    .technologies__carousel-icons {
        max-width: 53.75rem;
        left: 23.5rem;
        top: 2.5rem;
        padding: 0.375rem 5rem 0.875rem 0rem;
    }

    .technologies__first {
        width: 7.6875rem;
        height: 4.25rem;
    }

    .technologies__last {
        width: 10.375rem;
        height: 4.25rem;
    }

    .technologies__content>.section__title {
        left: 5.625rem;
        top: 3.4375rem;
    }

    .about__content {
        display: flex;
        /* height: 31.5625rem; */
        padding: 0 6rem 0 0;
        align-items: center;
        gap: 4.6875rem;
    }

    .about__background {
        display: unset;
    }

    .about__article {
        display: flex;
        width: 39.375rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
        flex-shrink: 0;
    }

    .about__image {
        width: 30.125rem;
        height: 31.5625rem;
        border-radius: 0rem 0rem 6.25rem 0rem;
        background: linear-gradient(0deg, rgba(82, 82, 82, 0.60) 0%, rgba(82, 82, 82, 0.60) 100%), url(<path-to-image>) lightgray 50% / cover no-repeat;
    }

    .about__vector {
        width: 29.25rem;
        height: 30.3125rem;
        flex-shrink: 0;
        stroke-width: 0.125rem;
        stroke: #FFF;
    }

    .about__title {
        height: 4.875rem;
        justify-content: space-between;
    }

    .solutions__group {
        max-width: 51.25rem;
    }

    .projects {
        padding: 5rem 0;
    }

    .projects__content {
        gap: 3.5rem;
    }

    .projects__container {
        max-width: 80rem;
    }

    .project__card {
        height: 30.4375rem !important;
    }

    .project__background {
        height: 23.3125rem !important;
        width: 100% !important;
        max-width: 80rem;
    }

    .project__border {
        height: 23.3125rem !important;
        width: 100% !important;
    }

    .project__card--left>.project__background {
        border-radius: 6.25rem 0rem 0rem 0rem;
    }

    .project__card--right>.project__background {
        border-radius: 0rem 6.25rem 0rem 0rem;
    }

    .project__card--left .project__border {
        border-radius: 6.25rem 0rem 0rem 0rem;
    }

    .project__card--right .project__border {
        border-radius: 0rem 6.25rem 0rem 0rem;
        margin-left: -2.3125rem;
    }

    .project__paragraph {
        width: 33.75rem !important;
        gap: 2rem !important;
    }

    .project__card--left>.project__paragraph {
        margin-top: 5.25rem;
        margin-left: 5.625rem;
    }

    .project__card--right>.project__paragraph {
        margin-top: 5.5rem;
        margin-left: 41rem;
    }

    .project__card--left .project__button {
        margin-left: 5.625rem;
    }

    .project__card--right .project__button {
        margin-left: 41rem;
    }

    .project__photo,
    .project__photo--hover {
        position: absolute;
        width: 48.9375rem;
        height: 30.4375rem;
    }

    .project__card--left>.project__photo,
    .project__card--left>.project__photo--hover {
        left: 39.375rem;
    }

    .project__card--right>.project__photo,
    .project__card--right>.project__photo--hover {
        left: -12.75rem;
        padding: 1.1875rem 0;
    }

    .advantages__content {
        height: 49.1875rem;
        background: #FFF;
    }

    .advantages__content .section__title {
        max-width: 33.75rem;
        position: absolute;
        left: 5.625rem;
        top: 2.6875rem;
        text-align: start;
    }

    .advantage__container {
        max-width: 74.375rem;
        max-height: 42.4375rem;
        left: 5.625rem;
        top: 4rem;
    }

    .advantage__pager--button {
        max-width: 1.5rem;
        max-height: 1.5rem;
    }

    .advantage__pager--icon {
        min-width: 1.5rem;
        min-height: 1.5rem;
        background-size: cover;
    }

    .advantage__pager--button-upward>.advantage__pager--icon {
        background-image: url('../coffee/images/advantage_arrow_upward_24x24.png');
    }

    .advantage__pager--button-downward>.advantage__pager--icon {
        background-image: url('../coffee/images/advantage_arrow_downward_24x24.png');
    }

    .advantage__carousel {
        max-width: 33.625rem;
        margin-top: 7.8125rem;
        gap: 2rem;
    }

    .advantage_cards {
        max-height: 34.125rem;
        gap: 2rem;
    }

    .advantage__background {
        max-width: 38.1875rem;
        width: 100%;
        height: 39.0625rem;
    }

    .advantage__background--vector {
        border-radius: 3.125rem 0rem;
        width: 33.75rem;
        height: 35.5rem;
    }

    .advantage__background--photo {
        width: 33.75rem;
        height: 35.5rem;
        border-radius: 3.125rem 0rem;
        background: url(<path-to-image>) lightgray -9.71625rem 0rem / 142.906% 100% no-repeat;
    }

    .success-cases {
        padding: 0;
        gap: 0;
        height: 45.375rem;
    }

    .success-cases>.section__title {
        position: absolute;
        top: 4.8125rem;
    }

    .success-cases__background {
        height: 30.5rem;
    }

    .success-cases__content {
        height: 30rem;
        top: 10.5rem;
        position: absolute;
    }

    .success-cases__container {
        max-width: 61.75rem;
        width: 100%;
        gap: 5rem;
        padding: 0;
    }

    .success-cases__carousel-wrapper {
        gap: 3rem;
    }

    .success-cases__photo {
        width: 30rem;
    }

    .cta__content {
        gap: 0.625rem;
        height: 29.3125rem;
    }

    .cta__content-wrapper {
        right: 5.625rem;
    }

    .cta__background-image {
        height: 29.3125rem;
    }

    .faq_content {
        padding: 5rem 5.625rem;
        gap: 2rem;
    }

    .faq__card {
        gap: 1.5rem;
    }

    .footer__content {
        padding: 3.125rem 5.625rem;
        gap: 1rem;
    }

    .footer__columns {
        flex-direction: row;
    }

    .footer__row--brand {
        width: 100%;
    }
}
.menu__link {
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.menu__link--button {
    color: var(--Primary-White-white-50, #FDFDFD) !important;
    font-feature-settings: 'calt' off;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.hero__title--font-style {
    color: var(--Primary-Neutral-neutral-12, #141414);
    font-size: var(--fluid-18-32);
    font-style: normal;
    font-weight: 600;
    line-height: var(--fluid-32-40);
}

.hero__title--font-style b {
    color: var(--primary-red-red-500, #A91916);
}

.hero__subtitle--font-style {
    color: var(--primary-neutral-neutral-9, #454545);
    font-size: var(--fluid-14-16);
    font-style: normal;
    font-weight: 400;
    line-height: var(--fluid-19-24);
}

.hero__more--font-style {
    color: var(--Primary-White-white-50, #FDFDFD);
    font-feature-settings: 'calt' off;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.section__title--font-style {
    color: var(--Primary-Neutral-neutral-12, #141414);
    text-align: center;
    font-size: var(--fluid-16-24);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.section__title--font-style b {
    color: var(--primary-red-red-500, #A91916);
}

.technologies__content>.section__title--font-style {
    color: var(--Primary-White-white-50, #FDFDFD);
}

.about__title--font-style {
    color: var(--Primary-Neutral-neutral-12, #141414);
    font-size: var(--fluid-16-24);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.about__description--font-style {
    color: var(--Primary-Neutral-neutral-12, #141414);
    font-size: var(--fluid-12-14);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.solutions__name--font-style {
    color: var(--primary-neutral-neutral-9, #454545);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.solutions__description--font-style {
    color: var(--primary-neutral-neutral-9, #454545);
    text-align: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1875rem;
}

.solutions__card:hover .solutions__name--font-style {
    color: var(--Primary-White-white-100, #FAFAFA);
}

.solutions__card:hover .solutions__description--font-style {
    color: var(--Primary-White-white-100, #FAFAFA);
}

.project__name--font-style {
    color: var(--Primary-Neutral-neutral-12, #141414);
    font-size: var(--fluid-16-24);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.project__description--font-style {
    color: var(--Primary-Neutral-neutral-11, #1F1F1F);
    font-size: var(--fluid-12-14);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.project__button--font-style {
    color: var(--Primary-Red-red-400, #BA4745);
    font-feature-settings: 'calt' off;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.advantage__title--font-style {
    color: var(--Primary-Neutral-neutral-10, #262626);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.advantage__paragraph--font-style {
    color: var(--primary-neutral-neutral-9, #454545);
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.5rem;
}

.success-cases__paragraph--font-style {
    color: var(--primary-neutral-neutral-9, #454545);
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.5rem;
}

.success-cases__quote {
    color: var(--primary-red-red-500, #A91916);
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
}

.success-cases__name--font-style {
    color: var(--primary-neutral-neutral-9, #454545);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.success-cases__site--font-style {
    color: var(--primary-neutral-neutral-9, #454545);
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.cta__title--font-style {
    color: var(--Primary-White-white-50, #FDFDFD);
    font-size: var(--fluid-16-24);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.cta__paragraph--font-style {
    color: var(--Primary-White-white-100, #FAFAFA);
    font-size: var(--fluid-12-16);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.cta__contact--font-style {
    color: var(--primary-neutral-neutral-13, #000);
    font-feature-settings: 'calt' off;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.faq__header>.section__title--font-style {
    color: var(--primary-neutral-neutral-9, #454545);
    text-align: center;
    font-size: var(--fluid-16-24);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.faq__header>.section__subtitle--font-style {
    color: var(--primary-neutral-neutral-9, #454545);
    text-align: center;
    font-size: var(--fluid-12-14);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.faq__title--font-style {
    color: var(--primary-neutral-neutral-9, #454545);
    font-size: var(--fluid-14-16);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.faq__answer--font-style {
    color: var(--CoolGray-90, #21272A);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

.footer__description--font-style {
    color: var(--primary-neutral-neutral-9, #454545);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1875rem;
}

.footer__column--font-style {
    color: var(--Primary-Neutral-neutral-12, #141414);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.footer__link {
    text-decoration: none;
    color: var(--Primary-Neutral-neutral-12, #141414);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.footer__copy {
    color: var(--primary-neutral-neutral-9, #454545);
    text-align: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.1875rem;
}

.footer__column--contact ul li a {
    font-style: normal;
    font-weight: 300;
    line-height: 1.5rem;
}
@media screen and (min-width: 50rem) {
    .hero__title--font-style {
        font-size: var(--fluid-32-40);
        line-height: var(--fluid-40-50);
    }

    .hero__subtitle--font-style {
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5rem;
    }

    .section__title--font-style {
        font-size: var(--fluid-24-32);
    }

    .technologies__content>.section__title {
        font-size: 1.5rem;
    }

    .about__title--font-style {
        font-size: var(--fluid-24-32);
    }

    .about__description--font-style {
        color: var(--primary-neutral-neutral-9, #454545);
        font-size: var(--fluid-14-16);
    }

    .project__name--font-style {
        font-size: var(--fluid-24-32);
    }

    .project__description--font-style {
        font-size: var(--fluid-14-16);
        line-height: 1.1875rem;
    }

    .success-cases__content>.section__title {
        color: var(--primary-neutral-neutral-9, #454545);
        text-align: center;
        font-size: 2rem;
        font-style: normal;
        font-weight: 600;
        line-height: 2.5rem;
    }

    .cta__title--font-style {
        font-size: var(--fluid-24-32);
    }

    .cta__paragraph--font-style {
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5rem;
    }

    .faq__header>.section__title--font-style {
        color: var(--primary-neutral-neutral-9, #454545);
        font-size: var(--fluid-24-32);
        line-height: 2.5rem;
    }

    .faq__header>.section__subtitle--font-style {
        font-size: var(--fluid-14-16);
        font-weight: 300;
        line-height: 1.5rem;
    }

    .faq__title--font-style {
        font-size: 1rem;
    }

    .faq__answer--font-style {
        font-size: 1rem;
    }
}
@media screen and (min-width: 80rem) {
    .hero__title--font-style {
        font-size: 2.5rem;
        line-height: 3.125rem;
    }

    .about__title--font-style {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .about__description--font-style {
        color: var(--Primary-Neutral-neutral-12, #141414);
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5rem;
    }

    .section__title--font-style {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .project__name--font-style {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .project__description--font-style {
        font-size: 1rem;
        font-style: normal;
        font-weight: 300;
        line-height: 1.5rem;
    }

    .cta__title--font-style {
        font-size: 2rem;
        font-weight: 600;
        line-height: 2.5rem;
    }

    .faq__header>.section__title--font-style {
        font-size: 2rem;
    }

    .faq__header>.section__subtitle--font-style {
        font-size: 1rem;
    }
}