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

   Fonts: assets/fonts/fonts.css -- Urbanist at 400/500/600/700, self
   hosted as woff2. The export shipped the same four faces as local
   TrueType and declared them TWICE, once in webflow.css and once in the
   design sheet; every @font-face is skipped here so the faces have exactly
   one home. Urbanist is SIL Open Font License 1.1, so nothing had to be
   substituted for licensing. */
/* ======================================================================
   1. Reset (normalize)
   ====================================================================== */
html {
  font-family: sans-serif;
  
  -ms-text-size-adjust: 100%;
  
  -webkit-text-size-adjust: 100%;
  
}
body {
  margin: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}
audio, canvas, progress, video {
  display: inline-block;
  
  vertical-align: baseline;
  
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden], template {
  display: none;
}
a {
  background-color: transparent;
}
a:active, a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b, strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button, input, optgroup, select, textarea {
  color: inherit;
  
  font: inherit;
  
  margin: 0;
  
}
button {
  overflow: visible;
}
button, select {
  text-transform: none;
}
button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  
  cursor: pointer;
  
}
button[disabled], html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type='checkbox'], input[type='radio'] {
  box-sizing: border-box;
  
  padding: 0;
  
}
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
input[type='search'] {
  -webkit-appearance: none;
  
}
input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  
  padding: 0;
  
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td, th {
  padding: 0;
}
/* ======================================================================
   2. Base framework (runtime-only rules dropped; the rest kept as .wf-)
   ====================================================================== */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
.inline-block {
  max-width: 100%;
  display: inline-block;
}
.wf-button {
  display: inline-block;
  padding: 9px 15px;
  background-color: #3898EC;
  color: white;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
input.wf-button {
  -webkit-appearance: button;
}
h1:where(:not([class*="heading-scale-"])), h2:where(:not([class*="heading-scale-"])), h3:where(:not([class*="heading-scale-"])), h4:where(:not([class*="heading-scale-"])), h5:where(:not([class*="heading-scale-"])), h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-1), :where(.heading-scale-2), :where(.heading-scale-3), :where(.heading-scale-4), :where(.heading-scale-5), :where(.heading-scale-6) {
  font-weight: bold;
  margin-bottom: 10px;
}
h1:where(:not([class*="heading-scale-"])), :where(.heading-scale-1) {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}
h2:where(:not([class*="heading-scale-"])), :where(.heading-scale-2) {
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}
h3:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px;
}
h4:where(:not([class*="heading-scale-"])), :where(.heading-scale-4) {
  font-size: 18px;
  line-height: 24px;
  margin-top: 10px;
}
h5:where(:not([class*="heading-scale-"])), :where(.heading-scale-5) {
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
}
h6:where(:not([class*="heading-scale-"])), :where(.heading-scale-6) {
  font-size: 12px;
  line-height: 18px;
  margin-top: 10px;
}
p {
  margin-top: 0;
  margin-bottom: 10px;
}
blockquote {
  margin: 0 0 10px 0;
  padding: 10px 20px;
  border-left: 5px solid #E2E2E2;
  font-size: 18px;
  line-height: 22px;
}
figure {
  margin: 0;
  margin-bottom: 10px;
}
figcaption {
  margin-top: 5px;
  text-align: center;
}
ul, ol {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 40px;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.embed:before, .embed:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.embed:after {
  clear: both;
}
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}
button, [type='button'], [type='reset'] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}
.wf-form {
  margin: 0 0 15px;
}
.wf-form-done {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: #dddddd;
}
.wf-form-fail {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.wf-input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.wf-input::placeholder {
  color: #999;
}
.wf-input:focus {
  border-color: #3898EC;
  outline: 0;
}
.wf-input[disabled], .wf-input[readonly], fieldset[disabled] .wf-input {
  cursor: not-allowed;
}
.wf-input[readonly] {
  background-color: #eeeeee;
}
textarea.wf-input {
  height: auto;
}
.wf-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 figure[data-rt-type="video"] > div:after {
  content: '';
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.richtext figure {
  position: relative;
  max-width: 60%;
}
.richtext figure > div:before {
  cursor: default!important;
}
.richtext figure img {
  width: 100%;
}
.richtext figure div {
  
  font-size: 0px;
  color: transparent;
}
.richtext figure[data-rt-type="image"] {
  display: table;
}
.richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}
.richtext figure[data-rt-type="image"] > figcaption {
  display: table-caption;
  caption-side: bottom;
}
.richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}
.richtext figure[data-rt-type="video"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.richtext figure[data-rt-type="video"] > div {
  width: 100%;
}
.tabset {
  position: relative;
}
.tabset:before, .tabset:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.tabset:after {
  clear: both;
}
.tabset-menu {
  position: relative;
}
.tabset-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  padding: 9px 30px;
  text-align: left;
  cursor: pointer;
  color: #222222;
  background-color: #dddddd;
}
.tabset-link[aria-current="page"], .tabset-link.is-active {
  background-color: #C8C8C8;
}
.tabset-link:focus {
  outline: 0;
}
.tabset-content {
  position: relative;
  display: block;
  overflow: hidden;
}
.tabset-pane {
  position: relative;
  display: none;
}
.tabset-pane.is-active {
  display: block;
}
@media screen and (max-width: 479px) {
  .tabset-link {
    display: block;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ======================================================================
   2b. Widget geometry the dropped rules used to provide
   ====================================================================== */
/* ============================================================
   Widget geometry the dropped framework rules used to provide.

   build_css drops every `.w-nav*` / `.w-dropdown*` rule from webflow.css,
   because those selectors only existed for a runtime this build does not
   ship. Several of them were also doing real layout, and this file is where
   that layout is restated -- once, against THIS design's own class names,
   with the framework's own values.

   It is emitted BETWEEN the framework sheet and the design sheet on purpose.
   Every rule here has the same specificity it is standing in for, so the
   design sheet keeps overriding it in exactly the places it overrode the
   original -- `.navbar-container`'s own `z-index: 5` and transparent
   background still win over the framework's `z-index: 1000` and `#ddd`,
   because they come later in the same cascade position they always did.
   Putting this file after the design instead would flip all of that.

   The class mapping is 1:1 and was read off the markup rather than assumed:

     .w-nav                  -> .navbar-container
     .w-nav-brand            -> .navbar-brand
     .w-nav-menu             -> .nav-menu-wrapper
     .w-nav-button           -> .menu-button
     .w-dropdown             -> .nav-dropdown
     .w-dropdown-toggle      -> .nav-dropdown-toggle
     .w-icon-dropdown-toggle -> .nav-dropdown-icon
     .w-dropdown-list        -> .nav-dropdown-list-wrap

   `.w-nav-link` is NOT in that list. The export gives its nav links
   `.nav-link` and `w-inline-block`, never `w-nav-link`, so the framework's
   link rule was never reaching them and there is nothing to restate.
   ============================================================ */
/* .w-nav. The design's own `.navbar-container` rule sets z-index 5 and a
   transparent background over the top of this, which is why both are kept
   here rather than trimmed: they are what the design is overriding, and a
   re-export that stopped setting them should fall back to what it always
   fell back to. */
.navbar-container {
  position: relative;
  background: #ddd;
  z-index: 1000;
}
/* .w-nav:before / :after -- the framework's clearfix, kept because it is not
   inert. The grid-* properties are Webflow's own guard for the case where
   this element is a grid container: without them the two generated boxes
   become grid ITEMS and take a row each. `.navbar-container` is a block box
   here, so they collapse to nothing -- but the guard costs four
   declarations and removing it is the kind of change that only shows up
   after somebody makes the container a grid. */
.navbar-container:before, .navbar-container:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.navbar-container:after {
  clear: both;
}
.navbar-brand {
  position: relative;
  float: left;
  text-decoration: none;
  color: #333;
}
.nav-menu-wrapper {
  position: relative;
  float: right;
}
/* .w-nav-button. `display: none` here and `display: block` in the media
   query below is the whole hamburger breakpoint: the export's navbar carries
   `data-collapse="medium"`, which is Webflow's name for 991px, and that
   attribute is dropped with the rest of the runtime's configuration. The
   breakpoint it selected is stated as a real media query instead. */
.menu-button {
  position: relative;
  float: right;
  padding: 18px;
  font-size: 24px;
  display: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgb(0 0 0 / 0);
  -webkit-user-select: none;
  user-select: none;
}
.menu-button:focus {
  outline: 0;
}
.nav-dropdown {
  display: inline-block;
  position: relative;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  z-index: 900;
}
.nav-dropdown-toggle {
  position: relative;
  vertical-align: top;
  text-decoration: none;
  color: #222;
  padding: 20px 40px 20px 20px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  display: inline-block;
  cursor: pointer;
}
.nav-dropdown-toggle:focus {
  outline: 0;
}
/* .w-icon-dropdown-toggle. In the export this box held nothing but a
   `:before` carrying `content: "\e603"` from Webflow's own icon webfont --
   an 8 KB base64 TTF whose entire job on this template was to draw one
   chevron. The font is not shipped, so rebuild_dropdown puts a real inline
   `<svg>` inside this box instead. The BOX keeps its geometry, which is what
   holds the chevron on the right-hand edge of "Pages". */
.nav-dropdown-icon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto 20px auto auto;
  width: 1em;
  height: 1em;
}
.nav-dropdown-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* .w-dropdown-list. The design sheet gives `.is-open` a great deal more --
   padding, `position: absolute`, and a `left: -544px` that is what pulls the
   544px-wide panel back under the toggle -- so this pair is only the
   show/hide half. Dropping `.w--open` without remapping it to `.is-open`
   would take all of that geometry with it. */
.nav-dropdown-list-wrap {
  position: absolute;
  background: #ddd;
  display: none;
  min-width: 100%;
}
.nav-dropdown-list-wrap.is-open {
  display: block;
}
/* `.w-dyn-empty` -- Webflow's "No items found." placeholder -- has no rule
   here. drop_empty_states deletes the element from every page (every
   collection in this template has items), so nothing would carry the class
   and the prune pass would drop the rule again on the next build. */
@media screen and (max-width: 991px) {
  /* `data-collapse="medium"`, stated as the breakpoint it meant. */
  .nav-menu-wrapper {
    display: none;
  }

  .menu-button {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .navbar-brand {
    padding-left: 10px;
  }
}
/* ======================================================================
   3. Puchix Studio design
   ====================================================================== */
:root {
  --color--site-bg: #faf6f5;
  --font-weight--font-family: Urbanist, Arial, sans-serif;
  --color--grey-dark: #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--letter-spacing-m);
  --_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--letter-spacing-m);
  --_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--letter-spacing-m);
  --_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--letter-spacing-m);
  --_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--letter-spacing-m);
  --_typography---paragraph-01--font-size: 18px;
  --_typography---paragraph-01--line-height: 27px;
  --width--full-width: 100%;
  --color--light: white;
  --_responsive---padding--padding-large: 80px;
  --_responsive---padding--padding-xbig: 160px;
  --_responsive---margin--margin-xxl: 100px;
  --color--secondary: #80b700;
  --_typography---tag--font-size: 14px;
  --_typography---tag--line-height: 20px;
  --later-spacing--letter-spacing-m: -.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--letter-spacing-xl);
  --_typography---display-02--font-size: 62px;
  --_typography---display-02--line-height: 88px;
  --_typography---display-02--letter-spacing: var(--later-spacing--letter-spacing-xl);
  --color--primary: #f5fe90;
  --color--grey-light: #c3c3c2;
  --_typography---button-text--font-size: 16px;
  --_typography---button-text--line-height: 24px;
  --_responsive---border-radius-m: 12px;
  --color--transparent: #0000;
  --_responsive---border-radius-s: 10px;
  --_responsive---border-radius-tiny: 8px;
  --_responsive---margin--margin-tiny: 60px;
  --_responsive---padding--padding-medium: 32px;
  --_responsive---border-radius-l: 16px;
  --_responsive---padding--padding-xlarge: 100px;
  --_responsive---margin--margin-l: 80px;
  --_responsive---padding--padding-xsmall: 24px;
  --_responsive---padding--padding-xxxlarge: 134px;
  --width--full-height: 100%;
  --_responsive---padding--padding-xxlarge: 120px;
  --_responsive---padding--padding-regular: 60px;
  --_responsive---padding--padding-medium-rare: 40px;
  --_responsive---padding--padding-slim: 30px;
  --_responsive---padding--padding-small: 27px;
  --_responsive---padding--padding-normal: 70px;
  --_responsive---margin--margin-xbig: 160px;
  --_responsive---margin--margin-big: 140px;
  --_responsive---margin--margin-xxxl: 120px;
  --_responsive---margin--margin-xl: 96px;
  --_responsive---margin--margin-m: 72px;
  --_responsive---margin--margin-s: 70px;
  --_responsive---padding--padding-xxbig: 173px;
  --_responsive---padding--padding-big: 140px;
  --later-spacing--letter-spacing-s: -.01em;
  --later-spacing--letter-spacing-l: -.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);
  --_typography---paragraph-01--font-weight: var(--font-weight--medium);
  --later-spacing--letter-spacing-xl: -.04em;
  --_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--letter-spacing-m);
  --_responsive---padding--padding-xxsmall: 22px;
  --_responsive---padding--padding-tiny: 20px;
  --_typography---tag--font-weight: var(--font-weight--semi-bold);
  --_typography---tag--letter-spacing: var(--later-spacing--letter-spacing-m);
  --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-commercecartoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}
