/* STEELCREST - consolidated stylesheet (hand-cleaned Webflow export).
   1  reset (normalize)
   2  base framework -- the load-bearing rules, renamed .wf-
   2b widget geometry the dropped runtime rules used to provide
   3  Steelcrest design, including the renamed commerce layout
   4  components -- vanilla replacements for the Webflow runtime and
      for its IX2 and IX3 interactions

   Fonts: assets/fonts/fonts.css -- Inter, self-hosted woff2, one
   variable file per subset. The export shipped Apple and Linotype's
   Helvetica, which may not be redistributed with a template that is
   sold, so every reference to it in this sheet reads Inter instead.
   Inter is SIL Open Font License 1.1. A side effect worth knowing:
   the export had one 400-weight file for a design that asks for 400,
   500, 550, 600, 700 and 800, so five of those six weights were the
   browser's synthetic bold. They are real instances now. */

/* ======================================================================
   1. Reset (normalize)
   ====================================================================== */
html {
  font-family: sans-serif;
  
  -ms-text-size-adjust: 100%;
  
  -webkit-text-size-adjust: 100%;
  
}
body {
  margin: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
audio, canvas, progress, video {
  display: inline-block;
  
  vertical-align: baseline;
  
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden], template {
  display: none;
}
a {
  background-color: transparent;
}
a:active, a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b, strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button, input, optgroup, select, textarea {
  color: inherit;
  
  font: inherit;
  
  margin: 0;
  
}
button {
  overflow: visible;
}
button, select {
  text-transform: none;
}
button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  
  cursor: pointer;
  
}
button[disabled], html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type='checkbox'], input[type='radio'] {
  box-sizing: border-box;
  
  padding: 0;
  
}
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
input[type='search'] {
  -webkit-appearance: none;
  
}
input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  
  padding: 0;
  
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td, th {
  padding: 0;
}

/* ======================================================================
   2. Base framework (runtime-only rules dropped; the rest kept as .wf-)
   ====================================================================== */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
.inline-block {
  max-width: 100%;
  display: inline-block;
}
.wf-button {
  display: inline-block;
  padding: 9px 15px;
  background-color: #3898EC;
  color: white;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
input.wf-button {
  -webkit-appearance: button;
}
h1:where(:not([class*="heading-scale-"])), h2:where(:not([class*="heading-scale-"])), h3:where(:not([class*="heading-scale-"])), h4:where(:not([class*="heading-scale-"])), h5:where(:not([class*="heading-scale-"])), h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-1), :where(.heading-scale-2), :where(.heading-scale-3), :where(.heading-scale-4), :where(.heading-scale-5), :where(.heading-scale-6) {
  font-weight: bold;
  margin-bottom: 10px;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px;
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  font-size: 18px;
  line-height: 24px;
  margin-top: 10px;
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  font-size: 12px;
  line-height: 18px;
  margin-top: 10px;
}
p {
  margin-top: 0;
  margin-bottom: 10px;
}
blockquote {
  margin: 0 0 10px 0;
  padding: 10px 20px;
  border-left: 5px solid #E2E2E2;
  font-size: 18px;
  line-height: 22px;
}
figure {
  margin: 0;
  margin-bottom: 10px;
}
figcaption {
  margin-top: 5px;
  text-align: center;
}
ul, ol {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 40px;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.embed:before, .embed:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.embed:after {
  clear: both;
}
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}
button, [type='button'], [type='reset'] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}
.wf-form {
  margin: 0 0 15px;
}
.wf-form-done {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: #dddddd;
}
.wf-form-fail {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}.wf-input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.wf-input::placeholder {
  color: #999;
}
.wf-input:focus {
  border-color: #3898EC;
  outline: 0;
}
.wf-input[disabled], .wf-input[readonly], fieldset[disabled] .wf-input {
  cursor: not-allowed;
}
.wf-input[readonly] {
  background-color: #eeeeee;
}
textarea.wf-input {
  height: auto;
}

.wf-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}
.wf-container:before, .wf-container:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.wf-container:after {
  clear: both;
}@media screen and (max-width: 991px) {

  .wf-container {
    max-width: 728px;
  }}
@media screen and (max-width: 479px) {

  .wf-container {
    max-width: none;
  }}

.richtext:before, .richtext:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.richtext:after {
  clear: both;
}
.richtext[contenteditable="true"]:before, .richtext[contenteditable="true"]:after {
  white-space: initial;
}
.richtext ol, .richtext ul {
  overflow: hidden;
}.richtext figure[data-rt-type="video"] > div:after {
  content: '';
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.richtext figure {
  position: relative;
  max-width: 60%;
}
.richtext figure > div:before {
  cursor: default!important;
}
.richtext figure img {
  width: 100%;
}
.richtext figure div {
  
  font-size: 0px;
  color: transparent;
}.richtext figure[data-rt-type="image"] {
  display: table;
}
.richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}
.richtext figure[data-rt-type="image"] > figcaption {
  display: table-caption;
  caption-side: bottom;
}
.richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}
.richtext figure[data-rt-type="video"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.richtext figure[data-rt-type="video"] > div {
  width: 100%;
}

.tabset {
  position: relative;
}
.tabset:before, .tabset:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.tabset:after {
  clear: both;
}
.tabset-menu {
  position: relative;
}
.tabset-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  padding: 9px 30px;
  text-align: left;
  cursor: pointer;
  color: #222222;
  background-color: #dddddd;
}
.tabset-link[aria-current="page"], .tabset-link.is-active {
  background-color: #C8C8C8;
}
.tabset-link:focus {
  outline: 0;
}
.tabset-content {
  position: relative;
  display: block;
  overflow: hidden;
}
.tabset-pane {
  position: relative;
  display: none;
}
.tabset-pane.is-active {
  display: block;
}@media screen and (max-width: 479px) {

  .tabset-link {
    display: block;
  }}
@keyframes spin {

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

.wf-layout-grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-row-gap: 16px;
  grid-column-gap: 16px;
}

/* ======================================================================
   2b. Widget geometry (hand-written)
   ======================================================================

   Section 2 dropped every framework rule that existed only so Webflow's
   runtime could drive it -- the navbar overlay, the two kinds of dropdown,
   the slider, the lightbox, the background-video widget and the icon
   webfont. A few of those rules were also carrying real LAYOUT, and the
   design sheet was written on top of them: it overrides what it wants to
   change and inherits the rest.

   So the load-bearing half is restated here, re-keyed on this design's own
   class names, and emitted BETWEEN the framework and the design -- which is
   the whole point of section 2b. The cascade a buyer gets is the cascade the
   export had: same order, same specificity, so every design rule still wins
   exactly the arguments it used to win.

   Only geometry the DESIGN is meant to be able to override belongs here. A
   state the design knows nothing about (an accordion that starts closed, a
   nav overlay that starts hidden, a dropdown panel that is not open) must
   come AFTER the design instead, and lives in section 4 -- a previous
   conversion shipped a permanently-open FAQ by putting the collapse in this
   file, where the design's own `display: block` beat it on source order.

   Everything below was read out of `probe_widget_css.py`'s side-by-side dump
   of "what the dropped rule said" against "what the design says about the
   same element", and `audit_dropped.py` fails the build if a property that
   was dropped is supplied by nothing.

   Two rules were deliberately NOT transcribed, both measured rather than
   reasoned about:

     * `.w-nav:before` and `.w-nav:after`, Webflow's clearfix. On the earlier
       conversion whose navbar was a column flex box these were real flex
       items with a line-box of height; here `.navbar` is an ordinary block,
       and the header measures 89.59px = 20 + 49.59 + 20 with them present,
       so both boxes are exactly 0px tall. They existed to clear
       `.w-nav-menu`'s `float: right`, and the design's `.navbar-content` is
       a flex row, which makes that float inert.
     * `.w-nav-brand { padding-left: 10px }` inside `@media (max-width:
       767px)`. The design writes `padding-left: 0` at top level and the
       design sheet is emitted LATER, so in the export that 10px never
       applies at any width.
   ====================================================================== */

/* ---- the navbar --------------------------------------------------------
   `.w-nav` stacked the whole header above the page. The design gives
   `.navbar` `position: absolute; inset: 0 0 auto` -- it sits OVER the hero
   photograph -- and `background-color: #0000`, but it never restates the
   stacking order, so without this the hero's own positioned children paint
   on top of the menu. */
.navbar {
  z-index: 1000;
}

/* `.w-nav-brand`. `float: left` is inert inside the flex row the design
   makes of `.navbar-content`, and the colour and the underline come from the
   design's own bare `a` rule, so only the positioning context survives. */
.navbar-logo-link {
  position: relative;
}

/* `.w-nav-menu`. Above 991px this is an ordinary flex item in the header
   row; below it, main.js opens it as a panel and section 4 owns that state.
   `float: right` is inert in the same flex row. */
.nave-menu {
  position: relative;
}

/* `.w-nav-link`, on both families of link the design built on it: the four
   in the header bar and the 766 in the Pages panel and the footer.

   Both are laid out by flex parents (`.nav-menu-content` is a row,
   `.nav-menu-wrap` a column), which blockifies `inline-block`, so what is
   left is the positioning context -- and it is load-bearing on the second
   one, whose hover slides it 8px. */
.nav-link,
.nav-menu {
  position: relative;
  display: inline-block;
}

/* `.w-nav-button` -- the hamburger's outer box. `display: none` is the only
   reason it is invisible above 991px: the design says nothing at all about
   `.menu-button` until `@media (max-width: 991px)`, where it sets padding,
   background and `position: static`. Dropping this rule puts a hamburger
   next to the full desktop menu on all 43 pages.

   `padding: 18px` and `font-size: 24px` are NOT transcribed: the design sets
   `padding: 0` below 991px (and wins on source order), and above it the
   element is not displayed; the 24px sized the framework's own icon-webfont
   glyph, and this build draws three <span>s that take their colour from the
   design. */
.menu-button {
  position: relative;
  cursor: pointer;
  display: none;
}@media screen and (max-width: 991px) {

  /* `.w-nav[data-collapse='medium'] .w-nav-button { display: block }`. The
     design never sets `display` on this element at any width, so without
     this line the hamburger is invisible at every width and the site has no
     menu below 992px. */
  .menu-button {
    display: block;
  }}


/* ---- the navbar's Pages mega-menu --------------------------------------
   Built on Webflow's DROPDOWN widget, opened on hover after 400ms.

   The design says nothing about the wrapper above 991px and only
   `display: block` below it, so all three of these come from the framework
   -- and `position: relative` is the one that matters most: the panel is
   `position: absolute` with `left`/`top` left at `auto`, so it resolves
   against its static position INSIDE this box. Without the containing block
   the 412px panel lands against the viewport. */
.menu-dropdown-wrapper {
  display: inline-block;
  position: relative;
  z-index: 900;
}

/* `.w-dropdown-toggle`. The design sets the padding, the colour, the type
   and a transition; the framework supplied the box and the pointer. It is a
   <button> in this build, so its colour and underline come from the reset in
   section 4 rather than from Webflow's `color: #222222`.

   `white-space: nowrap` is real and is kept: "Pages" is one word, but a
   buyer who renames it to two should get the same one-line control the
   designer drew. */
.drapdown-toggle {
  position: relative;
  display: inline-block;
  cursor: pointer;
  white-space: nowrap;
}

/* `.w-dropdown-list`. The design gives the panel its 412px width, its 40px
   offset, its padding and `transform: translate(-50%)`; the framework gave
   it the absolute positioning those are measured against. Its closed state
   is a STATE and lives in section 4. */
.dropdown-colum-wrapper {
  position: absolute;
  min-width: 100%;
}

/* ---- the FAQ accordion -------------------------------------------------
   Also built on the DROPDOWN widget, which is why its IX2 events are
   DROPDOWN_OPEN / DROPDOWN_CLOSE and why its answer is a <nav> in the
   export.

   The design overrides nearly all of the widget's geometry -- `.accordion`
   is a static column flex box with `overflow: hidden`, its title row a
   `space-between` flex row, its answer a static full-width block -- which
   leaves only the pointer and the fact that the title row is a control
   rather than text. The panel's closed state is a STATE, so it is in
   section 4. */
.accordion-title-wrap {
  cursor: pointer;
  white-space: nowrap;
}

/* ---- the background video ----------------------------------------------
   One film per page on two pages, behind the testimonial cards. Everything
   here is the widget's own layout: the design gives `.testimonial-background`
   a height and nothing else, and the <video> inside it is positioned
   entirely by the framework.

   The oversized inset plus `margin: auto` is Webflow's way of centring a
   film that is the wrong aspect ratio for its box; `object-fit: cover` does
   the same job on its own in every browser this template supports, but both
   are transcribed because together they are what the export computes, and
   the poster frame painted as `background-size: cover` behind the video is
   what shows while it loads. */
.testimonial-background {
  position: relative;
  overflow: hidden;
  color: white;
}

/* `.w-background-video { height: 500px }` is NOT transcribed. The design
   sets `height: 100%` on the same element at every breakpoint and its sheet
   is emitted later, so the framework's 500px never applied in the export
   either -- transcribing it here would be a declaration that exists only to
   be overridden, which audit_cascade fails the build on. */

.testimonial-background > video {
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  margin: auto;
  width: 100%;
  height: 100%;
  inset: -100%;
  object-fit: cover;
  z-index: -100;
}

.testimonial-background > video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* The play/pause control in the corner of the film. The design gives it
   `z-index: 99` and nothing else -- every offset, and the transparent
   background that lets the film show through it, is the framework's. */
.play {
  position: absolute;
  bottom: 1em;
  right: 1em;
  background-color: transparent;
  padding: 0;
}

/* ...and the half of the button that is not the current state. main.js moves
   the `hidden` attribute between the two <span>s; without this rule both
   glyphs show at once, because `hidden` is only a `display: none` in the UA
   sheet and the design's own layout beats it. */
.play > [hidden] {
  display: none !important;
}

/* ======================================================================
   3. Steelcrest design
   ====================================================================== */
