/* PUCHIX - consolidated stylesheet (hand-cleaned Webflow export).
   1 reset  2 base framework (load-bearing rules, renamed .wf-)
   2b widget geometry the dropped runtime rules used to provide
   3 Puchix design (incl. the renamed commerce layout)
   4 components (vanilla replacements for the Webflow runtime and
   its IX2 interactions).
   Fonts: assets/fonts/fonts.css (Urbanist, self-hosted woff2). */

/* ======================================================================
   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, .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-)
   ====================================================================== */
[class^="w-icon-"], [class*=" w-icon-"] {
  
  font-family: 'webflow-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* {
  -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, h2, h3, h4, h5, h6, .heading-scale-1, .heading-scale-2, .heading-scale-3, .heading-scale-4, .heading-scale-5, .heading-scale-6 {
  font-weight: bold;
  margin-bottom: 10px;
}
h1, .heading-scale-1 {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}
h2, .heading-scale-2 {
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}
h3, .heading-scale-3 {
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px;
}
h4, .heading-scale-4 {
  font-size: 18px;
  line-height: 24px;
  margin-top: 10px;
}
h5, .heading-scale-5 {
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
}
h6, .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-form-label {
  display: inline-block;
  cursor: pointer;
  font-weight: normal;
  margin-bottom: 0px;
}
.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 .richtext-figure-selected.richtext-figure-type-video div:after, .richtext .richtext-figure-selected[data-rt-type="video"] div:after {
  outline: 2px solid #2895f7;
}
.richtext .richtext-figure-selected.richtext-figure-type-image div, .richtext .richtext-figure-selected[data-rt-type="image"] div {
  outline: 2px solid #2895f7;
}
.richtext figure.richtext-figure-type-video > div:after, .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 figcaption.richtext-figcaption-placeholder {
  opacity: 0.6;
}
.richtext figure div {
  
  font-size: 0px;
  color: transparent;
}
.richtext figure.richtext-figure-type-image, .richtext figure[data-rt-type="image"] {
  display: table;
}
.richtext figure.richtext-figure-type-image > div, .richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}
.richtext figure.richtext-figure-type-image > figcaption, .richtext figure[data-rt-type="image"] > figcaption {
  display: table-caption;
  caption-side: bottom;
}
.richtext figure.richtext-figure-type-video, .richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}
.richtext figure.richtext-figure-type-video iframe, .richtext figure[data-rt-type="video"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.richtext figure.richtext-figure-type-video > div, .richtext figure[data-rt-type="video"] > div {
  width: 100%;
}
.richtext figure.richtext-align-center {
  margin-right: auto;
  margin-left: auto;
  clear: both;
}
.richtext figure.richtext-align-center.richtext-figure-type-image > div, .richtext figure.richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}
.richtext figure.richtext-align-normal {
  clear: both;
}
.richtext figure.richtext-align-fullwidth {
  width: 100%;
  max-width: 100%;
  text-align: center;
  clear: both;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.richtext figure.richtext-align-fullwidth > div {
  display: inline-block;
  
  padding-bottom: inherit;
}
.richtext figure.richtext-align-fullwidth > figcaption {
  display: block;
}
.richtext figure.richtext-align-floatleft {
  float: left;
  margin-right: 15px;
  clear: none;
}
.richtext figure.richtext-align-floatright {
  float: right;
  margin-left: 15px;
  clear: none;
}
.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);
  }
}
/* ======================================================================
   2b. Widget geometry the dropped rules used to provide
   ====================================================================== */
/* Geometry the dropped Webflow widget rules used to provide.
 *
 * build_css drops the `.w-nav*` / `.w-dropdown*` / `.w-icon-*` rules because the
 * runtime that drove them is gone. Those rules also carried real layout that the
 * design sheet silently relies on, so it is transcribed here against this
 * design's own class names and emitted BETWEEN the framework and the design --
 * the design then keeps overriding it exactly as it did in the export.
 *
 * Everything in this file was read off webflow.css; nothing is invented. */


/* ---- navbar ------------------------------------------------------------- */
/* `.w-nav` -- the design overrides background and z-index, not position. */
.navbar-container {
  position: relative;
}
/* `.w-nav-brand`. Its `float: left` did nothing (the parent is flex), but the
   padding below 767px is real -- and there the design zeroes it again. */
.navbar-brand {
  position: relative;
  text-decoration: none;
  padding-left: 10px;
}
/* `.w-nav-menu`. `float: right` was likewise inert on a flex item. */
.nav-menu-wrapper {
  position: relative;
}
/* `.w-nav-button` -- hidden above the collapse breakpoint (`data-collapse
   ="medium"`, so 991px). The design turns it into a 32px flex box at <=991px, which is exactly where the runtime used to show it. */
.menu-button {
  position: relative;
  display: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* The runtime lifted the open menu into a generated `.w-nav-overlay` wrapper.
   That wrapper is written into the markup instead, and above the collapse
   breakpoint `display: contents` takes it back out of the box tree so
   `.nav-menu-wrapper` stays a direct flex child of `.navbar-wrapper`. */
.nav-overlay {
  display: contents;
}
@media screen and (max-width: 991px) {
/* `.w-nav[data-collapse='medium'] .w-nav-menu { display: none }
` */
  .nav-menu-wrapper {
    display: none;
  }
/* `.w-nav-overlay` */
  .nav-overlay {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }
.nav-overlay.is-open {
    display: block;
  }
/* `[data-nav-menu-open]` was the one declaration the runtime forced past the
     design sheet, plus `.w-nav-overlay [data-nav-menu-open] { top: 0 }
`. */
  .nav-overlay.is-open .nav-menu-wrapper {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-width: 200px;
    text-align: center;
    overflow: visible;
  }
}
/* ---- nav dropdown ------------------------------------------------------- */
/* `.w-dropdown` */
.nav-dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  z-index: 900;
}
/* `.w-dropdown-toggle`. The design replaces the 40px right padding with 18px
   and adds its own type, so only the box, the cursor and the nowrap survive. */
.nav-dropdown-toggle {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  padding-right: 40px;
  margin-left: auto;
  margin-right: auto;
}
/* `.w-dropdown-list` + `.w-dropdown-list.w--open`. Note this is
   `.nav-dropdown-list-WRAP`: `.nav-dropdown-list` is one of the design's own
   class names, for the three columns inside the panel. The design's
   `left: -544px` on the open desktop panel is what centres it under the nav, so losing the `.w--open` -> `.is-open` remap does not merely change a colour;
   the panel lands hard against its toggle and overflows the viewport. */
.nav-dropdown-list-wrap {
  position: absolute;
  display: none;
  min-width: 100%;
}
.nav-dropdown-list-wrap.is-open {
  display: block;
}
/* `.w-icon-dropdown-toggle`. The glyph came from Webflow's icon webfont
   (U+E603); it is an inline <svg> in the markup now, so only the box remains.
   The design then sets `margin-right: 0; font-size: 12px`. */
.nav-dropdown-icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-right: 20px;
  width: 1em;
  height: 1em;
}
.nav-dropdown-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
/* ---- widgets rebuilt as native elements --------------------------------- */
/* Four things the runtime drove as a <div> or an <a> are real <button>s now:
   the tab links, the accordion rows, the mobile menu toggle and the dropdown
   toggle. That drags in the UA button styling -- a 2px outset border, a grey
   background and 13.33px Arial -- none of which the design sheet overrides, because it never had a button to override.

   `:where()` scores zero, so this beats the UA sheet (author origin always
   does) while losing to every authored rule, including the design's own
   `.nav-dropdown-toggle`, `.faq-question-wrap` and `.menu-button`. */
:where(button.tabset-link, button.menu-button, button.nav-dropdown-toggle, button.cart-open, button.cart-close, button.remove-button, button.cookies-button, button.modal-close) {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  width: auto;
  text-align: inherit;
  cursor: pointer;

  /* The UA sheet resets these on form controls, and `font: inherit` does NOT
     bring them back -- they are not part of the `font` shorthand. This design
     sets `letter-spacing: -.02em` on its headings and button text and relies on
     it reaching every line; without this the accordion questions measure
     narrower than the export and wrap a line early. */
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-indent: inherit;
  text-shadow: inherit;
}
/* Webflow's custom checkbox is two elements: a real <input> that is visually
   hidden, and a styled <div> proxy beside it that shows the state.

   The export hid the INPUT with an inline `opacity: 0` -- which the transform's
   baked-state filter strips, because IX2 uses inline opacity for its reveal
   rest states. So the rule is restated here, keyed on the input itself. Keying
   it on `.checkbox-input` hides the PROXY instead and leaves the native
   checkbox on show, which is the opposite of the intent. */
.wf-checkbox input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
/* Screen-reader-only. The three commerce pages carry no visible page title, so
   transform.py gives each one a heading here rather than promoting a section
   heading that does not name the page. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ======================================================================
   3. Puchix design
   ====================================================================== */