.wf-commerce-commercecartquantity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 60px;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 6px 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecartquantity::placeholder {
  color: #999;
}
.wf-commerce-commercecartquantity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecartfooter {
  border-top: 1px solid #e6e6e6;
  flex-direction: column;
  flex: none;
  padding: 16px 24px 24px;
  display: flex;
}
.wf-commerce-commercecartlineitem {
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  display: flex;
}
.wf-commerce-commercecartordervalue {
  font-weight: 700;
}
.wf-commerce-commercecartcheckoutbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 2px;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercecartemptystate {
  flex: 1;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
}
.wf-commerce-commercecarterrorstate {
  background-color: #ffdede;
  flex: none;
  margin: 0 24px 24px;
  padding: 10px;
}
.wf-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-commerceaddtocartbutton.is-disabled {
  color: #666;
  cursor: not-allowed;
  background-color: #e6e6e6;
  border-color: #e6e6e6;
  outline-style: none;
}
.wf-commerce-commerceaddtocartoutofstock {
  background-color: #ddd;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commerceaddtocarterror {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
}
.wf-commerce-commercecheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercelayoutcontainer {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.wf-commerce-commercelayoutmain {
  flex: 0 800px;
  margin-right: 20px;
}
.wf-commerce-commercecheckoutcustomerinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutblockcontent {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
}
.wf-commerce-commercecheckoutlabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutemailinput {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutemailinput::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutemailinput:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingaddresswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutrow {
  margin-left: -8px;
  margin-right: -8px;
  display: flex;
}
.wf-commerce-commercecheckoutcolumn {
  flex: 1;
  padding-left: 8px;
  padding-right: 8px;
}
.wf-commerce-commercecheckoutshippingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutshippingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutshippingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutshippingmethodswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutshippingmethodslist {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
.wf-commerce-commercecheckoutshippingmethoditem {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 0;
  padding: 16px;
  font-weight: 400;
  display: flex;
}
.wf-commerce-commercecheckoutshippingmethoddescriptionblock {
  flex-direction: column;
  flex-grow: 1;
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
}
.wf-commerce-commerceboldtextblock {
  font-weight: 700;
}
.wf-commerce-commercecheckoutshippingmethodsemptystate {
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  padding: 64px 16px;
}
.wf-commerce-commercecheckoutpaymentinfowrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutcardnumber {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardnumber::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardnumber:focus, .wf-commerce-commercecheckoutcardnumber.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardexpirationdate {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardexpirationdate::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardexpirationdate:focus, .wf-commerce-commercecheckoutcardexpirationdate.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutcardsecuritycode {
  appearance: none;
  cursor: text;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutcardsecuritycode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutcardsecuritycode:focus, .wf-commerce-commercecheckoutcardsecuritycode.-wfp-focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingaddresstogglewrapper {
  flex-direction: row;
  display: flex;
}
.wf-commerce-commercecheckoutbillingaddresstogglecheckbox {
  margin-top: 4px;
}
.wf-commerce-commercecheckoutbillingaddresstogglelabel {
  margin-left: 8px;
  font-weight: 400;
}
.wf-commerce-commercecheckoutbillingaddresswrapper {
  margin-top: 16px;
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutbillingfullname {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingfullname::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingfullname:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddress {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddress::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddress:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstreetaddressoptional:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcity {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcity::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcity:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingstateprovince {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingstateprovince::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingstateprovince:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingzippostalcode {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 16px;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingzippostalcode::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingzippostalcode:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutbillingcountryselector {
  appearance: none;
  background-color: #fafafa;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 100%;
  height: 38px;
  margin-bottom: 0;
  padding: 8px 12px;
  line-height: 20px;
  display: block;
}
.wf-commerce-commercecheckoutbillingcountryselector::placeholder {
  color: #999;
}
.wf-commerce-commercecheckoutbillingcountryselector:focus {
  border-color: #3898ec;
  outline-style: none;
}
.wf-commerce-commercecheckoutorderitemswrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryblockheader {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemslist {
  margin-bottom: -20px;
}
.wf-commerce-commercecheckoutorderitem {
  margin-bottom: 20px;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemdescriptionwrapper {
  flex-grow: 1;
  margin-left: 16px;
  margin-right: 16px;
}
.wf-commerce-commercecheckoutorderitemquantitywrapper {
  white-space: pre-wrap;
  display: flex;
}
.wf-commerce-commercecheckoutorderitemoptionlist {
  margin-bottom: 0;
  padding-left: 0;
  text-decoration: none;
  list-style-type: none;
}
.wf-commerce-commercelayoutsidebar {
  flex: 0 0 320px;
  position: sticky;
  top: 20px;
}
.wf-commerce-commercecheckoutordersummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummarylineitem {
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 8px;
  display: flex;
}
.wf-commerce-commercecheckoutsummarytotal {
  font-weight: 700;
}
.wf-commerce-commercecheckoutplaceorderbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  text-align: center;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 3px;
  align-items: center;
  margin-bottom: 20px;
  padding: 9px 15px;
  text-decoration: none;
  display: block;
}
.wf-commerce-commercecheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}
.wf-commerce-commercepaypalcheckoutformcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercecheckoutcustomerinfosummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercecheckoutsummaryitem, .wf-commerce-commercecheckoutsummarylabel {
  margin-bottom: 8px;
}
.wf-commerce-commercecheckoutsummaryflexboxdiv {
  flex-direction: row;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecheckoutsummarytextspacingondiv {
  margin-right: .33em;
}
.wf-commerce-commercecheckoutpaymentsummarywrapper {
  margin-bottom: 20px;
}
.wf-commerce-commercepaypalcheckouterrorstate {
  background-color: #ffdede;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 16px;
}
.wf-commerce-commerceorderconfirmationcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercecheckoutshippingsummarywrapper {
  margin-bottom: 20px;
}
@media screen and (max-width: 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-dark);
  font-size: var(--_typography---paragraph-02--font-size);
  line-height: var(--_typography---paragraph-02--line-height);
  font-weight: var(--font-weight--medium);
}
h1:where(:not([class*="heading-scale-"])), :where(.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:where(:not([class*="heading-scale-"])), :where(.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:where(:not([class*="heading-scale-"])), :where(.heading-scale-3) {
  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:where(:not([class*="heading-scale-"])), :where(.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:where(:not([class*="heading-scale-"])), :where(.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:where(:not([class*="heading-scale-"])), :where(.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;
}
img {
  width: var(--width--full-width);
  height: var(--width--full-width);
  max-height: var(--width--full-width);
  max-width: var(--width--full-width);
  display: inline-block;
}
.utility-page-wrap {
  background-color: var(--color--light);
  flex-flow: column;
  height: auto;
  display: flex;
}
.utility-page-content {
  width: var(--width--full-width);
  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(--width--full-width);
  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 {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.container.hero-container {
  z-index: 2;
  height: var(--width--full-width);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}
.container.service-hero-container {
  z-index: 1;
  height: var(--width--full-width);
  position: relative;
}
.style-guide {
  padding-top: var(--_responsive---padding--padding-large);
  padding-bottom: var(--_responsive---padding--padding-xbig);
}
.style-guide-bottom {
  margin-top: var(--_responsive---margin--margin-xxl);
  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(--width--full-width);
  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--dark);
  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--letter-spacing-m);
  text-transform: uppercase;
}
.tag.text-secondary {
  color: var(--color--grey-dark);
}
.tag.white {
  color: var(--color--light);
}
.typography-list {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.paragraph-one {
  color: var(--color--grey-dark);
  font-size: var(--_typography---paragraph-01--font-size);
  line-height: var(--_typography---paragraph-01--line-height);
  font-weight: var(--font-weight--medium);
}
.paragraph-one.text-dark._01 {
  margin-left: 8px;
}
.paragraph-one.about-subheading {
  color: #121212b3;
}
.paragraph-one.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 {
  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;
}
.display-02.semi-bold {
  font-weight: var(--font-weight--semi-bold);
}
.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-two {
  font-size: var(--_typography---paragraph-02--font-size);
  line-height: var(--_typography---paragraph-02--line-height);
  font-weight: var(--font-weight--medium);
}
.paragraph-two.text-grey-02 {
  color: var(--color--grey-light);
}
.paragraph-two.blog-subtitle {
  color: #767676;
}
.paragraph-two.text-grey-01 {
  color: var(--color--grey-dark);
}
.paragraph-two.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--letter-spacing-m);
}
.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(--width--full-width);
  border-radius: var(--_responsive---border-radius-m);
  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-light);
}
.color-block.bggrey-1 {
  background-color: var(--color--grey-dark);
}
.color-block.bg-grey-2 {
  background-color: var(--color--grey-light);
}
.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(.button-01-hero-button) {
  padding-top: 19px;
  padding-bottom: 19px;
}
.button-01:where(.button-01-bg-white) {
  background-color: var(--color--light);
  padding-top: 19px;
  padding-bottom: 19px;
}
.button-01.pricing-button {
  width: var(--width--full-width);
}
.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(--width--full-width);
  height: var(--width--full-width);
  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(.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-large);
  background-color: var(--color--dark);
  color: var(--color--light);
  padding-bottom: 45px;
}
.footer-wrap {
  overflow: hidden;
}
.footer-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-bottom: 1px solid #ffffff26;
  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: 20px;
  display: flex;
}
.text-light {
  color: var(--color--light);
}
.footer-top-left {
  width: 370px;
  max-width: var(--width--full-width);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.footer-top-right {
  width: var(--width--full-width);
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  border-left: 1px solid #ffffff26;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  max-width: 720px;
  padding-bottom: 140px;
  padding-left: 100px;
  padding-right: 100px;
}
.footer-logo-wrap {
  max-width: 81px;
}
.sub-heading-wrap.faq-sub-heading {
  width: 365px;
}
.sub-heading-wrap.presence-sub-heading {
  width: 388px;
  max-width: var(--width--full-width);
}
.social-link-list {
  width: 44px;
  height: 44px;
  overflow: hidden;
}
.social-link-list.first-one {
  margin-left: -14px;
}
.social-link {
  width: var(--width--full-width);
}
.footer-right-01 {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: stretch;
  display: grid;
}
.footer-info-link {
  text-decoration: none;
}
.navbar-right {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.close-button {
  border-radius: var(--_responsive---border-radius-s);
  background-color: var(--color--primary);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
}
.navbar-brand {
  max-width: 60px;
}
.button-02-arrow {
  transform: rotate(45deg);
}
.hide {
  display: none;
}
.remove-button {
  color: var(--color--grey-dark);
  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--grey-dark);
  font-size: var(--_typography---paragraph-02--font-size);
  line-height: var(--_typography---paragraph-02--line-height);
  font-weight: var(--font-weight--medium);
  border-radius: 100px;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
  text-decoration: none;
  transition: color .4s;
  display: flex;
}
.nav-link:where(.navbar-v2) {
  color: var(--color--light);
}
.nav-link:hover {
  color: var(--color--grey-dark);
}
.nav-link:hover:where(.navbar-v2) {
  color: var(--color--light);
}
.nav-link[aria-current="page"], .nav-link.is-active {
  color: var(--color--dark);
}
.nav-link[aria-current="page"]:where(.navbar-v2), .nav-link.is-active:where(.navbar-v2) {
  color: var(--color--light);
}
.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-tiny);
  background-color: var(--color--primary);
  width: 100%;
  color: var(--color--dark);
  font-weight: var(--font-weight--medium);
  text-align: center;
  padding: 12px 10px;
  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 {
  color: var(--color--dark);
  background-color: #3898ec00;
  padding: 8px 10px 8px 8px;
}
.cart-link:where(.navbar-v2) {
  color: var(--color--light);
}
.nav-item {
  flex: none;
  margin-bottom: 0;
}
.cart-text {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  color: var(--color--dark);
  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;
}
.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;
}
.navbar:where(.navbar-v2) {
  position: absolute;
  inset: 0% 0% auto;
}
.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--grey-dark);
  font-weight: var(--font-weight--medium);
  margin-top: 2px;
  padding: 0 18px 0 0;
}
.nav-dropdown-toggle:where(.navbar-v2) {
  color: var(--color--light);
}
.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-s);
  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--grey-dark);
  font-weight: var(--font-weight--medium);
  text-decoration: none;
  transition: color .3s;
}
.dropdown-page-link.dropdown-link-text:hover {
  color: var(--color--grey-dark);
}
.dropdown-page-link.dropdown-link-text[aria-current="page"], .dropdown-page-link.dropdown-link-text.is-active {
  color: var(--color--dark);
}
.icon {
  flex: none;
  font-size: 14px;
  line-height: 22px;
}
.h5 {
  color: var(--color--dark);
  letter-spacing: var(--later-spacing--letter-spacing-m);
  font-family: Urbanist, Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.home-hero {
  height: var(--width--full-width);
  flex: 1;
  position: relative;
}
.home-hero-wrap {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 90px;
  padding-bottom: 40px;
  display: flex;
  position: relative;
}
.home-hero-bg {
  z-index: 1;
  width: var(--width--full-width);
  position: absolute;
  inset: 0%;
  overflow: hidden;
}
.fit-cover {
  width: var(--width--full-width);
  height: var(--width--full-width);
  object-fit: cover;
}
.fit-cover:where(.blog-widget-v2) {
  min-height: 480px;
  max-height: 480px;
}
.fit-cover.blog-details-image {
  object-position: 50% 15%;
}
.home-hero-top {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  text-align: center;
  flex-flow: column;
  max-width: 606px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.hero-button-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.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;
}
.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(--width--full-width);
}
.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(--width--full-width);
  height: var(--width--full-width);
  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-xbig);
}
.home-about-top {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.home-about-bottom {
  margin-top: var(--_responsive---margin--margin-tiny);
  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-bottom.is-who-we {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: row;
  flex: 0 auto;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin-top: 0;
  display: inline-flex;
}
.home-about-top-right {
  width: 905px;
  max-width: var(--width--full-width);
  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-medium);
  border-radius: var(--_responsive---border-radius-l);
  background-color: var(--color--light);
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.home-about-box.is-who-we {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: 296px;
  height: auto;
  min-height: 440px;
  padding: 20px;
}
.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-body {
  z-index: 2;
  width: var(--width--full-width);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
  position: relative;
}
.statistics-number-wrap {
  height: 88px;
  color: var(--color--dark);
  display: flex;
  overflow: hidden;
}
.statistics-number-wrap._01 {
  height: 180px;
}
.statistics-number-box.upper {
  color: var(--color--dark);
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.statistics-number-box.lower {
  color: var(--color--dark);
  flex-flow: column;
  display: flex;
}
.choose-us {
  padding-top: var(--_responsive---padding--padding-xbig);
  padding-bottom: var(--_responsive---padding--padding-xbig);
}
.choose-us-bottom {
  margin-top: var(--_responsive---margin--margin-xxl);
}
.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(.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(--width--full-width);
  margin-left: auto;
}
.tabs-menu {
  width: 588px;
  max-width: var(--width--full-width);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.choose-us-image-wrap {
  height: 753px;
  max-width: var(--width--full-width);
  border-radius: var(--_responsive---border-radius-s);
  position: relative;
  overflow: hidden;
}
.tab-pane-tab-1 {
  width: 712px;
  max-width: var(--width--full-width);
}
.choose-us-tab-link {
  padding: 25px var(--_responsive---padding--padding-medium);
  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: var(--_typography---h6--font-size);
  line-height: var(--_typography---h6--line-height);
  font-weight: var(--_typography---h6--font-weight);
}
.ceo-title {
  color: var(--color--light);
}
.our-service {
  padding-top: var(--_responsive---padding--padding-xbig);
  padding-bottom: var(--_responsive---padding--padding-xbig);
}
.our-service-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
  display: flex;
}
.home-service-box {
  width: var(--width--full-width);
  height: var(--width--full-width);
  padding: var(--_responsive---padding--padding-medium);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-radius: var(--_responsive---border-radius-l);
  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;
}
.projects-v1 {
  padding-top: var(--_responsive---padding--padding-xlarge);
  padding-bottom: var(--_responsive---padding--padding-large);
  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-l);
}
.projects-v1-heading {
  width: var(--width--full-width);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  align-items: flex-start;
  max-width: 614px;
  display: flex;
}
.process {
  padding-top: var(--_responsive---padding--padding-xbig);
  padding-bottom: var(--_responsive---padding--padding-xbig);
}
.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(--width--full-width);
  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(--width--full-width);
  grid-column-gap: 17px;
  grid-row-gap: 17px;
  flex-flow: column;
  display: flex;
}
.process-list-wrap {
  max-width: var(--width--full-width);
  padding: var(--_responsive---padding--padding-xsmall);
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  border-radius: var(--_responsive---border-radius-l);
  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-xlarge);
  padding-bottom: var(--_responsive---padding--padding-xlarge);
  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(--width--full-width);
  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(--width--full-width);
  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 {
  height: 300vh;
}
.reviews-top {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.reviews-bottom {
  margin-top: var(--_responsive---margin--margin-tiny);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  grid-template-rows: auto;
  grid-template-columns: .9fr 1.2fr .9fr;
  grid-auto-columns: 1fr;
  place-items: stretch stretch;
  display: flex;
}
.reviews-box-wrap {
  width: var(--width--full-width);
  height: var(--width--full-width);
  border-radius: var(--_responsive---border-radius-tiny);
  position: relative;
  overflow: hidden;
}
.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-xlarge);
  padding-bottom: var(--_responsive---padding--padding-xlarge);
}
.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(--width--full-width);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}
.faq-right {
  width: 654px;
  max-width: var(--width--full-width);
}
.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-dark);
  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-light);
  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(--width--full-width);
  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(--width--full-width);
  border-radius: var(--_responsive---border-radius-m);
  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-light);
}
.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-large);
  padding-bottom: var(--_responsive---padding--padding-large);
  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: 750px;
  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-s);
  width: 40%;
  height: 30vh;
  position: relative;
  overflow: hidden;
}
.about-hero-image {
  width: var(--width--full-width);
  height: var(--width--full-width);
  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(--width--full-width);
  border-radius: var(--_responsive---border-radius-s);
  position: absolute;
  inset: 102px auto auto 0%;
  overflow: hidden;
  transform: rotate(-8deg);
}
.about-short-image {
  border-radius: var(--_responsive---border-radius-s);
}
.about-right-image {
  width: 156px;
  max-width: var(--width--full-width);
  border-radius: var(--_responsive---border-radius-s);
  position: absolute;
  inset: 56px 0% auto auto;
  overflow: hidden;
  transform: rotate(5deg);
}
.about-brand {
  padding-top: var(--_responsive---padding--padding-large);
  padding-bottom: var(--_responsive---padding--padding-large);
  background-color: var(--color--site-bg);
}
.about-brand-wrap {
  padding: var(--_responsive---padding--padding-xsmall);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-radius: var(--_responsive---border-radius-l);
  background-color: #fff;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.about-brand-left {
  width: 448px;
  height: auto;
  max-width: var(--width--full-width);
  padding: var(--_responsive---padding--padding-medium);
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  border-radius: var(--_responsive---border-radius-l);
  flex-flow: column;
  transition: background-color .3s;
  display: flex;
}
.about-brand-left:hover {
  background-color: var(--color--site-bg);
}
.about-brand-right {
  width: 792px;
  max-width: var(--width--full-width);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  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;
  border-radius: var(--_responsive---border-radius-tiny);
  flex-flow: column;
  align-items: flex-start;
  padding: 24px;
  transition: background-color .3s;
  display: flex;
}
.left-brand-box:hover {
  background-color: var(--color--site-bg);
}
.lefft-brand-image {
  width: 156px;
}
.who-we {
  padding-top: var(--_responsive---padding--padding-large);
  padding-bottom: var(--_responsive---padding--padding-large);
  background-color: var(--color--site-bg);
}
.who-we-top {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.who-we-bottom {
  margin-top: var(--_responsive---margin--margin-l);
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}
.company-history {
  padding-top: var(--_responsive---padding--padding-xxxlarge);
  padding-bottom: var(--_responsive---padding--padding-xbig);
  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(--width--full-width);
  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(--width--full-width);
  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-medium);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-radius: var(--_responsive---border-radius-s);
  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;
  max-height: var(--width--full-width);
  max-width: var(--width--full-width);
}
.history-top-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  align-items: center;
  display: flex;
}
.text-grey-01 {
  color: var(--color--grey-dark);
}
.expertise {
  height: 500vh;
  position: relative;
}
.expertise-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: stretch;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
}
.expertise-left-top {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  max-width: 361px;
  display: flex;
}
.expertise-image-block {
  width: var(--width--full-width);
  height: var(--width--full-height);
  grid-column-gap: 56px;
  grid-row-gap: 56px;
  flex-flow: column;
  flex: none;
  display: flex;
  position: relative;
}
.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;
}
.accelerate {
  padding-top: var(--_responsive---padding--padding-xbig);
  padding-bottom: var(--_responsive---padding--padding-large);
  background-color: var(--color--site-bg);
}
.accelerate-content-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.accelerate-right {
  width: 429px;
  max-width: var(--width--full-width);
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.accelerate-middle {
  border-radius: var(--_responsive---border-radius-m);
  background-image: none;
  background-repeat: repeat;
  background-size: auto;
  max-width: 480px;
}
.accelerate-left {
  width: 380px;
  max-width: var(--width--full-width);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.accelerate-image {
  width: var(--width--full-width);
  height: var(--width--full-width);
  object-fit: cover;
}
.accelerate-image-wrap {
  height: var(--width--full-width);
  border-radius: var(--_responsive---border-radius-s);
  overflow: hidden;
}
.accelerate-list-item {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  align-items: center;
  display: flex;
}
.accelerate-right-list {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.accelerate-left-inner {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
}
.teams {
  padding-top: var(--_responsive---padding--padding-xxlarge);
  padding-bottom: var(--_responsive---padding--padding-xxlarge);
  background-color: var(--color--site-bg);
}
.teams-wrap {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.teams-top {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  text-align: left;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 350px;
  display: flex;
}
.teams-bottom {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 880px;
  display: grid;
  overflow: visible;
}
.awadrs {
  padding-top: var(--_responsive---padding--padding-xbig);
  padding-bottom: var(--_responsive---padding--padding-xbig);
  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(--width--full-width);
  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(--width--full-width);
  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-xsmall);
  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-large);
  padding-bottom: var(--_responsive---padding--padding-xbig);
  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(--width--full-width);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.presence-list {
  padding: var(--_responsive---padding--padding-xsmall);
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  border-radius: var(--_responsive---border-radius-m);
  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-xbig);
  padding-bottom: var(--_responsive---padding--padding-large);
  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-tiny);
}
.blog-v1-top-left {
  width: 497px;
  max-width: var(--width--full-width);
  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(--width--full-width);
  border-radius: var(--_responsive---border-radius-m);
  max-height: 260px;
  position: relative;
  overflow: hidden;
}
.blog-v1-image:where(.blog-widget-v2) {
  max-height: none;
}
.blog-v1-list {
  width: var(--width--full-width);
  height: var(--width--full-width);
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  color: var(--color--grey-dark);
  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-regular);
  padding-bottom: var(--_responsive---padding--padding-large);
  flex: 1;
  position: relative;
}
.service-hero-bg-wrap {
  z-index: 0;
  position: absolute;
  inset: 0%;
}
.service-hero-wrap {
  height: var(--width--full-width);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: space-between;
  display: flex;
}
.service-hero-left {
  width: 560px;
  max-width: var(--width--full-width);
  flex-flow: column;
  justify-content: flex-end;
  display: flex;
}
.service-hero-right {
  width: 340px;
  max-width: var(--width--full-width);
  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-medium-rare);
  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-xbig);
  padding-bottom: var(--_responsive---padding--padding-xbig);
  background-color: var(--color--site-bg);
}
.service-bottom {
  margin-top: var(--_responsive---margin--margin-l);
}
.service-button-wrap {
  margin-top: var(--_responsive---padding--padding-medium-rare);
  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(--width--full-width);
  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(--width--full-width);
}
.service-tab-menu {
  border-bottom: 1px solid var(--color--grey-light);
  flex-flow: column;
  display: flex;
}
.service-tab-link {
  padding: var(--_responsive---padding--padding-slim) 0px;
  border-top: 1px solid var(--color--grey-light);
  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(--width--full-width);
  background-color: var(--color--dark);
  border-radius: 1px;
}
.horizontal-line {
  width: var(--width--full-width);
  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(--width--full-width);
  position: relative;
}
.service-box-left {
  width: 880px;
  max-width: var(--width--full-width);
  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(--width--full-width);
  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(--width--full-width);
}
.service-list-01 {
  width: 202px;
  max-width: var(--width--full-width);
  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-xbig);
  background-color: var(--color--site-bg);
}
.choose-us-v1-bottom {
  margin-top: var(--_responsive---margin--margin-l);
  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-slim);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-radius: var(--_responsive---border-radius-m);
  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-light);
}
.choose-us-box-list-20 {
  width: 20%;
  height: 340px;
  padding: var(--_responsive---padding--padding-slim);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-radius: var(--_responsive---border-radius-m);
  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-light);
}
.works {
  padding-top: var(--_responsive---padding--padding-large);
  padding-bottom: var(--_responsive---padding--padding-large);
}
.works-bottom {
  margin-top: var(--_responsive---margin--margin-tiny);
}
.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-xbig);
}
.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(--width--full-width);
}
.work-details-right {
  width: 408px;
  max-width: var(--width--full-width);
  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(--width--full-width);
  border-radius: var(--_responsive---border-radius-m);
  height: 683px;
  overflow: hidden;
}
.work-details-image-wrap {
  margin-top: var(--_responsive---padding--padding-medium-rare);
  grid-column-gap: 17px;
  grid-row-gap: 17px;
  flex-flow: column;
  display: flex;
}
.work-details-image-01 {
  width: var(--width--full-width);
  height: 567px;
  overflow: hidden;
}
.work-details-image-02 {
  grid-column-gap: 17px;
  grid-row-gap: 17px;
  display: flex;
}
.work-details-image-v2 {
  width: var(--width--full-width);
  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(--width--full-width);
}
.work-rich-text h5:where(:not([class*="heading-scale-"])), .work-rich-text :where(.heading-scale-5) {
  margin-top: 40px;
}
.work-rich-text p {
  margin-top: 8px;
}
.related-work {
  padding-bottom: var(--_responsive---padding--padding-large);
}
.related-work-top {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.related-work-bottom {
  margin-top: var(--_responsive---margin--margin-tiny);
}
.blog {
  padding-top: var(--_responsive---padding--padding-large);
  padding-bottom: 124px;
}
.blog-bottom {
  margin-top: 136px;
}
.blog-tabs {
  align-items: flex-start;
  display: flex;
}
.blog-tabs-content {
  width: 1131px;
  max-width: var(--width--full-width);
  margin-left: auto;
}
.blog-tabs-menu {
  width: 160px;
  max-width: var(--width--full-width);
  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-light);
  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-l);
  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(--width--full-width);
}
.blog-main-image {
  width: var(--width--full-width);
  height: 720px;
  overflow: hidden;
}
.blog-heading {
  padding-bottom: 12px;
}
.blog-rich-text h5:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-5) {
  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(--width--full-width);
  height: 480px;
  margin-top: var(--_responsive---padding--padding-medium-rare);
  overflow: hidden;
}
.similar-blog {
  padding-top: var(--_responsive---padding--padding-xbig);
  padding-bottom: var(--_responsive---padding--padding-xbig);
}
.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-l);
}
.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-light);
  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-xlarge);
  padding-bottom: var(--_responsive---padding--padding-xlarge);
  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-l);
  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(--width--full-width);
  max-width: 720px;
  height: 960px;
  overflow: hidden;
}
.contact-left {
  width: 720px;
  max-width: var(--width--full-width);
  padding-top: 85px;
  padding-right: var(--_responsive---padding--padding-medium-rare);
  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(--width--full-width);
  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-light);
  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-dark);
}
.text-field-02 {
  border: 1px solid var(--color--grey-light);
  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-dark);
}
.checkbox {
  border: 1px solid var(--color--dark);
  font-size: 20px;
  line-height: 20;
}
.submit-button {
  width: var(--width--full-width);
  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-s);
  background-color: var(--color--primary);
}
.contact-info-box {
  padding: var(--_responsive---padding--padding-medium);
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  border-radius: var(--_responsive---border-radius-m);
  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-large);
  padding-bottom: var(--_responsive---padding--padding-large);
}
.pricing-bottom {
  margin-top: var(--_responsive---margin--margin-xxl);
}
.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-xsmall);
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  border-radius: var(--_responsive---border-radius-m);
  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-light);
}
.pricing-middle-list {
  border-bottom: 1px solid var(--color--grey-light);
  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-large);
  padding-bottom: var(--_responsive---padding--padding-large);
}
.pricing-details-wrap {
  max-width: 1055px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-details-bottom {
  margin-top: var(--_responsive---margin--margin-xxl);
}
.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:where(:not([class*="heading-scale-"])), .pricing-rich-text :where(.heading-scale-5) {
  margin-top: 40px;
}
.pricing-rich-text p {
  margin-top: 12px;
}
.pricing-card-left {
  width: 628px;
  max-width: var(--width--full-width);
}
.pricing-card-right {
  width: 419px;
  max-width: var(--width--full-width);
  padding: var(--_responsive---padding--padding-medium);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  border-radius: var(--_responsive---border-radius-m);
  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(--width--full-width);
  background-color: var(--color--light);
  color: var(--color--dark);
  letter-spacing: var(--later-spacing--letter-spacing-m);
  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-large);
  padding-bottom: var(--_responsive---padding--padding-large);
}
.license-bottom {
  margin-top: var(--_responsive---margin--margin-xxl);
  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-medium);
  grid-column-gap: 52px;
  grid-row-gap: 52px;
  border-radius: var(--_responsive---border-radius-m);
  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-large);
  padding-bottom: var(--_responsive---padding--padding-large);
}
.changelog-bottom {
  margin-top: var(--_responsive---margin--margin-xxl);
  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-medium);
  grid-column-gap: 52px;
  grid-row-gap: 52px;
  border-radius: var(--_responsive---border-radius-m);
  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-large);
  padding-bottom: var(--_responsive---padding--padding-large);
}
.privacy-policy-wrap {
  max-width: 856px;
  margin-left: auto;
  margin-right: auto;
}
.privacy-policy-bottom {
  margin-top: var(--_responsive---margin--margin-xxl);
  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-dark);
}
.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(--width--full-width);
  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-xlarge) 0px;
  background-color: var(--color--site-bg);
}
.bg-light {
  background-color: var(--color--light);
}
.image-grid {
  z-index: 99;
  width: var(--width--full-width);
  height: var(--width--full-width);
  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(--width--full-width);
  height: var(--width--full-width);
  -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-tiny);
  background-color: var(--color--grey-light);
  color: var(--color--dark);
  text-align: center;
}
.team-mamber-list {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  flex: none;
  display: flex;
}
.team-mamber-image-image-wrap {
  width: var(--width--full-width);
  border-radius: var(--_responsive---border-radius-m);
  overflow: hidden;
}
.team-mamber-info {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}
.cookies-block {
  z-index: 5555;
  width: 100%;
  max-width: 445px;
  padding: var(--_responsive---padding--padding-small);
  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 {
  max-width: 24px;
  height: auto;
  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;
}
.hero-service-wrap {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  border-top: 1px solid var(--color--light);
  border-bottom: 1px solid var(--color--light);
  color: var(--color--light);
  flex-flow: column;
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
}
.carft-section {
  height: 300vh;
}
.craft-sticky {
  height: 100vh;
  padding-top: var(--_responsive---padding--padding-xbig);
  padding-bottom: var(--_responsive---padding--padding-xbig);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.craft-text-block {
  flex-flow: column;
  width: 100%;
  display: flex;
}
.craft-text-wrap._01 {
  margin-right: auto;
  display: inline-block;
}
.craft-text-wrap._02 {
  margin-left: auto;
}
.craft-image-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  width: 100%;
  display: flex;
  position: relative;
}
.craft-image-row {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: start center;
  width: 100%;
  display: grid;
}
.craft-image-wrap {
  width: var(--width--full-width);
}
.craft-image-wrap._01 {
  max-width: 260px;
  margin-top: 320px;
}
.craft-image-wrap._02 {
  max-width: 260px;
}
.craft-image-wrap._03 {
  max-width: 320px;
  margin-top: 90px;
  margin-right: 40px;
}
.craft-image-wrap._04 {
  max-width: 240px;
  margin-top: 53px;
  margin-left: auto;
}
.craft-image-wrap._05 {
  max-width: 240px;
  margin-right: auto;
}
.craft-image {
  border-radius: 16px;
  overflow: hidden;
}
.email-section {
  padding-top: var(--_responsive---padding--padding-xbig);
  padding-bottom: var(--_responsive---padding--padding-xbig);
}
.email-content-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.email-image-wrap {
  border-radius: 8px;
  width: 100%;
  max-width: 186px;
  overflow: hidden;
}
.email-link {
  color: var(--color--dark);
  border-bottom: 2px solid #80b70000;
  text-decoration: none;
  transition: all .3s;
}
.email-link:hover {
  border-bottom: 2px solid var(--color--secondary);
  color: var(--color--secondary);
}
.email-text {
  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;
}
.service-name-wrap {
  border-bottom: 1px solid var(--color--grey-light);
  padding-bottom: 32px;
  position: relative;
}
.service-border {
  background-color: var(--color--dark);
  width: 100%;
  height: 1px;
  position: absolute;
  inset: auto 0% -1px;
}
.service-name-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  width: 100%;
  max-width: 640px;
  display: flex;
}
.service-image-block {
  width: 100%;
  max-width: 640px;
  position: sticky;
  top: 40px;
}
.service-content-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.who-content-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  max-width: 920px;
  display: flex;
}
.who-text-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  max-width: 920px;
  color: var(--color--dark);
  flex-flow: column;
  display: flex;
}
.who-image-wrap {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.who-we-logo {
  max-width: 120px;
}
.who-client-block {
  background-color: #000;
  border-radius: 16px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 400px;
  min-height: 440px;
  padding: 20px;
  text-decoration: none;
  display: flex;
}
.client-image-wrap {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.client-image {
  border-style: solid;
  border-width: undefinedpx;
  object-fit: cover;
  border-color: #fff;
  max-width: 70px;
  margin-left: -25px;
}
.client-image.first {
  margin-left: 0;
}
.who-title-wrap {
  max-width: 250px;
  color: var(--color--light);
}
.expertise-left {
  width: 33%;
  min-height: 100vh;
  padding-top: var(--_responsive---padding--padding-xxlarge);
  padding-bottom: var(--_responsive---padding--padding-xbig);
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.expertise-name {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.expertise-left-bottom {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
}
.expertise-image-wrapper {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}
.expertise-image {
  border-radius: 16px;
  max-width: 530px;
  height: auto;
}
.accelerate-content-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}
.acceletate-title-wrap {
  text-align: center;
  max-width: 620px;
}
.expertise-bg-image {
  object-fit: cover;
}
.team-member-image {
  width: var(--width--full-width);
  height: var(--width--full-width);
  object-fit: cover;
  min-height: 500px;
  max-height: 500px;
}
.team-member-image:where(.blog-widget-v2) {
  min-height: 480px;
  max-height: 480px;
}
.accelerate-list-icon {
  background-color: var(--color--secondary);
  border-radius: 1px;
  width: 8px;
  height: 8px;
}
.expertise-right {
  width: 64%;
  height: 100vh;
  position: absolute;
  inset: 0% 0% auto auto;
  overflow: hidden;
}
.expertise-right-inner {
  width: var(--width--full-width);
  height: var(--width--full-height);
  flex: none;
  display: flex;
}
.client-card {
  width: var(--width--full-width);
  height: var(--width--full-height);
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  background-color: var(--color--light);
  border-radius: 16px;
  flex-direction: column;
  flex: none;
  justify-content: space-between;
  align-items: center;
  max-width: 340px;
  padding: 54px 40px;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 -1px 1px #3333330f, 0 0 #2929290a, 0 48px 48px #2929290a, 0 24px 24px #2929290a, -10px 12px 12px #2929290a, 0 6px 6px #2929290a, 0 3px 3px #29292905, 0 1px 1px #2929290a;
}
.client-rating-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  width: 164px;
  color: var(--color--dark);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.rating-icon-wrap {
  grid-column-gap: 6px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.client-image-block {
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.review-card {
  width: var(--width--full-width);
  height: var(--width--full-height);
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  background-color: var(--color--light);
  border-radius: 16px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 340px;
  padding: 32px 30px;
  text-decoration: none;
  display: flex;
  overflow: hidden;
  box-shadow: inset 0 -1px 1px #3333330f, 0 0 #2929290a, 0 48px 48px #2929290a, 0 24px 24px #2929290a, -10px 12px 12px #2929290a, 0 6px 6px #2929290a, 0 3px 3px #29292905, 0 1px 1px #2929290a;
}
.review-card-bottom {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.review-card-top {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  display: flex;
}
.review-client-image {
  aspect-ratio: 1;
  border: 1px solid var(--color--light);
  border-radius: 50%;
  max-width: 80px;
  margin-left: -24px;
}
.review-client-image.one {
  margin-left: 0;
}
.review-card-wrap {
  flex: none;
}
.review-sticky {
  min-height: 100vh;
  padding-top: var(--_responsive---padding--padding-large);
  padding-bottom: var(--_responsive---padding--padding-large);
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.testimonial {
  padding-top: var(--_responsive---padding--padding-xxlarge);
  padding-bottom: var(--_responsive---padding--padding-xxlarge);
  background-color: var(--color--light);
}
.testimonial-card {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  background-color: var(--color--site-bg);
  border-radius: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 435px;
  padding: 24px;
  text-decoration: none;
  display: flex;
}
.testimonial-author-block {
  grid-column-gap: 12px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}
.testimonial-image-wrap {
  aspect-ratio: 1;
  border-radius: 50%;
  max-width: 48px;
  overflow: hidden;
}
.testimonial-image {
  object-fit: cover;
  border-radius: 10px;
}
.testimonial-author-info {
  grid-row-gap: 4px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.testimonial-card-divider {
  background-color: var(--color--grey-light);
  width: 100%;
  height: 1px;
}
.testimonial-card-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}
.testimonial-card-wrap.right-align {
  justify-content: flex-end;
  align-items: center;
  margin-top: 340px;
  display: flex;
}
.testimonial-title {
  margin-bottom: var(--_responsive---padding--padding-xlarge);
  color: var(--color--secondary);
  text-align: center;
  position: sticky;
  top: 50px;
}
.footer-copyright-link {
  color: var(--color--primary);
  text-decoration: none;
  transition: color .4s;
}
.footer-copyright-link:hover {
  color: var(--color--secondary);
}
.utility-link-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.utility-link-divider {
  background-color: var(--color--light);
  width: 1px;
  height: 16px;
}
.line-item {
  color: var(--color--dark);
  font-weight: var(--font-weight--semi-bold);
}
.nav-logo.v1:where(.navbar-v2), .nav-logo.v2 {
  display: none;
}
.nav-logo.v2:where(.navbar-v2) {
  display: block;
}
.cart-icon, .cart-icon:where(.navbar-v2) {
  max-width: 24px;
}
.apple-pay {
  border-radius: var(--_responsive---border-radius-tiny);
  height: 48px;
}
.circle {
  background-color: #0158ff;
  border-radius: 1000px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: -4px;
  right: -4px;
}
.promo-text {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
  text-decoration: none;
}
.promo-cards {
  z-index: 10;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
  position: fixed;
  bottom: 20px;
  right: 20px;
}
.unlock-full-access {
  color: #0158ff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
}
.image {
  width: 28px;
  height: 28px;
}
.buy-template-button {
  background-color: #7c7c7c26;
  border-top-left-radius: 1.4rem;
  border-top-right-radius: 1.4rem;
  justify-content: center;
  align-items: center;
  min-width: 20rem;
  position: fixed;
  inset: auto 0% 0% auto;
}
.buy-template-button:hover {
  box-shadow: 4px 4px 25px #0003;
}
.buy-template-button.frosted-glass {
  z-index: 1000;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 10px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 16rem;
  padding: 8px 12px;
  text-decoration: none;
  display: flex;
  position: relative;
  bottom: auto;
  right: auto;
}
.buy-template-button.frosted-glass:hover {
  border-width: 1px;
  border-color: #0158ff;
}
@media screen and (min-width: 1280px) {
  body {
    --_typography---paragraph-02--font-size: 16px;
    --_typography---paragraph-02--line-height: 24px;
    --_typography---h1--font-size: 62px;
    --_typography---h1--line-height: 70px;
    --_typography---h1--letter-spacing: var(--later-spacing--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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: 180px;
    --_typography---display-01--line-height: 180px;
    --_typography---display-01--letter-spacing: var(--later-spacing--letter-spacing-xl);
    --_typography---display-02--font-size: 82px;
    --_typography---display-02--line-height: 88px;
    --_typography---display-02--letter-spacing: var(--later-spacing--letter-spacing-xl);
    --_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--letter-spacing-m);
    --_typography---tag--font-weight: var(--font-weight--semi-bold);
    --_typography---tag--letter-spacing: var(--later-spacing--letter-spacing-m);
  }
  .home-about-box.is-who-we {
    max-width: 311px;
    padding: 32px;
  }
  .about-hero-top {
    max-width: 820px;
  }
  .who-client-block {
    max-width: 380px;
    padding: 32px;
  }
  .who-title-wrap {
    max-width: 313px;
  }
  .expertise-left {
    width: 30%;
  }
  .accelerate-content-wrap {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
  }
}
@media screen and (min-width: 1440px) {
  .expertise-right {
    width: 62%;
  }
}
@media screen and (max-width: 991px) {
  body {
    --_responsive---padding--padding-large: 70px;
    --_responsive---padding--padding-xbig: 100px;
    --_responsive---margin--margin-xxl: 80px;
    --_responsive---border-radius-m: 10px;
    --_responsive---border-radius-s: 10px;
    --_responsive---border-radius-tiny: 8px;
    --_responsive---margin--margin-tiny: 50px;
    --_responsive---padding--padding-medium: 30px;
    --_responsive---border-radius-l: 14px;
    --_responsive---padding--padding-xlarge: 80px;
    --_responsive---margin--margin-l: 60px;
    --_responsive---padding--padding-xsmall: 20px;
    --_responsive---padding--padding-xxxlarge: 130px;
    --_responsive---padding--padding-xxlarge: 80px;
    --_responsive---padding--padding-regular: 50px;
    --_responsive---padding--padding-medium-rare: 30px;
    --_responsive---padding--padding-slim: 28px;
    --_responsive---padding--padding-small: 22px;
    --_responsive---padding--padding-normal: 60px;
    --_responsive---margin--margin-xbig: 120px;
    --_responsive---margin--margin-big: 100px;
    --_responsive---margin--margin-xxxl: 100px;
    --_responsive---margin--margin-xl: 70px;
    --_responsive---margin--margin-m: 60px;
    --_responsive---margin--margin-s: 60px;
    --_responsive---padding--padding-xxbig: 120px;
    --_responsive---padding--padding-big: 100px;
    --_responsive---padding--padding-xxsmall: 20px;
    --_responsive---padding--padding-tiny: 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--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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--letter-spacing-xl);
    --_typography---display-02--font-size: 60px;
    --_typography---display-02--line-height: 68px;
    --_typography---display-02--letter-spacing: var(--later-spacing--letter-spacing-xl);
    --_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--letter-spacing-m);
    --_typography---tag--font-weight: var(--font-weight--semi-bold);
    --_typography---tag--letter-spacing: var(--later-spacing--letter-spacing-m);
  }
  .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 {
    padding-bottom: 32px;
  }
  .footer-top {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    flex-flow: column;
  }
  .footer-bottom {
    flex-flow: wrap;
  }
  .footer-top-left {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    width: auto;
  }
  .footer-top-right {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
    border-left-style: none;
    justify-content: flex-start;
    width: 100%;
    padding-bottom: 40px;
    padding-left: 0;
    padding-right: 0;
  }
  .sub-heading-wrap.faq-sub-heading {
    width: var(--width--full-width);
  }
  .footer-right-01 {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
  }
  .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;
  }
  .nav-link:where(.navbar-v2), .nav-link:hover:where(.navbar-v2), .nav-link[aria-current="page"]:where(.navbar-v2), .nav-link.is-active:where(.navbar-v2) {
    color: var(--color--dark);
  }
  .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;
  }
  .menu-lottie.white {
    display: none;
  }
  .menu-lottie.white:where(.navbar-v2) {
    display: block;
  }
  .menu-lottie.black:where(.navbar-v2) {
    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:where(.navbar-v2) {
    color: var(--color--dark);
  }
  .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;
  }
  .home-hero-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    place-items: end stretch;
    display: grid;
  }
  .fit-cover:where(.blog-widget-v2) {
    min-height: 400px;
    max-height: 400px;
  }
  .fit-cover.choose-image {
    object-position: 50% 26%;
  }
  .fit-cover.contact-image {
    object-position: 50% 32%;
  }
  .home-hero-top {
    grid-column-gap: 30px;
    grid-row-gap: 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: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
  }
  .home-about-bottom {
    grid-template-columns: 1fr 1fr;
  }
  .home-about-bottom.is-who-we {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .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.is-who-we {
    max-width: none;
  }
  .home-about-body {
    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(--width--full-width);
    order: -9999;
    margin-top: 0;
    margin-bottom: 40px;
  }
  .tabs-menu {
    width: var(--width--full-width);
  }
  .choose-us-image-wrap {
    height: 500px;
  }
  .tab-pane-tab-1 {
    width: var(--width--full-width);
  }
  .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;
    margin-bottom: 40px;
  }
  .home-service-box {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .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;
    max-width: 510px;
  }
  .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(--width--full-width);
    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(--width--full-width);
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .know-top-linner {
    display: none;
  }
  .reviews {
    height: auto;
  }
  .reviews-bottom {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
  .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(.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(--width--full-width);
  }
  .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(--width--full-width);
  }
  .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(--width--full-width);
    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: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    align-items: flex-start;
  }
  .about-brand-left {
    width: var(--width--full-width);
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }
  .about-brand-right {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .brand-counter-box, .left-brand-box {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
  .lefft-brand-image {
    width: 140px;
  }
  .who-we-top {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    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(--width--full-width);
  }
  .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: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
  }
  .expertise-left-top {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    max-width: 420px;
  }
  .expertise-image-block {
    width: var(--width--full-width);
    grid-column-gap: 34px;
    grid-row-gap: 34px;
    order: -9999;
  }
  .expertise-text-wrap {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }
  .accelerate-content-wrapper {
    flex-flow: column;
  }
  .accelerate-right {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    width: 600px;
  }
  .accelerate-middle {
    order: -9999;
    max-width: none;
  }
  .accelerate-left {
    width: var(--width--full-width);
  }
  .accelerate-image {
    max-height: 550px;
  }
  .accelerate-left-inner {
    margin-top: 0;
  }
  .teams {
    padding-top: 20px;
  }
  .teams-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
  }
  .teams-top {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    max-width: none;
  }
  .teams-bottom {
    width: var(--width--full-width);
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    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(--width--full-width);
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
  .service-inner-right, .service-inner-left {
    width: var(--width--full-width);
  }
  .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(--width--full-width);
    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(--width--full-width);
    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:where(:not([class*="heading-scale-"])), .work-rich-text :where(.heading-scale-5) {
    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(--width--full-width);
    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:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-5) {
    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(--width--full-width);
  }
  .contact-left {
    width: var(--width--full-width);
    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:where(:not([class*="heading-scale-"])), .pricing-rich-text :where(.heading-scale-5) {
    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-image-image-wrap {
    height: auto;
  }
  .team-mamber-info {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }
  .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;
  }
  .craft-sticky {
    justify-content: center;
    align-items: center;
  }
  .craft-image-wrap._01 {
    margin-top: 380px;
  }
  .craft-image-wrap._03 {
    margin-top: 360px;
  }
  .craft-image-wrap._04 {
    margin-top: 100px;
  }
  .service-name-wrap {
    padding-bottom: 24px;
  }
  .service-name-block {
    max-width: none;
  }
  .service-image-block {
    order: -9999;
    max-width: none;
    position: static;
  }
  .service-content-block {
    flex-flow: column;
  }
  .who-client-block {
    max-width: none;
  }
  .client-image {
    max-width: 60px;
  }
  .expertise-left {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 57vh;
    min-height: auto;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .expertise-image {
    max-width: 270px;
  }
  .accelerate-content-wrap {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
    align-items: stretch;
  }
  .acceletate-title-wrap {
    max-width: 490px;
  }
  .team-member-image, .team-member-image:where(.blog-widget-v2) {
    min-height: 400px;
    max-height: 400px;
  }
  .expertise-right {
    width: var(--width--full-width);
    grid-column-gap: 34px;
    grid-row-gap: 34px;
    order: -9999;
    height: 43vh;
    position: static;
  }
  .client-card {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    max-width: none;
  }
  .client-rating-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .review-card {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    max-width: none;
  }
  .review-card-top {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .review-client-image {
    max-width: 60px;
  }
  .review-sticky {
    position: static;
  }
}
@media screen and (max-width: 767px) {
  body {
    --_responsive---padding--padding-large: 50px;
    --_responsive---padding--padding-xbig: 80px;
    --_responsive---margin--margin-xxl: 60px;
    --_responsive---border-radius-m: 8px;
    --_responsive---border-radius-s: 8px;
    --_responsive---border-radius-tiny: 8px;
    --_responsive---margin--margin-tiny: 40px;
    --_responsive---padding--padding-medium: 24px;
    --_responsive---border-radius-l: 10px;
    --_responsive---padding--padding-xlarge: 60px;
    --_responsive---margin--margin-l: 50px;
    --_responsive---padding--padding-xsmall: 18px;
    --_responsive---padding--padding-xxxlarge: 100px;
    --_responsive---padding--padding-xxlarge: 60px;
    --_responsive---padding--padding-regular: 40px;
    --_responsive---padding--padding-medium-rare: 26px;
    --_responsive---padding--padding-slim: 20px;
    --_responsive---padding--padding-small: 18px;
    --_responsive---padding--padding-normal: 50px;
    --_responsive---margin--margin-xbig: 100px;
    --_responsive---margin--margin-big: 80px;
    --_responsive---margin--margin-xxxl: 80px;
    --_responsive---margin--margin-xl: 50px;
    --_responsive---margin--margin-m: 40px;
    --_responsive---margin--margin-s: 40px;
    --_responsive---padding--padding-xxbig: 100px;
    --_responsive---padding--padding-big: 80px;
    --_responsive---padding--padding-xxsmall: 18px;
    --_responsive---padding--padding-tiny: 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--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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--letter-spacing-xl);
    --_typography---display-02--font-size: 50px;
    --_typography---display-02--line-height: 58px;
    --_typography---display-02--letter-spacing: var(--later-spacing--letter-spacing-xl);
    --_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--letter-spacing-m);
    --_typography---tag--font-weight: var(--font-weight--semi-bold);
    --_typography---tag--letter-spacing: var(--later-spacing--letter-spacing-m);
  }
  .utility-page-content {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .utility-page-form {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
  }
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .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(.button-01-hero-button), .button-01:where(.button-01-bg-white), .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;
  }
  .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;
  }
  .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;
  }
  .cart-footer {
    padding-left: 20px;
    padding-right: 20px;
  }
  .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;
  }
  .fit-cover:where(.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;
    align-items: stretch;
  }
  .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;
    overflow: hidden;
  }
  .hero-brand-right {
    padding-top: 21px;
    padding-bottom: 21px;
  }
  .logo-box {
    margin-right: 33px;
  }
  .bg-linner-left {
    width: 132px;
  }
  .bg-linner-right {
    border-right-width: 1px;
    width: 132px;
  }
  .home-about-top {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .button-wrap._404-page-button {
    margin-top: 6px;
  }
  .home-about-box {
    height: 250px;
  }
  .home-about-box.is-who-we {
    min-height: 300px;
  }
  .home-about-body {
    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: 0;
    margin-bottom: 32px;
  }
  .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-top {
    margin-bottom: 32px;
  }
  .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;
  }
  .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: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
  }
  .reviews-box-wrap {
    height: 400px;
  }
  .reviews-box-text-wrap {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
  .faq:where(.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: 24px;
    grid-row-gap: 24px;
  }
  .about-brand-left {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
  }
  .about-brand-right {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .brand-counter-box {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  .left-brand-box {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    padding: 20px;
  }
  .lefft-brand-image {
    width: 120px;
  }
  .who-we-top {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .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-left-top {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    max-width: 400px;
  }
  .expertise-image-block {
    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;
  }
  .accelerate-right {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .accelerate-middle {
    width: var(--width--full-width);
  }
  .accelerate-image {
    max-height: 450px;
  }
  .teams-wrap {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }
  .teams-top {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .teams-bottom {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .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:where(:not([class*="heading-scale-"])), .work-rich-text :where(.heading-scale-5) {
    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:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-5) {
    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:where(:not([class*="heading-scale-"])), .pricing-rich-text :where(.heading-scale-5) {
    margin-top: 24px;
  }
  .pricing-rich-text p {
    margin-top: 10px;
  }
  .pricing-card-right {
    width: var(--width--full-width);
    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-image-image-wrap {
    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;
  }
  .carft-section {
    height: auto;
    padding-bottom: var(--_responsive---padding--padding-xlarge);
  }
  .craft-sticky {
    height: auto;
    padding-top: var(--_responsive---padding--padding-large);
    padding-bottom: var(--_responsive---padding--padding-large);
  }
  .craft-image-row {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .craft-image-wrap._01 {
    margin-top: 0;
  }
  .craft-image-wrap._02 {
    position: sticky;
    top: 50px;
  }
  .craft-image-wrap._03 {
    max-width: none;
    margin-top: 0;
    margin-right: 0;
    display: flex;
  }
  .craft-image-wrap._04 {
    max-width: none;
    margin-top: 0;
  }
  .craft-image-wrap._05 {
    max-width: none;
  }
  .craft-image {
    border-radius: 12px;
    min-height: 210px;
  }
  .email-section {
    display: none;
  }
  .service-name-wrap {
    padding-bottom: 16px;
  }
  .who-text-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .who-client-block {
    min-height: 300px;
  }
  .client-image {
    max-width: 50px;
  }
  .expertise-image {
    max-width: 250px;
  }
  .accelerate-content-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .acceletate-title-wrap {
    max-width: 400px;
  }
  .team-member-image {
    min-height: 300px;
    max-height: 300px;
  }
  .team-member-image:where(.blog-widget-v2) {
    min-height: 350px;
    max-height: 350px;
  }
  .expertise-right {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .client-card {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 20px;
  }
  .review-card {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .review-card-top {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
  .review-client-image {
    max-width: 50px;
  }
  .testimonial-card-block {
    grid-template-columns: 1fr;
  }
  .testimonial-card-wrap.right-align {
    margin-top: 0;
  }
}
@media screen and (max-width: 479px) {
  body {
    --_responsive---padding--padding-large: 40px;
    --_responsive---padding--padding-xbig: 70px;
    --_responsive---margin--margin-xxl: 40px;
    --_responsive---border-radius-m: 6px;
    --_responsive---border-radius-s: 6px;
    --_responsive---border-radius-tiny: 6px;
    --_responsive---margin--margin-tiny: 30px;
    --_responsive---padding--padding-medium: 20px;
    --_responsive---border-radius-l: 8px;
    --_responsive---padding--padding-xlarge: 40px;
    --_responsive---margin--margin-l: 40px;
    --_responsive---padding--padding-xsmall: 16px;
    --_responsive---padding--padding-xxxlarge: 80px;
    --_responsive---padding--padding-xxlarge: 40px;
    --_responsive---padding--padding-regular: 30px;
    --_responsive---padding--padding-medium-rare: 20px;
    --_responsive---padding--padding-slim: 18px;
    --_responsive---padding--padding-small: 16px;
    --_responsive---padding--padding-normal: 40px;
    --_responsive---margin--margin-xbig: 80px;
    --_responsive---margin--margin-big: 60px;
    --_responsive---margin--margin-xxxl: 60px;
    --_responsive---margin--margin-xl: 40px;
    --_responsive---margin--margin-m: 30px;
    --_responsive---margin--margin-s: 30px;
    --_responsive---padding--padding-xxbig: 80px;
    --_responsive---padding--padding-big: 60px;
    --_responsive---padding--padding-xxsmall: 16px;
    --_responsive---padding--padding-tiny: 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--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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--letter-spacing-m);
    --_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--letter-spacing-xl);
    --_typography---display-02--font-size: 44px;
    --_typography---display-02--line-height: 52px;
    --_typography---display-02--letter-spacing: var(--later-spacing--letter-spacing-xl);
    --_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--letter-spacing-m);
    --_typography---tag--font-weight: var(--font-weight--semi-bold);
    --_typography---tag--letter-spacing: var(--later-spacing--letter-spacing-m);
  }
  .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.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(.button-01-hero-button), .button-01:where(.button-01-bg-white), .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;
  }
  .text-light.center {
    text-align: center;
  }
  .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: 32px;
    grid-row-gap: 32px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    width: 100%;
    display: grid;
  }
  .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;
  }
  .menu-lottie.white {
    display: none;
  }
  .menu-lottie.white:where(.navbar-v2) {
    display: block;
  }
  .menu-lottie.black:where(.navbar-v2) {
    display: none;
  }
  .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;
  }
  .home-hero-wrap {
    padding-bottom: 0;
  }
  .fit-cover.ceo-home-bg {
    object-position: 10% 50%;
  }
  .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: stretch;
  }
  .hero-button-01 {
    width: var(--width--full-width);
    align-items: stretch;
  }
  .hero-button-01._01 {
    justify-content: center;
    align-items: center;
  }
  .button-02 {
    padding: 12px 20px;
  }
  .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: 20px;
    grid-row-gap: 20px;
  }
  .home-about-bottom, .home-about-bottom.is-who-we {
    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;
    position: sticky;
    top: 10px;
  }
  .home-about-box.is-who-we {
    min-height: 260px;
  }
  .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: 0;
  }
  .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 {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
  .home-service-box {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
  .projects-v1-top {
    justify-content: space-between;
    align-items: center;
  }
  .projects-v1-heading {
    justify-content: center;
    align-items: center;
  }
  .heading-wrap {
    text-align: center;
    max-width: 305px;
  }
  .heading-wrap.left-align {
    text-align: left;
  }
  .process-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .process-left {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    justify-content: center;
    align-items: center;
  }
  .process-number-box {
    width: 50px;
    height: 50px;
  }
  .need-to-know-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    justify-content: center;
    align-items: flex-start;
  }
  .need-to-know-left {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    justify-content: center;
    align-items: flex-start;
  }
  .need-to-know-right {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    text-align: center;
    overflow: visible;
  }
  .need-to-know-list {
    background-color: var(--color--primary);
    text-align: left;
    position: sticky;
    top: 10px;
  }
  .reviews-box-wrap {
    height: auto;
  }
  .reviews-box-text-wrap {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    left: 14px;
    right: 14px;
  }
  .faq:where(.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: 24px;
    grid-row-gap: 24px;
  }
  .about-brand-left {
    grid-column-gap: 38px;
    grid-row-gap: 38px;
    padding: 16px;
  }
  .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;
    background-color: var(--color--light);
    padding: 16px;
    position: sticky;
    top: 10px;
  }
  .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-image-block {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
  }
  .expertise-list {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .accelerate-content-wrapper {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
  .accelerate-right {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .accelerate-image {
    max-height: 300px;
  }
  .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(--width--full-width);
  }
  .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(--width--full-width);
    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:where(:not([class*="heading-scale-"])), .work-rich-text :where(.heading-scale-5) {
    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:where(:not([class*="heading-scale-"])), .blog-rich-text :where(.heading-scale-5) {
    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:where(:not([class*="heading-scale-"])), .pricing-rich-text :where(.heading-scale-5) {
    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(--width--full-width);
    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-image-image-wrap {
    max-width: var(--width--full-width);
  }
  .cookies-block {
    max-width: 280px;
  }
  .modal-wrapper {
    display: none;
  }
  .modal-wrap {
    max-height: 610px;
  }
  .footer-link-widget {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }
  .craft-image-block {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
  }
  .craft-image-row {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  .craft-image-wrap._04 {
    margin-top: 0;
  }
  .craft-image-wrap._05 {
    max-width: none;
  }
  .craft-image {
    border-radius: 8px;
    max-width: none;
    min-height: 120px;
    max-height: 120px;
  }
  .email-image-wrap._01 {
    max-width: none;
    display: none;
  }
  .email-image-wrap._02 {
    display: none;
  }
  .email-text {
    font-size: var(--_responsive---padding--padding-normal);
  }
  .who-client-block {
    min-height: 260px;
  }
  .expertise-image {
    max-width: 220px;
  }
  .acceletate-title-wrap {
    max-width: 330px;
  }
  .team-member-image {
    min-height: auto;
    max-height: none;
  }
  .expertise-right {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
  }
  .review-card {
    padding-top: 24px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .review-card-top {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
  .review-card-wrap.one {
    position: sticky;
  }
}
#node-_5b813614-1d5e-71e4-692d-0964549517b5-bc48e35e {
  grid-area: 2 / 3 / 3 / 3;
}
#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-bc48e362 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-a7a09d12-1706-f709-e583-ca71723c0221-bc48e362 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
@media screen and (max-width: 991px) {
  #node-_09556d02-baf4-7cdc-ce2c-451b4d9455f5-bc48e35e {
    grid-area: 2 / 1 / 3 / 2;
  }
  #node-d70f70cc-7ce9-75e2-3af1-a1c056ebe873-bc48e35e, #node-_215a419c-35d8-fab0-694e-64f785525f87-85525f1f {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
  #node-ba86b5c0-329e-6f13-cd01-a79850920e31-bc48e362 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}
@media screen and (max-width: 767px) {
  #node-_8827d1e6-ab0c-df94-7263-de3c417d1fa9-417d1f95 {
    grid-area: span 1 / span 1 / 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 -- the vanilla replacements for Webflow's runtime and for its
   IX2 interactions.

   Everything in this file is a transcription of something in the export's own
   payload: 204 events across 70 action lists, plus the widgets the runtime
   used to drive. main.js decides WHEN each of these runs; the distances, the
   durations and the easings are all here, because that is where the rest of
   the template's design lives.

   Emitted LAST, after the design sheet, so a state class can win against the
   rule it is overriding without needing `!important`.

   Contents
     0  primitives -- the button reset, visually-hidden, the skip link
     1  reveals
     2  the navigation panel and the hamburger
     3  the Pages dropdown
     4  tab sets
     5  the two accordions
     6  hovers
     7  scroll scrubs
     8  counters, the works-grid un-blur, the drawn rule
     9  the looping pair -- marquee and breathing photo
    10  the cursor puck
    11  the modal and the cookie bar
    12  the cart drawer and the commerce panels
   ============================================================ */
/* ------------------------------------------------------------ 0. primitives
   Six elements in this template were `<a href="#">` or a bare `<div>` with a
   click handler and are now real buttons: the hamburger, the Pages toggle,
   both accordion triggers, the tab strips, the modal's cross, the cookie
   bar's "Got it!" and the cart's open/close pair.
   `<button>` brings a UA style with it -- its own font, a border, a
   background and centred text -- and none of that was in the design.

   `letter-spacing`, `word-spacing` and `text-transform` are named explicitly
   because `font: inherit` does NOT restore them: they are reset by the
   form-control style rather than carried on the font shorthand, and a
   previous conversion shipped a tab strip 7px narrow for exactly that
   reason.

   `:where()` keeps this at specificity 0 so every design rule still wins. */
:where(.menu-button, .nav-dropdown-toggle, .faq-toggle, [role="tab"], .modal-close, .cookies-button, [data-cart-open], [data-cart-close], .add-to-cart-button) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Off-screen until focused, which is the whole point of it. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--color--dark);
  color: var(--color--light);
  font-size: 15px;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform 0.2s ease;
}
.skip-link:focus {
  transform: translateY(0);
}
/* While a full-screen layer is open. */
body.no-scroll {
  overflow: hidden;
}
/* The <main> landmark add_landmarks introduces. `display: contents` makes it
   free: `.main-wrapper` and `.home-nav-hero-wrap` are flex containers on some
   pages, and an ordinary block in the middle of one would become the flex
   item instead of the sections it holds. */
main#main-content {
  display: contents;
}
/* ------------------------------------------------------------- 1. reveals
   Six of the payload's action lists -- "Slide Up 1s" through "Slide Up 6s" --
   are ONE gesture at six delays: from `translateY(20%) blur(5px) opacity(0)`
   to rest, the move and the fade over 500ms and the blur over 600ms, all
   `ease`. main.js writes the delay the payload recorded as `--reveal-delay`
   and this plays it.

   Two things here are deliberate and were both learned the hard way:

     * these are ANIMATIONS, not transitions. A `transition:` shorthand on a
       reveal wrapper DELETES whatever transition the element already had --
       and several of these wrappers are also hover targets with their own.
     * the rest state is gated on `:where(.js)`. Without scripting nothing
       ever adds `.is-revealed`, so an ungated `opacity: 0` ships a blank
       page to anyone with JavaScript off. `:where()` keeps the gate free, so
       the specificity is the same as the bare class.

   `will-change` is not set. There are up to 113 of these on one page and
   promoting all of them costs more than it saves. */
:where(.js) .reveal:not(.is-revealed) {
  opacity: 0;
}
:where(.js) .reveal-up:not(.is-revealed) {
  transform: translateY(20%);
  filter: blur(5px);
}
:where(.js) .reveal-rise:not(.is-revealed) {
  transform: translateY(50px);
  filter: blur(5px);
}
:where(.js) .reveal-slide-up:not(.is-revealed) {
  transform: translateY(100px);
}
:where(.js) .reveal-grow:not(.is-revealed) {
  transform: scale(0.75);
}
:where(.js) .reveal-shrink:not(.is-revealed) {
  transform: scale(1.25);
}
.reveal-up.is-revealed {
  animation:
    reveal-up-move 500ms ease var(--reveal-delay, 0ms) both,
    reveal-blur 600ms ease var(--reveal-delay, 0ms) both;
}
/* "Fade In 0.2": 50px and a 5px blur over 1200ms outQuart, 200ms late. The
   delay is in the action list rather than on the event, so build_ix2_map
   records it the same way as the six above and it arrives here identically. */
.reveal-rise.is-revealed {
  animation:
    reveal-rise-move 1200ms cubic-bezier(0.165, 0.84, 0.44, 1)
      var(--reveal-delay, 0ms) both,
    reveal-blur 600ms ease var(--reveal-delay, 0ms) both;
}
/* Webflow's four stock presets, all 1000ms `outQuart`. */
.reveal-fade.is-revealed {
  animation: reveal-fade 1000ms cubic-bezier(0.165, 0.84, 0.44, 1)
    var(--reveal-delay, 0ms) both;
}
.reveal-slide-up.is-revealed {
  animation: reveal-slide-up 1000ms cubic-bezier(0.165, 0.84, 0.44, 1)
    var(--reveal-delay, 0ms) both;
}
.reveal-grow.is-revealed {
  animation: reveal-grow 1000ms cubic-bezier(0.165, 0.84, 0.44, 1)
    var(--reveal-delay, 0ms) both;
}
.reveal-shrink.is-revealed {
  animation: reveal-shrink 1000ms cubic-bezier(0.165, 0.84, 0.44, 1)
    var(--reveal-delay, 0ms) both;
}
@keyframes reveal-up-move {
  from { opacity: 0; transform: translateY(20%); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-blur {
  from { filter: blur(5px); }
  to { filter: blur(0); }
}
@keyframes reveal-rise-move {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes reveal-slide-up {
  from { opacity: 0; transform: translateY(100px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-grow {
  from { opacity: 0; transform: scale(0.75); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes reveal-shrink {
  from { opacity: 0; transform: scale(1.25); }
  to { opacity: 1; transform: scale(1); }
}
/* A REVEAL GATED TO A BREAKPOINT HAS TO GATE ITS REST STATE TOO.
   `mediaQueries` on the event decides where the reveal runs; main.js honours
   it and never fires outside that range. Without these three rules the
   element would then sit at `opacity: 0` for ever at the widths where the
   reveal is not authored -- invisible rather than un-animated. The team grid
   is the case that matters: its reveal exists only below 992px. */
@media screen and (min-width: 992px) {
  :where(.js) .reveal[data-reveal-mq="below-main"]:not(.is-revealed) {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@media screen and (max-width: 991px) {
  :where(.js) .reveal[data-reveal-mq="main"]:not(.is-revealed) {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@media screen and (max-width: 767px) {
  :where(.js) .reveal[data-reveal-mq="medium"]:not(.is-revealed) {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(.js) .reveal:not(.is-revealed), .reveal.is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}
/* ----------------------------------------------------------------- 2. nav
   The export's navbar carried `data-collapse="medium"`, which is Webflow's
   name for 991px; framework.hand.css states that as a real media query and
   switches the button on there. This is the panel it opens.

   The hamburger was TWO Lottie files in the export -- `menu-bars-animation
   -1-1.json` and `-1-1-1.json`, one black and one white, 60 frames each,
   played 0 -> 70% on open and back on close. Both are three bars folding
   into a cross, so they are three spans and two transforms here; the JSON
   and the player that read it are both gone, and `documents/` does not
   ship. The 70% is why the bars meet at an X rather than passing through it. */
.menu-button {
  display: none;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 991px) {
  .menu-button {
    display: flex;
  }
  /* The panel. `.nav-menu-wrapper`'s own rule -- white, bordered top and
     bottom, 30px of padding -- is the design's; this is only what the
     runtime used to do, which is give it a height to animate to. */
.nav-menu-wrapper {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow: hidden;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    visibility: hidden;
    transition:
      max-height 400ms ease,
      padding 400ms ease,
      visibility 0s linear 400ms;
  }
  .is-nav-open .nav-menu-wrapper {
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    padding-top: 30px;
    padding-bottom: 30px;
    visibility: visible;
    transition:
      max-height 400ms ease,
      padding 400ms ease,
      visibility 0s;
  }
}
.hamburger {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.hamburger-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 300ms ease, opacity 200ms ease;
}
.hamburger-bar:nth-child(1) { top: 20%; }
.hamburger-bar:nth-child(2) { top: 50%; margin-top: -1px; }
.hamburger-bar:nth-child(3) { bottom: 20%; }
.is-nav-open .hamburger-bar:nth-child(1) {
  transform: translateY(calc(50% + 4px)) rotate(45deg);
}
.is-nav-open .hamburger-bar:nth-child(2) {
  opacity: 0;
}
.is-nav-open .hamburger-bar:nth-child(3) {
  transform: translateY(calc(-50% - 4px)) rotate(-45deg);
}
/* The navbar's second variant paints its chrome white; the bars follow the
   text colour, so nothing else has to know which variant it is in. */
.menu-button {
  color: var(--color--dark);
}
.navbar-v2 .menu-button, .menu-button.navbar-v2 {
  color: var(--color--light);
}
/* ------------------------------------------------------------ 3. dropdown
   a-10 / a-11. The chevron turns 180deg and the panel rises 20px into place,
   both over 400ms `ease`; the rest state is `translateY(20px)` and a
   0deg chevron, which is group 0.

   The hover half is gated to >=768px because that is the `mediaQueries` on
   both events -- below it the panel is inside the collapsed menu and opening
   on hover would fire on the tap that scrolls past it. `.is-open`, which
   main.js moves, works at every width. */
.nav-dropdown-list-wrap {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 400ms ease, opacity 400ms ease;
}
.nav-dropdown-icon {
  transition: transform 400ms ease;
}
.nav-dropdown-list-wrap.is-open {
  transform: translateY(0);
  opacity: 1;
}
.nav-dropdown.is-open .nav-dropdown-icon {
  transform: rotate(180deg);
}
/* THE HOVER IS NOT A CSS RULE, and that is deliberate.
   `.nav-dropdown:hover .nav-dropdown-list-wrap { display: block }` shows the
   panel but gives it NONE of the geometry the design keys on `.is-open`:

     .nav-dropdown-list-wrap.shadow-three.is-open        { position: absolute }
     ...mobile-shadow-hide.pages.is-open  { padding-top: 16px; left: -544px }

   That `left: -544px` is what pulls the 544px-wide panel back underneath the
   toggle. Without it the panel opens at `left: auto` -- starting at "Pages"
   and running off the right-hand edge of the window, which is exactly what
   the CSS-only hover shipped.

   Webflow's own runtime added `w--open` on hover (the toggle carries
   `data-hover="true"`), so main.js does the same on `mouseenter` /
   `mouseleave` above 768px -- the breakpoint a-10 and a-11 are authored at.
   One state class, one set of rules, and the hover and the click open the
   panel identically. */
/* ---------------------------------------------------------------- 4. tabs
   Webflow's own `.w-tab-pane { display: none }` and
   `.w--tab-active { display: block }` are kept and renamed by build_css, so
   the pane's show/hide is still the framework's. This is only the fade the
   widget did on top of it: `data-duration-in="300"`, `data-duration-out="100"`,
   `data-easing="ease"`, read off the export's own attributes. */
.tabset-pane {
  opacity: 0;
  transition: opacity 100ms ease;
}
.tabset-pane.is-active {
  opacity: 1;
  transition: opacity 300ms ease;
}
/* ---------------------------------------------------------- 5. accordions
   a-21 / a-22 (the FAQ, on five pages) and a-33 / a-34 (the service list).
   Both animate a panel from height 0 to `AUTO` -- which CSS cannot
   transition -- so the panel is a grid row instead, from `0fr` to `1fr`.

   `minmax(0, 0fr)` rather than a bare `0fr`: a bare `0fr` row still reserves
   the content's min-content height, so the panel collapses to a line rather
   than to nothing. The child needs `min-height: 0` for the same reason.

   The FAQ's plus turns 90deg into a cross (a-21) and the service row's
   vertical rule turns 90deg into a horizontal one (a-33); both are the same
   500ms `ease`. */
.faq-answer-wrap, .service-box-bottom {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 500ms ease;
}
.faq-answer-wrap > *, .service-box-bottom > * {
  min-height: 0;
  overflow: hidden;
}
.faq-item.is-active .faq-answer-wrap, .service-tab-link.is-active .service-box-bottom {
  grid-template-rows: minmax(0, 1fr);
}
.plus-icon-01, .vratical-line {
  transition: transform 500ms ease;
}
.faq-item.is-active .plus-icon-01, .service-tab-link.is-active .vratical-line {
  transform: rotate(90deg);
}
/* The trigger. It wraps only the question's text so that the heading stays a
   heading, and a stretched pseudo-element gives it back the full-row hit
   area the `<a>` used to have. `position: relative` on the row is what the
   `inset: 0` resolves against. */
.faq-question-wrap, .service-box-top {
  position: relative;
}
.faq-toggle {
  display: inline;
  color: inherit;
  text-align: left;
}
.faq-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
}
.faq-toggle:focus-visible {
  outline: 2px solid var(--color--secondary);
  outline-offset: 4px;
}
/* -------------------------------------------------------------- 6. hovers
   Twenty-nine MOUSE_OVER / MOUSE_OUT events, every one of them
   CHILDREN-scoped, so every rule below is `.trigger:hover .target` -- which
   is what "CHILDREN" means. The `[data-hover]` attribute names which of the
   eleven gestures it is; that name comes from the action list's own title.

   Where an OUT list differs from its IN list only by running the values
   backwards, one `transition` covers both directions, which is why there is
   no `.is-hovered` class anywhere in this section. */
/* a-2/a-3, a-38/a-39, a-57/a-58 -- three copies of one animation, diffed
   declaration by declaration before being given one hook. A dark circle
   grows from scale 0 to fill the pill, the label turns white, the arrow
   slides a full width right and turns 45deg, and the border goes
   transparent -> white. 500ms `ease` throughout. */
[data-hover="button-01"] .button-hover-circle {
  transform: scale(0);
  transition: transform 500ms ease;
}
/* THE LABEL'S REST COLOUR IS THE PAYLOAD'S, NOT THE SHEET'S, and the two
   disagree. `.button-text` is `color: var(--color--light)` in the design --
   white -- while a-2's group 0 sets it to `--color--dark`, and group 0 is the
   rest state. On the published site Webflow's runtime writes that dark inline
   on load, so every one of these labels is BLACK at rest and turns white as
   the circle fills.
   Taking the sheet at its word shipped "Book A Call" as white text on a white
   pill. Verified in the browser against the export before being written: on
   the home page every `.button-text` inside a `.button-01` carries
   `color: rgb(0, 0, 0)` from the runtime, and the four that stay white --
   the "View" pucks -- are `.button-text.text-light` and are not inside one. */
[data-hover="button-01"] .button-text {
  color: var(--color--dark);
}
[data-hover="button-01"] .button-text, [data-hover="button-01"] .button-icon-02 {
  transition: color 500ms ease, transform 500ms ease;
}
[data-hover="button-01"] {
  transition: border-color 500ms ease;
}
[data-hover="button-01"]:hover .button-hover-circle {
  transform: scale(1);
}
[data-hover="button-01"]:hover .button-text {
  color: var(--color--light);
}
[data-hover="button-01"]:hover .button-icon-02 {
  transform: translateX(100%) rotate(45deg);
}
[data-hover="button-01"]:hover {
  border-color: var(--color--light);
}
/* a-12/a-13 -- the label rolls up out of its box while the pill turns lime.
   The label is stacked twice inside `.button-04-text-group`, so -100% brings
   the second copy in as the first leaves. */
[data-hover="button-02"] .button-text, [data-hover="button-02"] .button-04-text-group {
  transition: transform 500ms ease;
}
[data-hover="button-02"] {
  transition: background-color 500ms ease;
}
[data-hover="button-02"]:hover .button-text, [data-hover="button-02"]:hover .button-04-text-group {
  transform: translateY(-100%);
}
[data-hover="button-02"]:hover {
  background-color: var(--color--primary);
}
/* a-24/a-25 -- the project button. A dark panel wipes in from the left, the
   label rolls up half its height, the two arrow icons cross-fade and the
   border turns lime. 400ms in, 400ms out; the border alone is 500ms.

   THE REST STATE HERE CONTRADICTS THE DESIGN SHEET, and the payload wins.
   `.button-02-hover-bg` is `transform: translate(101%)` in the sheet -- off
   to the RIGHT -- while IX2's group 0 puts it at -101%, off to the LEFT, and
   animates to 0. Both are off-screen, so the page looks the same at rest;
   the difference is which side the panel arrives from, and after the first
   hover the payload's value is the one in effect. -101% is therefore what a
   visitor to the published site sees on every hover but the very first. */
[data-hover="project-button"] .button-02-hover-bg {
  transform: translateX(-101%);
  transition: transform 400ms ease;
}
[data-hover="project-button"] .button-text-wrapper {
  transition: transform 400ms ease;
}
[data-hover="project-button"] .button-01-icon, [data-hover="project-button"] .button-01-icon.hover-icon {
  transition: opacity 400ms ease;
}
[data-hover="project-button"] .button-01-icon.hover-icon {
  opacity: 0;
}
[data-hover="project-button"] {
  transition: border-color 500ms ease;
}
[data-hover="project-button"]:hover .button-02-hover-bg {
  transform: translateX(0);
}
[data-hover="project-button"]:hover .button-text-wrapper {
  transform: translateY(-50%);
}
[data-hover="project-button"]:hover .button-01-icon {
  opacity: 0;
}
[data-hover="project-button"]:hover .button-01-icon.hover-icon {
  opacity: 1;
}
[data-hover="project-button"]:hover {
  border-color: var(--color--primary);
}
/* a-15/a-18 -- the home page's "about" panels. A lime dot scales from 1 to
   100, flooding the card, and six pieces of copy invert to white as it
   arrives. In 1000ms, out 1000ms; the text is 500ms in and 1000ms out, which
   is why the two are stated separately. Desktop and tablet only -- both
   events carry `mediaQueries: ["main", "medium"]`. */
@media screen and (min-width: 768px) {
  [data-hover="about-box"] .hover-dot {
    transform: scale(1);
    transition: transform 1000ms ease;
  }

  [data-hover="about-box"] * {
    transition: color 1000ms ease;
  }

  [data-hover="about-box"]:hover .hover-dot {
    transform: scale(100);
  }

  [data-hover="about-box"]:hover .text-dark,
  [data-hover="about-box"]:hover .statistics-number-wrap,
  [data-hover="about-box"]:hover .paragraph-two,
  [data-hover="about-box"]:hover h1,
  [data-hover="about-box"]:hover h2,
  [data-hover="about-box"]:hover h3,
  [data-hover="about-box"]:hover [class*="heading-scale-"] {
    color: var(--color--light);
    transition-duration: 500ms;
  }
}
/* a-26/a-27 -- a service card. The photo scales to 1.1, the title turns
   lime, the body turns off-white and the round "view" button fades in.
   Desktop and tablet only. */
@media screen and (min-width: 768px) {
  [data-hover="service-card"] .fit-cover {
    transition: transform 500ms ease;
  }

  [data-hover="service-card"] .text-light,
  [data-hover="service-card"] .text-grey-02 {
    transition: color 500ms ease;
  }

  [data-hover="service-card"] .hover-button-wrap {
    transition: opacity 500ms ease;
  }

  [data-hover="service-card"]:hover .fit-cover {
    transform: scale(1.1);
  }

  [data-hover="service-card"]:hover .text-light {
    color: var(--color--primary);
  }

  [data-hover="service-card"]:hover .text-grey-02 {
    color: var(--color--site-bg);
  }

  [data-hover="service-card"]:hover .hover-button-wrap {
    opacity: 1;
  }
}
/* a-31/a-32 -- a blog or works card: the photograph alone, to 1.1. The
   scaling element has no `overflow: hidden` of its own; its wrapper does,
   which is why the picture grows inside its frame rather than over it. */
[data-hover="media-zoom"] .fit-cover {
  transition: transform 500ms ease;
}
[data-hover="media-zoom"]:hover .fit-cover {
  transform: scale(1.1);
}
/* a-35 -- the "why choose us" strip, SIBLINGS-scoped and the only hover in
   the payload that is desktop-only (`mediaQueries: ["main"]`). Hovering one
   panel takes it to 40% and pushes the other two to 20% and 25%; 700ms
   `ease`. There is no "out" list -- the widths simply return when the
   pointer leaves, which is what a transition does anyway. */
@media screen and (min-width: 992px) {
  .choose-us-box-list-40,
  .choose-us-box-list-20 {
    transition: width 700ms ease;
  }

  .choose-us-bottom:has([data-hover="choose-panel"]:hover)
    .choose-us-box-list-20 {
    width: 20%;
  }

  [data-hover="choose-panel"]:hover {
    width: 40%;
  }
}
/* a-36/a-37 -- a social chip whose two icons cross-fade. `.icon-02` is
   `opacity: 0` in the design sheet already, so only the swap is here. */
[data-hover="social-icon"] .icon-01, [data-hover="social-icon"] .icon-02 {
  transition: opacity 500ms ease;
}
[data-hover="social-icon"]:hover .icon-01 {
  opacity: 0;
}
[data-hover="social-icon"]:hover .icon-02 {
  opacity: 1;
}
/* a-4/a-5 -- the social link, stacked twice inside a 44px square with
   `overflow: hidden`, rolling -100% so the second copy arrives as the first
   leaves. */
[data-hover="social-roll"] .social-link {
  transition: transform 500ms ease;
}
[data-hover="social-roll"]:hover .social-link {
  transform: translateY(-100%);
}
/* a-6/a-7 ("Footer Info Link") and a-54/a-55 ("Button Hover") have no rules
   here. Their target classes -- `.footer-info-link` and `.button` -- are in
   no page of this export, so a rule keyed on either would never run;
   build_ix2_map.SKIP records why for both. */
/* a-62/a-63 -- a service row. The underline grows from 0 to its natural
   width (`widthUnit: AUTO`, which is 100% of the row) and the label darkens
   from grey to black. In 300ms, out 300ms. */
[data-hover="service-row"] .service-border {
  width: 0;
  transition: width 300ms ease;
}
[data-hover="service-row"] {
  transition: color 500ms ease;
  color: var(--color--grey-dark);
}
[data-hover="service-row"]:hover .service-border {
  width: 100%;
}
[data-hover="service-row"]:hover {
  color: var(--color--dark);
}
/* a-64/a-65 -- a team portrait, to 1.2, 500ms `outQuad`. */
[data-hover="team-card"] .team-member-image {
  transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-hover="team-card"]:hover .team-member-image {
  transform: scale(1.2);
}
/* a-10/a-11's second half lives in section 3, because the chevron and the
   panel are one gesture with the dropdown's own open state. */
@media (prefers-reduced-motion: reduce) {
  [data-hover] *,
  [data-hover] {
    transition-duration: 0.01ms !important;
  }
}
/* --------------------------------------------------------------- 7. scrubs
   The nine SCROLLING_IN_VIEW events. Each is a `continuousParameterGroups`
   entry whose keyframes are percentages of the section's passage through the
   viewport, not of a duration -- so each is written here as a real
   `@keyframes` block whose percentages ARE the payload's, and main.js
   supplies the position as `--scrub`, a number from 0 to 1.

   The animation is one second long, paused, and offset by a negative delay:
   `animation-delay: calc(var(--scrub) * -1s)` on a paused 1s animation
   selects the frame at that fraction. That is what keeps every distance and
   every easing in CSS rather than in JavaScript.

   Values that appear at only one end of the payload's range are held at both
   ends here (`0%, 50%` rather than `50%`), because Webflow holds the first
   and last keyframe outside the range and a bare keyframe would instead
   interpolate from the element's computed style. */
[data-scrub] .process-list-wrap, [data-scrub] .know-top-linner, [data-scrub] .collection-item, [data-scrub] .about-sub-heading-wrap, [data-scrub] .about-image-wrap, [data-scrub] .awadrs-right-shadow, [data-scrub] .craft-image-wrap, [data-scrub] .craft-text-wrap, [data-scrub] .email-image-wrap, [data-scrub] .expertise-right-inner, [data-scrub] .expertise-name, [data-scrub] .review-card-wrap {
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: calc(var(--scrub, 0) * -1s);
}
/* a-19 "Steps Scroll" -- the two process cards shrink to 0.9 as they pass. */
[data-scrub="steps"] .process-list-wrap._01 {
  animation-name: scrub-steps-01;
}
[data-scrub="steps"] .process-list-wrap._02 {
  animation-name: scrub-steps-02;
}
@keyframes scrub-steps-01 {
  0%, 50% { transform: scale(1); }
  58%, 100% { transform: scale(0.9); }
}
@keyframes scrub-steps-02 {
  0%, 64% { transform: scale(1); }
  70%, 100% { transform: scale(0.9); }
}
/* a-20 "Need To Know Scroll" -- the gradient veil slides down out of the
   way. Desktop only, and the veil is `display: none` below 992px anyway. */
[data-scrub="know"] .know-top-linner {
  animation-name: scrub-know;
}
@keyframes scrub-know {
  0%, 56% { transform: translateY(0); }
  95%, 100% { transform: translateY(90%); }
}
/* a-29 "Project Section Animation" -- the works rail slides sideways. -252%
   of each card's OWN width, which is the payload's number; the cards are all
   `max-width: 840px` with the same padding, so they travel together. */
[data-scrub="projects"] .collection-item {
  animation-name: scrub-projects;
}
@keyframes scrub-projects {
  0%, 22% { transform: translateX(0); }
  80%, 100% { transform: translateX(-252%); }
}
/* a-30 "About Hero Scroll" -- the sub-heading rises 290px while the photo
   grows from 40% x 30vh to full bleed. Desktop only. */
[data-scrub="about-hero"] .about-sub-heading-wrap {
  animation-name: scrub-about-heading;
}
[data-scrub="about-hero"] .about-image-wrap {
  animation-name: scrub-about-image;
}
@keyframes scrub-about-heading {
  0%, 30% { transform: translateY(0); }
  50%, 100% { transform: translateY(-290px); }
}
@keyframes scrub-about-image {
  0%, 40% { width: 40%; height: 30vh; }
  68%, 100% { width: 100%; height: 100vh; }
}
/* a-51 "Awards Scroll" -- the dark gradient over the awards column slides
   down as the column passes. */
[data-scrub="awards"] .awadrs-right-shadow {
  animation-name: scrub-awards;
}
@keyframes scrub-awards {
  0% { transform: translateY(0); }
  100% { transform: translateY(90%); }
}
/* a-60 "Craft Section Scroll" -- the photo grows from 0.8 to 1 while two
   lines of type cross in opposite directions. */
[data-scrub="craft"] .craft-image-wrap {
  animation-name: scrub-craft-image;
}
[data-scrub="craft"] .craft-text-wrap._01 {
  animation-name: scrub-craft-01;
}
[data-scrub="craft"] .craft-text-wrap._02 {
  animation-name: scrub-craft-02;
}
@keyframes scrub-craft-image {
  0% { transform: scale(0.8); }
  75%, 100% { transform: scale(1); }
}
@keyframes scrub-craft-01 {
  0% { transform: translateX(-59%); }
  75%, 100% { transform: translateX(100%); }
}
@keyframes scrub-craft-02 {
  0% { transform: translateX(0); }
  75%, 100% { transform: translateX(-100%); }
}
/* a-61 "Email Section Scroll" -- two small pictures drift past each other. */
[data-scrub="email"] .email-image-wrap._01 {
  animation-name: scrub-email-01;
}
[data-scrub="email"] .email-image-wrap._02 {
  animation-name: scrub-email-02;
}
@keyframes scrub-email-01 {
  0% { transform: translateY(100px); }
  100% { transform: translateY(-100px); }
}
@keyframes scrub-email-02 {
  0% { transform: translateY(-100px); }
  100% { transform: translateY(100px); }
}
/* a-66 "Expertise Section Scroll" -- five panels slide past one at a time
   while the matching name in the list darkens and the others go grey. The
   colour keyframes are the payload's five overlapping pairs, transcribed one
   name at a time. Desktop only. */
[data-scrub="expertise"] .expertise-right-inner {
  animation-name: scrub-expertise-panels;
}
[data-scrub="expertise"] .expertise-name.one { animation-name: scrub-name-one; }
[data-scrub="expertise"] .expertise-name.two { animation-name: scrub-name-two; }
[data-scrub="expertise"] .expertise-name.three { animation-name: scrub-name-three; }
[data-scrub="expertise"] .expertise-name.four { animation-name: scrub-name-four; }
[data-scrub="expertise"] .expertise-name.five { animation-name: scrub-name-five; }
@keyframes scrub-expertise-panels {
  0%, 20% { transform: translateX(0); }
  30%, 35% { transform: translateX(-100%); }
  45%, 50% { transform: translateX(-200%); }
  60%, 65% { transform: translateX(-300%); }
  75%, 100% { transform: translateX(-400%); }
}
@keyframes scrub-name-one {
  0%, 20% { color: var(--color--dark); }
  30%, 100% { color: var(--color--grey-dark); }
}
@keyframes scrub-name-two {
  0%, 20% { color: var(--color--grey-dark); }
  30%, 35% { color: var(--color--dark); }
  45%, 100% { color: var(--color--grey-dark); }
}
@keyframes scrub-name-three {
  0%, 30% { color: var(--color--grey-dark); }
  45%, 50% { color: var(--color--dark); }
  60%, 100% { color: var(--color--grey-dark); }
}
@keyframes scrub-name-four {
  0%, 50% { color: var(--color--grey-dark); }
  60%, 65% { color: var(--color--dark); }
  75%, 100% { color: var(--color--grey-dark); }
}
@keyframes scrub-name-five {
  0%, 65% { color: var(--color--grey-dark); }
  75%, 100% { color: var(--color--dark); }
}
/* a-67 "Review Scroll" -- the review cards stack. The first stays put, the
   second travels one card-width, and the last three travel two. Desktop
   only; below 992px the cards are a normal column. */
[data-scrub="reviews"] .review-card-wrap.one {
  animation-name: none;
}
[data-scrub="reviews"] .review-card-wrap.two {
  animation-name: scrub-review-two;
}
[data-scrub="reviews"] .review-card-wrap.three, [data-scrub="reviews"] .review-card-wrap.four, [data-scrub="reviews"] .review-card-wrap.five {
  animation-name: scrub-review-rest;
}
@keyframes scrub-review-two {
  0%, 25% { transform: translateX(0); }
  40%, 100% { transform: translateX(-100%); }
}
@keyframes scrub-review-rest {
  0%, 25% { transform: translateX(0); }
  40% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(-200%); }
}
/* A scrub authored for one breakpoint must not run at another. Five of the
   nine carry `mediaQueries: ["main"]`; main.js does not measure them outside
   it, and this makes sure a stale `--scrub` from a resize cannot either. */
@media screen and (max-width: 991px) {
  [data-scrub-mq="main"] * {
    animation-name: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-scrub] * {
    animation-name: none;
  }
}
/* ------------------------------------- 8. counters, un-blur, the drawn rule
   All three are SCROLL_INTO_VIEW, so main.js plays them from the same
   observer as the reveals.

   a-17, the statistics counters: `.statistics-number-box.upper` drops in
   from +400% and `.lower` rises from -400%, 1500ms `easeInOut`. The window
   is 88px tall with `overflow: hidden` and each digit fills it, so 400% is
   four digits of travel and the reel lands on a digit rather than between
   two. The rest state is gated on `.js` for the same reason the reveals are:
   without scripting the numbers must simply be there. */
:where(.js) [data-counter] .statistics-number-box.upper {
  transform: translateY(400%);
}
:where(.js) [data-counter] .statistics-number-box.lower {
  transform: translateY(-400%);
}
[data-counter].is-counted .statistics-number-box.upper, [data-counter].is-counted .statistics-number-box.lower {
  animation: counter-land 1500ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}
@keyframes counter-land {
  to { transform: translateY(0); }
}
/* a-45 "Image Blur" -- six frosted tiles over a photograph, fading OUT one
   after another so the picture comes clear. This is the one reveal in the
   payload that runs from opacity 1 to 0, which is why it is not a `.reveal`:
   its rest state is visible and its end state is invisible.

   The stagger is the payload's own and is not evenly spaced -- `_01` and
   `_06` start together, then `_05`, `_04`, `_03`, `_02` at 100ms apart --
   so the tiles clear from both ends towards the middle. */
[data-unblur] .works-grid-item {
  transition: opacity 800ms cubic-bezier(1, 0, 0, 1);
}
[data-unblur].is-unblurred .works-grid-item {
  opacity: 0;
}
[data-unblur].is-unblurred .works-grid-item._01 {
  transition-duration: 500ms;
}
[data-unblur].is-unblurred .works-grid-item._05 { transition-delay: 100ms; }
[data-unblur].is-unblurred .works-grid-item._04 { transition-delay: 200ms; }
[data-unblur].is-unblurred .works-grid-item._03 { transition-delay: 300ms; }
[data-unblur].is-unblurred .works-grid-item._02 { transition-delay: 400ms; }
/* The action list "a", on the style guide: a rule drawn from 0 to full
   width, 900ms `ease` after 300ms. */
:where(.js) [data-draw] .vertical-line {
  width: 0;
}
[data-draw].is-drawn .vertical-line {
  animation: draw-line 900ms ease 300ms both;
}
@keyframes draw-line {
  from { width: 0; }
  to { width: 100%; }
}
/* --------------------------------------------------------- 9. the two loops
   Neither has a trigger worth the name: both events carry `loop: true`, so
   they run from load to unload. That makes them plain CSS animations with no
   JavaScript at all.

   a-14, the client-logo strip: `.logo-outer` slides -100% of its own width
   over 20s and snaps back. The markup holds the row TWICE, so the snap lands
   on an identical frame and the strip reads as continuous.

   a-50, the about photograph: scale 1 -> 0.9 -> 1 over 2500ms each way,
   after a 5s pause. `useFirstGroupAsInitialState` is FALSE on this one, so
   all three of its groups are real keyframes rather than a rest state. */
[data-marquee="20s"] .logo-outer {
  animation: marquee-20s 20s linear infinite;
}
@keyframes marquee-20s {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
[data-breathe="slow"] {
  animation: breathe 10s ease infinite;
}
@keyframes breathe {
  0%, 50% { transform: scale(1); }
  75% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  [data-marquee] .logo-outer, [data-breathe] {
    animation: none;
  }
}
/* ------------------------------------------------------- 10. the cursor puck
   a-28, MOUSE_MOVE. The round "view project" puck tracks the pointer from
   -80% to +80% of its own size on both axes. main.js writes the two numbers;
   this holds the centring and the transition that smooths them. */
[data-cursor] .hover-button-wrap {
  transform: translate(var(--puck-x, 0%), var(--puck-y, 0%));
  transition: transform 500ms ease, opacity 500ms ease;
}
/* ----------------------------------------------- 11. the modal and the bar
   a-59 shows the modal thirty seconds after its section arrives
   (`delay: 30000` on group 1) and a-56 hides it. The design sheet already
   gives `.modal-wrapper` its `display: none` and its blurred backdrop, so
   only the open state is here.

   The cookie bar's own rule is `display: none` in the DESIGN SHEET, with no
   media query anywhere that turns it on -- so the bar never appears, on the
   published site either, and the only interaction attached to it is the one
   that closes it. That is left exactly as the source has it rather than
   "fixed": showing a bar the design hides would be a change to what the
   template looks like, not a conversion of it. The dismissal is wired all
   the same, so a buyer who sets `display: flex` gets a working control and a
   remembered answer. */
.modal-wrapper.is-open {
  display: flex;
}
.modal-close {
  position: absolute;
  z-index: 3;
}
.cookies-block {
  transition: opacity 400ms ease, transform 400ms ease;
}
.cookies-block.is-dismissed {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}
/* ------------------------------------------------------- 12. the cart drawer
   Webflow's Ecommerce ran the drawer, the basket and the three checkout
   pages against its own order API. The markup and every one of the design's
   `.w-commerce-*` rules are kept -- build_css renames them rather than
   dropping them, because that family is where the drawer, the add-to-cart
   form and the checkout get all of their layout -- and main.js keeps the
   basket in localStorage instead.

   transform.py strips the inline `display: none` the runtime wrote on the
   drawer, the cart form and the three error blocks, because an inline style
   beats every class and the drawer could otherwise never open. Their closed
   states are stated here as rules instead. */
.cart-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgb(0 0 0 / 0.4);
}
.cart-modal.is-open {
  display: flex;
  justify-content: flex-end;
}
.cart-form {
  display: none;
}
.cart-form.is-filled {
  display: block;
}
.cart-empty.is-hidden {
  display: none;
}
.cart-error, .checkout-error {
  display: none;
}
.cart-error.is-shown, .checkout-error.is-shown {
  display: block;
}
/* The demo forms. Webflow POSTed to its own endpoint and swapped the success
   block in itself; there is no endpoint, so main.js answers in the page with
   the export's own message and these two start hidden. */
.form-success[hidden], .form-error[hidden] {
  display: none;
}