:root {
  --color--white: white;
  --font-family--primary-font: Inter, Arial, sans-serif;
  --color--text-gray: #707070;
  --_typography---paragraph--font-size: 16px;
  --_typography---paragraph--line-height: var(--line-height--line-height-xl);
  --_typography---paragraph--font-weight: var(--font-weight--regular);
  --_typography---paragraph--letter-spacing: -.32px;
  --_spacing---margin-padding--spacing-zero: 0px;
  --color--black: #191919;
  --_typography---heading-h1--font-size: 70px;
  --_typography---heading-h1--line-height: var(--line-height--line-height-s);
  --_typography---heading-h1--font-weight: var(--font-weight--regular);
  --_typography---heading-h1--letter-spacing: -1.4px;
  --_typography---heading-h2--font-size: 60px;
  --_typography---heading-h2--line-height: var(--line-height--line-height-s);
  --_typography---heading-h2--font-weight: var(--font-weight--regular);
  --_typography---heading-h2--letter-spacing: -1.2px;
  --_typography---heading-h3--font-size: 38px;
  --_typography---heading-h3--line-height: var(--line-height--line-height-l);
  --_typography---heading-h3--font-weight: var(--font-weight--regular);
  --_typography---heading-h3--letter-spacing: -.76px;
  --_typography---heading-h6--letter-spacing: -.36px;
  --_typography---heading-h4--font-size: 28px;
  --_typography---heading-h4--line-height: var(--line-height--line-height-l);
  --_typography---heading-h4--font-weight: var(--font-weight--regular);
  --_typography---heading-h4--letter-spacing: -.56px;
  --_typography---heading-h5--font-size: 24px;
  --_typography---heading-h5--line-height: var(--line-height--line-height-s);
  --_typography---heading-h5--font-weight: var(--font-weight--regular);
  --_typography---heading-h5--letter-spacing: -.48px;
  --_typography---heading-h6--font-size: 20px;
  --_typography---heading-h6--line-height: var(--line-height--line-height-l);
  --_typography---heading-h6--font-weight: var(--font-weight--regular);
  --color--gray: #373737;
  --line-height--line-height-xl: 140%;
  --font-weight--regular: 400;
  --_spacing---margin-padding--spacing-medium: 20px;
  --_spacing---margin-padding--spacing-xxsmall: 12px;
  --_spacing---margin-padding--spacing-big: 50px;
  --_spacing---margin-padding--spacing-titan: 186px;
  --_spacing---margin-padding--spacing-jumbo: 88px;
  --_spacing---margin-padding--spacing-xjumbo: 90px;
  --_spacing---margin-padding--spacing-massive: 120px;
  --_spacing---margin-padding--spacing-colossal: 150px;
  --_spacing---margin-padding--spacing-immense: 140px;
  --_spacing---margin-padding--spacing-tiny: 10px;
  --_spacing---margin-padding--spacing-giant: 134px;
  --_spacing---margin-padding--spacing-regular: 30px;
  --_spacing---margin-padding--spacing-xxxbig: 80px;
  --color--fill-color: whitesmoke;
  --_spacing---margin-padding--spacing-xbig: 60px;
  --_spacing---margin-padding--spacing-xxjumbo: 100px;
  --_spacing---margin-padding--spacing-xxbig: 70px;
  --_spacing---margin-padding--spacing-mega: 386px;
  --_spacing---margin-padding--spacing-small: 15px;
  --_typography---paragraph-large--font-size: 18px;
  --_typography---paragraph-large--line-height: var(--line-height--line-height-xl);
  --_typography---paragraph-large--letter-spacing: -.36px;
  --_typography---paragraph-small--font-size: 14px;
  --color--slate-medium: #5c5c5c;
  --color--black-gray: #8d8d8d;
  --_spacing---radius--radius-tiny: 10px;
  --_spacing---margin-padding--spacing-normal: 32px;
  --_typography---paragraph-small--line-height: var(--line-height--line-height-xl);
  --_typography---paragraph-small--font-weight: var(--font-weight--regular);
  --color--stroke-color: #bfbfbf;
  --_spacing---radius--circle-round: 50%;
  --_spacing---margin-padding--spacing-xxlarge: 46px;
  --_spacing---margin-padding--spacing-xsmall: 14px;
  --_spacing---margin-padding--spacing-xlarge: 40px;
  --_spacing---margin-padding--spacing-slim: 16px;
  --color--transparent: transparent;
  --_spacing---margin-padding--spacing-medium-rare: 24px;
  --_spacing---radius--radius-regular: 16px;
  --_typography---paragraph-small--letter-spacing: -.32px;
  --_spacing---radius--radius-small: 12px;
  --color--cloud-white: #f6f6f6;
  --_spacing---radius--radius-medium: 14px;
  --_spacing---radius--radius-jumbo: 100px;
  --_spacing---radius--radius-xxlarge: 30px;
  --_spacing---radius--radius-large: 20px;
  --_spacing---radius--radius-xlarge: 24px;
  --_spacing---margin-padding--spacing-xxxlarge: 48px;
  --_spacing---margin-padding--spacing-large: 35px;
  --font-weight--bold: 700;
  --color--whitesmoke: whitesmoke;
  --_spacing---margin-padding--spacing-xtitan: 220px;
  --_spacing---margin-padding--spacing-xxtitan: 237px;
  --line-height--line-height-s: 115%;
  --line-height--line-height-m: 110%;
  --line-height--line-height-l: 120%;
  --line-height--line-height-x: 130%;
  --line-height--line-height-2xl: 150%;
  --font-weight--medium: 500;
  --font-weight--semi-bold: 600;
  --font-weight--extra-bold: 800;
  --_typography---paragraph-large--font-weight: var(--font-weight--regular);
}
.wf-commerce-commercecartwrapper {
  display: inline-block;
  position: relative;
}
.wf-commerce-commercecartopenlink {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commercecartopenlinkcount {
  color: #3898ec;
  text-align: center;
  background-color: #fff;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  display: inline-block;
}
.wf-commerce-commercecartcontainerwrapper {
  z-index: 1001;
  background-color: #000c;
  position: fixed;
  inset: 0;
}
.wf-commerce-commercecartcontainerwrapper--cartType-modal {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.wf-commerce-commercecartcontainer {
  background-color: #fff;
  flex-direction: column;
  width: 100%;
  min-width: 320px;
  max-width: 480px;
  display: flex;
  overflow: auto;
  box-shadow: 0 5px 25px #00000040;
}
.wf-commerce-commercecartheader {
  border-bottom: 1px solid #e6e6e6;
  flex: none;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  display: flex;
  position: relative;
}
.wf-commerce-commercecartheading {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.wf-commerce-commercecartcloselink {
  width: 16px;
  height: 16px;
}
.wf-commerce-commercecartformwrapper {
  flex-direction: column;
  flex: 1;
  display: flex;
}
.wf-commerce-commercecartform {
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecartlist {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 12px 24px;
  overflow: auto;
}
.wf-commerce-commercecartitem {
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
}
.wf-commerce-commercecartiteminfo {
  flex-direction: column;
  flex: 1;
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
}
.wf-commerce-commercecartitemimage {
  width: 60px;
  height: 0%;
}
.wf-commerce-commercecartproductname {
  font-weight: 700;
}
.wf-commerce-commercecartoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}
.wf-commerce-commercecartquantity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 60px;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 6px 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecartquantity::placeholder {
  color: #999;
}
.wf-commerce-commercecartquantity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecartfooter {
  border-top: 1px solid #e6e6e6;
  flex-direction: column;
  flex: none;
  padding: 16px 24px 24px;
  display: flex;
}
.wf-commerce-commercecartlineitem {
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  display: flex;
}
.wf-commerce-commercecartordervalue {
  font-weight: 700;
}
.wf-commerce-commercecartcheckoutbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 2px;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercecartemptystate {
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}
.wf-commerce-commercecarterrorstate {
  background-color: #ffdede;
  flex: none;
  margin: 0 24px 24px;
  padding: 10px;
}
.wf-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.wf-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.wf-commerce-commerceaddtocartform {
  margin: 0 0 15px;
}
.wf-commerce-commerceaddtocartbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commerceaddtocartbutton.is-disabled {
  color: #666;
  cursor: not-allowed;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  outline-style: none;
}
.wf-commerce-commerceaddtocartoutofstock {
  background-color: #ddd;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commerceaddtocarterror {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commercecheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercelayoutcontainer {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.wf-commerce-commercelayoutmain {
  flex: 0 800px;
  margin-right: 20px;
}
.wf-commerce-commercecheckoutcustomerinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutblockcontent {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
}
.wf-commerce-commercecheckoutlabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutemailinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutemailinput::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutemailinput:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingaddresswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutrow {
  margin-left: -8px;
  margin-right: -8px;
  display: flex;
}
.wf-commerce-commercecheckoutcolumn {
  flex: 1;
  padding-left: 8px;
  padding-right: 8px;
}
.wf-commerce-commercecheckoutshippingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingmethodswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingmethodslist {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
.wf-commerce-commercecheckoutshippingmethoditem {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 0;
  padding: 16px;
  font-weight: 400;
  display: flex;
}
.wf-commerce-commercecheckoutshippingmethoddescriptionblock {
  flex-direction: column;
  flex-grow: 1;
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
}
.wf-commerce-commerceboldtextblock {
  font-weight: 700;
}
.wf-commerce-commercecheckoutshippingmethodsemptystate {
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 64px 16px;
}
.wf-commerce-commercecheckoutpaymentinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutcardnumber {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardnumber::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardnumber:focus, .wf-commerce-commercecheckoutcardnumber.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardexpirationdate {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardexpirationdate::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardexpirationdate:focus, .wf-commerce-commercecheckoutcardexpirationdate.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardsecuritycode {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardsecuritycode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardsecuritycode:focus, .wf-commerce-commercecheckoutcardsecuritycode.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingaddresstogglewrapper {
  flex-direction: row;
  display: flex;
}
.wf-commerce-commercecheckoutbillingaddresstogglecheckbox {
  margin-top: 4px;
}
.wf-commerce-commercecheckoutbillingaddresstogglelabel {
  margin-left: 8px;
  font-weight: 400;
}
.wf-commerce-commercecheckoutbillingaddresswrapper {
  margin-top: 16px;
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutbillingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutorderitemswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemslist {
  margin-bottom: -20px;
}
.wf-commerce-commercecheckoutorderitem {
  margin-bottom: 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemdescriptionwrapper {
  flex-grow: 1;
  margin-left: 16px;
  margin-right: 16px;
}
.wf-commerce-commercecheckoutorderitemquantitywrapper {
  white-space: pre-wrap;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}
.wf-commerce-commercelayoutsidebar {
  flex: 0 0 320px;
  position: sticky;
  top: 20px;
}
.wf-commerce-commercecheckoutordersummarywrapper {
  margin-bottom: 20px;
}.wf-commerce-commercecheckoutsummarylineitem {
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8px;
  display: flex;
}

.wf-commerce-commercecheckoutsummarytotal {
  font-weight: 700;
}
.wf-commerce-commercecheckoutplaceorderbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 3px;
  align-items: center;
  margin-bottom: 20px;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercecheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}
.wf-commerce-commercepaypalcheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercecheckoutcustomerinfosummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryitem, .wf-commerce-commercecheckoutsummarylabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutsummaryflexboxdiv {
  flex-direction: row;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecheckoutsummarytextspacingondiv {
  margin-right: .33em;
}
.wf-commerce-commercecheckoutpaymentsummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercepaypalcheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}
.wf-commerce-commerceorderconfirmationcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercecheckoutshippingsummarywrapper {
  margin-bottom: 20px;
}@media screen and (max-width: 991px) {

  .wf-layout-blockcontainer {
    max-width: 728px;
  }}
@media screen and (max-width: 767px) {

  .wf-layout-blockcontainer {
    max-width: none;
  }
  .wf-commerce-commercelayoutcontainer {
    flex-direction: column;
    align-items: stretch;
  }
  .wf-commerce-commercelayoutmain {
    flex-basis: auto;
    margin-right: 0;
  }
  .wf-commerce-commercelayoutsidebar {
    flex-basis: auto;
  }}
@media screen and (max-width: 479px) {

  .wf-commerce-commercecartcontainerwrapper--cartType-modal {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }  .wf-commerce-commercecartquantity, .wf-commerce-commercecheckoutemailinput, .wf-commerce-commercecheckoutshippingfullname, .wf-commerce-commercecheckoutshippingstreetaddress, .wf-commerce-commercecheckoutshippingstreetaddressoptional {
    font-size: 16px;
  }

  .wf-commerce-commercecheckoutrow {
    flex-direction: column;
  }
  .wf-commerce-commercecheckoutshippingcity, .wf-commerce-commercecheckoutshippingstateprovince, .wf-commerce-commercecheckoutshippingzippostalcode, .wf-commerce-commercecheckoutshippingcountryselector, .wf-commerce-commercecheckoutcardnumber, .wf-commerce-commercecheckoutcardexpirationdate, .wf-commerce-commercecheckoutcardsecuritycode, .wf-commerce-commercecheckoutbillingfullname, .wf-commerce-commercecheckoutbillingstreetaddress, .wf-commerce-commercecheckoutbillingstreetaddressoptional, .wf-commerce-commercecheckoutbillingcity, .wf-commerce-commercecheckoutbillingstateprovince, .wf-commerce-commercecheckoutbillingzippostalcode, .wf-commerce-commercecheckoutbillingcountryselector {
    font-size: 16px;
  }}

body {
  background-color: var(--color--white);
  font-family: var(--font-family--primary-font);
  color: var(--color--text-gray);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  letter-spacing: var(--_typography---paragraph--letter-spacing);
  --_typography---paragraph--font-size: 16px;
  --_typography---paragraph--line-height: var(--line-height--line-height-xl);
  --_typography---paragraph--font-weight: var(--font-weight--regular);
  --_typography---paragraph--letter-spacing: -.32px;
  --_typography---heading-h1--font-size: 70px;
  --_typography---heading-h1--line-height: var(--line-height--line-height-s);
  --_typography---heading-h1--font-weight: var(--font-weight--regular);
  --_typography---heading-h1--letter-spacing: -1.4px;
  --_typography---heading-h2--font-size: 60px;
  --_typography---heading-h2--line-height: var(--line-height--line-height-s);
  --_typography---heading-h2--font-weight: var(--font-weight--regular);
  --_typography---heading-h2--letter-spacing: -1.2px;
  --_typography---heading-h3--font-size: 38px;
  --_typography---heading-h3--line-height: var(--line-height--line-height-l);
  --_typography---heading-h3--font-weight: var(--font-weight--regular);
  --_typography---heading-h3--letter-spacing: -.76px;
  --_typography---heading-h6--letter-spacing: -.36px;
  --_typography---heading-h4--font-size: 28px;
  --_typography---heading-h4--line-height: var(--line-height--line-height-l);
  --_typography---heading-h4--font-weight: var(--font-weight--regular);
  --_typography---heading-h4--letter-spacing: -.56px;
  --_typography---heading-h5--font-size: 24px;
  --_typography---heading-h5--line-height: var(--line-height--line-height-s);
  --_typography---heading-h5--font-weight: var(--font-weight--regular);
  --_typography---heading-h5--letter-spacing: -.48px;
  --_typography---heading-h6--font-size: 20px;
  --_typography---heading-h6--line-height: var(--line-height--line-height-l);
  --_typography---heading-h6--font-weight: var(--font-weight--regular);
  --_typography---paragraph-large--font-size: 18px;
  --_typography---paragraph-large--line-height: var(--line-height--line-height-xl);
  --_typography---paragraph-large--letter-spacing: -.36px;
  --_typography---paragraph-small--font-size: 14px;
  --_typography---paragraph-small--line-height: var(--line-height--line-height-xl);
  --_typography---paragraph-small--font-weight: var(--font-weight--regular);
  --_typography---paragraph-small--letter-spacing: -.32px;
  --_typography---paragraph-large--font-weight: var(--font-weight--regular);
  --_spacing---margin-padding--spacing-zero: 0px;
  --_spacing---margin-padding--spacing-medium: 20px;
  --_spacing---margin-padding--spacing-xxsmall: 12px;
  --_spacing---margin-padding--spacing-big: 50px;
  --_spacing---margin-padding--spacing-titan: 186px;
  --_spacing---margin-padding--spacing-jumbo: 88px;
  --_spacing---margin-padding--spacing-xjumbo: 90px;
  --_spacing---margin-padding--spacing-massive: 120px;
  --_spacing---margin-padding--spacing-colossal: 150px;
  --_spacing---margin-padding--spacing-immense: 140px;
  --_spacing---margin-padding--spacing-tiny: 10px;
  --_spacing---margin-padding--spacing-giant: 134px;
  --_spacing---margin-padding--spacing-regular: 30px;
  --_spacing---margin-padding--spacing-xxxbig: 80px;
  --_spacing---margin-padding--spacing-xbig: 60px;
  --_spacing---margin-padding--spacing-xxjumbo: 100px;
  --_spacing---margin-padding--spacing-xxbig: 70px;
  --_spacing---margin-padding--spacing-mega: 386px;
  --_spacing---margin-padding--spacing-small: 15px;
  --_spacing---radius--radius-tiny: 10px;
  --_spacing---margin-padding--spacing-normal: 32px;
  --_spacing---radius--circle-round: 50%;
  --_spacing---margin-padding--spacing-xxlarge: 46px;
  --_spacing---margin-padding--spacing-xsmall: 14px;
  --_spacing---margin-padding--spacing-xlarge: 40px;
  --_spacing---margin-padding--spacing-slim: 16px;
  --_spacing---margin-padding--spacing-medium-rare: 24px;
  --_spacing---radius--radius-regular: 16px;
  --_spacing---radius--radius-small: 12px;
  --_spacing---radius--radius-medium: 14px;
  --_spacing---radius--radius-jumbo: 100px;
  --_spacing---radius--radius-xxlarge: 30px;
  --_spacing---radius--radius-large: 20px;
  --_spacing---radius--radius-xlarge: 24px;
  --_spacing---margin-padding--spacing-xxxlarge: 48px;
  --_spacing---margin-padding--spacing-large: 35px;
  --_spacing---margin-padding--spacing-xtitan: 220px;
  --_spacing---margin-padding--spacing-xxtitan: 237px;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  margin-top: var(--_spacing---margin-padding--spacing-zero);
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  color: var(--color--black);
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  font-weight: var(--_typography---heading-h1--font-weight);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  margin-top: var(--_spacing---margin-padding--spacing-zero);
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  color: var(--color--black);
  font-size: var(--_typography---heading-h2--font-size);
  line-height: var(--_typography---heading-h2--line-height);
  font-weight: var(--_typography---heading-h2--font-weight);
  letter-spacing: var(--_typography---heading-h2--letter-spacing);
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  margin-top: var(--_spacing---margin-padding--spacing-zero);
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  color: var(--color--black);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  font-weight: var(--_typography---heading-h3--font-weight);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  margin-top: var(--_spacing---margin-padding--spacing-zero);
  margin-bottom: var(--_typography---heading-h6--letter-spacing);
  color: var(--color--black);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  margin-top: var(--_spacing---margin-padding--spacing-zero);
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  color: var(--color--black);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--_typography---heading-h5--font-weight);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  margin-top: var(--_spacing---margin-padding--spacing-zero);
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  font-size: var(--_typography---heading-h6--font-size);
  line-height: var(--_typography---heading-h6--line-height);
  font-weight: var(--_typography---heading-h6--font-weight);
  letter-spacing: var(--_typography---heading-h6--letter-spacing);
}
p {
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  color: var(--color--gray);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  letter-spacing: var(--_typography---paragraph--letter-spacing);
}
a {
  color: var(--color--black);
  line-height: var(--line-height--line-height-xl);
  font-weight: var(--font-weight--regular);
  text-decoration: none;
}
ul {
  margin-top: var(--_spacing---margin-padding--spacing-zero);
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  padding-left: var(--_spacing---margin-padding--spacing-medium);
}
img {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  display: inline-block;
}
label {
  margin-bottom: var(--_spacing---margin-padding--spacing-xxsmall);
  color: var(--color--black);
  font-weight: var(--font-weight--regular);
  display: block;
}
.section {
  padding-top: var(--_spacing---margin-padding--spacing-big);
  padding-bottom: var(--_spacing---margin-padding--spacing-big);
}
.section.utlity-hero {
  padding-top: var(--_spacing---margin-padding--spacing-titan);
}
.section.footer {
  padding-top: var(--_spacing---margin-padding--spacing-jumbo);
  padding-bottom: var(--_spacing---margin-padding--spacing-zero);
  background-color: var(--color--black);
}
.section.license {
  padding-top: var(--_spacing---margin-padding--spacing-xjumbo);
  padding-bottom: var(--_spacing---margin-padding--spacing-massive);
}
.section.typography {
  padding-bottom: var(--_spacing---margin-padding--spacing-massive);
}
.section.inner-hero {
  padding-top: var(--_spacing---margin-padding--spacing-colossal);
}
.section.contact {
  padding-bottom: var(--_spacing---margin-padding--spacing-immense);
}
.section.blog-card {
  padding-top: var(--_spacing---margin-padding--spacing-tiny);
  padding-bottom: var(--_spacing---margin-padding--spacing-massive);
}
.section.explore {
  padding-top: var(--_spacing---margin-padding--spacing-medium);
  padding-bottom: var(--_spacing---margin-padding--spacing-giant);
}
.section.project-single {
  padding-top: var(--_spacing---margin-padding--spacing-tiny);
  padding-bottom: var(--_spacing---margin-padding--spacing-immense);
}
.section.project, .section.service {
  padding-bottom: var(--_spacing---margin-padding--spacing-massive);
}
.section.service-single {
  padding-top: var(--_spacing---margin-padding--spacing-tiny);
  padding-bottom: var(--_spacing---margin-padding--spacing-massive);
}
.section.plan-single, .section.plan {
  padding-top: var(--_spacing---margin-padding--spacing-regular);
  padding-bottom: var(--_spacing---margin-padding--spacing-massive);
}
.section.testimonials {
  padding-bottom: var(--_spacing---margin-padding--spacing-xxxbig);
  background-color: var(--color--fill-color);
  overflow: clip;
}
.section.faq {
  padding-bottom: var(--_spacing---margin-padding--spacing-xbig);
  background-color: var(--color--black);
}
.section.products {
  padding-bottom: var(--_spacing---margin-padding--spacing-massive);
}
.section.pricing-inner-hero {
  padding-top: var(--_spacing---margin-padding--spacing-colossal);
  padding-bottom: var(--_spacing---margin-padding--spacing-massive);
}
.section.commitment {
  padding-top: var(--_spacing---margin-padding--spacing-xxjumbo);
  padding-bottom: var(--_spacing---margin-padding--spacing-xxxbig);
}
.section.team {
  padding-top: var(--_spacing---margin-padding--spacing-xxxbig);
  padding-bottom: var(--_spacing---margin-padding--spacing-xxbig);
}
.section.trust {
  padding-top: var(--_spacing---margin-padding--spacing-medium);
}
.section.brand {
  padding-top: var(--_spacing---margin-padding--spacing-regular);
}
.section.number {
  padding-top: var(--_spacing---margin-padding--spacing-xbig);
  padding-bottom: var(--_spacing---margin-padding--spacing-xbig);
  background-color: var(--color--black);
}
.section.values {
  padding-top: var(--_spacing---margin-padding--spacing-xxxbig);
  padding-bottom: var(--_spacing---margin-padding--spacing-xxxbig);
}
.section.choose {
  padding-top: var(--_spacing---margin-padding--spacing-xxbig);
  padding-bottom: var(--_spacing---margin-padding--spacing-xxbig);
}
.section.hero-pricing {
  padding-bottom: var(--_spacing---margin-padding--spacing-xxjumbo);
}
.section.hero-product {
  background-color: var(--color--black);
  overflow: hidden;
}
.section.materials {
  padding-bottom: var(--_spacing---margin-padding--spacing-xjumbo);
  background-color: var(--color--black);
}
.section.hero-project {
  padding-bottom: var(--_spacing---margin-padding--spacing-xxbig);
}
.section.hero {
  padding-top: var(--_spacing---margin-padding--spacing-mega);
  padding-bottom: var(--_spacing---margin-padding--spacing-colossal);
  background-image: url('../images/hero-bg.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.section.hero-about {
  padding-top: var(--_spacing---margin-padding--spacing-massive);
  padding-bottom: var(--_spacing---margin-padding--spacing-massive);
}
.section.hero-brand {
  padding-top: var(--_spacing---margin-padding--spacing-medium);
  padding-bottom: var(--_spacing---margin-padding--spacing-medium);
}
.section.hero-service {
  padding-bottom: var(--_spacing---margin-padding--spacing-xxbig);
  background-color: var(--color--fill-color);
}
.section.cmpare {
  padding-bottom: var(--_spacing---margin-padding--spacing-regular);
}
.section.our-story {
  position: relative;
}
.container {
  width: 100%;
  max-width: 1370px;
  padding-right: var(--_spacing---margin-padding--spacing-small);
  padding-left: var(--_spacing---margin-padding--spacing-small);
  margin-left: auto;
  margin-right: auto;
}
.container.relative {
  position: relative;
}
.animation-content-wrap {
  overflow: hidden;
}
.secondary-text {
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  text-align: left;
  letter-spacing: var(--_typography---paragraph-large--letter-spacing);
}
.secondary-text.black {
  color: var(--color--black);
}
.secondary-text.text-gray {
  color: var(--color--text-gray);
}
.secondary-text.white {
  color: var(--color--white);
}
.secondary-text.black-gray {
  color: var(--color--black-gray);
}
.secondary-text.center {
  text-align: center;
}
.utlity-button-icon-box {
  justify-content: center;
  align-items: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  margin-top: -2px;
  display: flex;
}
.utlity-button-icon {
  z-index: 1;
  position: relative;
}
.utlity-button-text {
  color: var(--color--white);
}
.utlity-button-content {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.utlity-button-text-wrap {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.utlity-button-hover-text {
  color: var(--color--white);
  position: absolute;
}
.utlity-button-hover-icon {
  position: absolute;
}
.utlity-button-icon-wrap {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.utlity-button {
  z-index: 1;
  padding: var(--_spacing---margin-padding--spacing-tiny);
  border-radius: var(--_spacing---radius--radius-tiny);
  background-color: var(--color--black);
  text-decoration: none;
  position: relative;
}
.utlity-center-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-normal);
  grid-row-gap: var(--_spacing---margin-padding--spacing-normal);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.utlity-center-box.style-guide {
  max-width: 649px;
}
.utlity-center-box.license {
  max-width: 650px;
}
.utlity-center-box.contact {
  max-width: 660px;
}
.change-log-wrap {
  max-width: 846px;
  margin: var(--_spacing---margin-padding--spacing-immense) auto var(--_spacing---margin-padding--spacing-xxbig);
}
.version-title {
  margin-bottom: var(--_spacing---margin-padding--spacing-regular);
}
.description.black {
  color: var(--color--black);
}
.description.text-gray {
  color: var(--color--text-gray);
}
.description.black-gray {
  color: var(--color--black-gray);
}
.description.white {
  color: var(--color--white);
}
.description.d {
  color: var(--color--slate-medium);
}
.description.gray {
  color: var(--color--gray);
}
.footer-top-box {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.footer-left-box {
  max-width: 697px;
}
.footer-title {
  color: var(--color--white);
}
.secondary-button-text {
  color: var(--color--black);
  font-size: var(--_typography---paragraph-small--font-size);
  line-height: var(--_typography---paragraph-small--line-height);
  font-weight: var(--_typography---paragraph-small--font-weight);
}
.secondary-button-content {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  justify-content: flex-start;
  align-items: center;
}
.secondary-button-text-wrap {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.secondary-button-hover-text {
  color: var(--color--black);
  font-size: var(--_typography---paragraph-small--font-size);
  line-height: var(--_typography---paragraph-small--line-height);
  font-weight: var(--_typography---paragraph-small--font-weight);
  position: absolute;
}
.secondary-button-hover-text.white {
  z-index: -1;
  color: var(--color--white);
}
.secondary-button {
  z-index: 1;
  padding: var(--_spacing---margin-padding--spacing-xxsmall) var(--_spacing---margin-padding--spacing-regular);
  border: 1px solid var(--color--stroke-color);
  background-color: var(--color--white);
  border-radius: 100px;
  text-decoration: none;
  position: relative;
}
.secondary-button.plan {
  border-color: var(--color--black);
  background-color: var(--color--fill-color);
}
.footer-main-box-wrap {
  margin-top: var(--_spacing---margin-padding--spacing-giant);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.footer-about-box {
  width: 100%;
  max-width: 485px;
}
.footer-logo-box {
  display: inline-block;
}
.footer-logo {
  max-width: 32px;
  max-height: 32px;
}
.footer-about {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  margin-bottom: var(--_spacing---margin-padding--spacing-xbig);
  color: var(--color--white);
}
.social-box-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.social-box {
  justify-content: center;
  align-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.social-box.blog {
  border-radius: var(--_spacing---radius--circle-round);
  background-color: var(--color--fill-color);
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
}
.social-icon-in.small-size {
  max-width: 16px;
  max-height: 16px;
}
.social-icon-in.small-size-fb {
  max-width: 9px;
  max-height: 14px;
}
.social-icon-out {
  position: absolute;
}
.social-icon-out.small-size {
  max-width: 16px;
  max-height: 16px;
}
.social-icon-out.small-size-fb {
  max-width: 9px;
  max-height: 14px;
}
.footer-menu-wraps {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  flex-flow: column;
}
.footer-menu-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xxbig);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xxbig);
  grid-template-rows: auto;
  grid-template-columns: 95px 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 459px;
  display: grid;
}
.widget-name {
  margin-bottom: var(--_spacing---margin-padding--spacing-regular);
  color: var(--color--black-gray);
}
.widget-flex-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-small);
  grid-row-gap: var(--_spacing---margin-padding--spacing-small);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.footer-menu {
  color: var(--color--white);
  transition: all .45s;
}
.footer-menu:hover {
  transform: translate(10px);
}
.footer-bottom-box {
  margin-top: var(--_spacing---margin-padding--spacing-xxlarge);
  padding: var(--_spacing---margin-padding--spacing-xsmall) var(--_spacing---margin-padding--spacing-small);
  background-color: var(--color--white);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.footrer-copyright-box {
  grid-column-gap: 24px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.black-link {
  color: var(--color--black);
}
.dropdown-colum-wrapper {
  width: 412px;
  margin-left: var(--_spacing---margin-padding--spacing-xlarge);
  padding-top: var(--_spacing---margin-padding--spacing-tiny);
  background-color: #0000;
  overflow: hidden;
  transform: translate(-50%);
}
.subtotal {
  font-size: 20px;
  font-weight: 550;
}
.navbar-logo-link {
  padding-left: var(--_spacing---margin-padding--spacing-zero);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.nav-link-wrapper {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 74px;
  display: flex;
}
.nav-link-wrapper.second {
  max-width: 147px;
}
.nav-link-wrapper._3rd {
  max-width: 93px;
}
.nav-link-wrapper.fast {
  margin-right: var(--_spacing---margin-padding--spacing-tiny);
}
.navbar-content {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.cart-container {
  background-color: var(--color--black);
  color: var(--color--white);
  border-radius: 16px;
}
.cart-quantity {
  color: #191919;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  min-width: 14px;
  height: 14px;
  padding-left: 0;
  padding-right: 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 100%;
  display: flex;
  position: absolute;
  top: -10%;
  right: -50%;
}
.cart-button {
  background-color: #0000;
  padding: 0;
  position: relative;
}
.drapdown-toggle {
  padding: var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-xxsmall);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  color: var(--color--black);
  font-size: var(--_typography---paragraph-small--font-size);
  line-height: var(--_typography---paragraph-small--line-height);
  transition: all .3s;
}
.close-button {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: flex;
}
.navbar-right-content {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.dropdown-toggle-text-block {
  color: var(--color--black);
  font-size: var(--_typography---paragraph-small--font-size);
  line-height: var(--_typography---paragraph-small--line-height);
  font-weight: var(--_typography---paragraph-small--font-weight);
}
.dropdown-toggle-text-block.white {
  color: var(--color--white);
}
.nav-hamburger-button {
  z-index: 201;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  transition: background-color .3s;
  display: flex;
}
.error-state {
  color: #fff;
  text-align: center;
  background-color: red;
  border-radius: 10px;
}
.desktop {
  display: block;
}
.mobile {
  display: none;
}
.nav-right-btn-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
}
.bold-description {
  color: var(--color--black);
  font-size: var(--_typography---paragraph-large--font-size);
}
.nav-inner-flex-wrap {
  width: 100%;
}
.nav-menu {
  margin-right: var(--_spacing---margin-padding--spacing-zero);
  margin-left: var(--_spacing---margin-padding--spacing-zero);
  padding: var(--_spacing---margin-padding--spacing-zero);
  color: var(--color--text-gray);
  transition: all .5s;
  overflow: hidden;
}
.nav-menu:hover {
  color: var(--color--black);
  transform: translate(8px);
}
.nav-menu[aria-current="page"], .nav-menu.is-active {
  color: var(--color--black);
}
.primary-button-text-wrap {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.nave-menu {
  background-color: #aaa3;
  border-radius: 100px;
  padding: 5px;
  transition: all .4s;
}
.card-block {
  flex-flow: row;
  justify-content: space-between;
  margin-left: 0;
  margin-right: 0;
}
.nav-link {
  padding: var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-xxsmall);
  background-color: var(--color--transparent);
  color: var(--color--black);
  font-size: var(--_typography---paragraph-small--font-size);
  line-height: var(--_typography---paragraph-small--line-height);
  border-radius: 100px;
  text-decoration: none;
  transition: all .5s;
}
.nav-link[aria-current="page"], .nav-link.is-active {
  margin-right: var(--_spacing---margin-padding--spacing-xxsmall);
  padding-right: var(--_spacing---margin-padding--spacing-medium);
  padding-left: var(--_spacing---margin-padding--spacing-medium);
  background-color: var(--color--black);
  color: var(--color--white);
}
.nav-link.white {
  color: var(--color--white);
}
.nav-link._1 {
  padding-left: var(--_spacing---margin-padding--spacing-small);
}
.nav-link._2[aria-current="page"], .nav-link._2.is-active {
  margin-right: var(--_spacing---margin-padding--spacing-xxsmall);
  margin-left: var(--_spacing---margin-padding--spacing-xxsmall);
}
.nav-link._4 {
  padding-right: var(--_spacing---margin-padding--spacing-small);
}
.nav-link._4[aria-current="page"], .nav-link._4.is-active {
  margin-right: var(--_spacing---margin-padding--spacing-zero);
  margin-left: var(--_spacing---margin-padding--spacing-xxsmall);
}
.nav-link._3[aria-current="page"], .nav-link._3.is-active {
  margin-left: var(--_spacing---margin-padding--spacing-xxsmall);
}
.nav-link._1 {
  padding-right: var(--_spacing---margin-padding--spacing-small);
}
.nav-link._1[aria-current="page"], .nav-link._1.is-active {
  margin-right: var(--_spacing---margin-padding--spacing-zero);
  margin-left: var(--_spacing---margin-padding--spacing-xxsmall);
}
.nav-link._1.white[aria-current="page"], .nav-link._1.white.is-active {
  margin-right: var(--_spacing---margin-padding--spacing-xxsmall);
  margin-left: var(--_spacing---margin-padding--spacing-zero);
}
.nav-link._1 {
  margin-left: var(--_spacing---margin-padding--spacing-zero);
  padding-right: var(--_spacing---margin-padding--spacing-xxsmall);
  padding-left: var(--_spacing---margin-padding--spacing-small);
}
.nav-link._1[aria-current="page"], .nav-link._1.is-active {
  margin-left: var(--_spacing---margin-padding--spacing-zero);
}
.nav-menu-content {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.nav-menu-content.display-none {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  transition: all .4s;
  display: flex;
}
.navbar {
  padding-top: var(--_spacing---margin-padding--spacing-medium);
  padding-bottom: var(--_spacing---margin-padding--spacing-medium);
  background-color: #0000;
  transition: background-color .3s;
  position: absolute;
  inset: 0% 0% auto;
}
.your-cart, .remove-button {
  color: #fff;
}
.nav-all-menu-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  width: 100%;
  display: flex;
}
.nav-dropdown-left-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.checkout-button {
  border-radius: var(--_spacing---radius--radius-tiny);
  background-color: var(--color--white);
  color: var(--color--black);
}
.nav-menu-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-slim);
  grid-row-gap: var(--_spacing---margin-padding--spacing-slim);
  flex-flow: column;
  display: flex;
}
.dropdown-main {
  padding: var(--_spacing---margin-padding--spacing-medium-rare);
  border-radius: var(--_spacing---radius--radius-regular);
  background-color: var(--color--fill-color);
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}
.auto-container {
  max-width: 1390px;
  padding-right: var(--_spacing---margin-padding--spacing-small);
  padding-left: var(--_spacing---margin-padding--spacing-small);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.primary-button-wrapper-two {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.primary-button-wrapper-two.mobile {
  display: none;
}
.remove {
  font-size: 20px;
  font-weight: 550;
}
.primary-button-text {
  color: var(--color--white);
  font-size: var(--_typography---paragraph-small--font-size);
  letter-spacing: var(--_typography---paragraph-small--letter-spacing);
}
.primary-button-text.black {
  color: var(--color--black);
}
.primary-button-hover-text {
  z-index: -1;
  color: var(--color--white);
  font-size: var(--_typography---paragraph-small--font-size);
  letter-spacing: var(--_typography---paragraph-small--letter-spacing);
  position: absolute;
}
.primary-button {
  z-index: 1;
  padding: var(--_spacing---margin-padding--spacing-xxsmall) var(--_spacing---margin-padding--spacing-regular);
  background-color: var(--color--black);
  border-radius: 100px;
  text-decoration: none;
  position: relative;
}
.primary-button.full-with {
  border: 1px solid var(--color--gray);
  width: 100%;
}
.nav-button-wrap.desktop {
  display: block;
}
.license-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xxjumbo);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xxjumbo);
  flex-flow: column;
  max-width: 846px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.license-image-wraps {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.license-image-box {
  border-radius: var(--_spacing---radius--radius-small);
  overflow: hidden;
}
.license-card-title {
  color: var(--color--black);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--_typography---heading-h5--font-weight);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.license-content-box {
  max-width: 503px;
  margin-bottom: var(--_spacing---margin-padding--spacing-regular);
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  flex-flow: column;
  display: flex;
}
.license-icon-card {
  padding: var(--_spacing---margin-padding--spacing-xlarge);
  background-color: var(--color--cloud-white);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.license-icon {
  max-width: 140px;
  max-height: 140px;
}
.style-guide-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xxjumbo);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xxjumbo);
  flex-flow: column;
  max-width: 846px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.style-guide-card-title {
  margin-bottom: var(--_spacing---margin-padding--spacing-regular);
  color: var(--color--black);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.typography-wrap {
  padding: var(--_spacing---margin-padding--spacing-xlarge);
  grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
  grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
  border-radius: var(--_spacing---radius--radius-regular);
  background-color: var(--color--cloud-white);
  flex-flow: column;
  display: flex;
  overflow: hidden;
}
.typography-single-card {
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  flex-flow: column;
  display: flex;
}
.small-text {
  font-size: var(--_typography---paragraph-small--font-size);
  line-height: var(--_typography---paragraph-small--line-height);
  letter-spacing: var(--_typography---paragraph-small--letter-spacing);
}
.small-text.black {
  color: var(--color--black);
}
.small-text.white {
  color: var(--color--white);
}
.color-card-wrap {
  border-radius: var(--_spacing---radius--radius-small);
  position: relative;
  overflow: hidden;
}
.color-card-wrap.black {
  background-color: var(--color--black);
}
.color-card-wrap.border {
  border: 1px solid var(--color--stroke-color);
}
.color-card {
  min-height: 305px;
}
.color-card.gray {
  background-color: var(--color--gray);
}
.color-card.white {
  background-color: var(--color--white);
}
.color-card.text-gray {
  background-color: var(--color--text-gray);
}
.color-card.black {
  background-color: #151515;
}
.color-card.fill-color {
  background-color: var(--color--fill-color);
}
.color-card.black-gray {
  background-color: var(--color--black-gray);
}
.color-card.stroke-color {
  background-color: var(--color--stroke-color);
}
.color-grid-box-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.color-code-box {
  padding: 4px var(--_spacing---margin-padding--spacing-tiny);
  border-radius: var(--_spacing---radius--radius-tiny);
  background-color: var(--color--white);
  color: var(--color--black);
  position: absolute;
  bottom: 18px;
  left: 18px;
}
.style-guide-button-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.inner-hero-description-box.contact {
  max-width: 532px;
}
.contact-form {
  max-width: 886px;
  margin-right: auto;
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  margin-left: auto;
}
.success-message {
  padding: var(--_spacing---margin-padding--spacing-medium);
  border-radius: var(--_spacing---radius--radius-tiny);
  background-color: var(--color--black);
  color: var(--color--white);
}
.error-message {
  border-radius: var(--_spacing---radius--radius-tiny);
  color: var(--color--white);
  text-align: center;
  background-color: red;
}
.single-field-box {
  width: 100%;
  max-width: 100%;
}
.field {
  min-height: 56px;
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  padding: var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-medium);
  border: 1px solid var(--color--fill-color);
  border-radius: var(--_spacing---radius--radius-medium);
  background-color: var(--color--fill-color);
  color: var(--color--black);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  transition: all .55s;
}
.field:focus {
  border-color: var(--color--black);
}
.field::placeholder {
  color: var(--color--text-gray);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
}
.single-field-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.text-areea {
  min-height: 168px;
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  padding: var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-medium);
  border: 1px solid var(--color--fill-color);
  border-radius: var(--_spacing---radius--radius-medium);
  background-color: var(--color--fill-color);
  color: var(--color--black);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  transition: all .55s;
}
.text-areea:focus {
  border-color: var(--color--black);
}
.text-areea::placeholder {
  color: var(--color--text-gray);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
}
.contact-from-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
  grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
  flex-flow: column;
  display: flex;
}
.contact-submit-button {
  padding-top: var(--_spacing---margin-padding--spacing-xxsmall);
  padding-bottom: var(--_spacing---margin-padding--spacing-xxsmall);
  border-radius: var(--_spacing---radius--radius-jumbo);
  background-color: var(--color--black);
  transition: all .55s;
}
.contact-submit-button:hover {
  background-color: var(--color--gray);
}
.contact-grid {
  max-width: 1064px;
  margin-top: var(--_spacing---margin-padding--spacing-xxxbig);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  margin-left: auto;
  margin-right: auto;
}
.contact-single-card {
  padding: var(--_spacing---margin-padding--spacing-medium);
  border-radius: var(--_spacing---radius--radius-xxlarge);
  background-color: var(--color--fill-color);
  overflow: hidden;
}
.contact-single-title-box {
  margin-bottom: var(--_spacing---margin-padding--spacing-xxbig);
  grid-column-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.contact-single-icon-box {
  justify-content: center;
  align-items: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  display: flex;
}
.contact-single-title {
  color: var(--color--black);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--_typography---heading-h5--font-weight);
}
.blog-single-card {
  overflow: hidden;
}
.blog-image-box {
  width: 100%;
  height: 100%;
  margin-bottom: var(--_spacing---margin-padding--spacing-slim);
  border-radius: var(--_spacing---radius--radius-large);
  overflow: hidden;
}
.blog-image {
  transition: all 1s;
}
.blog-image:hover {
  transform: scale(1.05);
}
.blog-card-content-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-slim);
  grid-row-gap: var(--_spacing---margin-padding--spacing-slim);
  flex-flow: column;
  display: flex;
}
.blog-card-about-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-card-author-box {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-card-dot {
  border-radius: var(--_spacing---radius--circle-round);
  background-color: var(--color--stroke-color);
  width: 6px;
  min-width: 6px;
  height: 6px;
  min-height: 6px;
}
.blog-card-name {
  color: var(--color--black);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--_typography---heading-h5--font-weight);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.blog-card-tabs {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.blog-tabs-content {
  width: 100%;
}
.blog-tabs-menu {
  margin-bottom: var(--_spacing---margin-padding--spacing-xlarge);
  grid-column-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  justify-content: center;
  align-items: center;
  display: flex;
}
.blog-tab-link {
  padding: 8px var(--_spacing---margin-padding--spacing-slim);
  border: 1px solid var(--color--stroke-color);
  background-color: var(--color--white);
  color: var(--color--text-gray);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--line-height--line-height-xl);
  font-weight: var(--font-weight--regular);
  letter-spacing: var(--_typography---paragraph--letter-spacing);
  border-radius: 70px;
  transition: all .5s;
}
.blog-tab-link[aria-current="page"], .blog-tab-link.is-active {
  background-color: var(--color--black);
  color: var(--color--white);
}
.blog-collection-list {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.feature-blog-wrap {
  padding: var(--_spacing---margin-padding--spacing-regular) var(--_spacing---margin-padding--spacing-regular) var(--_spacing---margin-padding--spacing-medium-rare);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  border-radius: var(--_spacing---radius--radius-large);
  background-color: var(--color--fill-color);
  flex-flow: row;
  justify-content: space-between;
  display: flex;
  overflow: hidden;
}
.blog-feature-left-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-slim);
  grid-row-gap: var(--_spacing---margin-padding--spacing-slim);
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 517px;
  display: flex;
}
.blog-feature-right-box {
  width: 100%;
  max-width: 404px;
}
.blog-feature-name {
  color: var(--color--black);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  font-weight: var(--_typography---heading-h3--font-weight);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
.blog-card-description {
  margin-top: var(--_spacing---margin-padding--spacing-slim);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
}
.blog-feature-about-box {
  margin-bottom: var(--_spacing---margin-padding--spacing-tiny);
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-feature-collection-list-wrapper {
  margin-top: var(--_spacing---margin-padding--spacing-xxxbig);
}
.blog-single-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  text-align: left;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 784px;
  display: flex;
}
.image-wrap {
  position: relative;
  overflow: hidden;
}
.image-wrap.full-with[aria-current="page"], .image-wrap.full-with.is-active, .image-wrap.radius, .view-image.radius-tweenty {
  border-radius: var(--_spacing---radius--radius-large);
}
.view-image-overlay {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 100% 0% 0%;
}
.view-image-overlay.black {
  background-color: var(--color--black);
}
.blog-single-image-box {
  border-radius: var(--_spacing---radius--radius-xxlarge);
  overflow: hidden;
}
.blog-details-wrap {
  margin-top: var(--_spacing---margin-padding--spacing-xbig);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.blog-details-left-box {
  top: var(--_spacing---margin-padding--spacing-xbig);
  grid-column-gap: var(--_spacing---margin-padding--spacing-slim);
  grid-row-gap: var(--_spacing---margin-padding--spacing-slim);
  flex-flow: column;
  width: 100%;
  max-width: 433px;
  display: flex;
  position: sticky;
}
.blog-details-right-box {
  width: 100%;
  max-width: 807px;
}
.introduction-title {
  margin-bottom: var(--_spacing---margin-padding--spacing-slim);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
.blog-post-v1 {
  margin-top: var(--_spacing---margin-padding--spacing-tiny);
}
.blog-post-v1 h3:where(:not([class*="heading-scale-"])), .blog-post-v1 :where(.heading-scale-3) {
  margin-top: var(--_spacing---margin-padding--spacing-xlarge);
  margin-bottom: var(--_spacing---margin-padding--spacing-slim);
}
.blog-post-v1 ul {
  margin-top: var(--_spacing---margin-padding--spacing-slim);
  grid-column-gap: var(--_spacing---margin-padding--spacing-slim);
  grid-row-gap: var(--_spacing---margin-padding--spacing-slim);
  flex-flow: column;
  display: flex;
}
.blog-post-v1 p {
  color: var(--color--text-gray);
}
.blog-common-image-box {
  margin-top: var(--_spacing---margin-padding--spacing-xbig);
  border-radius: var(--_spacing---radius--radius-xlarge);
  overflow: hidden;
}
.blog-details-left-single-card {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-flow: column;
  display: flex;
}
.blog-details-left-divider {
  background-color: var(--color--stroke-color);
  width: 100%;
  height: .5px;
}
.social-inner-card {
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.blog-social-box-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-social-icon-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  display: flex;
}
.explore-title {
  margin-bottom: var(--_spacing---margin-padding--spacing-xbig);
}
.social-inner-card-fb {
  justify-content: center;
  align-items: center;
  width: 8px;
  height: 16px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.project-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xbig);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xbig);
  flex-flow: column;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.project-single-card {
  overflow: hidden;
}
.project-single-card._01 {
  width: 100%;
  max-width: 738px;
}
.project-single-card._02 {
  width: 100%;
  max-width: 522px;
}
.project-card-image-box {
  border-radius: var(--_spacing---radius--radius-xxlarge);
  overflow: hidden;
}
.project-card-image {
  transition: all 1s;
}
.project-card-image:hover {
  transform: scale(1.05);
}
.project-card-content-box {
  margin-top: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}
.project-card-name {
  color: var(--color--black);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h3--line-height);
}
.project-single-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
  grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
  text-align: left;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 885px;
  display: flex;
}
.project-about-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}
.project-single-about-box {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-flow: column;
  display: flex;
}
.project-single-image-box {
  border-radius: var(--_spacing---radius--radius-xxlarge);
  overflow: hidden;
}
.project-single-image-box._02 {
  border-radius: var(--_spacing---radius--radius-large);
}
.project-overview-wrap {
  margin-top: var(--_spacing---margin-padding--spacing-xbig);
}
.project-overview {
  margin-bottom: var(--_spacing---margin-padding--spacing-xxsmall);
  color: var(--color--black);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--_typography---heading-h5--font-weight);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.divider {
  background-color: var(--color--stroke-color);
  width: 100%;
  height: 1px;
}
.project-overview-right-box {
  max-width: 738px;
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  margin-right: var(--_spacing---margin-padding--spacing-zero);
  margin-left: auto;
}
.project-overview-post {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
}
.project-overview-post ul {
  padding-left: var(--_spacing---margin-padding--spacing-zero);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  margin-top: 2px;
  list-style-type: none;
  display: flex;
}
.project-overview-post h5:where(:not([class*="heading-scale-"])), .project-overview-post :where(.heading-scale-5) {
  margin-bottom: var(--_spacing---margin-padding--spacing-xxsmall);
}
.project-overview-post li {
  border-bottom: 1px solid var(--color--stroke-color);
  padding-bottom: 8px;
}
.project-gallery-grid {
  margin-top: var(--_spacing---margin-padding--spacing-xbig);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
}
.scope-of-work-wrap {
  margin-top: var(--_spacing---margin-padding--spacing-xbig);
  margin-bottom: var(--_spacing---margin-padding--spacing-xbig);
}
.scope-of-work-flex-box {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  grid-column-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  flex-flow: wrap;
  justify-content: space-between;
  display: flex;
}
.scope-of-work-title {
  max-width: 456px;
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.scope-of-work-description {
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  letter-spacing: var(--_typography---paragraph-large--letter-spacing);
}
.scope-of-work-description.text-gray {
  max-width: 738px;
  color: var(--color--text-gray);
}
.project-card-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  display: flex;
}
.project-card-wrap.grid {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.collection-list-wrapper {
  margin-top: 228px;
}
.project-hero-title {
  max-width: 660px;
}
.service-wrap {
  max-width: 1114px;
  margin-left: auto;
  margin-right: auto;
}
.service-single-card {
  padding: var(--_spacing---margin-padding--spacing-regular);
  grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
  grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
  border-radius: var(--_spacing---radius--radius-large);
  background-color: var(--color--fill-color);
  justify-content: space-between;
  display: flex;
  overflow: hidden;
}
.service-card-left-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
  grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 517px;
  display: flex;
}
.service-card-right-box {
  max-width: 424px;
}
.service-card-left-top-box {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-flow: column;
  display: flex;
}
.srvice-card-name {
  color: var(--color--black);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--line-height--line-height-xl);
  font-weight: var(--font-weight--regular);
}
.service-button {
  z-index: 1;
  background-color: var(--color--white);
  border-radius: 100px;
  padding: 6px 6px 6px 18px;
  text-decoration: none;
  position: relative;
}
.service-arrow-box-wrap {
  border-radius: var(--_spacing---radius--circle-round);
  background-color: var(--color--black);
  justify-content: center;
  align-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  display: flex;
}
.service-button-content {
  grid-column-gap: var(--_spacing---margin-padding--spacing-small);
  grid-row-gap: var(--_spacing---margin-padding--spacing-small);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.service-arrow-icon-box {
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.service-arrow-out {
  opacity: 0;
  position: absolute;
}
.service-card-image-box {
  border-radius: var(--_spacing---radius--radius-small);
  overflow: hidden;
}
.service-card-image {
  transition: all 1s;
}
.service-card-image:hover {
  transform: scale(1.05);
}
.service-collection-list {
  grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
  grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
  flex-flow: column;
  display: flex;
}
.service-collection-item {
  top: var(--_spacing---margin-padding--spacing-xbig);
  position: sticky;
}
.service-single-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
  grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
  text-align: left;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 754px;
  display: flex;
}
.container-full {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.service-single-image-box {
  overflow: hidden;
}
.overview-wrap {
  max-width: 771px;
  margin: var(--_spacing---margin-padding--spacing-xbig) auto;
}
.overview-box {
  margin-bottom: var(--_spacing---margin-padding--spacing-xbig);
}
.overview-title {
  margin-bottom: var(--_spacing---margin-padding--spacing-slim);
  color: var(--color--black);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
.service-post-v1 h3:where(:not([class*="heading-scale-"])), .service-post-v1 :where(.heading-scale-3) {
  margin-bottom: var(--_spacing---margin-padding--spacing-slim);
}
.service-post-v1 p {
  margin-bottom: var(--_spacing---margin-padding--spacing-slim);
  color: var(--color--text-gray);
}
.service-post-v1 ul {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  flex-flow: column;
  display: flex;
}
.service-gallery-grid {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.service-common-image-box {
  border-radius: var(--_spacing---radius--radius-large);
  overflow: hidden;
}
.pricing-tabs-content {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
}
.pricing-tabs {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 1064px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-tabs-menu {
  background-color: var(--color--fill-color);
  border-radius: 60px;
  justify-content: flex-end;
  max-width: 156px;
  min-height: 50px;
  margin-left: auto;
  margin-right: auto;
  padding: 4px;
  display: flex;
}
.pricing-tab-active-background {
  background-color: var(--color--black);
  border-radius: 40px;
  width: 100%;
}
.pricing-tab-active {
  display: flex;
  position: absolute;
  inset: 0%;
}
.pricing-tab-link {
  width: 50%;
  padding: var(--_spacing---margin-padding--spacing-tiny);
  background-color: var(--color--transparent);
  color: var(--color--text-gray);
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}
.pricing-tab-link[aria-current="page"], .pricing-tab-link.is-active {
  background-color: #0000;
  padding: 10px;
}
.pricing-tab-link.first {
  color: var(--color--white);
}
.pricing-tab-text {
  position: relative;
}
.pricing-single-card {
  padding: var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-regular);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  border-radius: var(--_spacing---radius--radius-xxlarge);
  background-color: var(--color--fill-color);
  justify-content: space-between;
  align-items: center;
  display: flex;
  overflow: hidden;
}
.plan-name-box {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-flow: column;
  display: flex;
}
.plan-name {
  color: var(--color--black);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---paragraph--line-height);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.plan-price-box {
  margin-top: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.plan-feature-box {
  margin-top: var(--_spacing---margin-padding--spacing-medium);
}
.feature-list {
  margin-top: var(--_spacing---margin-padding--spacing-slim);
  grid-column-gap: var(--_spacing---margin-padding--spacing-slim);
  grid-row-gap: var(--_spacing---margin-padding--spacing-slim);
  color: var(--color--black);
  flex-flow: column;
  display: flex;
}
.plan-button-box {
  margin-top: var(--_spacing---margin-padding--spacing-big);
}
.pricing-active-card {
  padding: var(--_spacing---margin-padding--spacing-medium-rare);
  border-radius: var(--_spacing---radius--radius-xxlarge);
  background-color: var(--color--white);
}
.feature-flex-box {
  justify-content: space-between;
  display: flex;
}
.plan-details-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: space-between;
  align-items: stretch;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.single-pricing-tabs {
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.pricing-single-tabs-menu {
  max-width: 156px;
  min-height: 50px;
  margin-right: auto;
  margin-left: var(--_spacing---margin-padding--spacing-zero);
  background-color: var(--color--fill-color);
  border-radius: 60px;
  justify-content: flex-end;
  padding: 4px;
  display: flex;
}
.pricing-details-card {
  padding: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  border-radius: var(--_spacing---radius--radius-xlarge);
  background-color: var(--color--fill-color);
  justify-content: space-between;
  align-items: center;
  display: flex;
  overflow: hidden;
}
.plan-button {
  z-index: 1;
  width: 100%;
  padding: var(--_spacing---margin-padding--spacing-xxsmall) var(--_spacing---margin-padding--spacing-regular);
  background-color: var(--color--black);
  border-radius: 100px;
  text-decoration: none;
  position: relative;
}
.pricing-single-left-card {
  width: 100%;
}
.plan-details-right-box {
  max-width: 547px;
}
.our-plan-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-slim);
  grid-row-gap: var(--_spacing---margin-padding--spacing-slim);
  flex-flow: column;
  display: flex;
}
.our-plan {
  color: var(--color--black);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.plan-post h4:where(:not([class*="heading-scale-"])), .plan-post :where(.heading-scale-4) {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  margin-bottom: var(--_spacing---margin-padding--spacing-slim);
}
.plan-details-left-box {
  width: 100%;
  min-width: 379px;
  max-width: 379px;
}
.plan-sticky-box {
  top: var(--_spacing---margin-padding--spacing-xbig);
  position: sticky;
}
.testimonials-title-box {
  max-width: 750px;
}
.testimonials-sub-title {
  margin-bottom: var(--_spacing---margin-padding--spacing-regular);
  padding: 7px var(--_spacing---margin-padding--spacing-tiny);
  font-size: var(--_typography---paragraph-small--font-size);
  line-height: var(--_typography---paragraph-small--line-height);
  letter-spacing: var(--_typography---paragraph-small--letter-spacing);
  display: inline-block;
}
.testimonials-grid {
  margin-top: var(--_spacing---margin-padding--spacing-xbig);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  display: flex;
}
.testimonials-single-card {
  width: 360px;
  min-width: 360px;
  padding: var(--_spacing---margin-padding--spacing-medium) var(--_spacing---margin-padding--spacing-slim) var(--_spacing---margin-padding--spacing-medium) var(--_spacing---margin-padding--spacing-medium-rare);
  border-radius: var(--_spacing---margin-padding--spacing-medium);
  background-color: var(--color--white);
  flex-flow: column;
  flex: none;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.testimonials-image-box {
  width: 60px;
  height: 60px;
  margin-bottom: var(--_spacing---margin-padding--spacing-xlarge);
  justify-content: center;
  align-items: center;
  display: flex;
}
.testimonials-signature-box {
  margin-top: var(--_spacing---margin-padding--spacing-xlarge);
}
.signature {
  max-width: 139px;
  max-height: 40px;
}
.testimonials-main-image-box {
  border-radius: var(--_spacing---radius--radius-large);
  width: 360px;
  min-width: 360px;
  position: relative;
  overflow: hidden;
}
.testimonials-overly-card {
  padding: var(--_spacing---margin-padding--spacing-medium) var(--_spacing---margin-padding--spacing-slim) var(--_spacing---margin-padding--spacing-medium) var(--_spacing---margin-padding--spacing-medium-rare);
  border-radius: var(--_spacing---margin-padding--spacing-medium);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  position: absolute;
  inset: 0%;
}
.testimonials-overly-image-box {
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  display: flex;
}
.signature-two {
  max-width: 180px;
  max-height: 30px;
}
.signature-02 {
  max-width: 195px;
  max-height: 30px;
}
.accordion-icon-wrapper {
  flex: none;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
  position: relative;
}
.accordion {
  width: 100%;
  padding-right: var(--_spacing---margin-padding--spacing-regular);
  padding-bottom: 4px;
  padding-left: var(--_spacing---margin-padding--spacing-regular);
  border-radius: var(--_spacing---radius--radius-small);
  background-color: var(--color--gray);
  flex-flow: column;
  display: flex;
  position: static;
  overflow: hidden;
}
.faq-left-box {
  top: var(--_spacing---margin-padding--spacing-xlarge);
  max-width: 513px;
  position: sticky;
}
.accordion-title {
  margin-top: var(--_spacing---margin-padding--spacing-zero);
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  white-space: normal;
}
.faq-right-box {
  width: 100%;
  max-width: 660px;
  margin-top: var(--_spacing---margin-padding--spacing-xbig);
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  flex-flow: column;
  display: flex;
}
.inner-title.white {
  color: var(--color--white);
}
.faq-wrapper {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.faq-ans {
  color: var(--color--white);
}
.accordion-description-wrap {
  background-color: #0000;
  width: 100%;
  position: static;
}
.accordion-text-wrap {
  max-width: 546px;
  padding-bottom: var(--_spacing---margin-padding--spacing-slim);
}
.accordion-title-wrap {
  margin-right: var(--_spacing---margin-padding--spacing-zero);
  margin-left: var(--_spacing---margin-padding--spacing-zero);
  padding: var(--_spacing---margin-padding--spacing-regular) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---margin-padding--spacing-medium-rare);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  color: var(--color--white);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: static;
}
.inner-title-box.faq {
  max-width: 513px;
}
.faq-sub-title {
  margin-bottom: var(--_spacing---margin-padding--spacing-regular);
  padding: 7px var(--_spacing---margin-padding--spacing-tiny);
  border: 1px solid var(--color--gray);
  color: var(--color--black-gray);
  font-size: var(--_typography---paragraph-small--font-size);
  text-transform: none;
  border-radius: 40px;
  display: inline-block;
}
.products-hero-title {
  max-width: 756px;
}
.products-card-image-box {
  border-radius: var(--_spacing---radius--radius-large);
  overflow: hidden;
}
.products-card-content-box {
  margin-top: var(--_spacing---margin-padding--spacing-medium);
}
.products-card-title {
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
.products-card-title.white {
  color: var(--color--white);
}
.product-card-text {
  margin-top: var(--_spacing---margin-padding--spacing-tiny);
  color: var(--color--stroke-color);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  letter-spacing: var(--_typography---paragraph-large--letter-spacing);
}
.product-card-text.text-gray {
  color: var(--color--text-gray);
}
.products-card-divider {
  width: 100%;
  height: 1px;
  margin-top: var(--_spacing---margin-padding--spacing-medium);
  margin-bottom: var(--_spacing---margin-padding--spacing-medium);
  border-bottom: 1px dashed var(--color--stroke-color);
}
.products-card-divider.gray {
  border-bottom-color: var(--color--gray);
}
.products-card-price-box {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.products-card-price {
  color: var(--color--black);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.products-card-price.white {
  color: var(--color--white);
}
.products-card-button-box {
  margin-top: var(--_spacing---margin-padding--spacing-medium-rare);
}
.products-button {
  z-index: 1;
  width: 100%;
  padding: var(--_spacing---margin-padding--spacing-xxsmall) var(--_spacing---margin-padding--spacing-regular);
  border: 1px solid var(--color--stroke-color);
  background-color: var(--color--white);
  color: var(--color--black);
  border-radius: 100px;
  text-decoration: none;
  position: relative;
}
.products-collection-list {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xlarge);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.product-single-wrap {
  max-width: 1192px;
  margin-left: auto;
  margin-right: auto;
}
.product-single-flex-box {
  margin-top: var(--_spacing---margin-padding--spacing-xlarge);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: space-between;
  display: flex;
}
.product-details-left-box {
  width: 100%;
  max-width: 700px;
  height: 100%;
}
.product-details-right-box {
  width: 100%;
  max-width: 400px;
}
.product-details-abaout {
  color: var(--color--black);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.products-about-box {
  margin-top: var(--_spacing---margin-padding--spacing-slim);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.products-single-price-box {
  margin-top: var(--_spacing---margin-padding--spacing-xlarge);
  margin-bottom: var(--_spacing---margin-padding--spacing-xlarge);
  padding: var(--_spacing---margin-padding--spacing-slim);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  border-radius: var(--_spacing---radius--radius-tiny);
  background-color: var(--color--fill-color);
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.products-address-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.products-address-icon {
  max-width: 24px;
  max-height: 24px;
  margin-bottom: 8px;
}
.products-single-image-box {
  border-radius: var(--_spacing---radius--radius-large);
  overflow: hidden;
}
.display-none {
  display: none;
}
.add-to-card-button {
  background-color: var(--color--black);
  width: 100%;
  min-height: 46px;
  color: var(--color--white);
  border-radius: 100px;
}
.add-to-card-button:hover {
  background-color: var(--color--gray);
}
.add-to-card {
  margin-top: var(--_spacing---margin-padding--spacing-xbig);
}
.product-card-image {
  height: 60px;
  margin-bottom: 6px;
}
.commitment-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  justify-content: space-between;
  display: flex;
}
.commitment-left-box {
  width: 58%;
}
.commitment-right-box {
  width: 32%;
}
.section-sub-title {
  padding: 7px var(--_spacing---margin-padding--spacing-tiny);
  border: 1px solid var(--color--fill-color);
  font-size: var(--_typography---paragraph-small--font-size);
  text-transform: capitalize;
  border-radius: 40px;
  display: inline-block;
}
.section-sub-title.gray {
  border-color: var(--color--gray);
}
.section-sub-title.white {
  border-color: var(--color--white);
}
.commitment-title {
  margin-top: var(--_spacing---margin-padding--spacing-jumbo);
  margin-bottom: var(--_spacing---margin-padding--spacing-big);
}
.team-titlle {
  max-width: 546px;
  margin-top: var(--_spacing---margin-padding--spacing-regular);
}
.team-grid {
  margin-top: var(--_spacing---margin-padding--spacing-xbig);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.team-single-card {
  border-radius: var(--_spacing---radius--radius-large);
  position: relative;
  overflow: hidden;
}
.team-image-box {
  overflow: hidden;
}
.team-image {
  transition: all 1s;
}
.team-image:hover {
  transform: scale(1.05);
}
.team-content-box {
  left: var(--_spacing---margin-padding--spacing-medium);
  top: auto;
  right: var(--_spacing---margin-padding--spacing-medium);
  bottom: var(--_spacing---margin-padding--spacing-medium);
  padding: var(--_spacing---margin-padding--spacing-xsmall) var(--_spacing---margin-padding--spacing-slim);
  border-radius: var(--_spacing---margin-padding--spacing-xxsmall);
  background-color: var(--color--white);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
}
.team-social-icon-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.social-box-team {
  justify-content: center;
  align-items: center;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.story-wrap {
  background-color: var(--color--white);
  justify-content: space-between;
  display: flex;
  position: relative;
}
.story-lerft-box {
  width: 41%;
}
.story-right-box {
  z-index: 99;
  width: 49%;
  position: relative;
}
.story-title {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  margin-bottom: var(--_spacing---margin-padding--spacing-slim);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  font-weight: var(--_typography---heading-h3--font-weight);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
.story-single-card {
  margin-bottom: var(--_spacing---margin-padding--spacing-regular);
}
.story-card-number {
  padding: var(--_spacing---margin-padding--spacing-xxsmall) var(--_spacing---margin-padding--spacing-xsmall);
  border: .6px solid var(--color--stroke-color);
  background-color: var(--color--fill-color);
  border-radius: 8px;
  display: inline-block;
}
.story-card-tiltle {
  margin-top: var(--_spacing---margin-padding--spacing-medium-rare);
  margin-bottom: var(--_spacing---margin-padding--spacing-xxsmall);
  color: var(--color--black);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
}
.story-title-box-wrap {
  top: var(--_spacing---margin-padding--spacing-zero);
  padding-top: var(--_spacing---margin-padding--spacing-xlarge);
  padding-bottom: var(--_spacing---margin-padding--spacing-xbig);
  background-color: var(--color--white);
  position: sticky;
}
.values-wrap {
  margin-top: var(--_spacing---margin-padding--spacing-xbig);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.valus-title {
  max-width: 652px;
  margin-top: var(--_spacing---margin-padding--spacing-regular);
}
.values-single-card {
  width: 100%;
  max-width: 320px;
  height: 380px;
  padding: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-column-gap: var(--_spacing---margin-padding--spacing-xlarge);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xlarge);
  border-radius: var(--_spacing---radius--radius-tiny);
  background-color: var(--color--fill-color);
  flex-flow: column;
  flex: none;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.values-inner-title {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  color: var(--color--black);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
}
.about-hero-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  flex-flow: column;
  justify-content: flex-start;
  max-width: 595px;
  display: flex;
}
.trust-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.trust-single-card {
  background-color: var(--color--white);
  overflow: hidden;
}
.trust-content-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.trust-dot {
  border-radius: var(--_spacing---radius--circle-round);
  background-color: var(--color--black-gray);
  width: 8px;
  min-width: 8px;
  height: 8px;
  min-height: 8px;
}
.trust-image-box {
  border-radius: var(--_spacing---radius--radius-large);
  margin-top: 8px;
  overflow: hidden;
}
.brand-wrap {
  max-width: 1087px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.ticker-wrapper {
  grid-column-gap: 108px;
  grid-row-gap: 108px;
  display: flex;
  overflow: hidden;
}
.ticker-item-wrap {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  flex: none;
  display: flex;
}
.brand-single-card {
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}
.brand-button-box {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.brand-button {
  z-index: 1;
  margin-top: var(--_spacing---margin-padding--spacing-xlarge);
  padding: var(--_spacing---margin-padding--spacing-xxsmall) var(--_spacing---margin-padding--spacing-medium-rare);
  background-color: var(--color--black);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: inline-flex;
  position: relative;
}
.barnd-button-icon-box {
  justify-content: center;
  align-items: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.brand-button-icon-out {
  position: absolute;
}
.number-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: minmax(200px, 433px) minmax(200px, 547px);
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  justify-content: space-between;
  place-items: stretch stretch;
  display: flex;
}
.numbers-left-box {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 433px;
  display: flex;
}
.number-right-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-immense);
  grid-row-gap: var(--_spacing---margin-padding--spacing-immense);
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 547px;
  display: flex;
}
.number-title {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  margin-bottom: var(--_spacing---margin-padding--spacing-xsmall);
  color: var(--color--white);
}
.number-image-box-wrap {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}
.number-image {
  border-radius: var(--_spacing---radius--radius-large);
}
.counter-bottom-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-xbig);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xbig);
  flex-flow: column;
  width: 100%;
  display: flex;
}
.counter-description {
  color: var(--color--black-gray);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
}
.counter-single {
  grid-column-gap: var(--_spacing---margin-padding--spacing-slim);
  grid-row-gap: var(--_spacing---margin-padding--spacing-slim);
  flex-flow: column;
  width: 100%;
  display: flex;
}
.counter-single.center {
  margin-top: var(--_spacing---margin-padding--spacing-big);
  justify-content: center;
  align-items: center;
}
.counter-train {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.whole-counter {
  height: 70px;
  color: var(--color--white);
  justify-content: flex-end;
  display: flex;
  overflow: hidden;
}
.whole-counter.large {
  height: 180px;
}
.counter-marque {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  overflow: hidden;
}
.counter-train-two {
  flex-flow: column-reverse;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.heading-three {
  font-size: var(--_typography---heading-h1--font-size);
  line-height: 70px;
}
.heading-three.large {
  text-transform: capitalize;
  font-size: 180px;
  line-height: 180px;
}
.counter-marque-two {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.laboratory-counter-wrapper {
  justify-content: flex-end;
  display: flex;
}
.laboratory-counter-wrapper.two {
  justify-content: flex-start;
}
.coma {
  justify-content: center;
  align-items: center;
  font-size: 180px;
  display: flex;
}
.counter-divider {
  background-color: var(--color--text-gray);
  width: 100%;
  height: .5px;
}
.dot {
  font-size: var(--_typography---heading-h1--font-size);
  justify-content: center;
  align-items: center;
  display: flex;
}
.counter-flex-box {
  margin-top: var(--_spacing---margin-padding--spacing-slim);
  justify-content: space-between;
  display: flex;
}
.number-image-box {
  margin-bottom: var(--_spacing---margin-padding--spacing-xsmall);
}
.testimonial-vh {
  height: 300vh;
  overflow: clip;
}
.testimonial-sticky {
  top: var(--_spacing---margin-padding--spacing-xxbig);
  padding-bottom: var(--_spacing---margin-padding--spacing-xbig);
  position: sticky;
}
.rt-service-v2-image-wrapper {
  border-radius: var(--_spacing---radius--radius-large);
  background-color: var(--color--fill-color);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}
.rt-service-v2-image {
  border-radius: var(--_spacing---radius--radius-large);
  transition: all 1s;
}
.rt-service-v2-image:hover {
  transform: scale(1.06);
}
.choose-right-box {
  padding: var(--_spacing---margin-padding--spacing-xxxlarge);
  border-radius: var(--_spacing---radius--radius-xxlarge);
  background-color: var(--color--fill-color);
}
.choose-title {
  max-width: 773px;
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
.pricing-title-box {
  max-width: 591px;
  margin-right: auto;
  margin-bottom: var(--_spacing---margin-padding--spacing-xbig);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  display: flex;
}
.pricing-title {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
}
.hero-products-collection-list {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-xlarge);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.product-title-box {
  max-width: 798px;
  margin-bottom: var(--_spacing---margin-padding--spacing-xxbig);
}
.product-title {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  color: var(--color--white);
}
.materials-single-card-one {
  justify-content: space-between;
  align-items: center;
  max-width: 1095px;
  display: flex;
}
.materials-single-card-one-left-box {
  max-width: 389px;
  margin-left: var(--_spacing---margin-padding--spacing-regular);
}
.materials-single-card-one-right-box {
  padding-right: var(--_spacing---margin-padding--spacing-medium-rare);
  border-right: 1px dashed var(--color--gray);
}
.materials-single-card-one-wrap {
  margin-top: var(--_spacing---margin-padding--spacing-xbig);
  border-top: 1px solid var(--color--gray);
  border-bottom: 1px solid var(--color--gray);
}
.materials-counter-content-box {
  margin-top: var(--_spacing---margin-padding--spacing-big);
}
.counter-single-box {
  margin-bottom: var(--_spacing---margin-padding--spacing-tiny);
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.materials-image-box {
  border-radius: var(--_spacing---radius--radius-large);
  max-width: 332px;
  margin-top: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}
.materials-single-card-two-wrap {
  padding-left: var(--_spacing---margin-padding--spacing-regular);
  border-bottom: 1px solid var(--color--gray);
}
.materials-single-card-two {
  grid-column-gap: var(--_spacing---margin-padding--spacing-zero);
  grid-row-gap: var(--_spacing---margin-padding--spacing-zero);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}
.materials-single-card-left-box {
  max-width: 452px;
}
.materials-card-title {
  margin-top: var(--_spacing---margin-padding--spacing-big);
  margin-bottom: var(--_spacing---margin-padding--spacing-tiny);
  color: var(--color--white);
}
.materials-single-card-left-box-wrap {
  padding-top: var(--_spacing---margin-padding--spacing-regular);
  padding-bottom: var(--_spacing---margin-padding--spacing-medium);
  border-right: 1px dashed var(--color--gray);
}
.materials-single-card-right-box {
  max-width: 452px;
  margin-left: var(--_spacing---margin-padding--spacing-xxxbig);
}
.materials-single-card-three-wrap {
  border-bottom: 1px solid var(--color--gray);
}
.materials-bottom-box {
  max-width: 690px;
  padding-top: var(--_spacing---margin-padding--spacing-regular);
  padding-bottom: var(--_spacing---margin-padding--spacing-medium);
  border-right: 1px dashed var(--color--gray);
  border-left: 1px dashed var(--color--gray);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.materials-flex {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 420px;
  display: flex;
}
.hero-project-single-card {
  border-radius: var(--_spacing---radius--radius-xxlarge);
  height: 100%;
  position: relative;
  overflow: hidden;
}
.hero-project-imge-box {
  height: 100%;
  overflow: hidden;
}
.hero-project-imge {
  transition: all 1s;
}
.hero-project-imge:hover {
  transform: scale(1.05);
}
.hero-project-overly-box {
  padding: var(--_spacing---margin-padding--spacing-regular) var(--_spacing---margin-padding--spacing-medium) var(--_spacing---margin-padding--spacing-medium);
  background-image: linear-gradient(360deg, #000c, #0000);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}
.hero-project-top-box {
  max-width: 527px;
}
.hero-project-card-title {
  margin-bottom: var(--_spacing---margin-padding--spacing-tiny);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.hero-project-card-bottom-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-small);
  grid-row-gap: var(--_spacing---margin-padding--spacing-small);
  flex-flow: column;
  display: flex;
}
.hero-project-single-address-box {
  justify-content: space-between;
  display: flex;
}
.hero-project-title-box {
  max-width: 591px;
  margin-right: auto;
  margin-bottom: var(--_spacing---margin-padding--spacing-big);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  display: flex;
}
.hero-project-button-box {
  margin-top: var(--_spacing---margin-padding--spacing-big);
  justify-content: center;
  align-items: center;
  display: flex;
}
.hero-wrap {
  max-width: 595px;
}
.hero-title {
  color: var(--color--white);
}
.hero-text {
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  letter-spacing: var(--_typography---paragraph-large--letter-spacing);
}
.hero-text.white {
  margin-top: var(--_spacing---margin-padding--spacing-xsmall);
  margin-bottom: var(--_spacing---margin-padding--spacing-large);
  color: var(--color--white);
}
.hero-about-wrap {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.hero-about-title-box {
  margin-top: var(--_spacing---margin-padding--spacing-regular);
}
.hero-about-title {
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.hero-about-image-grid {
  max-width: 590px;
  margin: var(--_spacing---margin-padding--spacing-large) auto var(--_spacing---margin-padding--spacing-xlarge);
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.hero-about-image-box {
  border-radius: var(--_spacing---radius--radius-large);
  overflow: hidden;
}
.hero-counter-wrap {
  border-radius: var(--_spacing---radius--radius-large);
  background-color: var(--color--black);
  background-image: url('../images/12dae79b-726b-4919-a022-c38eb64b4a61.webp');
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  justify-content: flex-end;
  height: 695px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.hero-counter-box-wrap {
  z-index: 10;
  margin-right: var(--_spacing---margin-padding--spacing-xlarge);
  margin-bottom: var(--_spacing---margin-padding--spacing-large);
  margin-left: var(--_spacing---margin-padding--spacing-xlarge);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.hero-counter-description-box {
  max-width: 567px;
  margin-bottom: var(--_spacing---margin-padding--spacing-large);
}
.hero-counter-botton-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}
.hero-counter-card {
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.hero-service-title-box {
  margin-bottom: var(--_spacing---margin-padding--spacing-jumbo);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.hero-service-title {
  max-width: 689px;
  margin-top: var(--_spacing---margin-padding--spacing-regular);
}
.service-inner-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-normal);
  grid-row-gap: var(--_spacing---margin-padding--spacing-normal);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.hero-service-single-card {
  border-radius: var(--_spacing---radius--radius-large);
  background-color: var(--color--fill-color);
  max-width: 700px;
}
.hero-service-single-card.one {
  position: sticky;
  top: 6vh;
}
.hero-service-single-card.two {
  border-radius: var(--_spacing---radius--radius-xxlarge);
  position: sticky;
  top: 10vh;
}
.hero-service-single-card.three {
  border-radius: var(--_spacing---radius--radius-xxlarge);
  position: sticky;
  top: 14vh;
}
.hero-service-image-box-wrap {
  border-radius: var(--_spacing---radius--radius-xxlarge);
  background-color: var(--color--black);
  position: relative;
  overflow: hidden;
}
.hero-service-image-box {
  background-color: var(--color--black);
  border-radius: 30px;
}
.hero-servoce-overly-wrap {
  padding: var(--_spacing---margin-padding--spacing-regular) var(--_spacing---margin-padding--spacing-xlarge);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
  position: absolute;
  inset: 0%;
}
.hero-service-name, .hero-service-card-name {
  color: var(--color--white);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
}
.hero-service-content-box {
  max-width: 388px;
  margin-top: var(--_spacing---margin-padding--spacing-regular);
  grid-column-gap: 22px;
  grid-row-gap: 22px;
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.hero-servoce-content {
  color: var(--color--black);
}
.news-bottom-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  display: flex;
}
.news-card-50 {
  border-radius: var(--_spacing---radius--radius-large);
  width: 55%;
  overflow: hidden;
}
.news-card-25 {
  border-radius: var(--_spacing---radius--radius-large);
  width: 23%;
  overflow: hidden;
}
.compare-image-box-wrap {
  height: 100%;
  position: relative;
}
.compare-image-box {
  height: 100%;
}
.compare-image-box._1, .compare-image-box._2, .compare-image-box._3 {
  position: relative;
}
.compare-after-image-box {
  background-image: linear-gradient(#0006, #0006);
  height: 100%;
  position: absolute;
  inset: 0%;
}
.compare-after-image-box._1 {
  opacity: 0;
}
.before-after-box {
  left: var(--_spacing---margin-padding--spacing-xlarge);
  top: var(--_spacing---margin-padding--spacing-xlarge);
  right: var(--_spacing---margin-padding--spacing-xlarge);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: auto;
}
.compare-text {
  padding: var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-xlarge);
  background-color: var(--color--white);
  font-size: var(--_typography---paragraph-small--font-size);
  font-weight: var(--font-weight--bold);
  border-radius: 50px;
  display: inline-block;
}
.process-single-card {
  width: 100%;
  padding: var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-regular) var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-tiny);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  background-color: var(--color--whitesmoke);
  display: inline-flex;
}
.process-single-card._1 {
  position: absolute;
  inset: 0%;
}
.process-single-card._2, .process-single-card._03 {
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.process-inner-image-box {
  border-radius: var(--_spacing---margin-padding--spacing-medium);
  width: 100%;
  max-width: 297px;
  overflow: hidden;
}
.process-inner-content-box {
  max-width: 302px;
  padding-top: var(--_spacing---margin-padding--spacing-medium);
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.process-card-number {
  color: var(--color--black);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
}
.process-card-title {
  margin-bottom: var(--_spacing---margin-padding--spacing-tiny);
  color: var(--color--black);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.process-bottom-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  display: flex;
}
.process-card-50 {
  width: 52%;
}
.process-card-25 {
  width: 23.7%;
}
.process-inner-main-box {
  border-radius: var(--_spacing---radius--radius-xxlarge);
  height: 318px;
  position: relative;
  overflow: hidden;
}
.process-main-image-box {
  height: 318px;
}
.process-title-box {
  max-width: 867px;
  margin-bottom: var(--_spacing---margin-padding--spacing-titan);
}
.testimonial-background {
  height: 100%;
}
.play {
  z-index: 99;
}
.lock-utility-page-wrap {
  padding-top: var(--_spacing---margin-padding--spacing-titan);
  padding-bottom: var(--_spacing---margin-padding--spacing-massive);
  justify-content: center;
  align-items: center;
}
.lock-utility-page-content {
  width: 100%;
  max-width: 662px;
  margin-right: auto;
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  padding-right: var(--_spacing---margin-padding--spacing-small);
  padding-left: var(--_spacing---margin-padding--spacing-small);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  display: flex;
}
.lock-utility-page-form {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  display: flex;
}
.lock-description {
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  color: var(--color--text-gray);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--font-weight--regular);
}
.lock-title-box {
  max-width: 440px;
  margin-right: auto;
  margin-bottom: var(--_spacing---margin-padding--spacing-immense);
  margin-left: auto;
}
.lock-title {
  margin-bottom: var(--_spacing---margin-padding--spacing-normal);
}
.lock-from-box {
  flex-flow: column;
  width: 100%;
  display: flex;
}
.password-text {
  margin-bottom: var(--_spacing---margin-padding--spacing-regular);
  color: var(--color--black);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  text-align: left;
}
.field-lock {
  min-height: 56px;
  margin-bottom: var(--_spacing---margin-padding--spacing-slim);
  padding: var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-tiny) var(--_spacing---margin-padding--spacing-medium);
  border: 1px solid var(--color--fill-color);
  border-radius: var(--_spacing---radius--radius-medium);
  background-color: var(--color--fill-color);
  color: var(--color--black);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  transition: all .55s;
}
.field-lock:focus {
  border-color: var(--color--black);
}
.field-lock::placeholder {
  color: var(--color--text-gray);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
}
.lock-submit-button {
  padding-top: var(--_spacing---margin-padding--spacing-xxsmall);
  padding-bottom: var(--_spacing---margin-padding--spacing-xxsmall);
  border-radius: var(--_spacing---radius--radius-small);
  background-color: var(--color--black);
  transition: all .55s;
}
.lock-submit-button:hover {
  background-color: var(--color--gray);
}
.error-utility-page-wrap {
  padding-top: var(--_spacing---margin-padding--spacing-xtitan);
  padding-bottom: var(--_spacing---margin-padding--spacing-xxtitan);
  justify-content: center;
  align-items: center;
}
.error-page-content {
  max-width: 472px;
  padding-right: var(--_spacing---margin-padding--spacing-small);
  padding-left: var(--_spacing---margin-padding--spacing-small);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.error {
  max-width: 393px;
  margin-bottom: var(--_spacing---margin-padding--spacing-xbig);
}
.error-secondary-text {
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  text-align: left;
  letter-spacing: var(--_typography---paragraph-large--letter-spacing);
}
.error-secondary-text.text-gray {
  margin-bottom: var(--_spacing---margin-padding--spacing-xlarge);
  color: var(--color--text-gray);
}
.checkout-form {
  margin-top: var(--_spacing---margin-padding--spacing-giant);
  background-color: var(--color--transparent);
}
.checkout-submit-button {
  border-radius: var(--_spacing---radius--radius-tiny);
  background-color: var(--color--black);
  color: var(--color--white);
  transition: all .55s;
}
.checkout-submit-button:hover {
  background-color: var(--color--gray);
}
.checkbox-label {
  margin-bottom: var(--_spacing---margin-padding--spacing-zero);
}
.checkbox {
  margin-top: var(--_spacing---margin-padding--spacing-zero);
}
.bold-text {
  color: var(--color--black);
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--bold);
}
.bold-text.white {
  color: var(--color--white);
  margin-bottom: 5px;
}
.procuct-single-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
  grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
  text-align: left;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.sticky {
  top: var(--_spacing---margin-padding--spacing-xlarge);
  position: sticky;
}
.story-card-box {
  height: auto;
}
.faq-qus {
  width: 100%;
  max-width: 433px;
  color: var(--color--text-gray);
}
.solutions-tabs-wrap {
  grid-template-rows: auto;
  grid-template-columns: 407px 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.solutions-tabs-menu {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  flex-flow: column;
  width: 100%;
  max-width: 433px;
  margin-right: 32px;
  display: flex;
}
.single-solution-tabs-link {
  padding: var(--_spacing---margin-padding--spacing-zero) var(--_spacing---margin-padding--spacing-zero) var(--_spacing---margin-padding--spacing-tiny);
  color: var(--color--text-gray);
  background-color: #0000;
  border-bottom: 1px solid #1d3d3e66;
}
.single-solution-tabs-link[aria-current="page"], .single-solution-tabs-link.is-active {
  padding-bottom: var(--_spacing---margin-padding--spacing-medium);
  background-color: var(--color--transparent);
  color: var(--color--black);
}
.solution-accordion-header {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
}
.solution-accordion-question {
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.solution-accordion-header-flex {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.solution-tab-contant {
  width: 100%;
  max-width: 848px;
}
.solution-accordion-wrap {
  grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
  grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  flex-flow: column;
  display: flex;
}
.solution-accordion-wrap.top {
  padding-top: var(--_spacing---margin-padding--spacing-medium);
  border-top: .5px solid var(--color--stroke-color);
}
.solution-accordion-ans-wrap {
  overflow: hidden;
}
.chooser-relative-box {
  margin-top: var(--_spacing---margin-padding--spacing-xxxbig);
  position: relative;
}
.choose-button-box-wrapper {
  position: absolute;
  inset: auto auto 0% 0%;
}
.project-card-box {
  grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: flex;
}
.background {
  z-index: 1;
  background-image: linear-gradient(0deg, #191919, #19191900);
  height: 358px;
  position: absolute;
  inset: auto 0% 0%;
}
.image-overlay {
  background-color: #0000;
  background-image: linear-gradient(0deg, #191919cc, #19191900);
  position: absolute;
  inset: 0%;
}@media screen and (max-width: 991px) {

  body {
    --_typography---paragraph--font-size: 16px;
    --_typography---paragraph--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph--font-weight: var(--font-weight--regular);
    --_typography---paragraph--letter-spacing: -.4px;
    --_typography---heading-h1--font-size: 56px;
    --_typography---heading-h1--line-height: var(--line-height--line-height-s);
    --_typography---heading-h1--font-weight: var(--font-weight--regular);
    --_typography---heading-h1--letter-spacing: -1.1px;
    --_typography---heading-h2--font-size: 48px;
    --_typography---heading-h2--line-height: var(--line-height--line-height-s);
    --_typography---heading-h2--font-weight: var(--font-weight--regular);
    --_typography---heading-h2--letter-spacing: -1px;
    --_typography---heading-h3--font-size: 32px;
    --_typography---heading-h3--line-height: var(--line-height--line-height-l);
    --_typography---heading-h3--font-weight: var(--font-weight--regular);
    --_typography---heading-h3--letter-spacing: -.64px;
    --_typography---heading-h6--letter-spacing: -.32px;
    --_typography---heading-h4--font-size: 24px;
    --_typography---heading-h4--line-height: var(--line-height--line-height-l);
    --_typography---heading-h4--font-weight: var(--font-weight--regular);
    --_typography---heading-h4--letter-spacing: -.48px;
    --_typography---heading-h5--font-size: 20px;
    --_typography---heading-h5--line-height: var(--line-height--line-height-s);
    --_typography---heading-h5--font-weight: var(--font-weight--regular);
    --_typography---heading-h5--letter-spacing: -.4px;
    --_typography---heading-h6--font-size: 18px;
    --_typography---heading-h6--line-height: var(--line-height--line-height-l);
    --_typography---heading-h6--font-weight: var(--font-weight--regular);
    --_typography---paragraph-large--font-size: 18px;
    --_typography---paragraph-large--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph-large--letter-spacing: -.4px;
    --_typography---paragraph-small--font-size: 14px;
    --_typography---paragraph-small--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph-small--font-weight: var(--font-weight--regular);
    --_typography---paragraph-small--letter-spacing: -.4px;
    --_typography---paragraph-large--font-weight: var(--font-weight--regular);
    --_spacing---margin-padding--spacing-zero: 0px;
    --_spacing---margin-padding--spacing-medium: 18px;
    --_spacing---margin-padding--spacing-xxsmall: 12px;
    --_spacing---margin-padding--spacing-big: 40px;
    --_spacing---margin-padding--spacing-titan: 160px;
    --_spacing---margin-padding--spacing-jumbo: 70px;
    --_spacing---margin-padding--spacing-xjumbo: 70px;
    --_spacing---margin-padding--spacing-massive: 100px;
    --_spacing---margin-padding--spacing-colossal: 130px;
    --_spacing---margin-padding--spacing-immense: 120px;
    --_spacing---margin-padding--spacing-tiny: 10px;
    --_spacing---margin-padding--spacing-giant: 110px;
    --_spacing---margin-padding--spacing-regular: 24px;
    --_spacing---margin-padding--spacing-xxxbig: 60px;
    --_spacing---margin-padding--spacing-xbig: 50px;
    --_spacing---margin-padding--spacing-xxjumbo: 80px;
    --_spacing---margin-padding--spacing-xxbig: 60px;
    --_spacing---margin-padding--spacing-mega: 220px;
    --_spacing---margin-padding--spacing-small: 15px;
    --_spacing---radius--radius-tiny: 8px;
    --_spacing---margin-padding--spacing-normal: 26px;
    --_spacing---radius--circle-round: 50%;
    --_spacing---margin-padding--spacing-xxlarge: 36px;
    --_spacing---margin-padding--spacing-xsmall: 12px;
    --_spacing---margin-padding--spacing-xlarge: 36px;
    --_spacing---margin-padding--spacing-slim: 16px;
    --_spacing---margin-padding--spacing-medium-rare: 22px;
    --_spacing---radius--radius-regular: 14px;
    --_spacing---radius--radius-small: 10px;
    --_spacing---radius--radius-medium: 12px;
    --_spacing---radius--radius-jumbo: 100px;
    --_spacing---radius--radius-xxlarge: 24px;
    --_spacing---radius--radius-large: 16px;
    --_spacing---radius--radius-xlarge: 18px;
    --_spacing---margin-padding--spacing-xxxlarge: 36px;
    --_spacing---margin-padding--spacing-large: 30px;
    --_spacing---margin-padding--spacing-xtitan: 160px;
    --_spacing---margin-padding--spacing-xxtitan: 160px;
  }
  .section.hero {
    padding-bottom: var(--_spacing---margin-padding--spacing-jumbo);
  }
  .secondary-text.white.small {
    font-size: var(--_typography---paragraph-small--font-size);
  }
  .description.d {
    color: var(--color--white);
  }
  .footer-right-box {
    flex: none;
  }
  .footer-main-box-wrap {
    margin-top: var(--_spacing---margin-padding--spacing-xxbig);
  }
  .footer-about-box {
    max-width: 300px;
  }
  .footer-menu-wraps {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
  }
  .footer-menu-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .dropdown-colum-wrapper {
    margin-left: 0;
  }
  .dropdown-colum-wrapper.is-open {
    min-width: 0;
    transform: translate(0%);
  }
  .nav-menu-main-wrap.mobile {
    display: none;
  }
  .navbar-logo-link {
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
  .cart-quantity {
    color: #fff;
    background-color: #191919;
  }
  .menu-dropdown-wrapper {
    margin-right: var(--_spacing---margin-padding--spacing-zero);
    margin-left: var(--_spacing---margin-padding--spacing-zero);
    display: block;
  }
  .drapdown-toggle {
    justify-content: flex-start;
    align-items: center;
  }
  .dropdown-toggle-text-block {
    color: #595959;
  }
  .dropdown-toggle-text-block.white {
    color: var(--color--black);
  }
  .nav-hamburger-button {
    justify-content: center;
    align-items: center;
    transition: background-color .3s;
    display: flex;
  }
  .mobile {
    display: block;
  }
  .nave-menu {
    background-color: var(--color--fill-color);
    border-radius: 0;
    max-height: 90vh;
    overflow: auto;
  }
  .nav-link {
    margin-right: var(--_spacing---margin-padding--spacing-zero);
    margin-left: var(--_spacing---margin-padding--spacing-zero);
  }
  .nav-link._2.white, .nav-link._4.white, .nav-link._3.white {
    color: var(--color--black);
  }
  .nav-menu-content {
    padding: var(--_spacing---margin-padding--spacing-regular) var(--_spacing---margin-padding--spacing-slim);
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
  }
  .nav-menu-content.display-none {
    display: flex;
  }
  .navbar {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .dropdown-main {
    box-shadow: none;
    background-color: #fff;
  }
  .primary-button-wrapper-two.mobile {
    display: flex;
  }
  .menu-button {
    background-color: #0000;
    padding: 0;
    position: static;
  }
  .menu-button.is-open {
    background-color: #c8c8c800;
  }
  .menu-button.bg-color {
    border-radius: var(--_spacing---radius--radius-tiny);
    background-color: var(--color--white);
  }
  .menu-icon {
    width: 30px;
    height: 30px;
  }
  .nav-button-wrap.desktop {
    display: none;
  }
  .color-grid-box-wrap {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .blog-collection-list {
    grid-template-columns: 1fr 1fr;
  }
  .blog-inner-title {
    max-width: 500px;
  }
  .image-wrap.full-with[aria-current="page"], .image-wrap.full-with.is-active, .image-wrap.radius {
    height: 100%;
  }
  .blog-details-left-box {
    max-width: 300px;
  }
  .project-inner-title {
    max-width: 500px;
  }
  .scope-of-work-description.text-gray {
    max-width: 1000%;
  }
  .collection-list-wrapper {
    margin-top: var(--_spacing---margin-padding--spacing-titan);
  }
  .project-hero-title {
    max-width: 550px;
  }
  .service-single-card {
    grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
    grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .pricing-active-card {
    max-width: 437.719px;
  }
  .feature-flex-box {
    flex-flow: wrap;
  }
  .plan-details-left-box {
    min-width: 340px;
  }
  .testimonials-wrap {
    height: 300vh;
  }
  .sticly-box-testimonial {
    top: var(--_spacing---margin-padding--spacing-xxbig);
    position: sticky;
  }
  .faq-left-box {
    max-width: 472px;
    position: static;
  }
  .faq-right-box {
    max-width: 100%;
    margin-top: var(--_spacing---margin-padding--spacing-zero);
  }
  .faq-wrapper {
    grid-row-gap: var(--_spacing---margin-padding--spacing-big);
    flex-flow: wrap;
  }
  .products-hero-title {
    max-width: 600px;
  }
  .products-single-price-box {
    margin-top: var(--_spacing---margin-padding--spacing-medium);
    margin-bottom: var(--_spacing---margin-padding--spacing-medium);
  }
  .products-single-image-box {
    height: 100%;
  }
  .commitment-wrap {
    grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
    grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .commitment-left-box, .commitment-right-box {
    width: 100%;
  }
  .commitment-title {
    margin-top: var(--_spacing---margin-padding--spacing-medium);
  }
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }
  .story-wrap {
    flex-flow: column;
  }
  .story-lerft-box {
    width: 100%;
  }
  .story-right-box {
    order: -9999;
    width: 100%;
  }
  .story-single-card {
    margin-bottom: var(--_spacing---margin-padding--spacing-regular);
  }
  .story-title-box-wrap {
    position: static;
  }
  .values-wrap {
    grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
    grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .values-single-card {
    max-width: 100%;
  }
  .about-hero-title {
    max-width: 500px;
  }
  .ticker-wrapper, .ticker-item-wrap {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
  .numbers-left-box {
    grid-column-gap: var(--_spacing---margin-padding--spacing-xlarge);
    grid-row-gap: var(--_spacing---margin-padding--spacing-xlarge);
    height: 100%;
  }
  .whole-counter {
    height: 56px;
  }
  .whole-counter.large {
    height: 100px;
  }
  .heading-three {
    line-height: 56px;
  }
  .heading-three.large {
    font-size: 100px;
    line-height: 100px;
  }
  .coma {
    font-size: 100px;
  }
  .testimonial-vh {
    height: auto;
  }
  .testimonial-sticky {
    padding-bottom: var(--_spacing---margin-padding--spacing-zero);
    position: static;
  }
  .choose-right-box {
    height: 100%;
    padding: var(--_spacing---margin-padding--spacing-slim);
  }
  .choose-title {
    max-width: 580px;
  }
  .hero-products-collection-list {
    grid-template-columns: 1fr 1fr;
  }
  .product-title-box {
    max-width: 680px;
  }
  .materials-single-card-one {
    grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
    grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
  }
  .materials-single-card-one-left-box {
    margin-left: var(--_spacing---margin-padding--spacing-zero);
  }
  .materials-single-card-one-right-box {
    padding-right: var(--_spacing---margin-padding--spacing-zero);
    border-right-style: none;
  }
  .materials-single-card-two-wrap {
    padding-left: var(--_spacing---margin-padding--spacing-zero);
  }
  .materials-single-card-left-box {
    margin-right: var(--_spacing---margin-padding--spacing-slim);
  }
  .materials-single-card-right-box {
    margin-left: var(--_spacing---margin-padding--spacing-slim);
  }
  .materials-bottom-box {
    border-left-style: none;
    border-right-style: none;
  }
  .hero-project-overly-box {
    height: 100%;
    padding-bottom: var(--_spacing---margin-padding--spacing-medium);
    grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
    grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
    background-image: linear-gradient(#00000080, #00000080);
  }
  .hero-project-card-bottom-box {
    grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
    grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  }
  .hero-wrap {
    max-width: 504px;
  }
  .hero-counter-wrap {
    background-image: linear-gradient(#00000080, #00000080), url('../images/hero-counter-bg.webp');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    height: 400px;
  }
  .hero-counter-box-wrap {
    justify-content: center;
    align-items: flex-start;
  }
  .hero-counter-botton-box {
    grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
    grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .hero-service-title {
    max-width: 600px;
  }
  .news-bottom-wrap {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }
  .news-card-50 {
    width: 100%;
  }
  .before-after-box {
    left: var(--_spacing---margin-padding--spacing-xxsmall);
    right: var(--_spacing---margin-padding--spacing-xxsmall);
  }
  .process-single-card {
    padding-right: var(--_spacing---margin-padding--spacing-tiny);
    flex-flow: column;
  }
  .process-single-card._1 {
    flex-flow: column;
    display: flex;
    position: static;
  }
  .process-single-card._2, .process-single-card._03 {
    opacity: 1;
    position: static;
  }
  .process-inner-image-box {
    max-width: 100%;
  }
  .process-bottom-wrap {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .process-card-50, .process-card-25 {
    width: 100%;
  }
  .process-inner-main-box {
    border-radius: var(--_spacing---radius--radius-small);
    height: auto;
  }
  .process-main-image-box {
    display: none;
  }
  .process-title-box {
    margin-bottom: var(--_spacing---margin-padding--spacing-xxbig);
  }
  .error-utility-page-wrap {
    padding-bottom: var(--_spacing---margin-padding--spacing-massive);
  }
  .solutions-tabs-wrap {
    grid-column-gap: var(--_spacing---margin-padding--spacing-slim);
    grid-row-gap: var(--_spacing---margin-padding--spacing-slim);
    grid-template-rows: auto;
    grid-template-columns: 40% 60%;
    grid-auto-columns: 1fr;
    align-items: stretch;
    display: grid;
  }
  .solutions-tabs-menu {
    max-width: 100%;
    padding-bottom: var(--_spacing---margin-padding--spacing-immense);
    margin-right: 0;
  }
  .single-solution-tabs-link {
    padding-bottom: 0;
  }
  .single-solution-tabs-link[aria-current="page"], .single-solution-tabs-link.is-active {
    padding-bottom: 24px;
  }
  .solutions-tab-pane {
    height: 100%;
  }
  .solution-tab-contant {
    max-width: 100%;
  }
  .project-card-box {
    display: flex;
  }}
@media screen and (max-width: 767px) {

  body {
    --_typography---paragraph--font-size: 16px;
    --_typography---paragraph--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph--font-weight: var(--font-weight--regular);
    --_typography---paragraph--letter-spacing: 0px;
    --_typography---heading-h1--font-size: 44px;
    --_typography---heading-h1--line-height: var(--line-height--line-height-s);
    --_typography---heading-h1--font-weight: var(--font-weight--regular);
    --_typography---heading-h1--letter-spacing: -.9px;
    --_typography---heading-h2--font-size: 38px;
    --_typography---heading-h2--line-height: var(--line-height--line-height-s);
    --_typography---heading-h2--font-weight: var(--font-weight--regular);
    --_typography---heading-h2--letter-spacing: -.8px;
    --_typography---heading-h3--font-size: 28px;
    --_typography---heading-h3--line-height: var(--line-height--line-height-l);
    --_typography---heading-h3--font-weight: var(--font-weight--regular);
    --_typography---heading-h3--letter-spacing: -.56px;
    --_typography---heading-h6--letter-spacing: -.28px;
    --_typography---heading-h4--font-size: 22px;
    --_typography---heading-h4--line-height: var(--line-height--line-height-l);
    --_typography---heading-h4--font-weight: var(--font-weight--regular);
    --_typography---heading-h4--letter-spacing: -.44px;
    --_typography---heading-h5--font-size: 18px;
    --_typography---heading-h5--line-height: var(--line-height--line-height-s);
    --_typography---heading-h5--font-weight: var(--font-weight--regular);
    --_typography---heading-h5--letter-spacing: -.36px;
    --_typography---heading-h6--font-size: 16px;
    --_typography---heading-h6--line-height: var(--line-height--line-height-l);
    --_typography---heading-h6--font-weight: var(--font-weight--regular);
    --_typography---paragraph-large--font-size: 18px;
    --_typography---paragraph-large--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph-large--letter-spacing: 0px;
    --_typography---paragraph-small--font-size: 14px;
    --_typography---paragraph-small--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph-small--font-weight: var(--font-weight--regular);
    --_typography---paragraph-small--letter-spacing: 0px;
    --_typography---paragraph-large--font-weight: var(--font-weight--regular);
    --_spacing---margin-padding--spacing-zero: 0px;
    --_spacing---margin-padding--spacing-medium: 18px;
    --_spacing---margin-padding--spacing-xxsmall: 12px;
    --_spacing---margin-padding--spacing-big: 36px;
    --_spacing---margin-padding--spacing-titan: 150px;
    --_spacing---margin-padding--spacing-jumbo: 60px;
    --_spacing---margin-padding--spacing-xjumbo: 60px;
    --_spacing---margin-padding--spacing-massive: 80px;
    --_spacing---margin-padding--spacing-colossal: 120px;
    --_spacing---margin-padding--spacing-immense: 100px;
    --_spacing---margin-padding--spacing-tiny: 10px;
    --_spacing---margin-padding--spacing-giant: 90px;
    --_spacing---margin-padding--spacing-regular: 22px;
    --_spacing---margin-padding--spacing-xxxbig: 50px;
    --_spacing---margin-padding--spacing-xbig: 40px;
    --_spacing---margin-padding--spacing-xxjumbo: 70px;
    --_spacing---margin-padding--spacing-xxbig: 50px;
    --_spacing---margin-padding--spacing-mega: 200px;
    --_spacing---margin-padding--spacing-small: 15px;
    --_spacing---radius--radius-tiny: 8px;
    --_spacing---margin-padding--spacing-normal: 24px;
    --_spacing---radius--circle-round: 50%;
    --_spacing---margin-padding--spacing-xxlarge: 30px;
    --_spacing---margin-padding--spacing-xsmall: 12px;
    --_spacing---margin-padding--spacing-xlarge: 30px;
    --_spacing---margin-padding--spacing-slim: 16px;
    --_spacing---margin-padding--spacing-medium-rare: 20px;
    --_spacing---radius--radius-regular: 12px;
    --_spacing---radius--radius-small: 8px;
    --_spacing---radius--radius-medium: 10px;
    --_spacing---radius--radius-jumbo: 100px;
    --_spacing---radius--radius-xxlarge: 20px;
    --_spacing---radius--radius-large: 12px;
    --_spacing---radius--radius-xlarge: 16px;
    --_spacing---margin-padding--spacing-xxxlarge: 30px;
    --_spacing---margin-padding--spacing-large: 24px;
    --_spacing---margin-padding--spacing-xtitan: 150px;
    --_spacing---margin-padding--spacing-xxtitan: 150px;
  }
  .description.d {
    color: var(--color--slate-medium);
  }
  .footer-main-box-wrap {
    grid-column-gap: var(--_spacing---margin-padding--spacing-big);
    grid-row-gap: var(--_spacing---margin-padding--spacing-big);
    flex-flow: wrap;
  }
  .footer-about-box {
    max-width: 485px;
  }
  .footer-menu-wraps {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    width: 100%;
    max-width: 100%;
  }
  .footer-menu-wrap {
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    max-width: 100%;
  }
  .dropdown-colum-wrapper.is-open {
    min-width: 100%;
  }
  .nav-menu-content {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .nav-all-menu-wrap {
    justify-content: space-between;
    max-width: 100%;
  }
  .color-grid-box-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .single-field-wrap._2nd {
    flex-flow: wrap;
  }
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
  .blog-tabs-menu, .feature-blog-wrap {
    flex-flow: wrap;
  }
  .blog-feature-right-box {
    max-width: 100%;
  }
  .blog-inner-title {
    max-width: 400px;
  }
  .blog-details-wrap {
    flex-flow: column;
  }
  .blog-details-left-box {
    max-width: 100%;
    position: static;
  }
  .project-inner-title {
    max-width: 400px;
  }
  .collection-list-wrapper {
    margin-top: var(--_spacing---margin-padding--spacing-immense);
  }
  .project-hero-title {
    max-width: 420px;
  }
  .service-single-card {
    grid-template-columns: 1fr;
  }
  .service-card-right-box {
    max-width: 100%;
  }
  .pricing-single-card {
    padding-left: var(--_spacing---margin-padding--spacing-tiny);
    flex-flow: wrap;
  }
  .pricing-left-card {
    margin-top: var(--_spacing---margin-padding--spacing-medium-rare);
    margin-left: var(--_spacing---margin-padding--spacing-medium);
  }
  .pricing-active-card {
    max-width: 100%;
  }
  .plan-details-wrap {
    flex-flow: wrap;
  }
  .pricing-details-card {
    padding-left: var(--_spacing---margin-padding--spacing-tiny);
    flex-flow: wrap;
  }
  .pricing-single-left-card {
    margin-top: var(--_spacing---margin-padding--spacing-medium-rare);
    margin-left: var(--_spacing---margin-padding--spacing-medium);
  }
  .plan-details-right-box {
    width: 100%;
    max-width: 100%;
  }
  .plan-details-left-box {
    min-width: 100%;
    max-width: 100%;
  }
  .testimonials-wrap {
    height: auto;
  }
  .testimonials-grid {
    grid-column-gap: var(--_spacing---margin-padding--spacing-medium);
    grid-row-gap: var(--_spacing---margin-padding--spacing-medium);
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .testimonials-single-card, .testimonials-main-image-box {
    width: 100%;
    min-width: 100%;
  }
  .sticly-box-testimonial {
    position: static;
  }
  .faq-left-box {
    max-width: 400px;
  }
  .faq-right-box {
    max-width: 100%;
  }
  .faq-wrapper {
    flex-flow: wrap;
  }
  .products-hero-title {
    max-width: 500px;
  }
  .product-single-flex-box {
    flex-flow: wrap;
  }
  .product-details-left-box, .product-details-right-box {
    max-width: 100%;
  }
  .commitment-wrap {
    grid-template-columns: 1fr;
  }
  .team-grid {
    grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
    grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  }
  .team-content-box {
    left: var(--_spacing---margin-padding--spacing-tiny);
    right: var(--_spacing---margin-padding--spacing-tiny);
    bottom: var(--_spacing---margin-padding--spacing-tiny);
    padding-right: var(--_spacing---margin-padding--spacing-tiny);
    padding-left: var(--_spacing---margin-padding--spacing-tiny);
  }
  .values-single-card {
    height: 300px;
  }
  .about-hero-title {
    max-width: 400px;
  }
  .trust-wrap {
    grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
    grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
    grid-template-columns: 1fr 1fr;
  }
  .ticker-wrapper, .ticker-item-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .number-wrap {
    flex-flow: column;
  }
  .numbers-left-box, .number-right-box {
    max-width: 100%;
  }
  .whole-counter {
    height: 44px;
  }
  .heading-three {
    line-height: 44px;
  }
  .choose-right-box {
    height: 400px;
  }
  .choose-title {
    max-width: 538px;
  }
  .materials-single-card-one {
    padding-top: var(--_spacing---margin-padding--spacing-slim);
    padding-bottom: var(--_spacing---margin-padding--spacing-slim);
    grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
    grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .materials-image-box {
    margin-top: var(--_spacing---margin-padding--spacing-zero);
    margin-bottom: var(--_spacing---margin-padding--spacing-zero);
  }
  .hero-project-overly-box {
    background-image: linear-gradient(0deg, #191919cc, #19191900);
  }
  .hero-title {
    max-width: 396px;
  }
  .hero-service-title {
    max-width: 538px;
  }
  .news-bottom-wrap {
    grid-template-columns: 1fr;
  }
  .process-bottom-wrap {
    grid-column-gap: var(--_spacing---margin-padding--spacing-slim);
    grid-row-gap: var(--_spacing---margin-padding--spacing-slim);
  }
  .testimonial-background {
    height: 100%;
  }
  .solutions-tabs-wrap {
    grid-template-columns: 1fr;
  }
  .solutions-tabs-menu {
    padding-bottom: var(--_spacing---margin-padding--spacing-zero);
  }
  .solution-accordion-question {
    font-size: 24px;
  }
  .choose-button-box-wrapper {
    margin-top: var(--_spacing---margin-padding--spacing-medium-rare);
    position: static;
  }
  .project-card-box {
    flex-flow: column;
  }}
@media screen and (max-width: 479px) {

  body {
    --_typography---paragraph--font-size: 16px;
    --_typography---paragraph--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph--font-weight: var(--font-weight--regular);
    --_typography---paragraph--letter-spacing: 0px;
    --_typography---heading-h1--font-size: 36px;
    --_typography---heading-h1--line-height: var(--line-height--line-height-s);
    --_typography---heading-h1--font-weight: var(--font-weight--regular);
    --_typography---heading-h1--letter-spacing: -.7px;
    --_typography---heading-h2--font-size: 30px;
    --_typography---heading-h2--line-height: var(--line-height--line-height-s);
    --_typography---heading-h2--font-weight: var(--font-weight--regular);
    --_typography---heading-h2--letter-spacing: -.6px;
    --_typography---heading-h3--font-size: 24px;
    --_typography---heading-h3--line-height: var(--line-height--line-height-l);
    --_typography---heading-h3--font-weight: var(--font-weight--regular);
    --_typography---heading-h3--letter-spacing: -.48px;
    --_typography---heading-h6--letter-spacing: 0px;
    --_typography---heading-h4--font-size: 20px;
    --_typography---heading-h4--line-height: var(--line-height--line-height-l);
    --_typography---heading-h4--font-weight: var(--font-weight--regular);
    --_typography---heading-h4--letter-spacing: 0px;
    --_typography---heading-h5--font-size: 18px;
    --_typography---heading-h5--line-height: var(--line-height--line-height-s);
    --_typography---heading-h5--font-weight: var(--font-weight--regular);
    --_typography---heading-h5--letter-spacing: 0px;
    --_typography---heading-h6--font-size: 16px;
    --_typography---heading-h6--line-height: var(--line-height--line-height-l);
    --_typography---heading-h6--font-weight: var(--font-weight--regular);
    --_typography---paragraph-large--font-size: 18px;
    --_typography---paragraph-large--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph-large--letter-spacing: 0px;
    --_typography---paragraph-small--font-size: 14px;
    --_typography---paragraph-small--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph-small--font-weight: var(--font-weight--regular);
    --_typography---paragraph-small--letter-spacing: 0px;
    --_typography---paragraph-large--font-weight: var(--font-weight--regular);
    --_spacing---margin-padding--spacing-zero: 0px;
    --_spacing---margin-padding--spacing-medium: 18px;
    --_spacing---margin-padding--spacing-xxsmall: 12px;
    --_spacing---margin-padding--spacing-big: 30px;
    --_spacing---margin-padding--spacing-titan: 140px;
    --_spacing---margin-padding--spacing-jumbo: 50px;
    --_spacing---margin-padding--spacing-xjumbo: 50px;
    --_spacing---margin-padding--spacing-massive: 70px;
    --_spacing---margin-padding--spacing-colossal: 120px;
    --_spacing---margin-padding--spacing-immense: 80px;
    --_spacing---margin-padding--spacing-tiny: 10px;
    --_spacing---margin-padding--spacing-giant: 80px;
    --_spacing---margin-padding--spacing-regular: 22px;
    --_spacing---margin-padding--spacing-xxxbig: 40px;
    --_spacing---margin-padding--spacing-xbig: 36px;
    --_spacing---margin-padding--spacing-xxjumbo: 60px;
    --_spacing---margin-padding--spacing-xxbig: 40px;
    --_spacing---margin-padding--spacing-mega: 180px;
    --_spacing---margin-padding--spacing-small: 15px;
    --_spacing---radius--radius-tiny: 8px;
    --_spacing---margin-padding--spacing-normal: 22px;
    --_spacing---radius--circle-round: 50%;
    --_spacing---margin-padding--spacing-xxlarge: 24px;
    --_spacing---margin-padding--spacing-xsmall: 12px;
    --_spacing---margin-padding--spacing-xlarge: 24px;
    --_spacing---margin-padding--spacing-slim: 16px;
    --_spacing---margin-padding--spacing-medium-rare: 20px;
    --_spacing---radius--radius-regular: 10px;
    --_spacing---radius--radius-small: 6px;
    --_spacing---radius--radius-medium: 10px;
    --_spacing---radius--radius-jumbo: 100px;
    --_spacing---radius--radius-xxlarge: 16px;
    --_spacing---radius--radius-large: 10px;
    --_spacing---radius--radius-xlarge: 10px;
    --_spacing---margin-padding--spacing-xxxlarge: 20px;
    --_spacing---margin-padding--spacing-large: 20px;
    --_spacing---margin-padding--spacing-xtitan: 140px;
    --_spacing---margin-padding--spacing-xxtitan: 140px;
  }
  .section.hero {
    background-position: 50%;
    background-size: cover;
  }
  .secondary-text.white.small {
    color: var(--color--slate-medium);
  }
  .secondary-text.white.counter-description-center {
    text-align: center;
  }
  .footer-top-box {
    grid-column-gap: var(--_spacing---margin-padding--spacing-regular);
    grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
    flex-flow: wrap;
  }
  .footer-title {
    font-size: var(--_typography---heading-h2--font-size);
  }
  .footer-menu-wrap {
    grid-template-columns: 1fr 1fr;
  }
  .dropdown-colum-wrapper {
    width: 100%;
    min-width: 100%;
  }
  .nav-menu-main-wrap.mobile {
    padding-right: var(--_spacing---margin-padding--spacing-slim);
    padding-left: var(--_spacing---margin-padding--spacing-slim);
    display: block;
  }
  .nav-link-wrapper {
    margin-right: 0;
  }
  .nav-link-wrapper.second, .nav-link-wrapper._3rd {
    max-width: 100%;
  }
  .nave-menu {
    padding-bottom: var(--_spacing---margin-padding--spacing-big);
  }
  .nav-menu-content.display-none {
    display: none;
  }
  .nav-all-menu-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-top: 20px;
  }
  .nav-dropdown-left-wrap {
    flex-flow: wrap;
    grid-template: "Area"
    / 90px 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    display: grid;
  }
  .dropdown-main {
    padding: 16px;
  }
  .menu-button {
    padding: 0;
  }
  .menu-button.is-open {
    position: relative;
  }
  .license-image-wraps {
    grid-template-columns: 1fr 1fr;
  }
  .color-grid-box-wrap {
    grid-template-columns: 1fr;
  }
  .single-field-wrap {
    flex-flow: wrap;
  }
  .contact-grid, .blog-collection-list {
    grid-template-columns: 1fr;
  }
  .feature-blog-wrap {
    padding-right: var(--_spacing---margin-padding--spacing-xxsmall);
    padding-left: var(--_spacing---margin-padding--spacing-xxsmall);
  }
  .blog-card-description {
    margin-top: var(--_spacing---margin-padding--spacing-zero);
  }
  .blog-inner-title {
    max-width: 380px;
  }
  .blog-social-box-wrap {
    grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
    grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
  }
  .blog-social-icon-wrap {
    grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
    grid-row-gap: var(--_spacing---margin-padding--spacing-tiny);
    flex-flow: wrap;
  }
  .project-inner-title {
    max-width: 380px;
  }
  .project-gallery-grid {
    grid-column-gap: 20px;
    grid-template-columns: 1fr;
  }
  .project-card-wrap {
    grid-row-gap: var(--_spacing---margin-padding--spacing-xbig);
    flex-flow: column;
  }
  .project-card-wrap.grid {
    grid-row-gap: var(--_spacing---margin-padding--spacing-xbig);
    grid-template-columns: 1fr;
  }
  .collection-list-wrapper {
    margin-top: var(--_spacing---margin-padding--spacing-zero);
  }
  .project-hero-title {
    max-width: 360px;
  }
  .service-collection-list {
    grid-column-gap: var(--_spacing---margin-padding--spacing-xxjumbo);
    grid-row-gap: var(--_spacing---margin-padding--spacing-xxjumbo);
  }
  .service-gallery-grid {
    grid-column-gap: var(--_spacing---margin-padding--spacing-xxsmall);
    grid-row-gap: var(--_spacing---margin-padding--spacing-xxsmall);
  }
  .pricing-left-card {
    margin-top: var(--_spacing---margin-padding--spacing-zero);
    margin-left: var(--_spacing---margin-padding--spacing-zero);
  }
  .pricing-active-card {
    padding: var(--_spacing---margin-padding--spacing-xxsmall);
  }
  .pricing-single-left-card {
    margin-top: var(--_spacing---margin-padding--spacing-zero);
    margin-left: var(--_spacing---margin-padding--spacing-zero);
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .testimonials-main-image-box {
    height: 100%;
  }
  .faq-left-box {
    max-width: 350px;
  }
  .products-collection-list {
    grid-row-gap: var(--_spacing---margin-padding--spacing-big);
    grid-template-columns: 1fr;
  }
  .products-address-wrap, .team-grid, .values-wrap {
    grid-template-columns: 1fr;
  }
  .values-single-card {
    top: var(--_spacing---margin-padding--spacing-xjumbo);
    grid-row-gap: var(--_spacing---margin-padding--spacing-xbig);
    position: sticky;
  }
  .about-hero-title {
    max-width: 290px;
  }
  .trust-wrap {
    grid-column-gap: var(--_spacing---margin-padding--spacing-xlarge);
    grid-row-gap: var(--_spacing---margin-padding--spacing-xlarge);
    grid-template-columns: 1fr;
  }
  .trust-single-card {
    top: var(--_spacing---margin-padding--spacing-xxjumbo);
    position: sticky;
  }
  .number-right-box {
    justify-content: space-between;
    align-items: flex-start;
  }
  .counter-single.center {
    text-align: left;
    justify-content: center;
    align-items: flex-start;
  }
  .whole-counter {
    height: 36px;
  }
  .heading-three {
    line-height: 36px;
  }
  .counter-flex-box {
    grid-column-gap: var(--_spacing---margin-padding--spacing-medium-rare);
    grid-row-gap: var(--_spacing---margin-padding--spacing-medium-rare);
    flex-flow: column;
  }
  .choose-right-box {
    height: 300px;
  }
  .pricing-title-box {
    max-width: 250px;
  }
  .hero-products-collection-list, .materials-single-card-one {
    grid-template-columns: 1fr;
  }
  .materials-image-box {
    max-width: 100%;
  }
  .materials-single-card-two {
    margin-bottom: var(--_spacing---margin-padding--spacing-slim);
    grid-template-columns: 1fr;
  }
  .materials-single-card-left-box {
    max-width: 100%;
    margin-right: var(--_spacing---margin-padding--spacing-zero);
  }
  .materials-single-card-left-box-wrap {
    border-right-style: none;
  }
  .materials-single-card-right-box {
    margin-left: var(--_spacing---margin-padding--spacing-zero);
  }
  .materials-bottom-box, .materials-flex {
    justify-content: center;
    align-items: flex-start;
  }
  .hero-project-imge-box {
    border-radius: var(--_spacing---radius--radius-xxlarge);
    height: auto;
    overflow: hidden;
  }
  .hero-project-overly-box {
    height: auto;
    padding-right: var(--_spacing---margin-padding--spacing-zero);
    padding-left: var(--_spacing---margin-padding--spacing-zero);
    background-image: none;
    position: static;
  }
  .hero-counter-wrap {
    height: auto;
  }
  .hero-counter-box-wrap {
    margin-right: var(--_spacing---margin-padding--spacing-slim);
    margin-left: var(--_spacing---margin-padding--spacing-slim);
    padding-top: var(--_spacing---margin-padding--spacing-regular);
  }
  .hero-counter-botton-box {
    grid-template-columns: 1fr 1fr;
  }
  .hero-counter-card {
    justify-content: center;
    align-items: center;
  }
  .hero-service-single-card.one, .hero-service-single-card.two, .hero-service-single-card.three {
    position: static;
  }
  .news-bottom-wrap {
    grid-column-gap: var(--_spacing---margin-padding--spacing-tiny);
    grid-row-gap: var(--_spacing---margin-padding--spacing-regular);
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .news-card-25 {
    width: 100%;
  }
  .process-inner-image-box {
    border-radius: var(--_spacing---margin-padding--spacing-tiny);
  }
  .process-bottom-wrap {
    grid-template-columns: 1fr;
  }
  .process-card-50, .process-card-25 {
    top: var(--_spacing---margin-padding--spacing-xxbig);
    position: sticky;
  }
  .process-inner-main-box {
    border-radius: var(--_spacing---radius--radius-medium);
  }
  .testimonial-background {
    height: 400px;
  }
  .nav-page-wrap {
    margin-bottom: var(--_spacing---margin-padding--spacing-xxsmall);
    padding-bottom: var(--_spacing---margin-padding--spacing-xxsmall);
    border-bottom: 1px solid var(--color--stroke-color);
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
  .solutions-tabs-menu, .solution-accordion-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }}

#node-d35dba3b-35d6-2f5f-ad03-2722b0f25f8e-7404d3d0 {
  grid-area: 1 / 1 / 2 / 2;
}
#node-_6b03e987-934b-fd53-4260-c41b6adc4e38-7404d3d6 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-_6b03e987-934b-fd53-4260-c41b6adc4e42-7404d3d6 {
  grid-area: span 1 / span 4 / span 1 / span 4;
}
#node-_12a2d537-3333-c2bc-2147-cacdf8b4e157-7404d3d6, #node-fe1a46fa-d997-3e7a-7a0e-05ea8c191f80-7404d3d7, #node-_63d19bd3-3c01-4cc4-1d3c-b7ba26bcbfe7-42b3e307, #node-d4066bcb-8381-6694-9dbf-5cc042c42233-d483cf13, #node-_07fa8847-3d9f-a1fb-4a43-701fbf8497e0-d483cf13 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}@media screen and (max-width: 767px) {

  #node-_564f99af-077a-9408-a510-71268355b5ba-8355b580 {
    justify-self: end;
  }
  #node-_6b03e987-934b-fd53-4260-c41b6adc4e38-7404d3d6 {
    grid-column: span 1 / span 1;
  }
  #node-_6b03e987-934b-fd53-4260-c41b6adc4e42-7404d3d6 {
    grid-column: span 3 / span 3;
  }
  #node-_12a2d537-3333-c2bc-2147-cacdf8b4e157-7404d3d6 {
    grid-column: span 1 / span 1;
  }
  #node-_6f08fb79-dd45-912f-6abe-bf1e43be2bd5-7404d3d9 {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: center;
  }}
@media screen and (max-width: 479px) {

  #node-_5d8cf49d-db2d-bc90-bd95-2afe767d0fa0-7404d3cf {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-_9b441003-2296-1898-261a-a5c06344a9a1-7404d3cf {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: center;
  }
  #node-_564f99af-077a-9408-a510-71268355b5ba-8355b580 {
    justify-self: start;
  }
  #node-_81a599e8-b7b8-d73d-6fc0-a3c896d1c152-421a8932 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-_6b03e987-934b-fd53-4260-c41b6adc4e42-7404d3d6, #node-_6f08fb79-dd45-912f-6abe-bf1e43be2bd5-7404d3d9, #node-_63d19bd3-3c01-4cc4-1d3c-b7ba26bcbfe7-42b3e307 {
    grid-column: span 1 / span 1;
  }}


/* ======================================================================
   4. Components (hand-written)
   ======================================================================

   Everything Webflow's runtime used to do, and everything IX2 and IX3 used
   to do, as CSS. This sheet is emitted LAST, after the design, because
   almost all of it is STATE -- a menu that is closed, an accordion that has
   not been opened, a card that is not the hovered one -- and the design
   sheet knows nothing about any of those. A state put in section 2b instead
   loses to the design on source order, which is how an earlier conversion
   shipped a permanently-open FAQ.

   THE EASINGS ARE THE PAYLOAD'S OWN. Webflow's names map to these curves:

     outQuart    cubic-bezier(0.165, 0.84, 0.44, 1)     -- almost everything
     inOutExpo   cubic-bezier(1, 0, 0, 1)               -- the pricing pill
     ease        the CSS keyword                        -- the mega-menu

   An empty `easing` field in the payload is LINEAR, not `ease`; the counter
   reels carry their own explicit bezier and it is transcribed as written.

   THE REVEALS HAND OFF TO A SECOND CLASS. main.js adds `.is-revealed` to
   play the entrance and swaps it for `.is-shown` when the animation ends,
   because `animation-fill-mode: both` pins `transform` forever and would
   freeze anything that is also hovered or scrubbed -- and several of these
   elements are both. That means EVERY finished state has to be re-stated on
   `.is-shown`: a reveal whose end state lives only in its keyframes undoes
   itself at the swap. audit_reveals.py fails the build if one does not.
   ====================================================================== */

/* ---- page furniture ----------------------------------------------------
   `<main>` and the nav overlay are wrappers this build introduces for the
   document outline and for the menu's open state. `display: contents` makes
   them free: the design lays out `.page-wrapper`'s children directly, and an
   ordinary block between the two would become the layout item instead of the
   sections it holds. */
main {
  display: contents;
}

/* A control that is only for keyboard users: off-screen until it is focused,
   and then the first thing on the page. */
.skip-link {
  position: absolute;
  top: -100vh;
  left: 16px;
  z-index: 2000;
  padding: 12px 20px;
  border-radius: 8px;
  background-color: var(--color--black);
  color: var(--color--white);
  font-size: 14px;
}

.skip-link:focus-visible {
  top: 16px;
}

/* Present to a screen reader, absent to the eye. Four pages carry their <h1>
   this way -- the three commerce pages and the 404 -- because none of them
   shows a title of its own and promoting a section heading would name a
   block rather than the page. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- the controls this build retagged ----------------------------------
   Six kinds of element that were an <a> or an unfocusable <div> in the
   export are a <button> here: the hamburger, the mega-menu toggle, every FAQ
   question, the cart's open and close controls, the cart line's Remove, and
   "Place Order".

   A <button> is a form control, and the UA sheet gives one its own font,
   colour, background, border, padding and text-align -- none of which the
   design sets, because the design was written for links and divs. `font:
   inherit` does NOT bring back `letter-spacing`, `word-spacing` or
   `text-transform`: the shorthand carries none of the three, and an earlier
   conversion lost 7px per tab to exactly that.

   `:where()` so the reset scores ZERO. Every design rule -- and every rule
   in section 2b -- still wins against it exactly as it did when these were
   links, which is the whole point of resetting rather than restyling. */
:where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ---- 1 reveals ---------------------------------------------------------
   191 elements over five classes, plus the two hooks that move a CHILD.
   Webflow's three stock presets are the same 1000ms `outQuart` fade from
   100px, differing only in the axis; the two named lists are this design's
   own.

   `:where(.js)` gates the whole thing on scripting. With JavaScript off,
   nothing ever adds `.is-revealed`, so an ungated rest state would leave the
   page blank -- which is what an earlier conversion shipped. The `js` class
   is written by a one-line inline script in every <head>. */
:where(.js) .reveal {
  opacity: 0;
}

:where(.js) .reveal-up {
  transform: translate3d(0, 100px, 0);
}

:where(.js) .reveal-left {
  transform: translate3d(-100px, 0, 0);
}

:where(.js) .reveal-right {
  transform: translate3d(100px, 0, 0);
}

:where(.js) .reveal-up-left {
  transform: translate3d(100px, 100px, 0);
}

/* "Fade In 0.2 6" (a-38), the six FAQ rows: the only reveal in the payload
   that blurs. 1200ms after a 200ms delay, and the blur clears in 600ms. */
:where(.js) .reveal-blur {
  transform: translate3d(0, 50px, 0);
  filter: blur(3px);
}

.reveal.is-revealed {
  animation: reveal-in 1000ms cubic-bezier(0.165, 0.84, 0.44, 1)
    var(--reveal-delay, 0ms) both;
}

.reveal-blur.is-revealed {
  animation: reveal-blur-in 1200ms cubic-bezier(0.165, 0.84, 0.44, 1) 200ms both;
}

/* The finished state, re-stated. See the note at the top of this file. */
.reveal.is-shown {
  opacity: 1;
  transform: none;
  filter: none;
}@keyframes reveal-in {

  to {
    opacity: 1;
    transform: none;
  }}
@keyframes reveal-blur-in {

  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }}


/* Four of the home page's testimonial cards are authored `main,small,tiny`
   -- everywhere EXCEPT the tablet band, where the section reflows. Cancelling
   the rest state there is the whole of the gate: main.js still observes them,
   and adding `.is-revealed` to something already visible does nothing. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  [data-reveal-mq="not-medium"] {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* "Heading animation" (a), seventeen of them and the template's signature
   entrance: the line rises 100% out of `.animation-content-wrap`'s
   `overflow: hidden`, unskewing 5 degrees on the Y axis as it goes. */
:where(.js) [data-reveal-heading] .animation-content {
  opacity: 0;
  transform: translate3d(0, 100%, 0) skewY(5deg);
}

[data-reveal-heading].is-revealed .animation-content {
  animation: heading-in 1000ms cubic-bezier(0.165, 0.84, 0.44, 1)
    var(--reveal-delay, 0ms) both;
}

[data-reveal-heading].is-shown .animation-content {
  opacity: 1;
  transform: none;
}@keyframes heading-in {

  to {
    opacity: 1;
    transform: none;
  }}


/* "View Image Overlay" (a-20), nineteen of them: a white panel slides down
   off the picture while the picture settles out of a 1.3 zoom. The panel is
   `inset: 100% 0 0` in the design -- it sits BELOW its frame -- so the rest
   state lifts it up over the image and the animation puts it back. */
:where(.js) [data-reveal-image] .view-image {
  transform: scale(1.3);
}

:where(.js) [data-reveal-image] .view-image-overlay {
  transform: translate3d(0, -100%, 0);
}

[data-reveal-image].is-revealed .view-image {
  animation: image-settle 1100ms cubic-bezier(0.165, 0.84, 0.44, 1) 300ms both;
}

[data-reveal-image].is-revealed .view-image-overlay {
  animation: image-uncover 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 300ms both;
}

[data-reveal-image].is-shown .view-image {
  transform: none;
}

[data-reveal-image].is-shown .view-image-overlay {
  transform: translate3d(0, 0, 0);
}@keyframes image-settle {

  to {
    transform: none;
  }}
@keyframes image-uncover {

  to {
    transform: translate3d(0, 0, 0);
  }}


/* "Products Divider" (a-41): the hairline between two product cards draws
   itself across its box. All three of these elements ALSO carry `.reveal`,
   so they are already observed and already fading up; this is the second
   half of the same entrance. */
:where(.js) [data-reveal-rule] {
  width: 0%;
}

[data-reveal-rule].is-revealed {
  animation: reveal-in 1000ms cubic-bezier(0.165, 0.84, 0.44, 1)
      var(--reveal-delay, 0ms) both,
    rule-draw 500ms cubic-bezier(0.165, 0.84, 0.44, 1)
      var(--reveal-delay, 0ms) both;
}

[data-reveal-rule].is-shown {
  width: 100%;
}@keyframes rule-draw {

  to {
    width: 100%;
  }}


/* ---- 2 the navbar ------------------------------------------------------
   Above 991px the menu is an ordinary flex item in the header row and the
   wrapper this build introduced has to be invisible to layout. Below it, the
   wrapper IS the panel: it drops from the bottom edge of the header, clips
   what it holds, and the <nav> inside it stays IN FLOW so the panel has a
   height. (Webflow's own `[data-nav-menu-open] { position: absolute }` is
   there because its runtime measured the overlay and wrote a height onto it;
   transcribed literally it leaves a panel of height 0 that opens onto
   nothing, which is a bug this series has already shipped once.) */
.nav-overlay {
  display: contents;
}@media screen and (max-width: 991px) {

  .nav-overlay {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }

  .navbar.is-open .nav-overlay {
    display: block;
  }}


/* The hamburger, in place of the export's Lottie. Three bars in the 30x30
   box the design gives `.menu-icon`; opening rotates the outer two into a
   cross and fades the middle one out. `currentColor` so the design's own
   colour on the button reaches them -- the export's JSON was black-on-black
   over the dark hero and only visible because the button sits on a white
   pill there. */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  color: var(--color--black);
}

.hamburger-bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform 300ms ease, opacity 300ms ease;
}

[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
}

[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- 3 the Pages mega-menu ---------------------------------------------
   a-8 / a-75: height 0 -> auto over 400ms `ease`. `auto` is not a value CSS
   can animate to, so main.js writes the measured height and swaps it for
   `auto` at the end -- which is what Webflow's runtime did as well.

   `visibility` is what keeps the twenty links inside out of the tab order
   while the panel is shut; it is delayed by the length of the close so the
   panel does not vanish before it has finished collapsing. */
.dropdown-colum-wrapper {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: height 400ms ease, visibility 0s linear 400ms;
}

.menu-dropdown-wrapper.is-open .dropdown-colum-wrapper {
  visibility: visible;
  transition: height 400ms ease, visibility 0s;
}

/* ---- 4 the FAQ accordion ----------------------------------------------
   a-36 / a-37: the answer's height goes 0 -> auto over 300ms while the icon
   turns 180 degrees.

   `grid-template-rows: minmax(0, 0fr)` rather than a height, because there
   is no height to animate to and the answer is one paragraph of prose whose
   height depends on the width. The `minmax(0, ...)` matters: a bare `0fr`
   does not collapse a row whose content has a minimum size, which is how an
   earlier conversion shipped an accordion that never closed. */
.accordion-description-wrap {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 300ms ease;
}

.accordion-description-wrap > * {
  overflow: hidden;
  min-height: 0;
}

.accordion.is-open .accordion-description-wrap {
  grid-template-rows: minmax(0, 1fr);
}

.accordion-icon-in {
  transition: transform 500ms ease;
}

.accordion.is-open .accordion-icon-in {
  transform: rotate(180deg);
}

/* The heading this build wraps every question in, purely for the document
   outline. `display: contents` removes the BOX -- so `.accordion`'s own
   column flex layout still sees the button and the panel as its children --
   but NOT the computed style, and a percentage line-height inherits as the
   length it computed to. Without `font: inherit` every FAQ question would
   take the design's `h3` line box instead of its own. */
.accordion-heading {
  display: contents;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

/* ---- 5 the solutions strip --------------------------------------------
   a-91 / a-92, the same gesture driven by a TAB set instead of a dropdown:
   the active tab's answer opens. TAB_ACTIVE fires on
   `.single-solution-tabs-link`, which is the tab itself, so the state is the
   tab's own `.is-active`. */
.solution-accordion-ans-wrap {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  opacity: 0;
  transition: grid-template-rows 500ms cubic-bezier(0.165, 0.84, 0.44, 1),
    opacity 500ms ease;
}

.solution-accordion-ans-wrap > * {
  overflow: hidden;
  min-height: 0;
}

[data-solution].is-active .solution-accordion-ans-wrap {
  grid-template-rows: minmax(0, 1fr);
  opacity: 1;
}

/* ---- 6 tab sets --------------------------------------------------------
   The framework's own `.w-tab-pane { display: none }` and
   `.w--tab-active { display: block }` are KEPT and renamed by build_css, so
   all that is needed here is what the widget's runtime used to do to the
   LINK -- and the pricing switch's sliding pill.

   a-27 / a-28: the pill is absolutely positioned inside the FIRST tab and
   travels 100% of its own width to sit under the second, 500ms `inOutExpo`,
   while the two labels trade colour. */
.pricing-tab-active {
  transition: transform 500ms cubic-bezier(1, 0, 0, 1);
}

[data-pricing-tabs].is-second .pricing-tab-active {
  transform: translateX(100%);
}

.pricing-tab-link {
  transition: color 500ms cubic-bezier(1, 0, 0, 1);
}

[data-pricing-tabs].is-second .pricing-tab-link.first {
  color: var(--color--text-gray);
}

[data-pricing-tabs].is-second .pricing-tab-link.second {
  color: var(--color--white);
}

/* ---- 7 the counters ----------------------------------------------------
   a-49 / a-50. Each digit is two identical reels of ten reading
   `[digit, 1..9]`, stacked in a box the height of one row: moving a reel a
   full 100% of its own height spins it through 1-9 and lands the second
   reel's first row -- the same digit -- in the window.

   `.counter-train` goes up and `.counter-train-two` down, so the two halves
   of a number arrive from opposite directions. 3000ms on the payload's own
   bezier, which is steep in the middle and settles slowly: a reel that eases
   evenly does not read as a mechanism. */
.counter-train,
.counter-train-two {
  transition: transform 3000ms cubic-bezier(0.784, 0.325, 0.222, 0.98);
}

[data-counter].is-counted .counter-train {
  transform: translate3d(0, -100%, 0);
}

[data-counter].is-counted .counter-train-two {
  transform: translate3d(0, 100%, 0);
}

/* ---- 8 the client-logo ticker -----------------------------------------
   a-44: `.ticker-item-wrap` travels -100% of its own width over 16 seconds.

   The payload has three groups -- rest, the 16s journey, and an instant snap
   back to 0 -- and no `loop` flag, so on the published site the strip pans
   once and then never moves again. That is an interaction that was never
   finished rather than a design, so it loops here; main.js doubles the run
   of logos so -100% lands on an identical copy and the seam is invisible. */
[data-ticker] .ticker-item-wrap {
  animation: ticker 16s linear infinite;
}@keyframes ticker {

  to {
    transform: translate3d(-100%, 0, 0);
  }}
@media (prefers-reduced-motion: reduce) {

  [data-ticker] .ticker-item-wrap {
    animation: none;
  }}


/* ---- 9 the button rolls ------------------------------------------------
   One gesture, authored thirteen times over five families of class name: the
   label rolls up out of its `overflow: hidden` wrap while its duplicate
   arrives from below, 500ms `outQuart`.

   Every one of those thirteen lists also carries two steps that target `{}`
   -- an empty object -- because the designer deleted the icon they belonged
   to and Webflow kept the steps. Only the three families that still HAVE an
   icon move one. */
[data-hover] .primary-button-text,
[data-hover] .primary-button-hover-text,
[data-hover] .secondary-button-text,
[data-hover] .secondary-button-hover-text,
[data-hover] .utlity-button-text,
[data-hover] .utlity-button-hover-text,
[data-hover] .utlity-button-icon,
[data-hover] .utlity-button-hover-icon,
[data-hover] .brand-button-icon-in,
[data-hover] .brand-button-icon-out,
[data-hover] .service-arrow-in,
[data-hover] .service-arrow-out,
[data-hover] .social-icon-in,
[data-hover] .social-icon-out {
  transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* The rest state of every second layer: waiting one full height below. */
[data-hover] .primary-button-hover-text,
[data-hover] .secondary-button-hover-text,
[data-hover] .utlity-button-hover-text {
  transform: translate3d(0, 100%, 0);
}

[data-hover]:hover .primary-button-text,
[data-hover]:focus-visible .primary-button-text,
[data-hover]:hover .secondary-button-text,
[data-hover]:focus-visible .secondary-button-text,
[data-hover]:hover .utlity-button-text,
[data-hover]:focus-visible .utlity-button-text {
  transform: translate3d(0, -100%, 0);
}

[data-hover]:hover .primary-button-hover-text,
[data-hover]:focus-visible .primary-button-hover-text,
[data-hover]:hover .secondary-button-hover-text,
[data-hover]:focus-visible .secondary-button-hover-text,
[data-hover]:hover .utlity-button-hover-text,
[data-hover]:focus-visible .utlity-button-hover-text {
  transform: translate3d(0, 0, 0);
}

/* The three rolls that kept their icon. The pair leaves up-and-right and
   arrives from down-and-left, which is the same diagonal on all three. */
[data-hover] .utlity-button-hover-icon,
[data-hover] .brand-button-icon-out,
[data-hover] .service-arrow-out {
  transform: translate3d(-100%, 100%, 0);
}

[data-hover]:hover .utlity-button-icon,
[data-hover]:focus-visible .utlity-button-icon,
[data-hover]:hover .brand-button-icon-in,
[data-hover]:focus-visible .brand-button-icon-in,
[data-hover]:hover .service-arrow-in,
[data-hover]:focus-visible .service-arrow-in {
  transform: translate3d(100%, -100%, 0);
}

[data-hover]:hover .utlity-button-hover-icon,
[data-hover]:focus-visible .utlity-button-hover-icon,
[data-hover]:hover .brand-button-icon-out,
[data-hover]:focus-visible .brand-button-icon-out,
[data-hover]:hover .service-arrow-out,
[data-hover]:focus-visible .service-arrow-out {
  transform: translate3d(0, 0, 0);
}

/* The service card's button (a-23 / a-24): the roll, plus the arrow tile and
   the button itself trading black for white. The colours are the payload's
   `globalSwatchId`s, which is what the runtime read -- not the rgb triple
   stored beside them -- so they are emitted as the design's own variables
   and follow a buyer who re-themes the template. */
[data-hover="service-button"],
[data-hover="service-button"] .service-arrow-box-wrap {
  transition: background-color 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-hover="service-button"] .service-arrow-out {
  opacity: 0;
  transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1),
    opacity 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-hover="service-button"]:hover,
[data-hover="service-button"]:focus-visible {
  background-color: var(--color--black);
}

[data-hover="service-button"]:hover .secondary-button-text,
[data-hover="service-button"]:focus-visible .secondary-button-text,
[data-hover="service-button"]:hover .secondary-button-hover-text,
[data-hover="service-button"]:focus-visible .secondary-button-hover-text {
  color: var(--color--white);
}

[data-hover="service-button"]:hover .service-arrow-box-wrap,
[data-hover="service-button"]:focus-visible .service-arrow-box-wrap {
  background-color: var(--color--white);
}

[data-hover="service-button"]:hover .service-arrow-out,
[data-hover="service-button"]:focus-visible .service-arrow-out {
  opacity: 1;
}

/* The product card's button (a-42 / a-43): the roll, plus the button
   inverting. Its label is `.primary-button-text.black`, so the colour has to
   move with the background or the words disappear into it. */
[data-hover="products-button"] {
  transition: background-color 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-hover="products-button"] .primary-button-text,
[data-hover="products-button"] .primary-button-hover-text {
  transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1),
    color 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-hover="products-button"]:hover,
[data-hover="products-button"]:focus-visible {
  background-color: var(--color--black);
}

[data-hover="products-button"]:hover .primary-button-text,
[data-hover="products-button"]:focus-visible .primary-button-text,
[data-hover="products-button"]:hover .primary-button-hover-text,
[data-hover="products-button"]:focus-visible .primary-button-hover-text {
  color: var(--color--white);
}

/* The social icons (a-6 / a-7), 23 of them: the visible glyph leaves to the
   right while its twin arrives from the left. */
[data-hover="social-icon"] .social-icon-out {
  transform: translate3d(-100%, 0, 0);
}

[data-hover="social-icon"]:hover .social-icon-in,
[data-hover="social-icon"]:focus-visible .social-icon-in {
  transform: translate3d(100%, 0, 0);
}

[data-hover="social-icon"]:hover .social-icon-out,
[data-hover="social-icon"]:focus-visible .social-icon-out {
  transform: translate3d(0, 0, 0);
}

/* The project card (a-60 / a-61): its caption panel fades in over the
   photograph. Gated `main,medium,small` -- at 479px and below the design
   already shows the panel and dims the picture behind it. */
[data-hover="project-card"] .hero-project-overly-box {
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-hover="project-card"]:hover .hero-project-overly-box,
[data-hover="project-card"]:focus-within .hero-project-overly-box {
  opacity: 1;
}@media screen and (max-width: 479px) {

  [data-hover="project-card"][data-hover-mq] .hero-project-overly-box {
    opacity: 1;
  }}


/* `.view-image` scaling inside its `overflow: hidden` frame (a-76 / a-77 and
   a-88 / a-89, the same 500ms scale authored twice under two names).

   This one has to come AFTER the image reveal above, and at the same
   specificity: the reveal's finished state sets `transform: none` on the
   same element, and the later rule is what lets the hover move it again. */
[data-hover="image-zoom"] .view-image {
  transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-hover="image-zoom"]:hover .view-image,
[data-hover="image-zoom"]:focus-within .view-image {
  transform: scale(1.05);
}

/* ---- 10 the two expanding card rows -----------------------------------
   a-63 to a-70. Hovering a card widens it, narrows its two siblings, and
   swaps which of its two stacked pictures shows. main.js moves
   `.is-expanded`; everything else is here.

   There is no "hover out" list in the payload, so the row stays where the
   last hover left it -- and the rest state IX2 writes on load is the first
   card open, which is also what the design sheet says. */
[data-expand] {
  transition: width 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-expand] .compare-image-box,
[data-expand] .compare-after-image-box,
[data-expand] .process-single-card,
[data-expand] .process-main-image-box {
  transition: opacity 500ms ease;
}

/* The open card shows its "before" photograph; the two beside it show the
   dimmed "after" overlay. */
[data-expand="news"].is-expanded .compare-image-box {
  opacity: 1;
}

[data-expand="news"].is-expanded .compare-after-image-box {
  opacity: 0;
}

[data-expand="news"]:not(.is-expanded) .compare-image-box {
  opacity: 0;
}

[data-expand="news"]:not(.is-expanded) .compare-after-image-box {
  opacity: 1;
}

/* The process row does the same with a card that holds its own copy: open
   shows the numbered panel, closed shows the bare photograph. */
[data-expand="process"].is-expanded .process-single-card {
  opacity: 1;
}

[data-expand="process"].is-expanded .process-main-image-box {
  opacity: 0;
}

[data-expand="process"]:not(.is-expanded) .process-single-card {
  opacity: 0;
}

[data-expand="process"]:not(.is-expanded) .process-main-image-box {
  opacity: 1;
}

/* The widths, at the breakpoints their own events are authored for. Below
   992px the design lays the process row out as three static stacked cards
   and hides the photographs, so none of this applies there. */
/* THE WIDTHS WAIT FOR A HOVER. Both width lists have ONE action group and
   `useFirstGroupAsInitialState: false`, so IX2 writes no rest state for them
   -- the widths a visitor first sees are the design sheet's own. That matters
   below 992px, where the design gives the wide card the full row: applying
   the hovered widths at rest laid all three cards side by side and the home
   page's compare section came out 127px shorter than the published one.

   `.is-hovered` goes on the ROW, and main.js adds it the first time a card is
   entered. */
@media screen and (min-width: 480px) {
  .is-hovered [data-expand="news"].is-expanded {
    width: 55%;
  }

  .is-hovered [data-expand="news"]:not(.is-expanded) {
    width: 23%;
  }
}@media screen and (min-width: 992px) {

  .is-hovered [data-expand="process"].is-expanded {
    width: 52%;
  }

  .is-hovered [data-expand="process"].process-card-50:not(.is-expanded) {
    width: 23.7%;
  }

  .is-hovered [data-expand="process"].process-card-25:not(.is-expanded) {
    width: 28%;
  }}
@media screen and (max-width: 991px) {

  /* The design shows all three process cards expanded and static here, so
     the class main.js moves must not dim any of them. */
  [data-expand="process"]:not(.is-expanded) .process-single-card {
    opacity: 1;
  }}


/* ---- 11 the scroll scrubs ---------------------------------------------
   Four SCROLLING_IN_VIEW groups. main.js writes each section's own progress
   through the viewport as `--scroll-progress`, 0 to 1, and every rule below
   reads it; there is no animation loop and nothing is written to an element
   from script.

   A KEYFRAME PERCENTAGE IS A POINT ON THAT PROGRESS, not a fraction of the
   whole travel, so each value is re-based onto its own segment with
   `clamp()`. Writing `translateX(calc(-105% * var(--p)))` instead -- which
   is the obvious shorthand -- moves the right distance over the wrong range,
   and a scrub that MOVES is not a scrub that moves correctly. */
[data-scrub],
[data-scrub-box] {
  --p: var(--scroll-progress, 0);
}

/* The testimonial rail, authored twice on the same element: 0 -> -20%
   between 20% and 40% of the section's progress above 991px, and 0 -> -105%
   between 20% and 85% in the tablet band, where the section is 300vh tall
   and the cards are read by scrolling rather than glancing. */
@media screen and (min-width: 992px) {
  [data-scrub="testimonials"] .testimonials-grid {
    transform: translate3d(
      calc(-20% * clamp(0, calc((var(--p) - 0.2) / 0.2), 1)), 0, 0);
  }
}@media screen and (min-width: 768px) and (max-width: 991px) {

  [data-scrub="testimonials"] .testimonials-grid {
    transform: translate3d(
      calc(-105% * clamp(0, calc((var(--p) - 0.2) / 0.65), 1)), 0, 0);
  }}


/* The company page's six values cards (a-51): the grid slides left while the
   cards rise into place one after another, each over its own stretch of the
   section's 300vh. */
@media screen and (min-width: 992px) {
  [data-scrub="values"] .values-wrap {
    transform: translate3d(
      calc(-55% * clamp(0, calc((var(--p) - 0.15) / 0.65), 1)), 0, 0);
  }

  [data-scrub="values"] .values-single-card.card-two {
    transform: translate3d(0,
      calc(50px * clamp(0, calc((0.4 - var(--p)) / 0.25), 1)), 0);
  }

  [data-scrub="values"] .values-single-card.card-three {
    transform: translate3d(0,
      calc(100px * clamp(0, calc((0.4 - var(--p)) / 0.1), 1)), 0);
  }

  [data-scrub="values"] .values-single-card.card-four {
    transform: translate3d(0,
      calc(125px * clamp(0, calc((0.6 - var(--p)) / 0.2), 1)), 0);
  }

  [data-scrub="values"] .values-single-card.card-five {
    transform: translate3d(0,
      calc(150px * clamp(0, calc((0.7 - var(--p)) / 0.2), 1)), 0);
  }

  [data-scrub="values"] .values-single-card.card-six {
    transform: translate3d(0,
      calc(175px * clamp(0, calc((0.7 - var(--p)) / 0.1), 1)), 0);
  }
}

/* The three stacked service cards (a-62): each shrinks as the one below it
   comes up, so the pile reads as depth rather than as three equal cards. */
@media screen and (min-width: 480px) {
  [data-scrub="service-cards"] .hero-service-single-card.one {
    transform: scale(calc(1 - 0.3 * clamp(0, calc(var(--p) / 0.2), 1)));
  }

  [data-scrub="service-cards"] .hero-service-single-card.two {
    transform: scale(calc(1 - 0.2 * clamp(0, calc(var(--p) / 0.4), 1)));
  }

  [data-scrub="service-cards"] .hero-service-single-card.three {
    transform: scale(calc(1 - 0.1 * clamp(0, calc(var(--p) / 0.6), 1)));
  }
}

/* ---- 12 IX3's scrubbed heading fade -----------------------------------
   `t-cb9d9431` and `t-0614174c`: the characters of `[data-split-fade]` go
   from 40% to 100% opacity as `[data-scrub-box]` passes, staggered so the
   line lights from the left.

   main.js splits the line into `<span class="char">`s carrying their own
   position as a fraction of the whole (`--char`), which is what lets one
   rule cover a four-word heading and a forty-word one. Words are the
   inline-blocks the line breaker sees; the characters inside them are not,
   or a heading would wrap mid-word. */
.split-word {
  display: inline-block;
  white-space: nowrap;
}

.char {
  display: inline-block;
  opacity: calc(
    0.4 + 0.6 *
      clamp(0, calc((var(--scroll-progress, 0) - var(--char, 0) * 0.6) / 0.4), 1)
  );
}@media (prefers-reduced-motion: reduce) {

  .char {
    opacity: 1;
  }}


/* ---- 13 the cart ------------------------------------------------------
   The drawer is `position: fixed; inset: 0` in the design and the runtime
   toggled its inline `display`. `.is-open` does that here.

   Both the basket and the "No items found" panel are `display: flex` in the
   design, so whichever is not current has to be turned off -- otherwise an
   empty cart shows an empty list AND the empty state, one under the other. */
.cart-modal {
  display: none;
}

.cart-modal.is-open {
  display: flex;
}

.cart-form:not(.is-shown),
.cart-empty:not(.is-shown) {
  display: none;
}

/* ---- 14 the background video's control --------------------------------
   Two <span>s, one per glyph, with `hidden` on whichever is not current.
   `hidden` is only a `display: none` in the UA sheet, which the button's own
   flex layout beats -- so framework.hand.css restates it as `!important` on
   `.play > [hidden]`, exactly as Webflow's own rule did. What is left here
   is the box the two glyphs sit in. */
.play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #00000059;
  color: var(--color--white);
  cursor: pointer;
}

.play span {
  display: flex;
}

/* ---- 15 the demo forms ------------------------------------------------
   Webflow's success and error blocks, driven by main.js. `hidden` is written
   by transform.py so they ship closed even with scripting off. */
.form-success,
.form-error {
  display: block;
}

[hidden] {
  display: none !important;
}