:root {
  --color--site-bg: #faf6f5;
  --font-weight--font-family: Urbanist, Arial, sans-serif;
  --color--grey-1: #616161;
  --_typography---paragraph-02--font-size: 16px;
  --_typography---paragraph-02--line-height: 24px;
  --font-weight--medium: 500;
  --color--dark: black;
  --_typography---h1--font-size: 62px;
  --_typography---h1--line-height: 70px;
  --font-weight--semi-bold: 600;
  --_typography---h1--letter-spacing: var(--later-spacing--2);
  --_typography---h2--font-size: 56px;
  --_typography---h2--line-height: 62px;
  --_typography---h2--font-weight: var(--font-weight--semi-bold);
  --_typography---h2--letter-spacing: var(--later-spacing--2);
  --_typography---h3--font-size: 42px;
  --_typography---h3--line-height: 50px;
  --_typography---h3--font-weight: var(--font-weight--semi-bold);
  --_typography---h3--letter-spacing: 0px;
  --_typography---h4--font-size: 32px;
  --_typography---h4--line-height: 40px;
  --_typography---h4--font-weight: var(--font-weight--semi-bold);
  --_typography---h4--letter-spacing: var(--later-spacing--2);
  --_typography---h5--font-size: 24px;
  --_typography---h5--line-height: 32px;
  --_typography---h5--font-weight: var(--font-weight--semi-bold);
  --_typography---h5--letter-spacing: var(--later-spacing--2);
  --_typography---h6--font-size: 20px;
  --_typography---h6--line-height: 30px;
  --_typography---h6--font-weight: var(--font-weight--semi-bold);
  --_typography---h6--letter-spacing: var(--later-spacing--2);
  --_typography---paragraph-01--font-size: 18px;
  --_typography---paragraph-01--line-height: 27px;
  --color--light: white;
  --later-spacing--100: 100%;
  --_responsive---padding--padding-80-px: 80px;
  --_responsive---padding--padding-160-px: 160px;
  --_responsive---margin--margin-100-px: 100px;
  --color--secondary: #80b700;
  --_typography---tag--font-size: 14px;
  --_typography---tag--line-height: 20px;
  --later-spacing--2: -.02em;
  --_typography---display-01--font-size: 180px;
  --_typography---display-01--line-height: 180px;
  --font-weight--normal: 400;
  --_typography---display-01--letter-spacing: var(--later-spacing--4);
  --_typography---display-02--font-size: 82px;
  --_typography---display-02--line-height: 88px;
  --_typography---display-02--letter-spacing: var(--later-spacing--4);
  --color--primary: #f5fe90;
  --color--grey-2: #c3c3c2;
  --_typography---button-text--font-size: 16px;
  --_typography---button-text--line-height: 24px;
  --_responsive---border-radius-12-px: 12px;
  --color--transparent: #0000;
  --_responsive---border-radius-10-px: 10px;
  --_responsive---border-radius-8-px: 8px;
  --_responsive---margin--margin-60-px: 60px;
  --_responsive---padding--padding-32-px: 32px;
  --_responsive---border-radius-16-px: 16px;
  --_responsive---margin--margin-80-px: 80px;
  --_responsive---padding--padding-100-px: 100px;
  --_responsive---padding--padding-24-px: 24px;
  --_responsive---padding--padding-134-px: 134px;
  --_responsive---padding--padding-60-px: 60px;
  --_responsive---padding--padding-40-px: 40px;
  --_responsive---padding--padding-30-px: 30px;
  --_responsive---padding--padding-20-px: 20px;
  --_responsive---padding--padding-27-px: 27px;
  --_responsive---margin--margin-160-px: 160px;
  --_responsive---margin--margin-140-px: 140px;
  --_responsive---margin--margin-120-px: 120px;
  --_responsive---margin--margin-96-px: 96px;
  --_responsive---margin--margin-72-px: 72px;
  --_responsive---margin--margin-70-px: 70px;
  --_responsive---padding--padding-173-px: 173px;
  --_responsive---padding--padding-140-px: 140px;
  --later-spacing--1: -.01em;
  --_responsive---padding--padding-120-px: 120px;
  --later-spacing--3: -.03em;
  --_typography---display-01--font-weight: var(--font-weight--normal);
  --_typography---display-02--font-weight: var(--font-weight--medium);
  --_typography---h1--font-weight: var(--font-weight--semi-bold);
  --_responsive---padding--padding-70-px: 70px;
  --later-spacing--4: -.04em;
  --_typography---paragraph-01--font-weight: var(--font-weight--medium);
  --_typography---paragraph-01--letter-spacing: 0px;
  --_typography---paragraph-02--font-weight: var(--font-weight--medium);
  --_typography---paragraph-02--letter-spacing: 0px;
  --_typography---button-text--font-weight: var(--font-weight--semi-bold);
  --_responsive---padding--padding-22-px: 22px;
  --_typography---button-text--letter-spacing: var(--later-spacing--2);
  --_typography---tag--font-weight: var(--font-weight--semi-bold);
  --_typography---tag--letter-spacing: var(--later-spacing--2);
  --font-weight--bold: 700;
}
.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-commercecartitemimage {
  width: 60px;
  height: 0%;
}
.wf-commerce-commercecartiteminfo {
  flex-direction: column;
  flex: 1;
  margin-left: 16px;
  margin-right: 16px;
  display: flex;
}
.wf-commerce-commercecartproductname {
  font-weight: 700;
}
.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-checkbox {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}
.wf-checkbox:before {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}
.wf-checkbox:after {
  content: " ";
  clear: both;
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}
.checkbox-input {
  float: left;
  margin: 4px 0 0 -20px;
  line-height: normal;
}
.checkbox-input-custom {
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 12px;
  height: 12px;
}
.checkbox-input-custom.is-checked {
  background-color: #3898ec;
  background-image: url('../images/checkbox-checkmark.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #3898ec;
}
.checkbox-input-custom.is-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}
.wf-commerce-commerceaddtocartform {
  margin: 0 0 15px;
}
.wf-commerce-commerceaddtocartquantityinput {
  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-commerceaddtocartquantityinput::placeholder {
  color: #999;
}
.wf-commerce-commerceaddtocartquantityinput:focus {
  border-color: #3898ec;
  outline-style: none;
}
.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-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-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: 767px) {
.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-commerceaddtocartquantityinput, .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--site-bg);
  font-family: var(--font-weight--font-family);
  color: var(--color--grey-1);
  font-size: var(--_typography---paragraph-02--font-size);
  line-height: var(--_typography---paragraph-02--line-height);
  font-weight: var(--font-weight--medium);
}
h1, .heading-scale-1 {
  color: var(--color--dark);
  font-size: var(--_typography---h1--font-size);
  line-height: var(--_typography---h1--line-height);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--_typography---h1--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
}
h2, .heading-scale-2 {
  color: var(--color--dark);
  font-size: var(--_typography---h2--font-size);
  line-height: var(--_typography---h2--line-height);
  font-weight: var(--_typography---h2--font-weight);
  letter-spacing: var(--_typography---h2--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
}
h3, .heading-scale-3 {
  color: var(--color--dark);
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--_typography---h3--font-weight);
  letter-spacing: var(--_typography---h3--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
}
h4, .heading-scale-4 {
  color: var(--color--dark);
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--_typography---h4--font-weight);
  letter-spacing: var(--_typography---h4--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
}
h5, .heading-scale-5 {
  color: var(--color--dark);
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight);
  letter-spacing: var(--_typography---h5--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
}
h6, .heading-scale-6 {
  color: var(--color--dark);
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--_typography---h6--font-weight);
  letter-spacing: var(--_typography---h6--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
}
p {
  font-size: var(--_typography---paragraph-01--font-size);
  line-height: var(--_typography---paragraph-01--line-height);
  font-weight: var(--font-weight--medium);
  margin-bottom: 0;
}
ul {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}
.utility-page-wrap {
  background-color: var(--color--light);
  flex-flow: column;
  height: auto;
  display: flex;
}
.utility-page-content {
  width: var(--later-spacing--100);
  background-color: var(--color--site-bg);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding-top: 180px;
  padding-bottom: 180px;
  display: flex;
}
.utility-page-form {
  width: 536px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-direction: column;
  align-items: stretch;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}
.page-wrapper {
  position: relative;
}
.page-wrapper.bg-white {
  background-color: var(--color--light);
}
.container {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.container.hero-container {
  z-index: 2;
  height: var(--later-spacing--100);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}
.container.expertise-container {
  z-index: 1;
  position: relative;
}
.container.service-hero-container {
  z-index: 1;
  height: var(--later-spacing--100);
  position: relative;
}
.style-guide {
  padding-top: var(--_responsive---padding--padding-80-px);
  padding-bottom: var(--_responsive---padding--padding-160-px);
}
.style-guide-bottom {
  margin-top: var(--_responsive---margin--margin-100-px);
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  flex-flow: column;
  display: flex;
}
.style-guide-item {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.style-guide-item-left {
  position: sticky;
  top: 25px;
}
.style-guide-item-right {
  width: 768px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}
.tag-wrap {
  background-color: var(--color--secondary);
  border-radius: 3px;
  padding: 2px 11px;
}
.tag-wrap.bg-dark {
  background-color: var(--color--dark);
}
.tag {
  color: var(--color--light);
  font-size: var(--_typography---tag--font-size);
  line-height: var(--_typography---tag--line-height);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--later-spacing--2);
  text-transform: uppercase;
}
.tag.text-secondary {
  color: var(--color--secondary);
}
.typography-list {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.paragraph-01 {
  color: var(--color--grey-1);
  font-family: Urbanist, Arial, sans-serif;
  font-size: var(--_typography---paragraph-01--font-size);
  line-height: var(--_typography---paragraph-01--line-height);
  font-weight: var(--font-weight--medium);
}
.paragraph-01.text-dark._01 {
  margin-left: 8px;
}
.paragraph-01.about-subheading {
  color: #121212b3;
}
.paragraph-01.text-white-80 {
  color: #fffc;
}
.paragraph-01.sub-heading-blog {
  max-width: 520px;
}
.display-01 {
  color: var(--color--dark);
  font-size: var(--_typography---display-01--font-size);
  line-height: var(--_typography---display-01--line-height);
  font-weight: var(--font-weight--normal);
  letter-spacing: var(--_typography---display-01--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
}
.display-02 {
  color: var(--color--dark);
  font-size: var(--_typography---display-02--font-size);
  line-height: var(--_typography---display-02--line-height);
  font-weight: var(--font-weight--medium);
  letter-spacing: var(--_typography---display-02--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
}
.vertical-line-wrap {
  background-color: var(--color--primary);
  width: 100%;
  height: 1px;
}
.vertical-line {
  background-color: #e1e1e1;
  width: 100%;
  height: 1px;
}
.text-dark {
  color: var(--color--dark);
}
.paragraph-02 {
  font-size: var(--_typography---paragraph-02--font-size);
  line-height: var(--_typography---paragraph-02--line-height);
  font-weight: var(--font-weight--medium);
}
.paragraph-02.text-grey-02 {
  color: var(--color--grey-2);
}
.paragraph-02.blog-subtitle {
  color: #767676;
}
.paragraph-02.text-grey-01 {
  color: var(--color--grey-1);
}
.paragraph-02.price-duration {
  color: var(--color--dark);
  margin-bottom: 6px;
}
.button-text {
  color: var(--color--light);
  font-size: var(--_typography---button-text--font-size);
  line-height: var(--_typography---button-text--line-height);
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: var(--later-spacing--2);
}
.button-text.text-dark {
  color: var(--color--dark);
}
.button-text.contact-link {
  max-width: 194px;
  color: var(--color--secondary);
  text-decoration: none;
  transition: color .3s;
}
.button-text.contact-link:hover {
  color: #540aff;
}
.button-text.license-link {
  color: var(--color--dark);
  text-underline-position: under;
  text-decoration-thickness: 2px;
  transition: color .3s;
}
.button-text.license-link:hover {
  color: var(--color--secondary);
}
.style-guide-color-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.color-block-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.color-block {
  width: var(--later-spacing--100);
  border-radius: var(--_responsive---border-radius-12-px);
  height: 178px;
}
.color-block.bg-primary {
  background-color: var(--color--primary);
}
.color-block.bg-secondary {
  background-color: var(--color--secondary);
}
.color-block.bg-dark {
  background-color: var(--color--dark);
}
.color-block.bg-light {
  background-color: var(--color--light);
}
.color-block.bg-light.broder-grey-2 {
  border: 1px solid var(--color--grey-2);
}
.color-block.bggrey-1 {
  background-color: var(--color--grey-1);
}
.color-block.bg-grey-2 {
  background-color: var(--color--grey-2);
}
.color-block.site-bg {
  background-color: var(--color--site-bg);
}
.color-block-text {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.button-01 {
  border: 1px solid var(--color--transparent);
  background-color: var(--color--primary);
  border-radius: 100px;
  padding: 12px 24px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.button-01:where(.variant-button-01-hero) {
  padding-top: 19px;
  padding-bottom: 19px;
}
.button-01.pricing-button {
  width: var(--later-spacing--100);
}
.button-01.hero-butoon {
  padding-top: 19px;
  padding-bottom: 19px;
}
.button-01-wrap {
  z-index: 3;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.button-hover-circle {
  z-index: 2;
  width: var(--later-spacing--100);
  height: var(--later-spacing--100);
  background-color: var(--color--dark);
  perspective-origin: 0 100%;
  transform-origin: 0 100%;
  border-radius: 100px;
  position: absolute;
  inset: auto auto 0% 0%;
  transform: translate(0);
}
.button-01-icon-wrap {
  justify-content: flex-end;
  align-items: center;
  width: 18px;
  height: 18px;
  display: flex;
  overflow: hidden;
}
.style-guide-button-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.hero-v1 {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 646px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.hero-v1:where(.variant-hero-v1-width-614) {
  max-width: 614px;
}
.hero-v1._01 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  max-width: 590px;
}
.hero-v1-heading-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}
.hero-v1-sub-heading.pricing-details-sub-heading {
  max-width: 476px;
}
.footer {
  padding-top: var(--_responsive---padding--padding-80-px);
  background-color: var(--color--dark);
  color: var(--color--light);
  padding-bottom: 28px;
}
.footer-wrap {
  overflow: hidden;
}
.footer-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.footer-bottom {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  margin-top: 194px;
  display: flex;
}
.footer-text-link {
  color: var(--color--light);
  text-decoration: none;
  transition: color .4s;
}
.footer-text-link:hover {
  color: var(--color--secondary);
}
.footer-text-link.footer-link-text-02 {
  color: var(--color--primary);
}
.footer-text-link.footer-link-text-02:hover {
  color: var(--color--secondary);
}
.text-light {
  color: var(--color--light);
}
.footer-top-left {
  width: 370px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.footer-top-right {
  width: 506px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.sub-heading-wrap.faq-sub-heading {
  width: 365px;
}
.sub-heading-wrap.presence-sub-heading {
  width: 388px;
  max-width: var(--later-spacing--100);
}
.social-link-list {
  width: 44px;
  height: 44px;
  overflow: hidden;
}
.social-link-list.first-one {
  margin-left: -14px;
}
.social-link {
  width: var(--later-spacing--100);
}
.footer-right-01 {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: row;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.footer-right-02 {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.footer-right-02._01 {
  width: var(--later-spacing--100);
}
.footer-info-box {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}
.footer-info-link {
  text-decoration: none;
}
.navbar-right {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.close-button {
  border-radius: var(--_responsive---border-radius-10-px);
  background-color: var(--color--primary);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
}
.button-02-arrow {
  transform: rotate(45deg);
}
.hide {
  display: none;
}
.remove-button {
  color: red;
  text-decoration: none;
}
.navbar-container {
  z-index: 5;
  background-color: var(--color--transparent);
  width: 100%;
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.cart-list {
  padding-left: 20px;
  padding-right: 20px;
}
.nav-link {
  color: var(--color--dark);
  border-radius: 100px;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  transition: color .4s;
  display: flex;
}
.nav-link:hover, .nav-link[aria-current="page"], .nav-link.is-active {
  color: var(--color--grey-1);
}
.paragraph-03 {
  color: #08090a;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.error-state {
  background-color: #fff;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}
.cart-header {
  border-bottom-color: #ebebeb;
}
.navbar-center {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}
.navbar-wrapper {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.cart-button {
  border-radius: var(--_responsive---border-radius-8-px);
  background-color: var(--color--primary);
  width: 100%;
  color: var(--color--dark);
  text-align: center;
  letter-spacing: -.02em;
  padding: 12px 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  transition: color .3s, background-color .3s;
}
.cart-button:hover {
  color: #fff;
  background-color: #08090a;
}
.mobile-margin-top-10 {
  display: none;
}
.navbar-left {
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.cart-quantity {
  background-color: var(--color--secondary);
  color: #fff;
  font-weight: 500;
  position: absolute;
  inset: 0% 0% auto auto;
}
.cart-option-item {
  margin-bottom: 0;
}
.button-02-arrow-group {
  justify-content: flex-end;
  align-items: flex-start;
  width: 24px;
  height: 24px;
  display: inline-flex;
  overflow: hidden;
  transform: rotate(-45deg);
}
.paragraph-6 {
  color: #01030b;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.cart-link {
  background-color: #3898ec00;
  padding: 8px 10px 8px 8px;
}
.nav-item {
  flex: none;
  margin-bottom: 0;
}
.cart-text {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.menu-button {
  width: 32px;
  height: 32px;
}
.paragraph-7 {
  color: #08090a;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
}
.paragraph-7.cart-error {
  color: red;
}
.nav-menu {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}
.button-04 {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.nav-button-wrapper {
  justify-content: center;
  align-items: center;
  display: flex;
}
.menu-lottie {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.paragraph-text-08 {
  color: #1f1f1f;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
}
.paragraph-text-08.button-04-text {
  line-height: 28px;
}
.cart-option-list {
  margin-top: 0;
}
.error-text {
  color: red;
}
.cart-container {
  border-radius: 0;
}
.paragraph-8 {
  color: #08090a;
  margin-bottom: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 28px;
}
.button-04-text-wrap {
  height: 28px;
  overflow: hidden;
}
.cart-footer {
  border-top-color: #ebebeb;
}
.navbar {
  z-index: 9999;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
}
.nav-dropdown-list-wrap {
  background-color: #fff;
  border-radius: 12px;
}
.nav-dropdown-list-wrap.is-open {
  padding-top: 10px;
  padding-bottom: 10px;
}
.nav-dropdown-list-wrap.shadow-three.mobile-shadow-hide {
  background-color: #fff0;
}
.nav-dropdown-list-wrap.shadow-three.mobile-shadow-hide.is-open {
  padding-top: 10px;
  padding-bottom: 0;
}
.nav-dropdown-list-wrap.shadow-three.mobile-shadow-hide.pages.is-open {
  padding-top: 16px;
  left: -544px;
}
.nav-dropdown-toggle {
  color: var(--color--dark);
  margin-top: 2px;
  padding: 0 18px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.nav-dropdown-toggle:focus-visible, .nav-dropdown-toggle[data-wf-focus-visible] {
  outline-offset: 0px;
  color: #0050bd;
  border-radius: 5px;
  outline: 2px solid #0050bd;
}
.nav-dropdown-list.left {
  flex: 1;
  padding-right: 40px;
}
.nav-dropdown-list.center {
  border-left: 1px dashed #0000001a;
  border-right: 1px dashed #0000001a;
  flex: 1;
  padding-left: 40px;
  padding-right: 40px;
}
.nav-dropdown-list.right {
  flex: 1;
  padding-left: 40px;
}
.dropdown-page-link-list {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 122px;
  margin-top: 16px;
  display: flex;
}
.nav-dropdown-list-body {
  border-radius: var(--_responsive---border-radius-10-px);
  background-color: var(--color--primary);
  justify-content: space-between;
  width: 645px;
  max-width: 100%;
  padding: 32px 32px 20px;
  display: flex;
  box-shadow: 0 100px 80px #00000008, 0 41.78px 33.42px #00000005, 0 22.34px 17.87px #00000005, 0 12.52px 10.02px #00000005, 0 6.65px 5.32px #00000003, 0 2.77px 2.21px #00000003;
}
.nav-dropdown-icon {
  margin-right: 0;
  font-size: 12px;
}
.dropdown-page-link.dropdown-link-text {
  color: var(--color--dark);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  transition: color .3s;
}
.dropdown-page-link.dropdown-link-text:hover, .dropdown-page-link.dropdown-link-text[aria-current="page"], .dropdown-page-link.dropdown-link-text.is-active {
  color: var(--color--grey-1);
}
.icon {
  flex: none;
  font-size: 14px;
  line-height: 22px;
}
.h5 {
  color: var(--color--dark);
  letter-spacing: var(--later-spacing--2);
  font-family: Urbanist, Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.h6 {
  color: var(--color--dark);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}
.home-hero {
  height: var(--later-spacing--100);
  flex: 1;
  position: relative;
}
.home-hero-wrap {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-bottom: 40px;
  display: flex;
  position: relative;
}
.home-hero-bg {
  z-index: 1;
  width: var(--later-spacing--100);
  position: absolute;
  inset: 0%;
  overflow: hidden;
}
.fit-cover {
  width: var(--later-spacing--100);
  height: var(--later-spacing--100);
  object-fit: cover;
}
.fit-cover:where(.variant-blog-widget-v2) {
  min-height: 480px;
  max-height: 480px;
}
.fit-cover.blog-details-image {
  object-position: 50% 15%;
}
.home-hero-top {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  max-width: 590px;
  display: flex;
}
.hero-button-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  align-items: center;
  display: flex;
}
.hero-text-secondary {
  color: #bcfd68;
}
.hero-button-01 {
  flex-flow: column;
  justify-content: center;
  width: 220px;
  display: flex;
}
.button-02 {
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  background-color: #ffffff1a;
  border: 1px solid #c3c3c2;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  padding: 19px 42px;
  text-decoration: none;
  display: flex;
}
.button-text-wrap {
  max-height: 24px;
  overflow: hidden;
}
.hero-hom-sub-heading {
  width: var(--later-spacing--100);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  max-width: 471px;
  display: flex;
  position: absolute;
  inset: auto 20px 40px auto;
}
.home-nav-hero-wrap {
  background-color: var(--color--light);
  flex-flow: column;
  height: 100vh;
  display: flex;
}
.hero-brand {
  background-color: var(--color--light);
}
.hero-brand-wrap {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.hero-brand-left {
  width: 500px;
  max-width: var(--later-spacing--100);
}
.hero-brand-right {
  flex: 1;
  align-items: center;
  padding-top: 36px;
  padding-bottom: 36px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.logo-outer {
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}
.logo-box {
  width: var(--later-spacing--100);
  height: var(--later-spacing--100);
  flex: none;
  max-width: 145px;
  margin-right: 80px;
}
.bg-linner-left {
  background-image: linear-gradient(-90deg, #fff0, var(--color--light));
  width: 218px;
  height: 100%;
  position: absolute;
  inset: 0% auto 0% 0%;
}
.bg-linner-right {
  background-image: linear-gradient(270deg, #fff, #fff0);
  width: 50px;
  height: 100%;
  position: absolute;
  inset: 0% 0% 0% auto;
}
.home-about {
  padding-top: var(--_responsive---padding--padding-160-px);
}
.home-about-top {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.home-about-bottom {
  margin-top: var(--_responsive---margin--margin-60-px);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.home-about-top-right {
  width: 905px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}
.button-wrap.awadrs-button {
  margin-top: 17px;
}
.button-wrap._404-page-button {
  margin-top: 14px;
}
.home-about-box {
  height: 416px;
  padding: var(--_responsive---padding--padding-32-px);
  border-radius: var(--_responsive---border-radius-16-px);
  background-color: var(--color--light);
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.hover-dot {
  background-color: var(--color--primary);
  border-radius: 7px;
  width: 14px;
  height: 14px;
  margin-top: 32px;
  margin-right: 32px;
  position: absolute;
  inset: 0% 0% auto auto;
}
.hover-dot.bg-secondary {
  background-color: #bcfd68;
}
.hover-dot.bg-dark {
  background-color: var(--color--dark);
}
.home-about-box-text {
  z-index: 2;
  width: var(--later-spacing--100);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
  position: relative;
}
.statistics-number-wrap {
  height: 88px;
  display: flex;
  overflow: hidden;
}
.statistics-number-wrap._01 {
  height: 180px;
}
.statistics-number-box.upper {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.statistics-number-box.lower {
  flex-flow: column;
  display: flex;
}
.choose-us {
  padding-top: var(--_responsive---padding--padding-160-px);
  padding-bottom: var(--_responsive---padding--padding-160-px);
}
.choose-us-bottom {
  margin-top: var(--_responsive---margin--margin-100-px);
}
.hero-v2 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.hero-v2-heading-wrap:where(.variant-hero-v2-heading-width-452), .hero-v2-heading-wrap.heading-width-456 {
  max-width: 452px;
}
.choose-us-tabs {
  justify-content: space-between;
  display: flex;
}
.tabs-content {
  width: 712px;
  max-width: var(--later-spacing--100);
  margin-left: auto;
}
.tabs-menu {
  width: 588px;
  max-width: var(--later-spacing--100);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.choose-us-image-wrap {
  height: 753px;
  max-width: var(--later-spacing--100);
  border-radius: var(--_responsive---border-radius-10-px);
  position: relative;
  overflow: hidden;
}
.tab-pane-tab-1 {
  width: 712px;
  max-width: var(--later-spacing--100);
}
.choose-us-tab-link {
  padding: 25px var(--_responsive---padding--padding-32-px);
  background-color: var(--color--transparent);
}
.choose-us-tab-link[aria-current="page"], .choose-us-tab-link.is-active {
  background-color: var(--color--light);
  border-radius: 7px;
}
.choose-tab-link-text {
  grid-column-gap: 43px;
  grid-row-gap: 43px;
  flex-flow: column;
  display: flex;
}
.tab-details-text {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
}
.tab-details-text-01 {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}
.ceo-words {
  position: relative;
}
.ceo-words-wrap {
  grid-column-gap: 303px;
  grid-row-gap: 303px;
  flex-flow: column;
  padding-top: 60px;
  padding-bottom: 40px;
  display: flex;
}
.ceo-words-bg {
  z-index: -1;
  position: absolute;
  inset: 0%;
}
.ceo-words-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  align-items: flex-start;
  max-width: 661px;
  display: flex;
}
.ceo-words-bottom {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.ceo-words-bottom-left {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.ceo-image {
  border-radius: 100px;
  width: 56px;
  height: 56px;
}
.ceo-info-box {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-flow: column;
  display: flex;
}
.ceo-name {
  color: var(--color--light);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}
.ceo-title {
  color: var(--color--light);
}
.our-service {
  padding-top: var(--_responsive---padding--padding-160-px);
  padding-bottom: var(--_responsive---padding--padding-160-px);
}
.our-service-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.our-service-bottom {
  margin-top: var(--_responsive---margin--margin-80-px);
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.our-service-top-left {
  width: 842px;
  max-width: var(--later-spacing--100);
}
.home-service-box {
  width: var(--later-spacing--100);
  height: var(--later-spacing--100);
  padding: var(--_responsive---padding--padding-32-px);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-radius: var(--_responsive---border-radius-16-px);
  background-color: var(--color--light);
  flex-flow: column;
  align-items: flex-start;
  transition: box-shadow .6s;
  display: flex;
}
.home-service-box:hover {
  box-shadow: 0 2px 15px #0003;
}
.service-card-text {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.service-card-icon-wrap {
  background-color: var(--color--site-bg);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  display: flex;
}
.service-card-icon {
  width: 24px;
}
.projects-v1 {
  padding-top: var(--_responsive---padding--padding-100-px);
  padding-bottom: var(--_responsive---padding--padding-80-px);
  background-color: var(--color--dark);
  color: var(--color--light);
  overflow: clip;
}
.projects-v1-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.projects-v1-bottom {
  height: 400vh;
  margin-top: var(--_responsive---margin--margin-80-px);
}
.projects-v1-heading {
  width: 614px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}
.heading-wrap.we-are-heading {
  width: 905px;
  max-width: var(--later-spacing--100);
}
.process {
  padding-top: var(--_responsive---padding--padding-160-px);
  padding-bottom: var(--_responsive---padding--padding-160-px);
}
.process-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.process-left {
  width: 497px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
  position: sticky;
  top: 50px;
}
.process-right {
  width: 679px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 17px;
  grid-row-gap: 17px;
  flex-flow: column;
  display: flex;
}
.process-list-wrap {
  max-width: var(--later-spacing--100);
  padding: var(--_responsive---padding--padding-24-px);
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  border-radius: var(--_responsive---border-radius-16-px);
  background-color: var(--color--light);
  flex-flow: column;
  display: flex;
  position: sticky;
  top: 50px;
}
.process-number-box {
  background-color: var(--color--site-bg);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  display: flex;
}
.process-text-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.need-to-know {
  padding-top: var(--_responsive---padding--padding-100-px);
  padding-bottom: var(--_responsive---padding--padding-100-px);
  background-color: var(--color--primary);
}
.need-to-know-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  position: relative;
  overflow: clip;
}
.need-to-know-left {
  width: 516px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
  position: sticky;
  top: 80px;
}
.need-to-know-right {
  width: 520px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
  overflow: hidden;
}
.know-top-linner {
  pointer-events: none;
  background-image: linear-gradient(#f5fe9000, #f5fe9000 12%, #f5fe9080 25%, #f5fe90);
  width: 520px;
  position: absolute;
  inset: 0% 0% 0% auto;
}
.reviews {
  padding-top: var(--_responsive---padding--padding-100-px);
  padding-bottom: var(--_responsive---padding--padding-80-px);
}
.reviews-top {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.reviews-bottom {
  margin-top: var(--_responsive---margin--margin-80-px);
  grid-column-gap: 21px;
  grid-row-gap: 21px;
  grid-template-rows: auto;
  grid-template-columns: .9fr 1.2fr .9fr;
  grid-auto-columns: 1fr;
  place-items: stretch stretch;
  display: grid;
}
.reviews-box-wrap {
  width: var(--later-spacing--100);
  height: var(--later-spacing--100);
  border-radius: var(--_responsive---border-radius-8-px);
  position: relative;
  overflow: hidden;
}
.review-box-image {
  z-index: 0;
  height: var(--later-spacing--100);
  position: relative;
}
.reviews-box-text-wrap {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  display: flex;
  position: absolute;
  inset: auto 32px 32px;
}
.faq {
  padding-top: var(--_responsive---padding--padding-100-px);
  padding-bottom: var(--_responsive---padding--padding-100-px);
}
.faq-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.faq-left {
  width: 390px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}
.faq-right {
  width: 654px;
  max-width: var(--later-spacing--100);
}
.faq-content {
  width: 100%;
}
.plus-icon-01 {
  background-color: var(--color--secondary);
  border-radius: 1px;
  width: 2px;
  height: 10px;
  position: absolute;
}
.faq-question-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.normal-s-regular {
  color: #03030f;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.normal-s-regular.faq-answer {
  color: var(--color--grey-1);
  padding-top: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.faq-list {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}
.faq-item {
  border-bottom: 1px solid var(--color--grey-2);
  background-color: #0000;
  width: 100%;
  padding: 0 0 32px;
}
.faq-item[aria-current="page"], .faq-item.is-active {
  background-color: #0000;
}
.faq-item.last-one {
  border-bottom-color: var(--color--transparent);
}
.faq-answer-wrap {
  max-width: 606px;
  overflow: hidden;
}
.minus-icon {
  background-color: var(--color--secondary);
  border-radius: 1px;
  width: 10px;
  height: 2px;
}
.faq-icon-box {
  border: 2px solid var(--color--secondary);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
  position: relative;
}
.sticky {
  width: var(--later-spacing--100);
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
}
.collection-list {
  display: flex;
}
.collection-item {
  flex: none;
  align-items: flex-end;
  max-width: 840px;
  padding-right: 40px;
  display: flex;
}
.project-v1-list {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  color: var(--color--light);
  flex-flow: column;
  text-decoration: none;
  display: flex;
}
.project-v1-top {
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}
.project-v1-bottom {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.project-v1-image {
  width: var(--later-spacing--100);
  border-radius: var(--_responsive---border-radius-12-px);
  height: 530px;
  overflow: hidden;
}
.project-v1-image.v2 {
  height: 437px;
  position: relative;
}
.project-v1-text-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  align-items: center;
  display: flex;
}
.text-grey-02 {
  color: var(--color--grey-2);
}
.hover-button-wrap {
  opacity: 0;
  position: absolute;
}
.button-text-wrapper {
  flex-flow: column;
  display: flex;
}
.button-01-icon {
  z-index: 2;
  position: relative;
}
.button-01-icon.hover-icon {
  position: absolute;
  inset: 0%;
}
.button-icon-box {
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.button-text-box {
  z-index: 2;
  height: 22px;
  position: relative;
  overflow: hidden;
}
.button-02-bg {
  z-index: 1;
  background-color: var(--color--primary);
  width: 110%;
  height: 110%;
  position: absolute;
  inset: -5% 0% 0% -5%;
}
.hocer-button {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}
.hocer-button.project-btn {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border: 1px solid var(--color--transparent);
  border-radius: 0;
  padding: 12px 24px;
}
.button-02-hover-bg {
  z-index: 1;
  background-color: var(--color--dark);
  width: 110%;
  height: 110%;
  position: absolute;
  inset: -5% 0% 0% -5%;
  transform: translate(101%);
}
.about-hero {
  padding-top: var(--_responsive---padding--padding-80-px);
  padding-bottom: var(--_responsive---padding--padding-80-px);
  background-color: var(--color--light);
  overflow: clip;
}
.about-hero-wrap {
  height: 250vh;
  position: relative;
}
.about-hero-top {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 864px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.about-hero-bottom {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: sticky;
  top: 0;
}
.about-image-wrap {
  z-index: 1;
  border-radius: var(--_responsive---border-radius-10-px);
  width: 40%;
  height: 30vh;
  position: relative;
  overflow: hidden;
}
.about-hero-image {
  width: var(--later-spacing--100);
  height: var(--later-spacing--100);
  object-fit: cover;
}
.about-sub-heading {
  max-width: 564px;
}
.about-sub-heading-wrap {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 288px;
}
.about-left-image {
  width: 156px;
  max-width: var(--later-spacing--100);
  border-radius: var(--_responsive---border-radius-10-px);
  position: absolute;
  inset: 102px auto auto 0%;
  overflow: hidden;
  transform: rotate(-8deg);
}
.about-short-image {
  border-radius: var(--_responsive---border-radius-10-px);
}
.about-right-image {
  width: 156px;
  max-width: var(--later-spacing--100);
  border-radius: var(--_responsive---border-radius-10-px);
  position: absolute;
  inset: 56px 0% auto auto;
  overflow: hidden;
  transform: rotate(5deg);
}
.about-brand {
  padding-top: var(--_responsive---padding--padding-80-px);
  padding-bottom: var(--_responsive---padding--padding-80-px);
  background-color: var(--color--site-bg);
}
.about-brand-wrap {
  padding: var(--_responsive---padding--padding-24-px);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-radius: var(--_responsive---border-radius-16-px);
  background-color: #fff;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.about-brand-left {
  width: 448px;
  max-width: var(--later-spacing--100);
  padding: var(--_responsive---padding--padding-32-px);
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  border-radius: var(--_responsive---border-radius-16-px);
  background-color: var(--color--site-bg);
  flex-flow: column;
  display: flex;
}
.about-brand-right {
  width: 792px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 80px;
  grid-row-gap: 54px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.about-brand-logo-wrap {
  max-width: 152px;
}
.brand-counter-box {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.left-brand-box {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}
.lefft-brand-image {
  width: 156px;
}
.who-we-are {
  padding-top: var(--_responsive---padding--padding-80-px);
  padding-bottom: var(--_responsive---padding--padding-80-px);
  background-color: var(--color--site-bg);
}
.who-we-are-top {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.who-we-are-bottom {
  margin-top: var(--_responsive---margin--margin-80-px);
}
.company-history {
  padding-top: var(--_responsive---padding--padding-134-px);
  padding-bottom: var(--_responsive---padding--padding-160-px);
  background-color: var(--color--site-bg);
}
.history-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.history-left {
  width: 563px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
  position: sticky;
  top: 25px;
}
.history-right {
  width: 632px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.history-heading-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}
.history-list-wrap {
  padding: var(--_responsive---padding--padding-32-px);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-radius: var(--_responsive---border-radius-10-px);
  background-color: var(--color--light);
  flex-flow: column;
  transition: box-shadow .3s;
  display: flex;
  position: sticky;
  top: 25px;
  box-shadow: 0 2px 5px #0000;
}
.history-list-wrap:hover {
  box-shadow: 0 2px 10px #80b70066;
}
.history-top-icon {
  width: 40px;
}
.history-top-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  align-items: center;
  display: flex;
}
.text-grey-01 {
  color: var(--color--grey-1);
}
.expertise {
  padding-top: var(--_responsive---padding--padding-80-px);
  padding-bottom: var(--_responsive---padding--padding-80-px);
  position: relative;
}
.expertise-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.expertise-bg {
  z-index: 0;
  position: absolute;
  inset: 0%;
}
.expertise-left {
  width: 356px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}
.expertise-right {
  width: 570px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 56px;
  grid-row-gap: 56px;
  flex-flow: column;
  display: flex;
}
.expertise-text-wrap {
  grid-column-gap: 22px;
  grid-row-gap: 22px;
  flex-flow: column;
  display: flex;
}
.expertise-list {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.expertise-list-text-wrap {
  width: 428px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  margin-top: -5px;
  display: flex;
}
.expertise-list-text {
  color: var(--color--light);
  font-size: 40px;
  line-height: 48px;
}
.accelerate {
  padding-top: var(--_responsive---padding--padding-160-px);
  padding-bottom: var(--_responsive---padding--padding-80-px);
  background-color: var(--color--site-bg);
}
.accelerate-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  display: flex;
}
.accelerate-01 {
  width: 429px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.accelerate-02 {
  width: 471px;
  max-width: var(--later-spacing--100);
  padding: var(--_responsive---padding--padding-60-px);
  border-radius: var(--_responsive---border-radius-12-px);
  background-image: url('../images/Accelerate-Image-1.avif');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.accelerate-03 {
  width: 380px;
  max-width: var(--later-spacing--100);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.accelerate-image {
  width: var(--later-spacing--100);
  height: var(--later-spacing--100);
  object-fit: cover;
}
.accelerate-image-wrap {
  height: var(--later-spacing--100);
  border-radius: var(--_responsive---border-radius-10-px);
  overflow: hidden;
}
.accelerate-left-list {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  align-items: center;
  display: flex;
}
.accelerate-left-list-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.dot-4 {
  background-color: var(--color--secondary);
  border-radius: 1px;
  width: 8px;
  height: 8px;
}
.accelerate-03-inner {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  margin-top: 57px;
  display: flex;
}
.teams {
  padding-top: var(--_responsive---padding--padding-80-px);
  padding-bottom: var(--_responsive---padding--padding-160-px);
  background-color: var(--color--site-bg);
}
.teams-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.teams-bottom {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: visible;
}
.awadrs {
  padding-top: var(--_responsive---padding--padding-160-px);
  padding-bottom: var(--_responsive---padding--padding-160-px);
  background-color: var(--color--dark);
}
.awadrs-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.awadrs-left {
  width: 429px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 23px;
  grid-row-gap: 23px;
  flex-flow: column;
  align-self: flex-start;
  display: flex;
  position: sticky;
  top: 100px;
}
.awadrs-right {
  width: 672px;
  max-width: var(--later-spacing--100);
  position: relative;
  overflow: hidden;
}
.awadrs-right-inner {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}
.awadrs-right-shadow {
  background-image: linear-gradient(180deg, #12121200, var(--color--dark) 35%, var(--color--dark));
  pointer-events: none;
  position: absolute;
  inset: 0%;
}
.awadrs-list-wrap {
  padding-bottom: var(--_responsive---padding--padding-24-px);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-bottom: 1px solid #414141;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.presence {
  padding-top: var(--_responsive---padding--padding-80-px);
  padding-bottom: var(--_responsive---padding--padding-160-px);
  background-color: var(--color--site-bg);
}
.presence-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.presence-bottom {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 64px;
  display: grid;
}
.presence-top-right {
  width: 632px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.presence-list {
  padding: var(--_responsive---padding--padding-24-px);
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  border-radius: var(--_responsive---border-radius-12-px);
  background-color: var(--color--light);
  flex-flow: column;
  align-items: flex-start;
  transition: box-shadow .4s;
  display: flex;
  box-shadow: 0 2px 5px #0000;
}
.presence-list:hover {
  box-shadow: 0 2px 5px #00000042;
}
.presence-icon-wrap {
  background-color: #faf6f5;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  display: flex;
  overflow: hidden;
}
.presence-icon {
  width: 32px;
}
.presence-box-text {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.blog-v1 {
  padding-top: var(--_responsive---padding--padding-160-px);
  padding-bottom: var(--_responsive---padding--padding-80-px);
  background-color: var(--color--site-bg);
}
.blog-v1-top {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.blog-v1-bottom {
  margin-top: var(--_responsive---margin--margin-60-px);
}
.blog-v1-top-left {
  width: 497px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}
.blog-v1-collection-list {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-v1-image {
  width: var(--later-spacing--100);
  border-radius: var(--_responsive---border-radius-12-px);
  max-height: 260px;
  position: relative;
  overflow: hidden;
}
.blog-v1-image:where(.variant-blog-widget-v2) {
  max-height: none;
}
.blog-v1-list {
  width: var(--later-spacing--100);
  height: var(--later-spacing--100);
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}
.blog-v1-text-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.short-dot {
  background-color: #767676;
  border-radius: 100px;
  width: 3px;
  height: 3px;
}
.blog-v1-sub-title {
  grid-column-gap: 8px;
  grid-row-gap: 4px;
  flex-flow: wrap;
  align-items: center;
  display: flex;
}
.service-hero {
  padding-top: var(--_responsive---padding--padding-60-px);
  padding-bottom: var(--_responsive---padding--padding-80-px);
  flex: 1;
  position: relative;
}
.service-hero-bg-wrap {
  z-index: 0;
  position: absolute;
  inset: 0%;
}
.service-hero-wrap {
  height: var(--later-spacing--100);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: space-between;
  display: flex;
}
.service-hero-left {
  width: 560px;
  max-width: var(--later-spacing--100);
  flex-flow: column;
  justify-content: flex-end;
  display: flex;
}
.service-hero-right {
  width: 340px;
  max-width: var(--later-spacing--100);
  flex-flow: column;
  display: flex;
}
.service-nav-hero {
  flex-flow: column;
  height: 100vh;
  display: flex;
  overflow: hidden;
}
.service-hero-card {
  padding: var(--_responsive---padding--padding-40-px);
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  background-color: var(--color--primary);
  flex-flow: column;
  display: flex;
}
.hero-card-text {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  align-items: center;
  display: flex;
}
.hero-card-icon {
  width: 60px;
}
.service-heading-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}
.service {
  padding-top: var(--_responsive---padding--padding-160-px);
  padding-bottom: var(--_responsive---padding--padding-160-px);
  background-color: var(--color--site-bg);
}
.service-bottom {
  margin-top: var(--_responsive---margin--margin-80-px);
}
.service-button-wrap {
  margin-top: var(--_responsive---padding--padding-40-px);
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}
.service-top-heading {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.service-top-left {
  width: 620px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}
.service-top-bottom {
  width: 213px;
  max-width: var(--later-spacing--100);
}
.service-tab-menu {
  border-bottom: 1px solid var(--color--grey-2);
  flex-flow: column;
  display: flex;
}
.service-tab-link {
  padding: var(--_responsive---padding--padding-30-px) 0px;
  border-top: 1px solid var(--color--grey-2);
  background-color: var(--color--transparent);
}
.service-tab-link[aria-current="page"], .service-tab-link.is-active {
  background-color: #c8c8c800;
}
.service-box-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.service-box-icon {
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.vratical-line {
  width: 1.5px;
  height: var(--later-spacing--100);
  background-color: var(--color--dark);
  border-radius: 1px;
}
.horizontal-line {
  width: var(--later-spacing--100);
  background-color: var(--color--dark);
  border-radius: 1px;
  height: 1.5px;
  position: absolute;
}
.service-heading-title {
  grid-column-gap: 22px;
  grid-row-gap: 22px;
  align-items: center;
  display: flex;
}
.service-box-bottom {
  overflow: hidden;
}
.service-box-inner-bottom {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 20px;
  display: flex;
}
.service-box-right {
  width: 213px;
  height: 260px;
  max-width: var(--later-spacing--100);
  position: relative;
}
.service-box-left {
  width: 880px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.service-inner-right {
  width: 420px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.service-inner-left {
  width: 330px;
  max-width: var(--later-spacing--100);
}
.service-list-01 {
  width: 202px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  justify-content: center;
  margin-bottom: 0;
  padding-left: 20px;
  display: flex;
}
.choose-us-v1 {
  padding-bottom: var(--_responsive---padding--padding-160-px);
  background-color: var(--color--site-bg);
}
.choose-us-v1-bottom {
  margin-top: var(--_responsive---margin--margin-80-px);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  display: flex;
}
.choose-us-box-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.choose-us-box-list-40 {
  width: 40%;
  height: 340px;
  padding: var(--_responsive---padding--padding-30-px);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-radius: var(--_responsive---border-radius-12-px);
  background-color: var(--color--light);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.choose-us-box-list-40.box-card-hover {
  box-shadow: 0 2px 5px 0 var(--color--transparent);
  transition: box-shadow .3s;
}
.choose-us-box-list-40.box-card-hover:hover {
  box-shadow: 0 2px 5px 0 var(--color--grey-2);
}
.choose-us-box-list-20 {
  width: 20%;
  height: 340px;
  padding: var(--_responsive---padding--padding-30-px);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-radius: var(--_responsive---border-radius-12-px);
  background-color: var(--color--light);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.choose-us-box-list-20.box-card-hover {
  box-shadow: 0 2px 5px 0 var(--color--transparent);
  transition: box-shadow .3s;
}
.choose-us-box-list-20.box-card-hover:hover {
  box-shadow: 0 2px 5px 0 var(--color--grey-2);
}
.works {
  padding-top: var(--_responsive---padding--padding-80-px);
  padding-bottom: var(--_responsive---padding--padding-80-px);
}
.works-bottom {
  margin-top: var(--_responsive---margin--margin-60-px);
}
.work-collection-list {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.work-details {
  padding-bottom: var(--_responsive---padding--padding-160-px);
}
.work-details-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.work-details-left {
  width: 920px;
  max-width: var(--later-spacing--100);
}
.work-details-right {
  width: 408px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  margin-top: 32px;
  display: flex;
  position: sticky;
  top: 50px;
}
.work-main-image {
  width: var(--later-spacing--100);
  border-radius: var(--_responsive---border-radius-12-px);
  height: 683px;
  overflow: hidden;
}
.work-details-image-wrap {
  margin-top: var(--_responsive---padding--padding-40-px);
  grid-column-gap: 17px;
  grid-row-gap: 17px;
  flex-flow: column;
  display: flex;
}
.work-details-image-01 {
  width: var(--later-spacing--100);
  height: 567px;
  overflow: hidden;
}
.work-details-image-02 {
  grid-column-gap: 17px;
  grid-row-gap: 17px;
  display: flex;
}
.work-details-image-v2 {
  width: var(--later-spacing--100);
  height: 556px;
  overflow: hidden;
}
.work-info-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.work-details-box {
  border-top: 1px solid #e7e7e7;
}
.work-details-box-inner {
  grid-column-gap: 102px;
  grid-row-gap: 102px;
  border-bottom: 1px solid #e7e7e7;
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
}
.services-list {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-flow: column;
  display: flex;
}
.work-title-box {
  width: 60px;
  max-width: var(--later-spacing--100);
}
.work-rich-text h5 {
  margin-top: 40px;
}
.work-rich-text p {
  margin-top: 8px;
}
.related-work {
  padding-bottom: var(--_responsive---padding--padding-80-px);
}
.related-work-top {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.related-work-bottom {
  margin-top: var(--_responsive---margin--margin-60-px);
}
.blog {
  padding-top: var(--_responsive---padding--padding-80-px);
  padding-bottom: 124px;
}
.blog-bottom {
  margin-top: 136px;
}
.blog-tabs {
  align-items: flex-start;
  display: flex;
}
.blog-tabs-content {
  width: 1131px;
  max-width: var(--later-spacing--100);
  margin-left: auto;
}
.blog-tabs-menu {
  width: 160px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  margin-right: 60px;
  display: flex;
}
.blog-tab-link {
  border: 1px solid var(--color--grey-2);
  background-color: var(--color--transparent);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  padding-top: 19px;
  padding-bottom: 19px;
  display: flex;
}
.blog-tab-link[aria-current="page"], .blog-tab-link.is-active {
  border-color: var(--color--transparent);
  background-color: var(--color--primary);
}
.blog-list-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}
.blog-list-top {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: stretch;
  display: grid;
}
.blog-details-bottom {
  margin-top: var(--_responsive---margin--margin-80-px);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.blog-details-left {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
  position: sticky;
  top: 50px;
}
.blog-details-right {
  width: 787px;
  max-width: var(--later-spacing--100);
}
.blog-main-image {
  width: var(--later-spacing--100);
  height: 720px;
  overflow: hidden;
}
.blog-heading {
  padding-bottom: 12px;
}
.blog-rich-text h5 {
  margin-top: 40px;
}
.blog-rich-text p {
  margin-top: 8px;
}
.blog-rich-text ul {
  margin-bottom: 0;
  padding-left: 26px;
}
.blog-rich-text li {
  color: var(--color--dark);
  margin-top: 8px;
}
.blog-details-image-wrap {
  width: var(--later-spacing--100);
  height: 480px;
  margin-top: var(--_responsive---padding--padding-40-px);
  overflow: hidden;
}
.similar-blog {
  padding-top: var(--_responsive---padding--padding-160-px);
  padding-bottom: var(--_responsive---padding--padding-160-px);
}
.similar-blog-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.similar-blog-bottom {
  margin-top: var(--_responsive---margin--margin-80-px);
}
.blog-details-left-top {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  align-items: flex-start;
  display: flex;
}
.blog-details-left-bottom {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}
.blog-details-tag {
  border: 1px solid var(--color--grey-2);
  border-radius: 100px;
  padding: 8px 16px;
}
.social-share-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  align-items: center;
  display: flex;
}
.social-share-link {
  justify-content: center;
  align-items: center;
  height: 20px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.icon-02 {
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.contact-info {
  padding-top: var(--_responsive---padding--padding-100-px);
  padding-bottom: var(--_responsive---padding--padding-100-px);
  background-color: var(--color--site-bg);
}
.contact-info-top {
  text-align: center;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
}
.contact-info-bottom {
  margin-top: var(--_responsive---margin--margin-80-px);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.contact-wrap {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.contact-right {
  width: var(--later-spacing--100);
  max-width: 720px;
  height: 960px;
  overflow: hidden;
}
.contact-left {
  width: 720px;
  max-width: var(--later-spacing--100);
  padding-top: 85px;
  padding-right: var(--_responsive---padding--padding-40-px);
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: column;
  display: flex;
}
.contact-heading-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.form-field-wrap {
  width: var(--later-spacing--100);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.form-field-main-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.form-button-wrap {
  margin-top: 24px;
}
.contact-form {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}
.text-secondary {
  color: var(--color--secondary);
}
.text-field {
  border: 1px solid var(--color--grey-2);
  min-height: 56px;
  color: var(--color--dark);
  border-radius: 108px;
  margin-bottom: 0;
  padding: 16px 20px;
}
.text-field:focus {
  border-color: var(--color--secondary);
}
.text-field::placeholder {
  color: var(--color--grey-1);
}
.text-field-02 {
  border: 1px solid var(--color--grey-2);
  min-height: 120px;
  color: var(--color--dark);
  border-radius: 16px;
  margin-bottom: 0;
  padding: 16px 20px;
}
.text-field-02:focus {
  border-color: var(--color--secondary);
}
.text-field-02::placeholder {
  color: var(--color--grey-1);
}
.checkbox {
  border: 1px solid var(--color--dark);
  font-size: 20px;
  line-height: 20;
}
.submit-button {
  width: var(--later-spacing--100);
  border: 1px solid var(--color--transparent);
  background-color: var(--color--primary);
  color: var(--color--dark);
  background-image: url('../images/Button-Icon-1.svg');
  background-position: 366px;
  background-repeat: no-repeat;
  background-size: auto;
  border-radius: 100px;
  padding: 12px 282px 12px 256px;
  font-weight: 600;
  transition: border-color .3s, background-color .3s;
}
.submit-button:hover {
  border: 1px solid var(--color--secondary);
  background-color: var(--color--light);
}
.success-message {
  border-radius: var(--_responsive---border-radius-10-px);
  background-color: var(--color--primary);
}
.contact-info-box {
  padding: var(--_responsive---padding--padding-32-px);
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  border-radius: var(--_responsive---border-radius-12-px);
  background-color: var(--color--light);
  flex-flow: column;
  display: flex;
}
.contact-box-icon-wrap {
  background-color: var(--color--site-bg);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  display: flex;
}
.contact-box-icon {
  width: 24px;
}
.contact-info-box-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.contact-info-box-top-bottom {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}
.pricing {
  padding-top: var(--_responsive---padding--padding-80-px);
  padding-bottom: var(--_responsive---padding--padding-80-px);
}
.pricing-bottom {
  margin-top: var(--_responsive---margin--margin-100-px);
}
.pricing-collection-list {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.pricing-list-wrap {
  padding: var(--_responsive---padding--padding-24-px);
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  border-radius: var(--_responsive---border-radius-12-px);
  background-color: var(--color--light);
  flex-flow: column;
  display: flex;
}
.pricing-list-wrap.pricing-card-bg {
  background-color: var(--color--site-bg);
}
.pricing-top-inner {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.pricing-middle {
  border-top: 1px solid var(--color--grey-2);
}
.pricing-middle-list {
  border-bottom: 1px solid var(--color--grey-2);
  padding-top: 12px;
  padding-bottom: 12px;
}
.pricing-middle-list._01 {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  align-items: flex-end;
  display: flex;
}
.pricing-middle-list._02 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.scope-list {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  align-items: flex-end;
  display: flex;
}
.pricing-details {
  padding-top: var(--_responsive---padding--padding-80-px);
  padding-bottom: var(--_responsive---padding--padding-80-px);
}
.pricing-details-wrap {
  max-width: 1055px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-details-bottom {
  margin-top: var(--_responsive---margin--margin-100-px);
}
.pricing-card-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  align-items: flex-start;
  display: flex;
}
.pricing-details-text {
  margin-top: 20px;
}
.pricing-rich-text h5 {
  margin-top: 40px;
}
.pricing-rich-text p {
  margin-top: 12px;
}
.pricing-card-left {
  width: 628px;
  max-width: var(--later-spacing--100);
}
.pricing-card-right {
  width: 419px;
  max-width: var(--later-spacing--100);
  padding: var(--_responsive---padding--padding-32-px);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  border-radius: var(--_responsive---border-radius-12-px);
  background-color: var(--color--primary);
  flex-flow: column;
  display: flex;
}
.price-wrap {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-flow: column;
  display: flex;
}
.default-state {
  margin-bottom: 0;
}
.add-to-cart-button {
  width: var(--later-spacing--100);
  background-color: var(--color--light);
  color: var(--color--dark);
  letter-spacing: var(--later-spacing--2);
  background-image: url('../images/Button-Icon-1.svg');
  background-position: 212px;
  background-repeat: no-repeat;
  background-size: auto;
  border-radius: 100px;
  padding: 12px 155px 12px 129px;
  font-weight: 600;
  transition: color .5s, background-color .5s;
}
.add-to-cart-button:hover {
  background-color: var(--color--dark);
  color: var(--color--light);
  background-image: url('../images/Button-Icon-2.svg');
  background-position: 212px;
  background-repeat: no-repeat;
  background-size: auto;
}
.license {
  padding-top: var(--_responsive---padding--padding-80-px);
  padding-bottom: var(--_responsive---padding--padding-80-px);
}
.license-bottom {
  margin-top: var(--_responsive---margin--margin-100-px);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.license-list-wrap {
  padding: var(--_responsive---padding--padding-32-px);
  grid-column-gap: 52px;
  grid-row-gap: 52px;
  border-radius: var(--_responsive---border-radius-12-px);
  background-color: var(--color--site-bg);
  flex-flow: column;
  display: flex;
}
.license-icon {
  width: 28px;
}
.license-box-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}
.license-box-text {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.changelog {
  padding-top: var(--_responsive---padding--padding-80-px);
  padding-bottom: var(--_responsive---padding--padding-80-px);
}
.changelog-bottom {
  margin-top: var(--_responsive---margin--margin-100-px);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.changelog-list-wrap {
  padding: var(--_responsive---padding--padding-32-px);
  grid-column-gap: 52px;
  grid-row-gap: 52px;
  border-radius: var(--_responsive---border-radius-12-px);
  background-color: var(--color--site-bg);
  flex-flow: column;
  display: flex;
}
.changelog-item-text {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.changelog-list-item {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 26px;
  display: flex;
}
.privacy-policy {
  padding-top: var(--_responsive---padding--padding-80-px);
  padding-bottom: var(--_responsive---padding--padding-80-px);
}
.privacy-policy-wrap {
  max-width: 856px;
  margin-left: auto;
  margin-right: auto;
}
.privacy-policy-bottom {
  margin-top: var(--_responsive---margin--margin-100-px);
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: column;
  display: flex;
}
.policy-item-list {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.policy-item-top, .policy-item-bottom {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}
.policy-item-list-01 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  margin-bottom: 0;
  padding-left: 24px;
  display: flex;
}
.pass-icon {
  width: 48px;
}
.pass-icon-heading {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.pass-inpute-box {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  align-items: center;
  display: flex;
}
.password-text-field {
  background-color: var(--color--light);
  min-height: 48px;
  color: var(--color--dark);
  border: 1px solid #ebebeb;
  border-radius: 52px;
  margin-bottom: 0;
  padding: 12px 24px;
}
.password-text-field:focus {
  border-color: var(--color--secondary);
}
.password-text-field::placeholder {
  color: var(--color--grey-1);
}
.primary-submit-button {
  border: 1px solid var(--color--primary);
  background-color: var(--color--primary);
  color: var(--color--dark);
  background-image: url('../images/Button-Icon-1.svg');
  background-position: 78px;
  background-repeat: no-repeat;
  background-size: auto;
  border-radius: 100px;
  padding: 12px 46px 12px 20px;
  font-weight: 600;
  transition: background-color .3s, border-color .3s;
}
.primary-submit-button:hover {
  border: 1px solid var(--color--secondary);
  background-color: var(--color--light);
}
.primary-submit-button._01 {
  background-image: none;
  margin-bottom: 0;
  padding-left: 20px;
  padding-right: 20px;
}
._404-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
._404-inner-wrap {
  width: 438px;
  max-width: var(--later-spacing--100);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  text-align: center;
  flex-flow: column;
  align-items: center;
  display: flex;
}
.text-style-h6 {
  font-size: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--_typography---h6--font-weight);
  letter-spacing: var(--_typography---h6--letter-spacing);
}
.text-style-h5 {
  font-size: var(--_typography---h5--font-size);
  line-height: var(--_typography---h5--line-height);
  font-weight: var(--_typography---h5--font-weight);
  letter-spacing: var(--_typography---h5--letter-spacing);
}
.text-style-h4 {
  font-size: var(--_typography---h4--font-size);
  line-height: var(--_typography---h4--line-height);
  font-weight: var(--_typography---h4--font-weight);
  letter-spacing: var(--_typography---h4--letter-spacing);
}
.text-style-h3 {
  font-size: var(--_typography---h3--font-size);
  line-height: var(--_typography---h3--line-height);
  font-weight: var(--_typography---h3--font-weight);
  letter-spacing: var(--_typography---h3--letter-spacing);
}
.text-style-h2 {
  font-size: var(--_typography---h2--font-size);
  line-height: var(--_typography---h2--line-height);
  font-weight: var(--_typography---h2--font-weight);
  letter-spacing: var(--_typography---h2--letter-spacing);
}
.form-container {
  padding: var(--_responsive---padding--padding-100-px) 0px;
  background-color: var(--color--site-bg);
}
.bg-light {
  background-color: var(--color--light);
}
.image-grid {
  z-index: 99;
  width: var(--later-spacing--100);
  height: var(--later-spacing--100);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: absolute;
  inset: 0%;
}
.works-grid-item {
  width: var(--later-spacing--100);
  height: var(--later-spacing--100);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background-color: #0e0e0e1a;
}
.tag-wrap-hero {
  background-color: var(--color--secondary);
  border-radius: 3px;
  padding: 2px 11px;
}
.error-message {
  border-radius: var(--_responsive---border-radius-8-px);
  background-color: var(--color--grey-2);
  color: var(--color--dark);
  text-align: center;
}
.team-mamber-list {
  padding-right: var(--_responsive---padding--padding-20-px);
  padding-left: var(--_responsive---padding--padding-20-px);
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  border-left: 1px solid var(--color--grey-2);
  flex-flow: column;
  flex: none;
  display: flex;
}
.team-mamber-list._01 {
  border-left-width: 1px;
}
.team-mamber-list._001 {
  border-left-width: 0;
}
.team-mamber-image {
  width: var(--later-spacing--100);
  border-radius: var(--_responsive---border-radius-12-px);
  height: 318px;
  overflow: hidden;
}
.team-mamber-info {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}
.drag-box {
  background-color: var(--color--primary);
  cursor: grabbing;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 160px;
  display: flex;
  position: absolute;
}
.drag-box-text {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.team-bottom-wrap {
  margin-top: var(--_responsive---margin--margin-80-px);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.cookies-block {
  z-index: 5555;
  width: 100%;
  max-width: 445px;
  padding: var(--_responsive---padding--padding-27-px);
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  background-color: var(--color--light);
  border-radius: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  display: none;
  position: fixed;
  inset: auto 32px 32px auto;
  box-shadow: 0 41px 33px #00000005, 0 100px 80px #00000008;
}
.cookies-text-block {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.utility-copyright-link {
  color: var(--color--dark);
}
.cookies-button {
  grid-column-gap: 8px;
  background-color: var(--color--primary);
  color: var(--color--dark);
  cursor: pointer;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  padding: 12px 50px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
}
.cookie-button-text {
  z-index: 3;
  position: relative;
}
.modal-title-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 24px;
  display: flex;
}
.button {
  z-index: 1;
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: #fff;
  background-color: #000;
  justify-content: center;
  align-items: center;
  padding: 14px 34px;
  text-decoration: none;
  transition: all .7s;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.button:hover {
  color: #000;
  background-color: #e3e9e4;
}
.modal-form-button-wrap {
  flex-flow: column;
  padding-top: 8px;
  display: flex;
}
.modal-form-block {
  margin-bottom: 0;
}
.modal-title-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: #070515;
  flex-flow: column;
  display: flex;
}
.modal-wrapper {
  z-index: 55555;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #0705154d;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: none;
  position: fixed;
  inset: 0%;
}
.submit-button-2 {
  z-index: 5;
  opacity: 0;
  margin-bottom: 0;
  position: absolute;
  inset: 0%;
}
.modal {
  z-index: 5;
  background-color: var(--color--light);
  border-radius: 12px;
  width: 100%;
  max-width: 554px;
  padding: 24px;
  position: relative;
}
.modal-bg {
  z-index: 2;
  position: absolute;
  inset: 0%;
}
.modal-input-field-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.modal-wrap {
  z-index: 5;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: auto;
}
.modal-close-icon {
  position: absolute;
  inset: 24px 24px auto auto;
}
.footer-link {
  color: var(--color--light);
  text-decoration: none;
  transition: color .3s;
}
.footer-link:hover, .footer-link[aria-current="page"], .footer-link.is-active {
  color: var(--color--primary);
}
.footer-link-widget {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.fooer-link-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
@media screen and (max-width: 991px) {
body {
    --_responsive---padding--padding-80-px: 70px;
    --_responsive---padding--padding-160-px: 100px;
    --_responsive---margin--margin-100-px: 80px;
    --_responsive---border-radius-12-px: 10px;
    --_responsive---border-radius-10-px: 10px;
    --_responsive---border-radius-8-px: 8px;
    --_responsive---margin--margin-60-px: 50px;
    --_responsive---padding--padding-32-px: 30px;
    --_responsive---border-radius-16-px: 14px;
    --_responsive---margin--margin-80-px: 60px;
    --_responsive---padding--padding-100-px: 80px;
    --_responsive---padding--padding-24-px: 20px;
    --_responsive---padding--padding-134-px: 130px;
    --_responsive---padding--padding-60-px: 50px;
    --_responsive---padding--padding-40-px: 30px;
    --_responsive---padding--padding-30-px: 28px;
    --_responsive---padding--padding-20-px: 20px;
    --_responsive---padding--padding-27-px: 22px;
    --_responsive---margin--margin-160-px: 120px;
    --_responsive---margin--margin-140-px: 100px;
    --_responsive---margin--margin-120-px: 100px;
    --_responsive---margin--margin-96-px: 70px;
    --_responsive---margin--margin-72-px: 60px;
    --_responsive---margin--margin-70-px: 60px;
    --_responsive---padding--padding-173-px: 120px;
    --_responsive---padding--padding-140-px: 100px;
    --_responsive---padding--padding-120-px: 80px;
    --_responsive---padding--padding-70-px: 60px;
    --_responsive---padding--padding-22-px: 20px;
    --_typography---paragraph-02--font-size: 16px;
    --_typography---paragraph-02--line-height: 24px;
    --_typography---h1--font-size: 50px;
    --_typography---h1--line-height: 58px;
    --_typography---h1--letter-spacing: var(--later-spacing--2);
    --_typography---h2--font-size: 44px;
    --_typography---h2--line-height: 52px;
    --_typography---h2--font-weight: var(--font-weight--semi-bold);
    --_typography---h2--letter-spacing: var(--later-spacing--2);
    --_typography---h3--font-size: 34px;
    --_typography---h3--line-height: 42px;
    --_typography---h3--font-weight: var(--font-weight--semi-bold);
    --_typography---h3--letter-spacing: 0px;
    --_typography---h4--font-size: 28px;
    --_typography---h4--line-height: 36px;
    --_typography---h4--font-weight: var(--font-weight--semi-bold);
    --_typography---h4--letter-spacing: var(--later-spacing--2);
    --_typography---h5--font-size: 22px;
    --_typography---h5--line-height: 30px;
    --_typography---h5--font-weight: var(--font-weight--semi-bold);
    --_typography---h5--letter-spacing: var(--later-spacing--2);
    --_typography---h6--font-size: 20px;
    --_typography---h6--line-height: 30px;
    --_typography---h6--font-weight: var(--font-weight--semi-bold);
    --_typography---h6--letter-spacing: var(--later-spacing--2);
    --_typography---paragraph-01--font-size: 18px;
    --_typography---paragraph-01--line-height: 27px;
    --_typography---tag--font-size: 14px;
    --_typography---tag--line-height: 20px;
    --_typography---display-01--font-size: 80px;
    --_typography---display-01--line-height: 88px;
    --_typography---display-01--letter-spacing: var(--later-spacing--4);
    --_typography---display-02--font-size: 60px;
    --_typography---display-02--line-height: 68px;
    --_typography---display-02--letter-spacing: var(--later-spacing--4);
    --_typography---button-text--font-size: 16px;
    --_typography---button-text--line-height: 24px;
    --_typography---display-01--font-weight: var(--font-weight--normal);
    --_typography---display-02--font-weight: var(--font-weight--medium);
    --_typography---h1--font-weight: var(--font-weight--semi-bold);
    --_typography---paragraph-01--font-weight: var(--font-weight--medium);
    --_typography---paragraph-01--letter-spacing: 0px;
    --_typography---paragraph-02--font-weight: var(--font-weight--medium);
    --_typography---paragraph-02--letter-spacing: 0px;
    --_typography---button-text--font-weight: var(--font-weight--semi-bold);
    --_typography---button-text--letter-spacing: var(--later-spacing--2);
    --_typography---tag--font-weight: var(--font-weight--semi-bold);
    --_typography---tag--letter-spacing: var(--later-spacing--2);
  }
.utility-page-content {
    padding-top: 140px;
    padding-bottom: 140px;
  }
.utility-page-form {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.container {
    padding-left: 18px;
    padding-right: 18px;
  }
.style-guide-bottom {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
  }
.style-guide-item {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    flex-flow: column;
    align-items: center;
  }
.style-guide-item-left {
    position: static;
  }
.style-guide-item-right {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.hero-v1 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.hero-v1._01 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.hero-v1-heading-wrap {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.footer-top {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    flex-flow: column;
  }
.footer-bottom {
    text-align: center;
    flex-flow: wrap;
    margin-top: 100px;
  }
.footer-top-left {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    width: auto;
  }
.footer-top-right {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    justify-content: flex-start;
    width: 100%;
  }
.sub-heading-wrap.faq-sub-heading {
    width: var(--later-spacing--100);
  }
.footer-right-01 {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
  }
.footer-right-02 {
    grid-column-gap: 34px;
    grid-row-gap: 34px;
  }
.footer-info-box {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
.navbar-right {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.nav-menu-wrapper {
    background-color: #fff;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    margin-top: 10px;
    padding: 30px;
  }
.navbar-container {
    padding-left: 16px;
    padding-right: 16px;
  }
.nav-link {
    justify-content: flex-start;
    align-items: flex-start;
  }
.paragraph-03 {
    font-size: 14px;
  }
.cart-quantity {
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 16px;
  }
.nav-item {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    display: flex;
  }
.menu-button {
    justify-content: center;
    align-items: center;
    padding: 3px;
    display: flex;
  }
.menu-button.is-open {
    color: #fff;
    background-color: #c8c8c800;
  }
.paragraph-7 {
    font-size: 16px;
  }
.nav-menu {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }
.nav-button-wrapper {
    width: 100%;
    margin-left: 0;
    display: none;
  }
.paragraph-8 {
    font-size: 20px;
    line-height: 25px;
  }
.navbar {
    padding-top: 18px;
    padding-bottom: 18px;
  }
.nav-dropdown-list-wrap.shadow-three.is-open {
    position: absolute;
  }
.nav-dropdown-list-wrap.shadow-three.mobile-shadow-hide.pages.is-open {
    padding-top: 10px;
    position: relative;
    left: 0;
  }
.nav-dropdown-toggle {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }
.nav-dropdown-toggle.is-open {
    margin-left: 0;
    margin-right: 0;
  }
.nav-dropdown {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    display: flex;
  }
.nav-dropdown-list.left {
    padding-right: 20px;
  }
.nav-dropdown-list.center {
    padding-left: 20px;
    padding-right: 20px;
  }
.nav-dropdown-list.right {
    padding-left: 20px;
  }
.dropdown-page-link-list {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    margin-top: 20px;
  }
.nav-dropdown-list-body {
    border-top-width: 1px;
    width: 100%;
    padding: 26px;
  }
.dropdown-page-link.dropdown-link-text {
    font-size: 16px;
    line-height: 22px;
  }
.h5 {
    font-size: 22px;
    line-height: 30px;
  }
.h6 {
    font-size: 18px;
    line-height: 26px;
  }
.fit-cover:where(.variant-blog-widget-v2) {
    min-height: 400px;
    max-height: 400px;
  }
.fit-cover.choose-image {
    object-position: 50% 26%;
  }
.fit-cover.expertise-bg-image {
    object-position: 0% 50%;
  }
.fit-cover.contact-image {
    object-position: 50% 32%;
  }
.home-hero-top {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.hero-hom-sub-heading {
    margin-top: 0;
    bottom: 30px;
  }
.hero-brand-left {
    width: 350px;
  }
.hero-brand-right {
    padding-top: 30px;
    padding-bottom: 30px;
  }
.logo-box {
    max-width: 132px;
    margin-right: 20px;
  }
.bg-linner-right {
    border-right-width: 0;
  }
.home-about-top {
    grid-column-gap: 34px;
    grid-row-gap: 34px;
    flex-flow: column;
  }
.home-about-bottom {
    grid-template-columns: 1fr 1fr;
  }
.home-about-top-right {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.button-wrap.awadrs-button {
    margin-top: 0;
  }
.button-wrap._404-page-button {
    margin-top: 10px;
  }
.home-about-box {
    height: 300px;
  }
.home-about-box-text {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
.statistics-number-wrap {
    height: 67px;
  }
.statistics-number-wrap._01 {
    height: 87px;
  }
.hero-v2 {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.choose-us-tabs {
    flex-flow: column;
  }
.tabs-content {
    width: var(--later-spacing--100);
    margin-top: 40px;
  }
.tabs-menu {
    width: var(--later-spacing--100);
  }
.choose-us-image-wrap {
    height: 500px;
  }
.tab-pane-tab-1 {
    width: var(--later-spacing--100);
  }
.choose-us-tab-link {
    padding: 24px;
  }
.choose-tab-link-text {
    grid-column-gap: 35px;
    grid-row-gap: 35px;
  }
.tab-details-text-01 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.ceo-words-wrap {
    grid-column-gap: 200px;
    grid-row-gap: 200px;
    padding-top: 50px;
    padding-bottom: 30px;
  }
.our-service-top {
    flex-flow: column;
  }
.our-service-bottom {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr;
  }
.home-service-box {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.service-card-icon-wrap {
    width: 54px;
    height: 54px;
  }
.service-card-icon {
    width: 22px;
  }
.projects-v1-top {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    flex-flow: column;
    align-items: flex-start;
  }
.projects-v1-bottom {
    height: auto;
  }
.projects-v1-heading {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.process-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
  }
.process-left {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    position: static;
  }
.process-right {
    width: var(--later-spacing--100);
    grid-column-gap: 26px;
    grid-row-gap: 26px;
  }
.process-number-box {
    width: 58px;
    height: 58px;
  }
.need-to-know-wrap {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
.need-to-know-left {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    text-align: center;
    justify-content: center;
    align-items: center;
    position: static;
  }
.need-to-know-right {
    width: var(--later-spacing--100);
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.know-top-linner {
    display: none;
  }
.reviews-bottom {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: 1fr 1fr;
  }
.reviews-box-wrap {
    height: 500px;
  }
.reviews-box-text-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    bottom: 20px;
    left: 20px;
    right: 20px;
  }
.faq {
    padding-top: 20px;
  }
.faq:where(.variant-faq-margin-20) {
    padding-top: 60px;
  }
.faq-wrap {
    grid-column-gap: 58px;
    grid-row-gap: 58px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
.faq-left {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 418px;
  }
.faq-right {
    width: var(--later-spacing--100);
  }
.normal-s-regular.faq-answer {
    padding-top: 12px;
  }
.faq-list {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.faq-item {
    padding-bottom: 24px;
  }
.faq-item.last-one {
    padding-bottom: 0;
  }
.sticky {
    height: auto;
  }
.wrapper {
    width: var(--later-spacing--100);
  }
.collection-list {
    grid-column-gap: 20px;
    grid-row-gap: 40px;
    flex-flow: column;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.collection-item {
    max-width: var(--later-spacing--100);
    padding-right: 0;
  }
.project-v1-image {
    height: 200px;
  }
.project-v1-image.v2 {
    height: 300px;
  }
.project-v1-text-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 2px;
    flex-flow: wrap;
  }
.about-hero {
    padding-bottom: 60px;
  }
.about-hero-wrap {
    height: auto;
  }
.about-hero-top {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.about-hero-bottom {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    margin-top: 29px;
  }
.about-image-wrap {
    width: 50%;
    height: 200px;
  }
.about-sub-heading-wrap {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    position: static;
  }
.about-left-image {
    width: 140px;
    top: 54px;
  }
.about-right-image {
    width: 140px;
  }
.about-brand-wrap {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    flex-flow: column;
    align-items: flex-start;
  }
.about-brand-left {
    width: var(--later-spacing--100);
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
.about-brand-right {
    grid-column-gap: 60px;
    grid-row-gap: 40px;
  }
.brand-counter-box, .left-brand-box {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.lefft-brand-image {
    width: 140px;
  }
.who-we-are-top {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    text-align: center;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
.company-history {
    padding-top: 40px;
  }
.history-wrap {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
.history-left {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    justify-content: center;
    align-items: center;
    position: static;
  }
.history-right {
    width: var(--later-spacing--100);
  }
.history-heading-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
.history-list-wrap, .history-top-wrap {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.expertise-wrap {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    flex-flow: column;
  }
.expertise-left {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
    width: 800px;
  }
.expertise-right {
    width: var(--later-spacing--100);
    grid-column-gap: 34px;
    grid-row-gap: 34px;
  }
.expertise-text-wrap {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.expertise-list-text-wrap {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }
.accelerate-wrap {
    flex-flow: column;
  }
.accelerate-01 {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    width: 600px;
  }
.accelerate-02 {
    width: 600px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
  }
.accelerate-03 {
    width: var(--later-spacing--100);
  }
.accelerate-03-inner {
    margin-top: 0;
  }
.teams {
    padding-top: 20px;
  }
.teams-top {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.teams-bottom {
    width: var(--later-spacing--100);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.awadrs-wrap {
    flex-flow: column;
  }
.awadrs-left {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 600px;
    position: static;
  }
.awadrs-right-inner {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.awadrs-right-shadow {
    display: none;
  }
.awadrs-list-wrap {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.presence-top {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    flex-flow: column;
  }
.presence-bottom {
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
  }
.presence-top-right {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.blog-v1 {
    padding-top: 60px;
  }
.blog-v1-top-left {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.blog-v1-collection-list {
    grid-column-gap: 12px;
    grid-row-gap: 30px;
    grid-template-columns: 1fr 1fr;
  }
.blog-v1-image {
    height: 100%;
  }
.service-hero-left {
    width: 450px;
  }
.service-hero-card {
    grid-column-gap: 31px;
    grid-row-gap: 31px;
  }
.hero-card-text {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.service-heading-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.service-top-heading {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    flex-flow: column;
    align-items: flex-start;
  }
.service-top-left {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.service-top-bottom {
    width: 100%;
  }
.service-box-inner-bottom {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-flow: column-reverse;
    padding-top: 40px;
  }
.service-box-left {
    width: var(--later-spacing--100);
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.service-inner-right, .service-inner-left {
    width: var(--later-spacing--100);
  }
.service-list-01 {
    width: 200px;
  }
.choose-us-v1-bottom {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.choose-us-box-list-40, .choose-us-box-list-20 {
    width: var(--later-spacing--100);
    grid-column-gap: 80px;
    grid-row-gap: 80px;
    height: auto;
  }
.work-collection-list {
    grid-column-gap: 24px;
  }
.work-details-wrap {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    flex-flow: column-reverse;
  }
.work-details-right {
    width: var(--later-spacing--100);
    grid-column-gap: 36px;
    grid-row-gap: 36px;
    position: static;
  }
.work-main-image {
    height: 500px;
  }
.work-details-image-01 {
    height: 450px;
  }
.work-details-image-v2 {
    height: 400px;
  }
.work-details-box-inner {
    padding-top: 10px;
    padding-bottom: 10px;
  }
.work-rich-text h5 {
    margin-top: 28px;
  }
.blog {
    padding-bottom: 80px;
  }
.blog-bottom {
    margin-top: 80px;
  }
.blog-tabs {
    flex-flow: column;
    display: flex;
  }
.blog-tabs-content {
    margin-top: 40px;
  }
.blog-tabs-menu {
    width: var(--later-spacing--100);
    flex-flow: row;
  }
.blog-tab-link {
    padding-top: 12px;
    padding-bottom: 12px;
  }
.blog-list-wrap {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
.blog-list-top {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-columns: 1fr 1fr;
  }
.blog-details-bottom {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column-reverse;
  }
.blog-details-left {
    position: static;
  }
.blog-main-image {
    height: 450px;
  }
.blog-heading {
    padding-bottom: 10px;
  }
.blog-rich-text h5 {
    margin-top: 30px;
  }
.blog-details-image-wrap {
    height: 400px;
  }
.contact-info-bottom {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    grid-template-columns: 1fr 1fr;
  }
.contact-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column-reverse;
  }
.contact-right {
    height: 500px;
    max-width: var(--later-spacing--100);
  }
.contact-left {
    width: var(--later-spacing--100);
    padding-top: 0;
    padding-right: 0;
  }
.form-field-wrap {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }
.form-field-main-wrap {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.contact-form {
    grid-column-gap: 22px;
    grid-row-gap: 22px;
  }
.text-field {
    min-height: 50px;
  }
.submit-button {
    background-image: none;
    background-repeat: repeat;
    background-size: auto;
    padding-left: 20px;
    padding-right: 20px;
  }
.contact-info-box {
    grid-column-gap: 56px;
    grid-row-gap: 56px;
  }
.contact-info-box-top {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.pricing-collection-list {
    grid-template-columns: 1fr 1fr;
  }
.pricing-list-wrap {
    grid-column-gap: 31px;
    grid-row-gap: 31px;
  }
.pricing-middle-list {
    padding-top: 10px;
    padding-bottom: 10px;
  }
.pricing-details-text {
    margin-top: 0;
  }
.pricing-rich-text h5 {
    margin-top: 30px;
  }
.pricing-card-right {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    padding: 20px;
  }
.add-to-cart-button {
    background-image: none;
    background-repeat: repeat;
    background-size: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
.add-to-cart-button:hover {
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto;
  }
.license-bottom {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.license-list-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.license-box-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.changelog-bottom {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-columns: 1fr;
  }
.changelog-list-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.privacy-policy-bottom {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.policy-item-list {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.policy-item-bottom {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.policy-item-list-01 {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }
.pass-icon-heading {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
._404-inner-wrap {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.form-container {
    padding-top: 60px;
    padding-bottom: 60px;
  }
.team-mamber-list {
    padding-bottom: 40px;
    padding-right: 0;
  }
.team-mamber-list._01 {
    border-left-width: 0;
    padding-left: 0;
    padding-right: 20px;
  }
.team-mamber-list._001 {
    padding-left: 0;
    padding-right: 20px;
  }
.team-mamber-image {
    height: auto;
  }
.team-mamber-info {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }
.drag-box {
    display: none;
  }
.team-bottom-wrap {
    width: var(--later-spacing--100);
  }
.button {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    padding-left: 24px;
    padding-right: 24px;
  }
.footer-link-widget {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
}
@media screen and (max-width: 767px) {
body {
    --_responsive---padding--padding-80-px: 50px;
    --_responsive---padding--padding-160-px: 80px;
    --_responsive---margin--margin-100-px: 60px;
    --_responsive---border-radius-12-px: 8px;
    --_responsive---border-radius-10-px: 8px;
    --_responsive---border-radius-8-px: 8px;
    --_responsive---margin--margin-60-px: 40px;
    --_responsive---padding--padding-32-px: 24px;
    --_responsive---border-radius-16-px: 10px;
    --_responsive---margin--margin-80-px: 50px;
    --_responsive---padding--padding-100-px: 60px;
    --_responsive---padding--padding-24-px: 18px;
    --_responsive---padding--padding-134-px: 100px;
    --_responsive---padding--padding-60-px: 40px;
    --_responsive---padding--padding-40-px: 26px;
    --_responsive---padding--padding-30-px: 20px;
    --_responsive---padding--padding-20-px: 18px;
    --_responsive---padding--padding-27-px: 18px;
    --_responsive---margin--margin-160-px: 100px;
    --_responsive---margin--margin-140-px: 80px;
    --_responsive---margin--margin-120-px: 80px;
    --_responsive---margin--margin-96-px: 50px;
    --_responsive---margin--margin-72-px: 40px;
    --_responsive---margin--margin-70-px: 40px;
    --_responsive---padding--padding-173-px: 100px;
    --_responsive---padding--padding-140-px: 80px;
    --_responsive---padding--padding-120-px: 60px;
    --_responsive---padding--padding-70-px: 50px;
    --_responsive---padding--padding-22-px: 18px;
    --_typography---paragraph-02--font-size: 15px;
    --_typography---paragraph-02--line-height: 23px;
    --_typography---h1--font-size: 42px;
    --_typography---h1--line-height: 50px;
    --_typography---h1--letter-spacing: var(--later-spacing--2);
    --_typography---h2--font-size: 38px;
    --_typography---h2--line-height: 46px;
    --_typography---h2--font-weight: var(--font-weight--semi-bold);
    --_typography---h2--letter-spacing: var(--later-spacing--2);
    --_typography---h3--font-size: 30px;
    --_typography---h3--line-height: 38px;
    --_typography---h3--font-weight: var(--font-weight--semi-bold);
    --_typography---h3--letter-spacing: 0px;
    --_typography---h4--font-size: 26px;
    --_typography---h4--line-height: 34px;
    --_typography---h4--font-weight: var(--font-weight--semi-bold);
    --_typography---h4--letter-spacing: var(--later-spacing--2);
    --_typography---h5--font-size: 20px;
    --_typography---h5--line-height: 28px;
    --_typography---h5--font-weight: var(--font-weight--semi-bold);
    --_typography---h5--letter-spacing: var(--later-spacing--2);
    --_typography---h6--font-size: 18px;
    --_typography---h6--line-height: 26px;
    --_typography---h6--font-weight: var(--font-weight--semi-bold);
    --_typography---h6--letter-spacing: var(--later-spacing--2);
    --_typography---paragraph-01--font-size: 15px;
    --_typography---paragraph-01--line-height: 23px;
    --_typography---tag--font-size: 14px;
    --_typography---tag--line-height: 20px;
    --_typography---display-01--font-size: 70px;
    --_typography---display-01--line-height: 78px;
    --_typography---display-01--letter-spacing: var(--later-spacing--4);
    --_typography---display-02--font-size: 50px;
    --_typography---display-02--line-height: 58px;
    --_typography---display-02--letter-spacing: var(--later-spacing--4);
    --_typography---button-text--font-size: 16px;
    --_typography---button-text--line-height: 24px;
    --_typography---display-01--font-weight: var(--font-weight--normal);
    --_typography---display-02--font-weight: var(--font-weight--medium);
    --_typography---h1--font-weight: var(--font-weight--semi-bold);
    --_typography---paragraph-01--font-weight: var(--font-weight--medium);
    --_typography---paragraph-01--letter-spacing: 0px;
    --_typography---paragraph-02--font-weight: var(--font-weight--medium);
    --_typography---paragraph-02--letter-spacing: 0px;
    --_typography---button-text--font-weight: var(--font-weight--semi-bold);
    --_typography---button-text--letter-spacing: var(--later-spacing--2);
    --_typography---tag--font-weight: var(--font-weight--semi-bold);
    --_typography---tag--letter-spacing: var(--later-spacing--2);
  }
.utility-page-content {
    padding-top: 100px;
    padding-bottom: 100px;
  }
.utility-page-form {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
  }
.container {
    padding-left: 14px;
    padding-right: 14px;
  }
.style-guide-bottom {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
.style-guide-item {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.style-guide-item-right {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
  }
.typography-list {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }
.style-guide-color-wrap {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.color-block {
    height: 150px;
  }
.button-01 {
    padding: 10px 22px;
  }
.button-01:where(.variant-button-01-hero), .button-01.hero-butoon {
    padding-top: 16px;
    padding-bottom: 16px;
  }
.style-guide-button-wrap {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.hero-v1 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.hero-v1._01 {
    max-width: 490px;
  }
.hero-v1-heading-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.footer-top {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.footer-bottom {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    justify-content: center;
    margin-top: 80px;
  }
.footer-top-left {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    width: 500px;
  }
.social-link-list {
    width: 40px;
    height: 40px;
  }
.footer-right-01 {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.footer-right-02 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.footer-info-box {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }
.navbar-right {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.navbar-brand {
    padding-left: 0;
  }
.nav-menu-wrapper {
    padding: 28px;
  }
.navbar-container {
    padding-left: 14px;
    padding-right: 14px;
  }
.mobile-margin-top-10 {
    margin-top: 10px;
  }
.button-02-arrow-group {
    width: 22px;
    height: 22px;
  }
.menu-button {
    width: 30px;
    height: 30px;
  }
.nav-menu {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.button-04 {
    padding: 6px 6px 6px 22px;
  }
.paragraph-8 {
    font-size: 18px;
    line-height: 24px;
  }
.navbar {
    padding-top: 16px;
    padding-bottom: 16px;
  }
.nav-dropdown-list-wrap.shadow-three {
    box-shadow: 0 8px 50px #0000000d;
  }
.nav-dropdown-list-wrap.shadow-three.is-open {
    position: relative;
  }
.nav-dropdown-list-wrap.shadow-three.mobile-shadow-hide {
    box-shadow: none;
  }
.nav-dropdown-toggle.is-open {
    margin-left: 0;
    margin-right: 0;
  }
.nav-dropdown-list.left {
    padding-right: 16px;
  }
.nav-dropdown-list.center {
    padding-left: 16px;
    padding-right: 16px;
  }
.nav-dropdown-list.right {
    padding-left: 16px;
  }
.dropdown-page-link-list {
    grid-column-gap: 11px;
    grid-row-gap: 11px;
    margin-top: 16px;
  }
.nav-dropdown-list-body {
    width: 100%;
    padding: 16px;
  }
.nav-dropdown-icon {
    font-size: 12px;
  }
.dropdown-page-link.dropdown-link-text {
    font-size: 14px;
    line-height: 20px;
  }
.h5 {
    font-size: 20px;
    line-height: 28px;
  }
.h6 {
    font-size: 16px;
    line-height: 24px;
  }
.fit-cover:where(.variant-blog-widget-v2) {
    min-height: 350px;
    max-height: 350px;
  }
.home-hero-top {
    grid-column-gap: 21px;
    grid-row-gap: 21px;
  }
.hero-button-wrap {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.hero-button-01 {
    width: 180px;
  }
.button-02 {
    padding: 16px 22px;
  }
.hero-brand-wrap {
    text-align: center;
    flex-flow: column;
    justify-content: center;
    padding-top: 30px;
  }
.hero-brand-right {
    padding-top: 21px;
    padding-bottom: 21px;
  }
.logo-box {
    margin-right: 33px;
  }
.bg-linner-left {
    border-left: 1px solid #ebebeb;
    width: 132px;
  }
.bg-linner-right {
    border-right-width: 1px;
    width: 132px;
  }
.button-wrap._404-page-button {
    margin-top: 6px;
  }
.home-about-box {
    height: 250px;
  }
.home-about-box-text {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }
.statistics-number-wrap {
    height: 58px;
  }
.statistics-number-wrap._01 {
    height: 78px;
  }
.hero-v2 {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.tabs-content {
    margin-top: 30px;
  }
.choose-us-image-wrap {
    height: 400px;
  }
.choose-us-tab-link {
    padding: 20px;
  }
.choose-tab-link-text {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.tab-details-text-01 {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
.ceo-words-wrap {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
    padding-top: 40px;
    padding-bottom: 20px;
  }
.ceo-words-top {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.ceo-words-bottom-right {
    margin-bottom: -13px;
  }
.our-service-bottom {
    grid-template-columns: 1fr;
  }
.home-service-box {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
  }
.projects-v1-top {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.projects-v1-heading {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.heading-wrap.project-heading {
    width: 500px;
  }
.process-number-box {
    width: 54px;
    height: 54px;
  }
.need-to-know-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.need-to-know-left {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.need-to-know-right {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.reviews-bottom {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    grid-template-columns: 1fr;
  }
.reviews-box-wrap {
    height: 400px;
  }
.reviews-box-text-wrap {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.faq:where(.variant-faq-margin-20) {
    padding-top: 60px;
  }
.faq-wrap {
    grid-column-gap: 44px;
    grid-row-gap: 44px;
  }
.faq-left {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.normal-s-regular.faq-answer {
    padding-top: 10px;
  }
.collection-list {
    grid-column-gap: 34px;
    grid-row-gap: 34px;
    grid-template-columns: 1fr;
  }
.project-v1-list {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.project-v1-image {
    height: 320px;
  }
.project-v1-image.v2 {
    height: 200px;
  }
.about-hero {
    padding-bottom: 50px;
  }
.about-hero-top {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.about-hero-bottom {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    margin-top: 20px;
  }
.about-image-wrap {
    width: 57%;
    height: 170px;
  }
.about-sub-heading-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.about-left-image, .about-right-image {
    width: 100px;
  }
.about-brand-wrap {
    grid-column-gap: 44px;
    grid-row-gap: 44px;
  }
.about-brand-left {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
  }
.about-brand-right {
    grid-column-gap: 18px;
    grid-row-gap: 40px;
  }
.brand-counter-box {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.left-brand-box {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.lefft-brand-image {
    width: 120px;
  }
.who-we-are-top {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.history-wrap {
    grid-column-gap: 42px;
    grid-row-gap: 42px;
  }
.history-right {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.history-top-icon {
    width: 38px;
  }
.history-top-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.expertise-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.expertise-left {
    grid-column-gap: 22px;
    grid-row-gap: 22px;
  }
.expertise-right {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.expertise-text-wrap {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
.expertise-list {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    flex-flow: column;
  }
.expertise-list-text-wrap {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }
.expertise-list-text {
    font-size: 38px;
    line-height: 46px;
  }
.accelerate-01 {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
.accelerate-02 {
    width: var(--later-spacing--100);
    height: 400px;
    padding: 34px;
  }
.teams-top {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.awadrs-left {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.awadrs-right-inner {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.presence-top {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.presence-bottom {
    margin-top: 30px;
  }
.presence-top-right {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.presence-icon {
    width: 30px;
  }
.blog-v1 {
    padding-top: 50px;
  }
.blog-v1-top {
    grid-column-gap: 17px;
    grid-row-gap: 17px;
    flex-flow: column;
    align-items: flex-start;
  }
.blog-v1-top-left {
    grid-column-gap: 17px;
    grid-row-gap: 17px;
  }
.blog-v1-collection-list {
    grid-template-columns: 1fr;
  }
.blog-v1-list {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.blog-v1-text-wrap {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
  }
.blog-v1-sub-title {
    grid-row-gap: 0px;
    flex-flow: wrap;
  }
.service-hero-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    justify-content: flex-end;
  }
.service-hero-right {
    width: 280px;
  }
.service-nav-hero {
    height: 80vh;
  }
.service-hero-card {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding: 20px;
  }
.hero-card-text {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.hero-card-icon {
    width: 50px;
  }
.service-top-heading, .service-top-left {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.service-box-inner-bottom {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    padding-top: 20px;
  }
.service-box-right {
    width: 180px;
    height: 240px;
  }
.service-box-left {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-flow: column;
  }
.service-inner-right {
    justify-content: flex-start;
  }
.choose-us-v1-bottom {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.choose-us-box-list-40, .choose-us-box-list-20 {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
.work-collection-list {
    grid-column-gap: 18px;
    grid-row-gap: 26px;
  }
.work-details-right {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
  }
.work-main-image {
    height: 350px;
  }
.work-details-image-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.work-details-image-01 {
    height: 320px;
  }
.work-details-image-02 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.work-details-image-v2 {
    height: 300px;
  }
.work-rich-text h5 {
    margin-top: 24px;
  }
.work-rich-text p {
    font-size: 16px;
    line-height: 24px;
  }
.related-work-top {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.blog {
    padding-bottom: 60px;
  }
.blog-bottom {
    margin-top: 60px;
  }
.blog-tabs-content {
    margin-top: 30px;
  }
.blog-tabs-menu {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: wrap;
  }
.blog-tab-link {
    padding: 10px 26px;
  }
.blog-list-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.blog-list-top {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.blog-details-bottom {
    margin-top: 50px;
  }
.blog-details-left {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.blog-main-image {
    height: auto;
  }
.blog-rich-text h5 {
    margin-top: 20px;
  }
.blog-rich-text p {
    font-size: 16px;
    line-height: 25px;
  }
.blog-rich-text li {
    margin-top: 6px;
  }
.blog-details-image-wrap {
    height: auto;
  }
.contact-right {
    height: 400px;
  }
.contact-left {
    grid-column-gap: 38px;
    grid-row-gap: 38px;
  }
.contact-heading-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.form-field-wrap {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }
.form-field-main-wrap {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.contact-form {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.text-field-02 {
    min-height: 100px;
  }
.contact-info-box {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.contact-box-icon-wrap {
    width: 50px;
    height: 50px;
  }
.contact-box-icon {
    width: 20px;
  }
.contact-info-box-top {
    grid-column-gap: 11px;
    grid-row-gap: 11px;
  }
.pricing-collection-list {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-columns: 1fr;
  }
.pricing-middle-list {
    padding-top: 8px;
    padding-bottom: 8px;
  }
.pricing-card-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
  }
.pricing-details-text {
    margin-top: 20px;
  }
.pricing-rich-text h5 {
    margin-top: 24px;
  }
.pricing-rich-text p {
    margin-top: 10px;
  }
.pricing-card-right {
    width: var(--later-spacing--100);
    padding: 18px;
  }
.add-to-cart-button {
    padding: 12px;
  }
.license-bottom {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
  }
.license-list-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.license-box-wrap {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.changelog-bottom {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
  }
.changelog-list-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.privacy-policy-bottom {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
  }
.policy-item-list, .policy-item-top {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.policy-item-list-01 {
    padding-left: 22px;
  }
.pass-icon-heading, .pass-inpute-box {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.form-container {
    padding-top: 40px;
    padding-bottom: 40px;
  }
.team-mamber-list {
    padding-bottom: 30px;
  }
.team-mamber-list._01, .team-mamber-list._001 {
    padding-right: 18px;
  }
.team-mamber-image {
    height: auto;
  }
.cookies-block {
    bottom: 20px;
    right: 20px;
  }
.modal-input-field-wrapper {
    grid-row-gap: 24px;
    grid-template-columns: 1fr;
  }
.modal-wrap {
    justify-content: center;
    align-items: flex-start;
    max-height: 500px;
  }
.footer-link-widget {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }
.fooer-link-wrap {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }
}
@media screen and (max-width: 479px) {
body {
    --_responsive---padding--padding-80-px: 40px;
    --_responsive---padding--padding-160-px: 70px;
    --_responsive---margin--margin-100-px: 40px;
    --_responsive---border-radius-12-px: 6px;
    --_responsive---border-radius-10-px: 6px;
    --_responsive---border-radius-8-px: 6px;
    --_responsive---margin--margin-60-px: 30px;
    --_responsive---padding--padding-32-px: 20px;
    --_responsive---border-radius-16-px: 8px;
    --_responsive---margin--margin-80-px: 40px;
    --_responsive---padding--padding-100-px: 40px;
    --_responsive---padding--padding-24-px: 16px;
    --_responsive---padding--padding-134-px: 80px;
    --_responsive---padding--padding-60-px: 30px;
    --_responsive---padding--padding-40-px: 20px;
    --_responsive---padding--padding-30-px: 18px;
    --_responsive---padding--padding-20-px: 16px;
    --_responsive---padding--padding-27-px: 16px;
    --_responsive---margin--margin-160-px: 80px;
    --_responsive---margin--margin-140-px: 60px;
    --_responsive---margin--margin-120-px: 60px;
    --_responsive---margin--margin-96-px: 40px;
    --_responsive---margin--margin-72-px: 30px;
    --_responsive---margin--margin-70-px: 30px;
    --_responsive---padding--padding-173-px: 80px;
    --_responsive---padding--padding-140-px: 60px;
    --_responsive---padding--padding-120-px: 40px;
    --_responsive---padding--padding-70-px: 40px;
    --_responsive---padding--padding-22-px: 16px;
    --_typography---paragraph-02--font-size: 15px;
    --_typography---paragraph-02--line-height: 23px;
    --_typography---h1--font-size: 34px;
    --_typography---h1--line-height: 42px;
    --_typography---h1--letter-spacing: var(--later-spacing--2);
    --_typography---h2--font-size: 28px;
    --_typography---h2--line-height: 36px;
    --_typography---h2--font-weight: var(--font-weight--semi-bold);
    --_typography---h2--letter-spacing: var(--later-spacing--2);
    --_typography---h3--font-size: 24px;
    --_typography---h3--line-height: 32px;
    --_typography---h3--font-weight: var(--font-weight--semi-bold);
    --_typography---h3--letter-spacing: 0px;
    --_typography---h4--font-size: 22px;
    --_typography---h4--line-height: 30px;
    --_typography---h4--font-weight: var(--font-weight--semi-bold);
    --_typography---h4--letter-spacing: var(--later-spacing--2);
    --_typography---h5--font-size: 18px;
    --_typography---h5--line-height: 26px;
    --_typography---h5--font-weight: var(--font-weight--semi-bold);
    --_typography---h5--letter-spacing: var(--later-spacing--2);
    --_typography---h6--font-size: 16px;
    --_typography---h6--line-height: 24px;
    --_typography---h6--font-weight: var(--font-weight--semi-bold);
    --_typography---h6--letter-spacing: var(--later-spacing--2);
    --_typography---paragraph-01--font-size: 15px;
    --_typography---paragraph-01--line-height: 23px;
    --_typography---tag--font-size: 14px;
    --_typography---tag--line-height: 20px;
    --_typography---display-01--font-size: 60px;
    --_typography---display-01--line-height: 68px;
    --_typography---display-01--letter-spacing: var(--later-spacing--4);
    --_typography---display-02--font-size: 44px;
    --_typography---display-02--line-height: 52px;
    --_typography---display-02--letter-spacing: var(--later-spacing--4);
    --_typography---button-text--font-size: 15px;
    --_typography---button-text--line-height: 23px;
    --_typography---display-01--font-weight: var(--font-weight--normal);
    --_typography---display-02--font-weight: var(--font-weight--medium);
    --_typography---h1--font-weight: var(--font-weight--semi-bold);
    --_typography---paragraph-01--font-weight: var(--font-weight--medium);
    --_typography---paragraph-01--letter-spacing: 0px;
    --_typography---paragraph-02--font-weight: var(--font-weight--medium);
    --_typography---paragraph-02--letter-spacing: 0px;
    --_typography---button-text--font-weight: var(--font-weight--semi-bold);
    --_typography---button-text--letter-spacing: var(--later-spacing--2);
    --_typography---tag--font-weight: var(--font-weight--semi-bold);
    --_typography---tag--letter-spacing: var(--later-spacing--2);
  }
.utility-page-content {
    padding-top: 80px;
    padding-bottom: 80px;
  }
.utility-page-form {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }
.container {
    padding-left: 12px;
    padding-right: 12px;
  }
.container.hero-container {
    flex-flow: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 40px;
  }
.style-guide-bottom {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.style-guide-item {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.style-guide-item-right {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.style-guide-color-wrap {
    grid-template-columns: 1fr 1fr;
  }
.color-block {
    height: 100px;
  }
.button-01 {
    padding-left: 20px;
    padding-right: 20px;
  }
.button-01:where(.variant-button-01-hero), .button-01.hero-butoon {
    padding-top: 12px;
    padding-bottom: 12px;
  }
.button-01-wrap {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }
.button-01-icon-wrap {
    width: 16px;
    height: 16px;
  }
.style-guide-button-wrap {
    grid-template-columns: 1fr 1fr;
  }
.hero-v1 {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.hero-v1-heading-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.footer {
    padding-bottom: 16px;
  }
.footer-top {
    grid-column-gap: 34px;
    grid-row-gap: 34px;
  }
.footer-bottom {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    margin-top: 50px;
  }
.text-light.footer-heading {
    font-size: 22px;
    line-height: 30px;
  }
.footer-top-left {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.footer-top-right {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: wrap;
  }
.social-link-wrap {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    align-items: center;
    display: flex;
  }
.social-link-list {
    width: 30px;
    height: 30px;
  }
.social-link-list.first-one {
    margin-left: -10px;
  }
.footer-right-01 {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    width: 100%;
  }
.footer-right-02 {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.footer-info-box {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }
.navbar-right {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.navbar-brand {
    width: 130px;
  }
.nav-menu-wrapper {
    padding: 24px 18px;
  }
.navbar-container {
    padding-left: 12px;
    padding-right: 12px;
  }
.cart-list {
    padding-left: 5px;
    padding-right: 5px;
  }
.cart-header {
    padding-left: 16px;
    padding-right: 16px;
  }
.button-02-arrow-group {
    width: 20px;
    height: 20px;
  }
.menu-button {
    width: 28px;
    height: 28px;
    padding: 2px;
  }
.paragraph-7 {
    font-size: 14px;
    line-height: 25px;
  }
.nav-menu {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.button-04 {
    padding: 5px 5px 5px 20px;
  }
.nav-button-wrapper {
    width: auto;
  }
.paragraph-8 {
    font-size: 16px;
    line-height: 22px;
  }
.navbar {
    padding-top: 14px;
    padding-bottom: 14px;
  }
.nav-dropdown-list-wrap.shadow-three.mobile-shadow-hide.pages.is-open {
    padding-top: 8px;
  }
.nav-dropdown-list {
    flex: 1;
  }
.nav-dropdown-list.left {
    padding-right: 0;
  }
.nav-dropdown-list.center {
    border-left-width: 0;
    border-right-width: 0;
    padding-left: 0;
    padding-right: 0;
  }
.nav-dropdown-list.right {
    padding-left: 0;
  }
.dropdown-page-link-list {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-top: 12px;
  }
.nav-dropdown-list-body {
    grid-column-gap: 16px;
    grid-row-gap: 24px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.h5 {
    font-size: 18px;
    line-height: 26px;
  }
.h6 {
    font-size: 16px;
  }
.home-hero-wrap {
    padding-bottom: 0;
  }
.fit-cover.ceo-home-bg {
    object-position: 10% 50%;
  }
.fit-cover.expertise-bg-image {
    display: none;
  }
.fit-cover.service-image {
    object-position: 50% 0%;
  }
.home-hero-top {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.hero-button-wrap {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: column;
    align-items: flex-start;
  }
.hero-button-01 {
    width: var(--later-spacing--100);
    align-items: flex-start;
  }
.hero-button-01._01 {
    justify-content: center;
    align-items: center;
  }
.button-02 {
    padding: 12px 20px;
  }
.hero-hom-sub-heading {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    position: static;
  }
.hero-brand-wrap {
    padding-top: 20px;
  }
.hero-brand-right {
    padding-top: 20px;
    padding-bottom: 20px;
  }
.logo-box {
    max-width: 120px;
    margin-right: 23px;
  }
.bg-linner-left, .bg-linner-right {
    width: 100px;
  }
.home-about-top {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.home-about-bottom {
    grid-template-columns: 1fr;
  }
.home-about-top-right {
    grid-column-gap: 22px;
    grid-row-gap: 22px;
  }
.button-wrap._404-page-button {
    margin-top: 5px;
  }
.home-about-box {
    height: 220px;
  }
.hover-dot {
    margin-top: 20px;
    margin-right: 20px;
  }
.statistics-number-wrap {
    height: 52px;
  }
.statistics-number-wrap._01 {
    height: 68px;
  }
.hero-v2 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.tabs-content {
    margin-top: 20px;
  }
.choose-us-image-wrap {
    height: 300px;
  }
.choose-us-tab-link {
    padding: 16px;
  }
.choose-tab-link-text {
    grid-column-gap: 28px;
    grid-row-gap: 28px;
  }
.tab-details-text {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
.tab-details-text-01 {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }
.ceo-words-wrap {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
.ceo-words-bottom {
    flex-flow: column-reverse;
    align-items: flex-start;
  }
.ceo-words-bottom-left {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.ceo-words-bottom-right {
    margin-bottom: 0;
  }
.ceo-image {
    width: 52px;
    height: 52px;
  }
.our-service-top, .our-service-bottom {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.home-service-box {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
.service-card-icon-wrap {
    width: 52px;
    height: 52px;
  }
.service-card-icon {
    width: 20px;
  }
.process-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.process-left {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.process-number-box {
    width: 50px;
    height: 50px;
  }
.need-to-know-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.need-to-know-left {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.need-to-know-right {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.reviews-box-wrap {
    height: auto;
  }
.reviews-box-text-wrap {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    left: 14px;
    right: 14px;
  }
.faq:where(.variant-faq-margin-20) {
    padding-top: 40px;
  }
.faq-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.faq-left {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
.faq-item {
    padding-bottom: 20px;
  }
.faq-icon-box {
    flex: none;
  }
.collection-list {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
  }
.project-v1-list {
    grid-column-gap: 13px;
    grid-row-gap: 13px;
  }
.project-v1-bottom {
    align-items: flex-start;
  }
.project-v1-image {
    height: 200px;
  }
.project-v1-image.v2 {
    height: 220px;
  }
.project-v1-text-wrap {
    grid-column-gap: 8px;
    grid-row-gap: 1px;
  }
.about-hero-top {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.about-hero-bottom {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
    margin-top: 19px;
  }
.about-image-wrap {
    width: 60%;
    height: 150px;
  }
.about-sub-heading-wrap {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.about-left-image, .about-right-image {
    width: 74px;
  }
.about-brand-wrap {
    grid-column-gap: 36px;
    grid-row-gap: 36px;
  }
.about-brand-left {
    grid-column-gap: 38px;
    grid-row-gap: 38px;
    padding: 10px;
  }
.about-brand-right {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-columns: 1fr;
  }
.brand-counter-box {
    grid-column-gap: 7px;
    grid-row-gap: 7px;
  }
.left-brand-box {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.who-we-are-top {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.company-history {
    padding-top: 20px;
  }
.history-wrap {
    grid-column-gap: 38px;
    grid-row-gap: 38px;
  }
.history-left {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.history-heading-wrap {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
.history-list-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.history-top-icon {
    width: 34px;
  }
.history-top-wrap {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.expertise-bg {
    background-color: var(--color--dark);
  }
.expertise-right {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
  }
.expertise-list {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.expertise-list-text {
    font-size: 30px;
    line-height: 38px;
  }
.accelerate-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.accelerate-01 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.accelerate-02 {
    padding: 30px;
  }
.teams-top {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.teams-bottom {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-columns: 1fr;
  }
.awadrs {
    padding-top: 40px;
    padding-bottom: 40px;
  }
.awadrs-left {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.awadrs-right-inner {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.presence-bottom {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-columns: 1fr;
    margin-top: 27px;
  }
.presence-icon-wrap {
    width: 54px;
    height: 54px;
  }
.presence-icon {
    width: 28px;
  }
.blog-v1 {
    padding-top: 40px;
  }
.blog-v1-top {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.blog-v1-top-left {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.blog-v1-collection-list {
    grid-row-gap: 24px;
  }
.blog-v1-list {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.service-hero-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.service-hero-right {
    width: var(--later-spacing--100);
  }
.service-nav-hero {
    height: 70vh;
  }
.service-heading-wrap {
    grid-column-gap: 11px;
    grid-row-gap: 11px;
  }
.service-top-heading, .service-top-left {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
.service-box-inner-bottom {
    grid-column-gap: 22px;
    grid-row-gap: 22px;
  }
.service-box-right {
    width: var(--later-spacing--100);
    height: 300px;
  }
.service-box-left {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.service-inner-right {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
    flex-flow: wrap;
  }
.choose-us-v1-bottom {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
  }
.work-collection-list {
    grid-template-columns: 1fr;
  }
.work-details-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.work-details-right {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.work-main-image {
    height: 240px;
  }
.work-details-image-01 {
    height: 200px;
  }
.work-details-image-02 {
    flex-flow: column;
  }
.work-details-image-v2 {
    height: 200px;
  }
.work-details-box-inner {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
.work-rich-text h5 {
    margin-top: 22px;
  }
.work-rich-text p {
    margin-top: 6px;
    font-size: 15px;
    line-height: 23px;
  }
.related-work-top {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    align-items: flex-start;
  }
.blog {
    padding-bottom: 40px;
  }
.blog-bottom {
    margin-top: 40px;
  }
.blog-tabs-content {
    margin-top: 20px;
  }
.blog-tabs-menu {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
.blog-tab-link {
    padding-top: 8px;
    padding-bottom: 8px;
  }
.blog-list-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
.blog-list-top {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-columns: 1fr;
  }
.blog-details-bottom {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    margin-top: 40px;
  }
.blog-details-left {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.blog-main-image {
    height: 175px;
  }
.blog-rich-text h5 {
    margin-top: 18px;
  }
.blog-rich-text p {
    font-size: 15px;
    line-height: 24px;
  }
.blog-rich-text ul {
    padding-left: 24px;
  }
.blog-rich-text li {
    font-size: 15px;
    line-height: 23px;
  }
.similar-blog-top {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    flex-flow: column;
    align-items: flex-start;
  }
.blog-details-left-top {
    grid-column-gap: 11px;
    grid-row-gap: 11px;
    flex-flow: wrap;
  }
.contact-info-bottom {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
  }
.contact-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.contact-right {
    height: auto;
  }
.contact-left {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.form-field-wrap {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }
.form-field-main-wrap {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    flex-flow: column;
  }
.form-button-wrap {
    margin-top: 10px;
  }
.contact-form {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
.text-field {
    min-height: 48px;
    padding: 12px 18px;
  }
.contact-info-box {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.pricing-collection-list {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.pricing-list-wrap {
    grid-column-gap: 28px;
    grid-row-gap: 28px;
  }
.pricing-middle-list {
    padding-top: 6px;
    padding-bottom: 6px;
  }
.pricing-middle-list._02 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.pricing-details-text {
    margin-top: 10px;
  }
.pricing-rich-text h5 {
    margin-top: 22px;
  }
.pricing-rich-text p {
    margin-top: 8px;
  }
.pricing-card-right {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.license-list-wrap {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
  }
.license-icon {
    width: 24px;
  }
.license-box-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.changelog-list-wrap {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
  }
.changelog-list-item {
    padding-left: 20px;
  }
.policy-item-top, .policy-item-bottom {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
.pass-inpute-box {
    flex-flow: column;
  }
.password-text-field {
    min-height: 46px;
  }
.primary-submit-button {
    width: var(--later-spacing--100);
    border: 1px solid var(--color--primary);
    background-image: none;
    background-repeat: repeat;
    background-size: auto;
    padding: 10px 20px;
    transition: border-color .3s, background-color .3s;
  }
.primary-submit-button:hover {
    border: 1px solid var(--color--secondary);
    background-color: var(--color--light);
  }
._404-wrap {
    padding-left: 10px;
    padding-right: 10px;
  }
._404-inner-wrap {
    grid-column-gap: 13px;
    grid-row-gap: 13px;
  }
.form-container {
    padding-top: 30px;
    padding-bottom: 30px;
  }
.team-mamber-list {
    border-left-width: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
.team-mamber-list._01, .team-mamber-list._001 {
    width: var(--later-spacing--100);
    padding-bottom: 0;
    padding-right: 0;
  }
.team-mamber-image {
    max-width: var(--later-spacing--100);
  }
.cookies-block {
    max-width: 280px;
  }
.footer-link-widget {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }
}
#node-_8827d1e6-ab0c-df94-7263-de3c417d1fa9-417d1f95 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-_40c53d0f-1f36-335a-9552-a83c836cfe08-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe09-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe0a-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe0b-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe0c-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe0d-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe0e-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe0f-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe10-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe11-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe12-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe13-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe14-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe15-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe16-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe17-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe18-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe19-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe1a-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe1b-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe1c-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe1d-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe1e-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe1f-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe20-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe21-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe22-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe23-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe24-836cfe07, #node-_40c53d0f-1f36-335a-9552-a83c836cfe25-836cfe07 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-ba86b5c0-329e-6f13-cd01-a79850920e31-088eae1e {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-a7a09d12-1706-f709-e583-ca71723c0221-088eae1e {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
@media screen and (max-width: 991px) {
#node-_33037e29-8dca-791f-af25-320cdcd074ce-088eae19, #node-c841634d-f16e-f370-e439-23df25cfff5f-25cfff45, #node-_215a419c-35d8-fab0-694e-64f785525f87-85525f1f {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
#node-ba86b5c0-329e-6f13-cd01-a79850920e31-088eae1e {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}
@media screen and (max-width: 767px) {
#node-_33037e29-8dca-791f-af25-320cdcd074ce-088eae19 {
    grid-column: span 1 / span 1;
  }
#node-_8827d1e6-ab0c-df94-7263-de3c417d1fa9-417d1f95 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
#node-c841634d-f16e-f370-e439-23df25cfff5f-25cfff45 {
    grid-column: span 1 / span 1;
  }
}
@media screen and (max-width: 479px) {
#node-_215a419c-35d8-fab0-694e-64f785525f87-85525f1f {
    grid-column: span 1 / span 1;
  }
#node-_9ce7e095-5690-856e-dbcc-e4be07d2878d-07d28758 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}
/* ======================================================================
   4. Components (hand-written)
   ====================================================================== */
/* Components: vanilla replacements for the Webflow runtime and its IX2
 * interactions.
 *
 * Every duration, delay, offset and easing here was read off the decoded IX2
 * payload (ix2_lists.txt) -- nothing is guessed. Webflow's easing names map to
 * the curves below; `ease` is the CSS keyword of the same name.
 *
 * Rest states live on the ELEMENT, animated states on a class or an attribute
 * main.js toggles, so nothing depends on inline style the way IX2 did. */

:root {
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out: cubic-bezier(.455, .03, .515, .955);
  --ease-out-circ: cubic-bezier(.075, .82, .165, 1);
}
/* ======================================================================
   Scroll reveals
   ======================================================================
   IX2 wrote the rest state inline and animated it away. Here the rest state is
   the class, and main.js removes every reveal class once the element has
   played -- so the animation runs once, exactly as `SCROLL_INTO_VIEW` did, and
   the element is left with nothing of the reveal on it.

   The rest state applies ONLY when scripting is available (`html.js`): with
   JavaScript off, nothing would ever remove it and the page would be blank.

   ANIMATIONS, NOT TRANSITIONS. A `transition:` on the played state would
   replace whatever transition the element already had: `.home-service-box`, `.history-list-wrap`, `.presence-list` and the two `.choose-us-box-list-*`
   cards each carry `transition: box-shadow` AND a reveal, so a transition-based
   reveal silently kills their hover the moment they scroll into view. An
   animation touches no other property, and stripping the classes afterwards
   leaves the element exactly as the design sheet wrote it. */

.js .reveal {
  will-change: transform, opacity, filter;
}
/* -- the designer's six "Slide Up Ns": rise 20%, unblur 5px, fade in.
      500ms for the move and fade, 600ms for the blur, at six delays. */
.js .reveal-blur-up {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(20%);
}
.reveal-blur-up.is-in {
  animation: reveal-rise-pct .5s ease both, reveal-unblur .6s ease both;
}
/* -- "Fade In 0.2": 50px rather than 20%, and a much longer 1200ms outQuart. */
.js .reveal-rise {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(50px);
}
.reveal-rise.is-in {
  animation: reveal-rise-px 1.2s var(--ease-out-quart) both,
             reveal-unblur .6s ease both;
}
/* -- Webflow's stock presets. All four settle over 1000ms outQuart. */
.js .reveal-fade {
  opacity: 0;
}
.reveal-fade.is-in {
  animation: reveal-fade 1s var(--ease-out-quart) both;
}
.js .reveal-up {
  opacity: 0;
  transform: translateY(100px);
}
.reveal-up.is-in {
  animation: reveal-slide-up 1s var(--ease-out-quart) both;
}
.js .reveal-grow {
  opacity: 0;
  transform: scale(.75);
}
.reveal-grow.is-in {
  animation: reveal-grow 1s var(--ease-out-quart) both;
}
.js .reveal-shrink {
  opacity: 0;
  transform: scale(1.25);
}
.reveal-shrink.is-in {
  animation: reveal-shrink 1s var(--ease-out-quart) both;
}
@keyframes reveal-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes reveal-unblur {
from { filter: blur(5px); }
to { filter: blur(0); }
}
/* Opacity travels WITH the transform in these: two animations cannot both own
   `transform`, so each pairing is one set of keyframes. */
@keyframes reveal-rise-pct {
  from { opacity: 0; transform: translateY(20%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-rise-px {
from { opacity: 0; transform: translateY(50px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-slide-up {
from { opacity: 0; transform: translateY(100px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-grow {
from { opacity: 0; transform: scale(.75); }
to { opacity: 1; transform: scale(1); }
}
@keyframes reveal-shrink {
from { opacity: 0; transform: scale(1.25); }
to { opacity: 1; transform: scale(1); }
}
/* The eight stagger delays, straight from the action lists. */
.reveal[data-reveal-delay="100"].is-in { animation-delay: .1s; }
.reveal[data-reveal-delay="150"].is-in { animation-delay: .15s; }
.reveal[data-reveal-delay="200"].is-in { animation-delay: .2s; }
.reveal[data-reveal-delay="250"].is-in { animation-delay: .25s; }
.reveal[data-reveal-delay="300"].is-in { animation-delay: .3s; }
.reveal[data-reveal-delay="400"].is-in { animation-delay: .4s; }
.reveal[data-reveal-delay="500"].is-in { animation-delay: .5s; }
.reveal[data-reveal-delay="600"].is-in { animation-delay: .6s; }
/* `.about-short-image` both grows in and then breathes. The pulse is a separate
   class main.js adds once the reveal has finished and its classes are gone --
   both animate `transform`, so running them together would mean the grow never
   showed at all. IX2 gave the pulse a 5s hold before its first scale. */
.is-breathing {
  animation: breathe 10s ease 5s infinite;
}
@keyframes breathe {
0%, 100% { transform: scale(1); }
25% { transform: scale(.9); }
50% { transform: scale(1); }
}
/* ======================================================================
   Navigation
   ====================================================================== */

/* The hamburger. The export drove a Lottie ("Navbar Black Json"): three bars
   for frames 0-21, a two-stroke cross for 21-58, played 0 -> 70% on open. Three
   spans and a transform draw the same two states over the same 500ms. */
.menu-bars {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.menu-bars span {
  position: absolute;
  left: 10%;
  width: 80%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .5s ease, opacity .25s ease;
}
.menu-bars span:nth-child(1) { top: 26%; }
.menu-bars span:nth-child(2) { top: calc(50% - 1px); }
.menu-bars span:nth-child(3) { top: 74%; }
.menu-button {
  color: var(--color--dark);
}
.menu-button.is-open .menu-bars span:nth-child(1) {
  transform: translateY(calc(24% * 4 / 3)) rotate(45deg);
  top: calc(50% - 1px);
}
.menu-button.is-open .menu-bars span:nth-child(2) {
  opacity: 0;
}
.menu-button.is-open .menu-bars span:nth-child(3) {
  transform: rotate(-45deg);
  top: calc(50% - 1px);
}
@media screen and (max-width: 991px) {
/* The panel slides down from under the bar, matching the runtime's
     `data-animation="default"` over-under slide at 400ms. */
  .nav-overlay.is-open .nav-menu-wrapper {
    animation: nav-drop .4s ease both;
  }
}
@keyframes nav-drop {
from { transform: translateY(-8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* The "Pages" dropdown -- IX2 a-10 / a-11. The panel slides up 20px into place
   and the chevron flips; the label and the chevron go grey while it is open. */
.nav-dropdown-list-wrap {
  transform: translateY(20px);
  transition: transform .4s ease;
}
.nav-dropdown-list-wrap.is-open {
  transform: translateY(0);
}
.nav-dropdown-icon {
  transition: transform .4s ease, color .4s ease;
}
.nav-dropdown-toggle .nav-dropdown-text {
  transition: color .4s ease;
}
.nav-dropdown-toggle.is-open .nav-dropdown-icon, .nav-dropdown-toggle.is-open .nav-dropdown-text {
  color: var(--color--grey-1);
}
.nav-dropdown-toggle.is-open .nav-dropdown-icon {
  transform: rotate(180deg);
}
/* ======================================================================
   Tabs and the two accordions
   ====================================================================== */

.tabset-pane { display: none; }
.tabset-pane.is-active { display: block; }
/* FAQ (a-21 / a-22): the answer's height animates to its content and the plus
   stroke rotates to make a minus. The `.minus-icon` is the fixed bar and
   `.plus-icon-01` the one that turns. */
.faq-answer-wrap, .service-box-bottom {
  height: 0;
  overflow: hidden;
  transition: height .5s ease;
}
.plus-icon-01, .vratical-line {
  transition: transform .5s ease;
}
.faq-item.is-active .plus-icon-01 {
  transform: rotate(90deg);
}
/* Service list (a-33 / a-34): same shape, but the vertical rule rotates. */
.service-tab-link.is-active .vratical-line {
  transform: rotate(90deg);
}
/* ======================================================================
   Hovers
   ======================================================================
   Written as `:hover`/`:focus-within` rules rather than JS: IX2's MOUSE_OVER /
   MOUSE_OUT pairs are exactly a CSS hover, and doing it in CSS means the state
   survives a dropped frame and works from the keyboard. */

/* -- a-2 / a-3 / a-38 / a-39 / a-57 / a-58: the dark disc grows from the
      bottom-left corner, the label turns light, the arrow slides out and
      rotates 45deg while its twin slides in, and the border lights up. */
[data-hover="button-01"] .button-hover-circle {
  transform: scale(0);
  transition: transform .5s ease;
}
/* The label's REST colour comes from IX2, not from the stylesheet. The design
   sheet says `.button-text { color: var(--color--light) }
` -- white -- and
   group 0 of the hover (the rest state) painted it `--color--dark` at load, on
   every `.button-01`. Without it the label is white on the lime button and
   simply cannot be read. */
[data-hover="button-01"] .button-text {
  color: var(--color--dark);
  transition: color .5s ease;
}
[data-hover="button-01"] .button-icon-02 {
  transition: transform .5s ease;
}
[data-hover="button-01"], [data-hover="button-01"] .button-01 {
  transition: border-color .5s ease;
}
[data-hover="button-01"]:hover .button-hover-circle, [data-hover="button-01"]:focus-visible .button-hover-circle {
  transform: scale(1);
}
[data-hover="button-01"]:hover .button-text, [data-hover="button-01"]:focus-visible .button-text {
  color: var(--color--light);
}
[data-hover="button-01"]:hover .button-icon-02, [data-hover="button-01"]:focus-visible .button-icon-02 {
  transform: translateX(100%) rotate(45deg);
}
[data-hover="button-01"]:hover, [data-hover="button-01"]:focus-visible {
  border-color: var(--color--light);
}
/* -- a-12 / a-13: the label rolls up to its duplicate and the glass fill turns
      solid primary. */
[data-hover="button-02"] .button-text {
  transition: transform .5s ease;
}
[data-hover="button-02"] {
  transition: background-color .3s ease;
}
[data-hover="button-02"]:hover .button-text, [data-hover="button-02"]:focus-visible .button-text {
  transform: translateY(-100%);
}
[data-hover="button-02"]:hover, [data-hover="button-02"]:focus-visible {
  background-color: var(--color--primary);
}
/* -- a-24 / a-25: the dark panel wipes in from the left, the label rolls to its
      light twin, the arrow crossfades to its hover copy and the border turns
      primary. */
[data-hover="project-btn"] .button-02-hover-bg {
  transform: translateX(-101%);
  transition: transform .4s ease;
}
[data-hover="project-btn"] .button-text-wrapper {
  transition: transform .4s ease;
}
[data-hover="project-btn"] .button-01-icon {
  opacity: 1;
  transition: opacity .4s ease;
}
[data-hover="project-btn"] .button-01-icon.hover-icon {
  opacity: 0;
}
[data-hover="project-btn"] {
  transition: border-color .5s ease;
}
.project-v1-list:hover [data-hover="project-btn"] .button-02-hover-bg, [data-hover="project-btn"]:hover .button-02-hover-bg {
  transform: translateX(0);
}
.project-v1-list:hover [data-hover="project-btn"] .button-text-wrapper, [data-hover="project-btn"]:hover .button-text-wrapper {
  transform: translateY(-50%);
}
.project-v1-list:hover [data-hover="project-btn"] .button-01-icon, [data-hover="project-btn"]:hover .button-01-icon {
  opacity: 0;
}
.project-v1-list:hover [data-hover="project-btn"] .button-01-icon.hover-icon, [data-hover="project-btn"]:hover .button-01-icon.hover-icon {
  opacity: 1;
}
.project-v1-list:hover [data-hover="project-btn"], [data-hover="project-btn"]:hover {
  border-color: var(--color--primary);
}
/* -- a-4 / a-5: the icon rolls up inside its 44px window to the copy below. */
[data-hover="social-roll"] .social-link {
  transition: transform .5s ease;
}
[data-hover="social-roll"]:hover .social-link, [data-hover="social-roll"]:focus-visible .social-link {
  transform: translateY(-100%);
}
/* -- a-6 / a-7 */
[data-hover="footer-link"] .text-light {
  transition: color .5s ease;
}
[data-hover="footer-link"]:hover .text-light, [data-hover="footer-link"]:focus-visible .text-light {
  color: var(--color--primary);
}
/* -- a-15 / a-18: the 14px dot scales 80x to flood the card. 1000ms in and out.

   The text inverts on ONE card only. IX2's colour actions name specific element
   ids rather than a class, and every one of them resolves inside the card whose
   dot is `.bg-dark`; on the other cards those ids are not in the subtree, so
   IX2 recoloured nothing and the text stayed dark. That is load-bearing:
   `.hover-dot` floods lime and `.hover-dot.bg-secondary` floods green, and white
   text on either is unreadable. `:has()` keys the inversion to the dark dot, so
   it follows the design rather than a hard-coded card. */
[data-hover="about-box"] .hover-dot {
  transform: scale(1);
  transition: transform 1s ease;
}
[data-hover="about-box"] .home-about-box-text, [data-hover="about-box"] .home-about-box-text * {
  transition: color 1s ease;
}
[data-hover="about-box"]:hover .hover-dot, [data-hover="about-box"]:focus-within .hover-dot {
  transform: scale(80);
}
[data-hover="about-box"]:has(.hover-dot.bg-dark):hover .home-about-box-text, [data-hover="about-box"]:has(.hover-dot.bg-dark):hover .home-about-box-text *, [data-hover="about-box"]:has(.hover-dot.bg-dark):focus-within .home-about-box-text, [data-hover="about-box"]:has(.hover-dot.bg-dark):focus-within .home-about-box-text * {
  color: var(--color--light);
}
/* -- a-26 / a-27: the cover image zooms, the title turns primary, the body copy
      lifts to the site background, and the "View" button appears. */
[data-hover="service-v1"] .fit-cover {
  transform: scale(1);
  transition: transform .5s ease;
}
[data-hover="service-v1"] .text-light, [data-hover="service-v1"] .text-grey-02 {
  transition: color .5s ease;
}
[data-hover="service-v1"] .hover-button-wrap {
  transition: opacity .5s ease;
}
[data-hover="service-v1"]:hover .fit-cover, [data-hover="service-v1"]:focus-visible .fit-cover {
  transform: scale(1.1);
}
[data-hover="service-v1"]:hover .text-light, [data-hover="service-v1"]:focus-visible .text-light {
  color: var(--color--primary);
}
[data-hover="service-v1"]:hover .text-grey-02, [data-hover="service-v1"]:focus-visible .text-grey-02 {
  color: var(--color--site-bg);
}
[data-hover="service-v1"]:hover .hover-button-wrap, [data-hover="service-v1"]:focus-visible .hover-button-wrap {
  opacity: 1;
}
/* -- a-31 / a-32 */
[data-hover="blog"] .fit-cover {
  transform: scale(1);
  transition: transform .5s ease;
}
[data-hover="blog"]:hover .fit-cover, [data-hover="blog"]:focus-visible .fit-cover {
  transform: scale(1.1);
}
/* -- a-35: the hovered card takes 40% of the row and its two neighbours give up
      the difference (25% / 20%). The design's own widths are the rest state, so
      only the hovered arrangement is written here. 700ms. */
.choose-us-box-list-40, .choose-us-box-list-20 {
  transition: width .7s ease;
}
@media screen and (min-width: 992px) {
/* `:not(:hover)` rather than specificity juggling: the hovered card matches
     its own width rule and every OTHER card in the row matches one of the two
     below, so the three never fight. */
  .choose-us-v1-bottom:has([data-hover="choose"]:hover)
    [data-hover="choose"]:not(:hover).choose-us-box-list-40 {
    width: 20%;
  }
.choose-us-v1-bottom:has([data-hover="choose"]:hover)
    [data-hover="choose"]:not(:hover).choose-us-box-list-20 {
    width: 25%;
  }
.choose-us-v1-bottom [data-hover="choose"]:hover {
    width: 40%;
  }
}
/* -- a-36 / a-37: two stacked icons crossfade. */
[data-hover="social-icon"] .icon-01, [data-hover="social-icon"] .icon-02 {
  transition: opacity .5s ease;
}
[data-hover="social-icon"]:hover .icon-01, [data-hover="social-icon"]:focus-visible .icon-01 {
  opacity: 0;
}
[data-hover="social-icon"]:hover .icon-02, [data-hover="social-icon"]:focus-visible .icon-02 {
  opacity: 1;
}
/* -- a-46 / a-47: the round "drag" badge fades in over the team strip. */
[data-cursor="teams"] .drag-box {
  opacity: 0;
  transition: opacity .5s ease;
}
[data-cursor="teams"]:hover .drag-box {
  opacity: 1;
}
/* ======================================================================
   Motion driven by main.js
   ====================================================================== */

/* -- a: the rule under a heading draws itself in, 900ms after a 300ms wait. */
.vertical-line {
  transform: scaleX(0);
  transform-origin: 0 50%;
}
[data-line="grow"].is-in .vertical-line {
  transform: scaleX(1);
  transition: transform .9s ease .3s;
}
/* -- a-14: the logo belt. IX2 moved one copy of the row by -100% over 20s and
      snapped back; a duplicated track makes that seamless. */
[data-marquee] {
  display: flex;
  overflow: hidden;
}
[data-marquee] .marquee-track {
  animation: marquee 20s linear infinite;
}
[data-marquee]:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
/* -- a-17: the statistics slot-roll. `.upper` is stretched to the 88px window
      and pushed to `flex-end`, so it rests on its LAST digit; `.lower` rests on
      its first. 400% of the window is four digits of travel. */
[data-counter="stats"] .statistics-number-box.upper {
  transform: translateY(400%);
}
[data-counter="stats"] .statistics-number-box.lower {
  transform: translateY(-400%);
}
[data-counter="stats"].is-in .statistics-number-box {
  transform: translateY(0);
  transition: transform 1.5s var(--ease-in-out);
}
/* -- a-45: six frosted tiles lie over the cover image and fade out in turn, 500ms for the first and 800ms for the rest, 100ms apart. */
[data-tiles="reveal"] .works-grid-item {
  opacity: 1;
}
[data-tiles="reveal"].is-in .works-grid-item {
  opacity: 0;
  transition: opacity .8s var(--ease-in-out-expo);
}
[data-tiles="reveal"].is-in .works-grid-item._01 { transition-duration: .5s; }
[data-tiles="reveal"].is-in .works-grid-item._02 { transition-delay: .4s; }
[data-tiles="reveal"].is-in .works-grid-item._03 { transition-delay: .3s; }
[data-tiles="reveal"].is-in .works-grid-item._04 { transition-delay: .2s; }
[data-tiles="reveal"].is-in .works-grid-item._05 { transition-delay: .1s; }
/* -- a-28 / a-48 / a-49: pointer-driven. main.js writes the progress as a
      custom property so the transform stays declarative. */
.hover-button-wrap {
  transform: translate(calc(var(--pointer-x, .5) * 160% - 80%),
                       calc(var(--pointer-y, .5) * 160% - 80%));
}
[data-cursor="teams"] .drag-box {
  transform: translate(calc(var(--pointer-x, .5) * 100vw - 50vw),
                       calc(var(--pointer-y, .5) * 100vh - 50vh));
}
@media screen and (min-width: 992px) {
[data-cursor="teams"] .teams-bottom {
    transform: translateX(calc(46% - var(--pointer-x, .5) * 92%));
    transition: transform .2s linear;
  }
}
/* -- the five scroll scrubs. `--scrub` is 0 at the top of the section's travel
      and 1 at the bottom; every keyframe below is the payload's own percentage
      mapped onto it in main.js. */
[data-scrub="know"] .know-top-linner {
  transform: translateY(calc(var(--scrub, 0) * 90%));
}
[data-scrub="awards"] .awadrs-right-shadow {
  transform: translateY(calc(var(--scrub, 0) * 90%));
}
/* The gallery pans as ONE track.
 *
 * IX2 moved each `.collection-item` by -252% of ITS OWN width, and the four
 * cards are not the same width: the featured one hits its 840px cap while the
 * rest sit at 445px, so -252% is -2117px for the first and -1121px for the
 * others. They drift a thousand pixels apart and tear a hole in the row --
 * on the published site as much as here.
 *
 * So the translate moves the list instead, by `--pan`: the distance main.js
 * measures between the row's content width and the box that clips it. The row
 * travels as a row, and the last card lands flush at the right edge at every
 * width instead of overshooting by a card and a half. */
[data-scrub="projects"] .collection-list {
  transform: translateX(calc(var(--pan, 0px) * -1));
  will-change: transform;
}
[data-scrub="process"] .process-list-wrap {
  transform: scale(var(--scale, 1));
}
[data-scrub="about-hero"] .about-sub-heading-wrap {
  transform: translateY(calc(var(--scrub, 0) * -290px));
}
@media screen and (min-width: 992px) {
[data-scrub="about-hero"] .about-image-wrap {
    width: calc(40% + var(--scrub, 0) * 60%);
    height: calc(30vh + var(--scrub, 0) * 70vh);
  }
}
/* ======================================================================
   Cookie notice and the newsletter modal
   ====================================================================== */

/* The design ships `.cookies-block { display: none }
` and no interaction that
   ever shows it, so on the published site the notice and its close button are
   dead markup. The close button and its IX2 action say what was intended, so
   main.js shows it once per visitor and remembers the dismissal. */
.cookies-block.is-open {
  display: flex;
}
/* a-59 / a-56: the modal appears 30s after the trigger scrolls into view and
   closes on the backdrop or the X. */
.modal-wrapper.is-open {
  display: flex;
  animation: modal-in .3s ease both;
}
@keyframes modal-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* ======================================================================
   Cart and checkout
   ======================================================================
   Webflow Ecommerce is gone; main.js keeps the basket in localStorage. Every
   element kept its commerce class, so the design sheet still styles all of it
   and only the open/closed state is authored here. */

/* Written as `:not(<state>) { display: none }
` rather than a pair of rules, so
   the visible state falls back to whatever the design sheet already sets --
   `.wf-commerce-commercecartform` is a flex column and the empty state is a
   centred flex box, and re-declaring `display: block` here would flatten both. */
.cart-modal:not(.is-open), .cart-form:not(.is-visible), .cart-empty:not(.is-visible), .cart-error-state:not(.is-visible) {
  display: none;
}
.cart-count[hidden] {
  display: none;
}
.wf-commerce-commercecartitemimage {
  background: var(--color--site-bg);
  object-fit: cover;
}
.add-to-cart-form.is-added .wf-commerce-commerceaddtocartbutton {
  opacity: .7;
}
/* The billing block only exists when "same as shipping" is unchecked, and the
   two error panels only when something is. */
.wf-commerce-commercecheckoutbillingaddresswrapper:not(.is-visible), .wf-commerce-commercecheckouterrorstate:not(.is-visible), .wf-commerce-commercepaypalcheckouterrorstate:not(.is-visible) {
  display: none;
}
.checkout-empty {
  padding: 24px 0;
}
/* ======================================================================
   Forms
   ====================================================================== */

/* The custom checkbox is a hidden <input> plus a styled <div> proxy that sits
   BEFORE it in the DOM. Webflow's runtime marked the proxy `.w--redirected-
   checked`; `:has()` reads the input's own state instead, so the control shows
   its state with scripting off and without a click handler.

   The checked state is also wrong in the source, and therefore on the published
   site: the design overrode the proxy's border but not its background, so
   Webflow's default blue (#3898ec) survives, and `background-size: cover`
   stretches the 13x11 tick to all four edges of a 12px box. Restated here in
   this design's own colours, with the tick sized to sit inside the border. */
.wf-checkbox:has(input[type="checkbox"]:checked) .checkbox-input-custom, .checkbox-input-custom.is-checked {
  background-color: var(--color--dark);
  border-color: var(--color--dark);
  background-image: url("../images/checkbox-checkmark.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 8px auto;
}
/* The input carries the focus, but it is the proxy that is on screen. */
.wf-checkbox:has(input[type="checkbox"]:focus-visible) .checkbox-input-custom {
  outline: 2px solid var(--color--secondary);
  outline-offset: 2px;
}
/* Webflow zeroes the native select chrome (`appearance: none`) and never draws
   a replacement, so the two country pickers on checkout are pixel-identical to
   the text inputs beside them and give no sign they open a list. A chevron
   matching the nav's is drawn in, with room on the right for it. Same box, so nothing around it moves. */
.wf-commerce-commercecheckoutshippingcountryselector, .wf-commerce-commercecheckoutbillingcountryselector {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23616161' d='M12 15.4 5.3 8.7l1.4-1.4 5.3 5.3 5.3-5.3 1.4 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}
/* Webflow's framework hides both panels and its runtime set `display: block`
   inline when one applied; the class does the same job. */
[data-form-done].is-visible, [data-form-fail].is-visible {
  display: block;
}
/* ======================================================================
   Reduced motion
   ======================================================================
   Everything above is decoration. Someone who has asked for less of it gets the
   finished state immediately, and the two looping animations stop. */

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal-blur-up,
  .js .reveal-rise,
  .js .reveal-fade,
  .js .reveal-up,
  .js .reveal-grow,
  .js .reveal-shrink {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .vertical-line {
    transform: scaleX(1);
  }

  [data-counter="stats"] .statistics-number-box {
    transform: translateY(0);
  }

  [data-tiles="reveal"] .works-grid-item {
    opacity: 0;
  }

  [data-marquee] .marquee-track,
  .is-breathing {
    animation: none;
  }

  /* The scrub and pointer targets by name: they sit at different depths, so a
     child combinator would miss most of them. main.js already refuses to write
     `--scrub` and `--pointer-*` under reduced motion, which leaves every
     `calc()` above at its resting value; this pins the transforms as well so
     even the first frame is still.

     `.about-image-wrap` is deliberately absent: its size is a `calc()` on
     `--scrub`, so with nothing written it already sits at the design's own
     40% x 30vh. */
  [data-scrub="know"] .know-top-linner,
  [data-scrub="awards"] .awadrs-right-shadow,
  [data-scrub="projects"] .collection-list,
  [data-scrub="process"] .process-list-wrap,
  [data-scrub="about-hero"] .about-sub-heading-wrap,
  .hover-button-wrap,
  [data-cursor="teams"] .drag-box,
  [data-cursor="teams"] .teams-bottom {
    transform: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}