/* TitanPipe - consolidated stylesheet (hand-cleaned Webflow export).
   1 reset  2 base framework (load-bearing rules, renamed .wf-)  3 TitanPipe design
   4 components (vanilla replacements for the Webflow runtime / IX2 / IX3).
   Fonts: assets/fonts/fonts.css (Inter Tight, self-hosted). */

/* ======================================================================
   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 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button, input, optgroup, select, textarea {
  color: inherit;
  
  font: inherit;
  
  margin: 0;
  
}
button {
  overflow: visible;
}
button, select {
  text-transform: none;
}
button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  
  cursor: pointer;
  
}
button[disabled], html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type='checkbox'], input[type='radio'] {
  box-sizing: border-box;
  
  padding: 0;
  
}
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
input[type='search'] {
  -webkit-appearance: none;
  
}
input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  
  padding: 0;
  
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td, th {
  padding: 0;
}
/* ======================================================================
   2. Base framework (runtime-only rules dropped; the rest kept as .wf-)
   ====================================================================== */
[class^="w-icon-"], [class*=" w-icon-"] {
  
  font-family: 'webflow-icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
.inline-block {
  max-width: 100%;
  display: inline-block;
}
.wf-button {
  display: inline-block;
  padding: 9px 15px;
  background-color: #3898EC;
  color: white;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
input.wf-button {
  -webkit-appearance: button;
}
html[data-w-dynpage] [data-w-cloak] {
  color: transparent !important;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin-bottom: 10px;
}
h1 {
  font-size: 38px;
  line-height: 44px;
  margin-top: 20px;
}
h2 {
  font-size: 32px;
  line-height: 36px;
  margin-top: 20px;
}
h3 {
  font-size: 24px;
  line-height: 30px;
  margin-top: 20px;
}
h4 {
  font-size: 18px;
  line-height: 24px;
  margin-top: 10px;
}
h5 {
  font-size: 14px;
  line-height: 20px;
  margin-top: 10px;
}
h6 {
  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;
}
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, .wf-select {
  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, .wf-select::placeholder {
  color: #999;
}
.wf-input:focus, .wf-select:focus {
  border-color: #3898EC;
  outline: 0;
}
.wf-input[disabled], .wf-select[disabled], .wf-input[readonly], .wf-select[readonly], fieldset[disabled] .wf-input, fieldset[disabled] .wf-select {
  cursor: not-allowed;
}
.wf-input[readonly], .wf-select[readonly] {
  background-color: #eeeeee;
}
textarea.wf-input, textarea.wf-select {
  height: auto;
}
.wf-select {
  background-color: #f3f3f3;
}
.wf-select[multiple] {
  height: auto;
}
.wf-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}
.wf-container:before, .wf-container:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.wf-container:after {
  clear: both;
}
@media screen and (max-width: 991px) {
.wf-container {
    max-width: 728px;
  }
}
@media screen and (max-width: 479px) {
.wf-container {
    max-width: none;
  }
}
.richtext:before, .richtext:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.richtext:after {
  clear: both;
}
.richtext[contenteditable="true"]:before, .richtext[contenteditable="true"]:after {
  white-space: initial;
}
.richtext ol, .richtext ul {
  overflow: hidden;
}
.richtext .richtext-figure-selected.richtext-figure-type-video div:after, .richtext .richtext-figure-selected[data-rt-type="video"] div:after {
  outline: 2px solid #2895f7;
}
.richtext .richtext-figure-selected.richtext-figure-type-image div, .richtext .richtext-figure-selected[data-rt-type="image"] div {
  outline: 2px solid #2895f7;
}
.richtext figure.richtext-figure-type-video > div:after, .richtext figure[data-rt-type="video"] > div:after {
  content: '';
  position: absolute;
  display: none;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.richtext figure {
  position: relative;
  max-width: 60%;
}
.richtext figure > div:before {
  cursor: default!important;
}
.richtext figure img {
  width: 100%;
}
.richtext figure figcaption.richtext-figcaption-placeholder {
  opacity: 0.6;
}
.richtext figure div {
  
  font-size: 0px;
  color: transparent;
}
.richtext figure.richtext-figure-type-image, .richtext figure[data-rt-type="image"] {
  display: table;
}
.richtext figure.richtext-figure-type-image > div, .richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}
.richtext figure.richtext-figure-type-image > figcaption, .richtext figure[data-rt-type="image"] > figcaption {
  display: table-caption;
  caption-side: bottom;
}
.richtext figure.richtext-figure-type-video, .richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}
.richtext figure.richtext-figure-type-video iframe, .richtext figure[data-rt-type="video"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.richtext figure.richtext-figure-type-video > div, .richtext figure[data-rt-type="video"] > div {
  width: 100%;
}
.richtext figure.richtext-align-center {
  margin-right: auto;
  margin-left: auto;
  clear: both;
}
.richtext figure.richtext-align-center.richtext-figure-type-image > div, .richtext figure.richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}
.richtext figure.richtext-align-normal {
  clear: both;
}
.richtext figure.richtext-align-fullwidth {
  width: 100%;
  max-width: 100%;
  text-align: center;
  clear: both;
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.richtext figure.richtext-align-fullwidth > div {
  display: inline-block;
  
  padding-bottom: inherit;
}
.richtext figure.richtext-align-fullwidth > figcaption {
  display: block;
}
.richtext figure.richtext-align-floatleft {
  float: left;
  margin-right: 15px;
  clear: none;
}
.richtext figure.richtext-align-floatright {
  float: right;
  margin-left: 15px;
  clear: none;
}
@keyframes spin {
0% {
    transform: rotate(0deg);
  }
100% {
    transform: rotate(360deg);
  }
}
/* ======================================================================
   3. TitanPipe design
   ====================================================================== */
:root {
  --font-family--primary-font: "Inter Tight", sans-serif;
  --color--text-grey-secondary: #616161;
  --_typography---paragraph--font-size: 16px;
  --_typography---paragraph--line-height: var(--line-height--line-height-xl);
  --_typography---paragraph--font-weight: var(--font-weight--regular);
  --_typography---paragraph--letter-spacing: -.02em;
  --_spacing---margin-padding--space-none: 0px;
  --color--dark: #2a2a28;
  --_typography---heading-h1--font-size: 48px;
  --_typography---heading-h1--line-height: var(--line-height--line-height-l);
  --_typography---heading-h1--font-weight: var(--font-weight--regular);
  --_typography---heading-h1--letter-spacing: -.02em;
  --_typography---heading-h2--font-size: 40px;
  --_typography---heading-h2--line-height: var(--line-height--line-height-l);
  --_typography---heading-h2--font-weight: var(--font-weight--regular);
  --_typography---heading-h2--letter-spacing: -.02em;
  --_typography---heading-h3--font-size: 32px;
  --_typography---heading-h3--line-height: var(--line-height--line-height-l);
  --_typography---heading-h3--font-weight: var(--font-weight--regular);
  --_typography---heading-h3--letter-spacing: -.02em;
  --_typography---heading-h4--font-size: 28px;
  --_typography---heading-h4--line-height: var(--line-height--line-height-l);
  --_typography---heading-h4--font-weight: var(--font-weight--regular);
  --_typography---heading-h4--letter-spacing: -.02em;
  --_typography---heading-h5--font-size: 24px;
  --_typography---heading-h5--line-height: var(--line-height--line-height-l);
  --_typography---heading-h5--font-weight: var(--font-weight--regular);
  --_typography---heading-h5--letter-spacing: -.02em;
  --_typography---heading-h6--font-size: 20px;
  --_typography---heading-h6--line-height: var(--line-height--line-height-xl);
  --_typography---heading-h6--font-weight: var(--font-weight--regular);
  --_typography---heading-h6--letter-spacing: -.02em;
  --line-height--line-height-xl: 135%;
  --font-weight--regular: 400;
  --color--background-light: #fafafa;
  --_spacing---margin-padding--space-xl-plus: 60px;
  --_spacing---margin-padding--utlity-hero: 202px;
  --_spacing---margin-padding--full-padding: 120px;
  --_spacing---margin-padding--banner-space: 222px;
  --color--black: #000;
  --_spacing---margin-padding--space-4xl: 80px;
  --color--background-dark: #0e0e0e;
  --color--white: white;
  --_spacing---margin-padding--space-3xl: 70px;
  --_spacing---margin-padding--space-m: 24px;
  --_spacing---margin-padding--section-padding: 160px;
  --_spacing---margin-padding--space-sm-plus: 20px;
  --_typography---paragraph-large--large-title: 64px;
  --_spacing---margin-padding--space-l: 40px;
  --_typography---paragraph-large--font-size-small: 14px;
  --color--primary-color: #ffd035;
  --color--line-gray: #e5e5e5;
  --_typography---paragraph-large--font-size: 18px;
  --color--text-grey-primary: #7c7c7c;
  --color--background-gray: #0e0e0e1a;
  --font-weight--medium: 500;
  --color--transparent: transparent;
  --_spacing---radius--radius-s: 10px;
  --font-weight--semi-bold: 600;
  --_spacing---margin-padding--container: 15px;
  --_spacing---margin-padding--space-xl: 50px;
  --_spacing---radius--radius-xs: 16px;
  --_spacing---margin-padding--space-m-plus: 30px;
  --_spacing---margin-padding--space-s: 16px;
  --_spacing---radius--radius-m: 4px;
  --_spacing---margin-padding--space-2xl: 64px;
  --_spacing---radius--rs-20: 20px;
  --_spacing---radius--circle-round: 50%;
  --_spacing---full-size: 100%;
  --_spacing---margin-padding--space-ml: 32px;
  --color--cool-gray: #a6a6a6;
  --color--very-light-gray: #ececec;
  --_typography---paragraph-large--exta-large-title: 80px;
  --_typography---paragraph-large--line-height: var(--line-height--line-height-x);
  --font-weight--bold: 700;
  --_spacing---margin-padding--space-xs: 6px;
  --_spacing---radius--rs-50: 50px;
  --_spacing---margin-padding--space-sm: 18px;
  --_spacing---margin-padding--space-l-plus: 48px;
  --_spacing---radius--rs-8: 8px;
  --_typography---paragraph-large--marquee-text: 420px;
  --line-height--line-height-s: 100%;
  --color--lite-gray: #f2f2f2;
  --_typography---paragraph-large--letter-spacing: -.02em;
  --_spacing---gap--gap-xxs: 0px;
  --_spacing---gap--gap-xs: 0px;
  --_spacing---gap--gap-s: 0px;
  --line-height--line-height-m: 110%;
  --line-height--line-height-l: 120%;
  --line-height--line-height-x: 130%;
  --line-height--line-height-2xl: 150%;
  --font-weight--extra-bold: 800;
  --_typography---paragraph-large--font-weight: var(--font-weight--regular);
}
.wf-commerce-commercecartwrapper {
  display: inline-block;
  position: relative;
}
.wf-commerce-commercecartopenlink {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-commercecartopenlinkcount {
  color: #3898ec;
  text-align: center;
  background-color: #fff;
  border-radius: 9px;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  display: inline-block;
}
.wf-commerce-commercecartcontainerwrapper {
  z-index: 1001;
  background-color: #000c;
  position: fixed;
  inset: 0;
}
.wf-commerce-commercecartcontainerwrapper--cartType-modal {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.wf-commerce-commercecartcontainer {
  background-color: #fff;
  flex-direction: column;
  width: 100%;
  min-width: 320px;
  max-width: 480px;
  display: flex;
  overflow: auto;
  box-shadow: 0 5px 25px #00000040;
}
.wf-commerce-commercecartheader {
  border-bottom: 1px solid #e6e6e6;
  flex: none;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  display: flex;
  position: relative;
}
.wf-commerce-commercecartheading {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.wf-commerce-commercecartcloselink {
  width: 16px;
  height: 16px;
}
.wf-commerce-commercecartformwrapper {
  flex-direction: column;
  flex: 1;
  display: flex;
}
.wf-commerce-commercecartform {
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  display: flex;
}
.wf-commerce-commercecartlist {
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding: 12px 24px;
  overflow: auto;
}
.wf-commerce-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-commerceaddtocartform {
  margin: 0 0 15px;
}
.wf-commerce-commerceaddtocartbutton {
  color: #fff;
  cursor: pointer;
  appearance: none;
  background-color: #3898ec;
  border-width: 0;
  border-radius: 0;
  align-items: center;
  padding: 9px 15px;
  text-decoration: none;
  display: flex;
}
.wf-commerce-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-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-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-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-commerceorderconfirmationcontainer {
  background-color: #f5f5f5;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
.wf-commerce-commercecheckoutshippingsummarywrapper {
  margin-bottom: 20px;
}
.wf-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
@media screen and (max-width: 991px) {
.wf-layout-blockcontainer {
    max-width: 728px;
  }
}
@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;
  }
.wf-layout-blockcontainer {
    max-width: none;
  }
}
@media screen and (max-width: 479px) {
.wf-commerce-commercecartcontainerwrapper--cartType-modal {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
.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 {
  font-family: var(--font-family--primary-font);
  color: var(--color--text-grey-secondary);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  letter-spacing: var(--_typography---paragraph--letter-spacing);
  --_typography---paragraph--font-size: 16px;
  --_typography---paragraph--line-height: var(--line-height--line-height-xl);
  --_typography---paragraph--font-weight: var(--font-weight--regular);
  --_typography---paragraph--letter-spacing: -.02em;
  --_typography---heading-h1--font-size: 48px;
  --_typography---heading-h1--line-height: var(--line-height--line-height-l);
  --_typography---heading-h1--font-weight: var(--font-weight--regular);
  --_typography---heading-h1--letter-spacing: -.02em;
  --_typography---heading-h2--font-size: 40px;
  --_typography---heading-h2--line-height: var(--line-height--line-height-l);
  --_typography---heading-h2--font-weight: var(--font-weight--regular);
  --_typography---heading-h2--letter-spacing: -.02em;
  --_typography---heading-h3--font-size: 32px;
  --_typography---heading-h3--line-height: var(--line-height--line-height-l);
  --_typography---heading-h3--font-weight: var(--font-weight--regular);
  --_typography---heading-h3--letter-spacing: -.02em;
  --_typography---heading-h4--font-size: 28px;
  --_typography---heading-h4--line-height: var(--line-height--line-height-l);
  --_typography---heading-h4--font-weight: var(--font-weight--regular);
  --_typography---heading-h4--letter-spacing: -.02em;
  --_typography---heading-h5--font-size: 24px;
  --_typography---heading-h5--line-height: var(--line-height--line-height-l);
  --_typography---heading-h5--font-weight: var(--font-weight--regular);
  --_typography---heading-h5--letter-spacing: -.02em;
  --_typography---heading-h6--font-size: 20px;
  --_typography---heading-h6--line-height: var(--line-height--line-height-xl);
  --_typography---heading-h6--font-weight: var(--font-weight--regular);
  --_typography---heading-h6--letter-spacing: -.02em;
  --_typography---paragraph-large--large-title: 64px;
  --_typography---paragraph-large--font-size-small: 14px;
  --_typography---paragraph-large--font-size: 18px;
  --_typography---paragraph-large--exta-large-title: 80px;
  --_typography---paragraph-large--line-height: var(--line-height--line-height-x);
  --_typography---paragraph-large--marquee-text: 420px;
  --_typography---paragraph-large--letter-spacing: -.02em;
  --_typography---paragraph-large--font-weight: var(--font-weight--regular);
  --_spacing---margin-padding--space-none: 0px;
  --_spacing---margin-padding--space-xl-plus: 60px;
  --_spacing---margin-padding--utlity-hero: 202px;
  --_spacing---margin-padding--full-padding: 120px;
  --_spacing---margin-padding--banner-space: 222px;
  --_spacing---margin-padding--space-4xl: 80px;
  --_spacing---margin-padding--space-3xl: 70px;
  --_spacing---margin-padding--space-m: 24px;
  --_spacing---margin-padding--section-padding: 160px;
  --_spacing---margin-padding--space-sm-plus: 20px;
  --_spacing---margin-padding--space-l: 40px;
  --_spacing---radius--radius-s: 10px;
  --_spacing---margin-padding--container: 15px;
  --_spacing---margin-padding--space-xl: 50px;
  --_spacing---radius--radius-xs: 16px;
  --_spacing---margin-padding--space-m-plus: 30px;
  --_spacing---margin-padding--space-s: 16px;
  --_spacing---radius--radius-m: 4px;
  --_spacing---margin-padding--space-2xl: 64px;
  --_spacing---radius--rs-20: 20px;
  --_spacing---radius--circle-round: 50%;
  --_spacing---full-size: 100%;
  --_spacing---margin-padding--space-ml: 32px;
  --_spacing---margin-padding--space-xs: 6px;
  --_spacing---radius--rs-50: 50px;
  --_spacing---margin-padding--space-sm: 18px;
  --_spacing---margin-padding--space-l-plus: 48px;
  --_spacing---radius--rs-8: 8px;
  --_spacing---gap--gap-xxs: 0px;
  --_spacing---gap--gap-xs: 0px;
  --_spacing---gap--gap-s: 0px;
}
h1 {
  margin-top: var(--_spacing---margin-padding--space-none);
  margin-bottom: var(--_spacing---margin-padding--space-none);
  color: var(--color--dark);
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  font-weight: var(--_typography---heading-h1--font-weight);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
h2 {
  margin-top: var(--_spacing---margin-padding--space-none);
  margin-bottom: var(--_spacing---margin-padding--space-none);
  color: var(--color--dark);
  font-size: var(--_typography---heading-h2--font-size);
  line-height: var(--_typography---heading-h2--line-height);
  font-weight: var(--_typography---heading-h2--font-weight);
  letter-spacing: var(--_typography---heading-h2--letter-spacing);
}
h3 {
  margin-top: var(--_spacing---margin-padding--space-none);
  margin-bottom: var(--_spacing---margin-padding--space-none);
  color: var(--color--dark);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  font-weight: var(--_typography---heading-h3--font-weight);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
h4 {
  margin-top: var(--_spacing---margin-padding--space-none);
  margin-bottom: var(--_spacing---margin-padding--space-none);
  color: var(--color--dark);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
h5 {
  margin-top: var(--_spacing---margin-padding--space-none);
  margin-bottom: var(--_spacing---margin-padding--space-none);
  color: var(--color--dark);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--_typography---heading-h5--font-weight);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
h6 {
  margin-top: var(--_spacing---margin-padding--space-none);
  margin-bottom: var(--_spacing---margin-padding--space-none);
  color: var(--color--dark);
  font-size: var(--_typography---heading-h6--font-size);
  line-height: var(--_typography---heading-h6--line-height);
  font-weight: var(--_typography---heading-h6--font-weight);
  letter-spacing: var(--_typography---heading-h6--letter-spacing);
}
p {
  margin-bottom: var(--_spacing---margin-padding--space-none);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  letter-spacing: var(--_typography---paragraph--letter-spacing);
}
a {
  color: var(--color--dark);
  line-height: var(--line-height--line-height-xl);
  font-weight: var(--font-weight--regular);
  text-decoration: none;
}
ul {
  margin-top: var(--_spacing---margin-padding--space-none);
  margin-bottom: var(--_spacing---margin-padding--space-none);
  padding-left: 30px;
}
img {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  display: inline-block;
}
label {
  font-weight: var(--font-weight--regular);
  margin-bottom: 5px;
  display: block;
}
blockquote {
  border-left: 5px solid #e2e2e2;
  margin-bottom: 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}
.utility-page-form {
  text-align: center;
  flex-direction: column;
  align-items: stretch;
  display: flex;
}
.page-wrapper.bg-light {
  background-color: var(--color--background-light);
}
.title-box.margin-none {
  margin-bottom: 0;
}
.style-title-box-wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.section {
  padding-top: var(--_spacing---margin-padding--space-xl-plus);
  padding-bottom: var(--_spacing---margin-padding--space-xl-plus);
}
.section.ulility-hero {
  padding-top: var(--_spacing---margin-padding--utlity-hero);
}
.section.full-padding-bottom {
  padding-bottom: var(--_spacing---margin-padding--full-padding);
}
.section.contact {
  padding-top: var(--_spacing---margin-padding--utlity-hero);
  padding-bottom: var(--_spacing---margin-padding--space-none);
  background-color: var(--color--background-light);
}
.section.career-hero {
  padding-top: var(--_spacing---margin-padding--banner-space);
}
.section.gallery {
  padding-top: 14px;
  padding-bottom: var(--_spacing---margin-padding--full-padding);
}
.section.values {
  padding-top: var(--_spacing---margin-padding--full-padding);
  padding-bottom: var(--_spacing---margin-padding--full-padding);
  background-color: var(--color--background-light);
}
.section.benefits {
  padding-top: var(--_spacing---margin-padding--full-padding);
  padding-bottom: var(--_spacing---margin-padding--full-padding);
  background-color: var(--color--black);
  background-image: url('../images/Benefits-Bg.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}
.section.career {
  padding-top: var(--_spacing---margin-padding--full-padding);
  padding-bottom: var(--_spacing---margin-padding--full-padding);
  background-color: var(--color--background-light);
}
.section.career-single {
  padding-top: var(--_spacing---margin-padding--banner-space);
  padding-bottom: var(--_spacing---margin-padding--space-4xl);
  background-color: var(--color--background-dark);
}
.section.career-inner-single {
  padding-bottom: var(--_spacing---margin-padding--full-padding);
}
.section.inner-hero {
  padding-top: var(--_spacing---margin-padding--banner-space);
}
.section.full-padding {
  padding-top: var(--_spacing---margin-padding--full-padding);
  padding-bottom: var(--_spacing---margin-padding--full-padding);
}
.section.full-padding.related-articles {
  background-color: var(--color--background-light);
}
.section.padding-none {
  padding-top: var(--_spacing---margin-padding--space-none);
  padding-bottom: var(--_spacing---margin-padding--space-none);
}
.section.cta {
  padding-top: var(--_spacing---margin-padding--space-4xl);
  padding-bottom: var(--_spacing---margin-padding--full-padding);
  background-color: var(--color--white);
  background-image: url('../images/Cta-Bg.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.section.footer {
  padding-top: var(--_spacing---margin-padding--space-4xl);
  padding-bottom: var(--_spacing---margin-padding--space-none);
  background-color: var(--color--background-dark);
  overflow: hidden;
}
.section.built {
  background-color: var(--color--black);
  background-image: url('../images/choose-bg-image.webp');
  background-position: 50%;
  background-size: cover;
}
.section.serve, .section.team {
  padding-top: var(--_spacing---margin-padding--full-padding);
  padding-bottom: var(--_spacing---margin-padding--full-padding);
  background-color: var(--color--background-light);
}
.section.strengthen {
  background-color: var(--color--black);
  background-image: linear-gradient(#0003, #0003), url('../images/Project-Bg.webp');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-attachment: scroll, scroll;
  padding-top: 235px;
  padding-bottom: 235px;
}
.section.hero-service {
  padding-top: var(--_spacing---margin-padding--full-padding);
  padding-bottom: var(--_spacing---margin-padding--space-none);
  background-color: var(--color--background-light);
}
.section.trast {
  padding-top: var(--_spacing---margin-padding--full-padding);
  padding-bottom: var(--_spacing---margin-padding--space-3xl);
}
.section.say {
  padding-top: var(--_spacing---margin-padding--full-padding);
  padding-bottom: var(--_spacing---margin-padding--full-padding);
  background-color: var(--color--background-light);
}
.section.testimonial {
  padding-top: var(--_spacing---margin-padding--full-padding);
  padding-bottom: var(--_spacing---margin-padding--full-padding);
  background-color: var(--color--white);
}
.section.scroll-block {
  width: 100%;
  height: 620vh;
  padding-top: var(--_spacing---margin-padding--space-none);
  padding-bottom: var(--_spacing---margin-padding--space-none);
  background-color: var(--color--black);
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}
.section.is-roofing {
  padding-top: var(--_spacing---margin-padding--full-padding);
  padding-bottom: var(--_spacing---margin-padding--space-m);
}
.section.stats {
  padding-top: var(--_spacing---margin-padding--section-padding);
  padding-bottom: var(--_spacing---margin-padding--space-4xl);
  background-color: var(--color--white);
  position: relative;
}
.section.is-material {
  padding-top: var(--_spacing---margin-padding--full-padding);
  padding-bottom: var(--_spacing---margin-padding--full-padding);
  overflow: hidden;
}
.section.about-us {
  padding-top: var(--_spacing---margin-padding--full-padding);
  padding-bottom: var(--_spacing---margin-padding--space-none);
}
.section.is-story {
  height: 300vh;
}
.section.pricing-main, .section.pricing-details {
  padding-top: var(--_spacing---margin-padding--space-sm-plus);
  padding-bottom: var(--_spacing---margin-padding--full-padding);
}
.section.is-hero {
  padding-top: var(--_spacing---margin-padding--space-none);
  padding-bottom: var(--_spacing---margin-padding--space-none);
  background-color: var(--color--black);
  background-image: url('../images/Hero-Bg.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.section.is-about-banner, .section.customer-banner {
  padding-top: var(--_spacing---margin-padding--space-none);
  padding-bottom: var(--_spacing---margin-padding--space-none);
  background-color: var(--color--black);
}
.section.is-service-banner {
  padding-top: var(--_spacing---margin-padding--space-none);
  padding-bottom: var(--_spacing---margin-padding--space-none);
}
.section.is-choose, .section.is-solution-banner {
  padding-top: var(--_spacing---margin-padding--space-none);
  padding-bottom: var(--_spacing---margin-padding--space-none);
  background-color: var(--color--black);
}
.animation-content-wrap {
  overflow: hidden;
}
.title-flex {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.style-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.utlitty-inner-title {
  font-size: var(--_typography---paragraph-large--large-title);
  font-weight: var(--font-weight--regular);
  padding-bottom: 4px;
}
.uttlity-title-box {
  max-width: 600px;
}
.uttlity-title-box.is-instruction {
  margin-bottom: 48px;
}
.style-size-box {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.style-single-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}
.style-wrapper {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 25% 60%;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.style-category-box {
  grid-column-gap: var(--_spacing---margin-padding--space-l);
  grid-row-gap: var(--_spacing---margin-padding--space-l);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.style-scale-category-box {
  justify-content: flex-start;
  align-items: center;
}
.font-size {
  color: var(--color--dark);
  font-size: var(--_typography---paragraph-large--font-size-small);
  font-weight: var(--_typography---paragraph--font-weight);
}
.style-category-grid-box {
  grid-column-gap: var(--_spacing---margin-padding--space-l);
  grid-row-gap: var(--_spacing---margin-padding--space-l);
  flex-flow: column;
  display: flex;
}
.style-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-4xl);
  grid-row-gap: var(--_spacing---margin-padding--space-4xl);
  flex-flow: column;
  width: 100%;
  max-width: 60%;
  display: flex;
}
.description.dark {
  color: var(--color--dark);
  flex: none;
}
.description.primary-color {
  background-color: var(--color--dark);
  color: var(--color--primary-color);
  border-radius: 50px;
  padding: 6px 16px;
}
.description.white {
  color: var(--color--white);
}
.description.yollow {
  color: var(--color--primary-color);
}
.typography-button-box {
  background-color: var(--color--background-light);
  justify-content: center;
  align-items: center;
  padding: 50px;
  display: flex;
}
.style-category-box-wrapper {
  grid-column-gap: var(--_spacing---margin-padding--space-l);
  grid-row-gap: var(--_spacing---margin-padding--space-l);
  flex-flow: column;
}
.style-divider {
  background-color: var(--color--line-gray);
  width: 100%;
  height: 1px;
}
.primary-text-regular {
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--_typography---paragraph--font-weight);
}
.primary-text-regular.dark {
  color: var(--color--dark);
}
.color-grid {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.color-single-card {
  justify-content: center;
  align-items: center;
  min-height: 120px;
  display: flex;
}
.color-single-card.white {
  border: 1px solid var(--color--line-gray);
}
.color-single-card.text-gray {
  background-color: var(--color--text-grey-primary);
  color: var(--color--line-gray);
}
.color-single-card.text-dark {
  background-color: var(--color--dark);
  color: var(--color--line-gray);
}
.color-single-card.background-gray {
  background-color: var(--color--background-gray);
  color: var(--color--dark);
}
.color-single-card.linegray {
  background-color: var(--color--line-gray);
  color: var(--color--dark);
}
.color-single-card.background-dark {
  background-color: var(--color--background-dark);
  color: var(--color--white);
}
.color-single-card.background-light {
  border: 1px solid var(--color--line-gray);
  background-color: var(--color--background-light);
  color: var(--color--dark);
}
.color-single-card.primary-color {
  border: 1px solid var(--color--line-gray);
  background-color: var(--color--primary-color);
  color: var(--color--dark);
}
.primary-button-shadow {
  background-color: var(--color--dark);
  border-radius: 4px;
  width: 0%;
  height: 100%;
  position: absolute;
  top: 50%;
  bottom: 50%;
}
.primary-button-shadow.second {
  background-color: var(--color--primary-color);
  border-radius: 4px;
}
.primary-button-link {
  background-color: var(--color--primary-color);
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.primary-button-link.white {
  border: .5px solid var(--color--line-gray);
  background-color: var(--color--white);
}
.primary-button-link.error-button {
  margin-top: var(--_spacing---margin-padding--space-l);
  border: .5px solid var(--color--text-grey-primary);
  background-color: var(--color--white);
}
.primary-button-link.is-hero-form {
  padding-top: 12px;
  padding-bottom: 12px;
}
.primary-button-text-box {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.primary-button-hover-text {
  opacity: 0;
  color: var(--color--white);
  line-height: 150%;
  position: absolute;
}
.primary-button-hover-text.black {
  color: var(--color--dark);
}
.single-button-box {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
}
.primary-button-text {
  color: var(--color--dark);
  font-weight: var(--font-weight--medium);
  text-decoration: none;
}
.primary-button-text.second {
  color: #0e333d;
  text-decoration: none;
}
.primary-button-text.white {
  color: var(--color--white);
}
.secondary-button-link {
  background-color: var(--color--dark);
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.secondary-button-link.pricing {
  width: 100%;
}
.secondary-button-link.nav {
  border: .5px solid var(--color--text-grey-primary);
  background-color: var(--color--transparent);
}
.style-left-box {
  width: 25%;
  position: sticky;
  top: 120px;
}
.style-guide-link {
  width: 100%;
  color: var(--color--dark);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--_typography---heading-h5--font-weight);
  border-right: 1px solid #0000001a;
  padding: 20px;
  transition: all .5s;
}
.style-guide-link[aria-current="page"] {
  background-color: var(--color--background-gray);
  border-right-color: #000;
}
.license-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-4xl);
  grid-row-gap: var(--_spacing---margin-padding--space-4xl);
  flex-flow: column;
  width: 100%;
  max-width: 800px;
  display: flex;
}
.license-left-box {
  width: 320px;
  position: sticky;
  top: 120px;
}
.license-grid {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.license-single-card {
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--background-light);
  border: 1px solid #ffffff29;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 300px;
  padding: 30px 30px 34px;
  display: flex;
  overflow: hidden;
}
.license-image-box {
  width: 100px;
  height: 100px;
  margin-bottom: var(--_spacing---margin-padding--space-3xl);
  justify-content: center;
  align-items: center;
  display: flex;
}
.license-image.phosphor {
  max-width: 75px;
}
.license-link {
  font-weight: var(--font-weight--semi-bold);
}
.license-font-box {
  width: 120px;
  height: 120px;
  margin-bottom: var(--_spacing---margin-padding--space-3xl);
  justify-content: center;
  align-items: center;
  display: flex;
}
.container {
  max-width: 1310px;
  padding-right: var(--_spacing---margin-padding--container);
  padding-left: var(--_spacing---margin-padding--container);
  margin-left: auto;
  margin-right: auto;
}
.container.cta {
  z-index: 99;
  height: 100%;
  position: relative;
}
.changle-log-wrap {
  max-width: 898px;
  padding: var(--_spacing---margin-padding--space-xl) var(--_spacing---margin-padding--space-3xl);
  border-radius: var(--_spacing---radius--radius-xs);
  background-color: var(--color--background-light);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.secondary-text-medium {
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--medium);
}
.secondary-text-medium.dark {
  color: var(--color--dark);
}
.changelog-list {
  opacity: .8;
  color: var(--color--dark);
  line-height: var(--_typography---paragraph--line-height);
}
.changelog-list-title {
  margin-top: var(--_spacing---margin-padding--space-sm-plus);
  opacity: .8;
  color: var(--color--dark);
  font-weight: var(--font-weight--medium);
}
.condition-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-m-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-m-plus);
  flex-flow: column;
  max-width: 990px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.condition-single-card {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.condition-title {
  margin-bottom: var(--_spacing---margin-padding--space-s);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.secondary-text {
  color: var(--color--text-grey-secondary);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph--line-height);
  letter-spacing: var(--_typography---heading-h6--letter-spacing);
}
.secondary-text.dark {
  color: var(--color--dark);
}
.secondary-text.white {
  color: var(--color--white);
}
.secondary-text.light-gray {
  color: var(--color--line-gray);
}
.contact-form-block {
  margin-bottom: var(--_spacing---margin-padding--space-none);
  padding: var(--_spacing---margin-padding--space-m-plus);
  border-radius: var(--_spacing---radius--radius-xs);
  background-color: var(--color--white);
}
.contract-list {
  margin-top: var(--_spacing---margin-padding--space-m-plus);
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}
.contract-list-item {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-flow: column;
  display: flex;
}
.labels {
  color: var(--color--dark);
  font-size: var(--_typography---paragraph-large--font-size);
  margin-bottom: 10px;
}
.field {
  min-height: 54px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: var(--_spacing---margin-padding--space-s);
  border: 1px solid var(--color--line-gray);
  border-radius: var(--_spacing---radius--radius-m);
  background-color: var(--color--white);
  color: var(--color--black);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  margin-bottom: 0;
  transition: all .5s;
}
.field:focus {
  border-color: var(--color--primary-color);
  color: var(--color--dark);
}
.field::placeholder {
  color: var(--color--text-grey-secondary);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
}
.successful-massage {
  padding: var(--_spacing---margin-padding--space-s);
  border-radius: var(--_spacing---radius--radius-m);
  background-color: var(--color--primary-color);
  color: var(--color--dark);
}
.error-message {
  padding: var(--_spacing---margin-padding--space-s);
  border-radius: var(--_spacing---radius--radius-m);
  background-color: var(--color--background-dark);
  color: var(--color--primary-color);
  text-align: center;
}
.container-right-box {
  width: 100%;
  max-width: 847px;
}
.container-left-box {
  width: 100%;
  max-width: 244px;
}
.contact-address-title {
  font-size: var(--_typography---paragraph-large--font-size);
}
.contract-field-box {
  width: 100%;
  margin-bottom: var(--_spacing---margin-padding--space-sm-plus);
}
.send-now-button {
  border-radius: var(--_spacing---radius--radius-m);
  background-color: var(--color--primary-color);
  width: 100%;
  color: var(--color--background-dark);
  font-weight: var(--font-weight--medium);
  padding: 17px 30px;
  transition: all .55s;
}
.send-now-button:hover {
  background-color: var(--color--dark);
  color: var(--color--white);
}
.container-wrap {
  z-index: 99;
  grid-column-gap: 65px;
  grid-row-gap: 65px;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-bottom: -460px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}
.contact-address-link {
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--line-height--line-height-xl);
  font-weight: var(--font-weight--regular);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.contract-field-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  display: flex;
}
.textareea {
  min-height: 167px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: var(--_spacing---margin-padding--space-s);
  border: 1px solid var(--color--line-gray);
  border-radius: var(--_spacing---radius--radius-m);
  background-color: var(--color--white);
  color: var(--color--text-grey-primary);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
  margin-bottom: 0;
  transition: all .5s;
}
.textareea:focus {
  border-color: var(--color--primary-color);
  color: var(--color--dark);
}
.textareea::placeholder {
  color: var(--color--text-grey-primary);
  font-size: var(--_typography---paragraph--font-size);
  line-height: var(--_typography---paragraph--line-height);
  font-weight: var(--_typography---paragraph--font-weight);
}
.career-hero-wrap {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.large-title {
  font-size: var(--_typography---paragraph-large--large-title);
  font-weight: var(--font-weight--regular);
  letter-spacing: var(--_typography---heading-h2--letter-spacing);
}
.large-title.white {
  color: var(--color--white);
}
.career-hero-description-box {
  margin-top: var(--_spacing---margin-padding--space-m);
  margin-bottom: var(--_spacing---margin-padding--space-l);
}
.career-gallery-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 67% 31%;
  grid-auto-columns: 1fr;
  display: grid;
}
.career-gallery-image-box {
  border-radius: var(--_spacing---radius--radius-s);
  overflow: hidden;
}
.gallery-right-box {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}
.career-with-us-wrap {
  margin-top: var(--_spacing---margin-padding--space-xl-plus);
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.career-with-us-left-box {
  padding: 6px var(--_spacing---margin-padding--space-s);
  border: .5px solid var(--color--text-grey-primary);
  border-radius: 50px;
  flex: none;
}
.career-with-us-right-box {
  max-width: 820px;
}
.career-with-us-description {
  color: var(--color--dark);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h6--line-height);
  font-weight: var(--font-weight--regular);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.values-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.values-left-box {
  top: var(--_spacing---margin-padding--full-padding);
  flex: none;
  max-width: 228px;
  position: sticky;
}
.values-right-box {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 820px;
  display: grid;
}
.values-single-card {
  padding: var(--_spacing---margin-padding--space-sm-plus);
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--white);
}
.values-icon-box {
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
}
.values-inner-title {
  margin-top: var(--_spacing---margin-padding--space-xl-plus);
  margin-bottom: var(--_spacing---margin-padding--space-sm-plus);
  color: var(--color--dark);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.values-title {
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  font-weight: var(--_typography---heading-h1--font-weight);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
.benefits-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.benefits-title-box {
  margin-bottom: var(--_spacing---margin-padding--space-2xl);
}
.benefits-title {
  color: var(--color--white);
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  font-weight: var(--_typography---heading-h2--font-weight);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
.benefits-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}
.benefits-single-card {
  padding: var(--_spacing---margin-padding--space-l);
  border-radius: var(--_spacing---radius--rs-20);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background-color: #ffffff1a;
  overflow: hidden;
}
.benefits-icon-box {
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
}
.benefits-text-medium {
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--medium);
}
.benefits-text-medium.white {
  margin-top: var(--_spacing---margin-padding--space-l);
  color: var(--color--white);
  margin-bottom: 8px;
}
.career-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.career-left-box {
  top: var(--_spacing---margin-padding--space-xl-plus);
  flex: none;
  position: sticky;
}
.career-right-box {
  width: 100%;
  max-width: 800px;
}
.career-title {
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  font-weight: var(--_typography---heading-h1--font-weight);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
.career-single-card {
  padding: var(--_spacing---margin-padding--space-m);
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  border-radius: var(--_spacing---radius--rs-20);
  background-color: var(--color--white);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.career-inner-title {
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.career-information-box {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 4px;
  display: flex;
}
.career-time-box {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.career-inner-dot {
  border-radius: var(--_spacing---radius--circle-round);
  background-color: var(--color--text-grey-primary);
  width: 8px;
  height: 8px;
}
.career-button-box {
  flex: none;
}
.career-collection-list {
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  flex-flow: column;
  display: flex;
}
.career-single-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  justify-content: space-between;
  align-items: center;
  max-width: 846px;
  display: flex;
}
.career-single-icon-box {
  border: 1px solid var(--color--white);
  border-radius: var(--_spacing---radius--radius-m);
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  display: flex;
}
.career-single-icon {
  max-width: 20px;
  max-height: 20px;
}
.career-single-logo-box {
  width: var(--_spacing---full-size);
  justify-content: center;
  align-items: center;
  max-width: 416px;
  display: flex;
}
.career-single-wrapper {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.career-single-left-box {
  width: 100%;
  max-width: 700px;
}
.career-single-right-box {
  width: 100%;
  max-width: 540px;
}
.career-single-title {
  font-size: var(--_typography---heading-h2--font-size);
  line-height: var(--_typography---heading-h2--line-height);
  letter-spacing: var(--_typography---heading-h2--letter-spacing);
}
.career-single-information-wrap {
  margin-top: var(--_spacing---margin-padding--space-s);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.career-single-information-box {
  padding: 6px var(--_spacing---margin-padding--space-s);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: var(--color--background-light);
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.career-single-information-icon-box {
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
}
.career-overview-title {
  margin-top: var(--_spacing---margin-padding--space-l);
  margin-bottom: var(--_spacing---margin-padding--space-s);
}
.career-post ul {
  margin-top: var(--_spacing---margin-padding--space-s);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}
.career-post h5 {
  margin-top: var(--_spacing---margin-padding--space-m-plus);
}
.career-post p {
  margin-top: var(--_spacing---margin-padding--space-s);
}
.application-form-block {
  margin-bottom: var(--_spacing---margin-padding--space-none);
  padding: var(--_spacing---margin-padding--space-m-plus);
  border-radius: var(--_spacing---radius--radius-xs);
  background-color: var(--color--background-light);
}
.upload-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 45px;
  display: flex;
}
.career-single-upload-box {
  padding: 6px var(--_spacing---margin-padding--space-s);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: var(--color--background-gray);
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.inner-hero-wrap.center {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.inner-hero-wrap.center.blog {
  max-width: 600px;
}
.inner-hero-wrap.center.pricing {
  max-width: 700px;
}
.inner-hero-wrap.center.pricing-main {
  max-width: 600px;
}
.inner-hero-wrap.center.solution {
  max-width: 876px;
}
.inner-hero-wrap.center.cta {
  max-width: 683px;
}
.inner-hero-wrap.center.about {
  max-width: 876px;
}
.inner-hero-wrap.center.is-home {
  text-align: left;
  justify-content: center;
  align-items: flex-start;
  max-width: 876px;
  margin-left: 0;
  padding-left: 16px;
}
.inner-hero-wrap.center.is-customer {
  max-width: 876px;
}
.inner-hero-title-box {
  margin-bottom: var(--_spacing---margin-padding--space-m-plus);
}
.inner-hero-title-box.solution {
  margin-bottom: var(--_spacing---margin-padding--space-m);
}
.inner-hero-title-box.cta {
  margin-bottom: var(--_spacing---margin-padding--space-s);
}
.inner-hero-title-box.hero {
  max-width: 659px;
}
.inner-hero-description-box.solution {
  max-width: 572px;
}
.inner-hero-description-box.is-customer, .inner-hero-description-box.is-service-details, .inner-hero-description-box.is-solution {
  max-width: 572px;
  margin-bottom: var(--_spacing---margin-padding--space-l);
}
.blog-tabs {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.blog-tabs-menu {
  margin-bottom: var(--_spacing---margin-padding--space-ml);
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  justify-content: center;
  align-items: center;
  display: flex;
}
.blog-tabs-content {
  width: 100%;
}
.blog-tab-link {
  padding: 10px var(--_spacing---margin-padding--space-m);
  border-radius: var(--_spacing---radius--radius-m);
  background-color: var(--color--line-gray);
  transition: all .5s;
}
.blog-tab-link[aria-current="page"] {
  background-color: var(--color--primary-color);
}
.blog-single-card {
  overflow: hidden;
}
.blog-card-image-box {
  border-radius: var(--_spacing---radius--radius-s);
  overflow: hidden;
}
.blog-card-image {
  transition: all 1s;
}
.blog-card-image:hover {
  transform: scale(1.05);
}
.blog-card-content-box {
  margin-top: var(--_spacing---margin-padding--space-sm-plus);
}
.blog-category-wrap {
  margin-bottom: var(--_spacing---margin-padding--space-s);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-category-box {
  background-color: var(--color--line-gray);
  color: var(--color--dark);
  border-radius: 6px;
  padding: 6px 8px;
  display: inline-block;
}
.blog-card-name {
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.blog-card-descritption-box {
  margin-top: 12px;
}
.blog-card-information-box {
  margin-top: var(--_spacing---margin-padding--space-sm-plus);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-card-date-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-card-dot {
  border-radius: var(--_spacing---radius--circle-round);
  background-color: var(--color--dark);
  width: 6px;
  height: 6px;
}
.blog-collection-list {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-l);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-singe-hero-wrap {
  grid-template-rows: auto;
  grid-template-columns: 61% 39%;
  grid-auto-columns: 1fr;
  display: grid;
}
.blog-singe-hero-left-box {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  padding-right: 56px;
  display: flex;
}
.blog-singe-hero-right-box {
  border-radius: var(--_spacing---radius--radius-s);
  overflow: hidden;
}
.blog-single-information-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.blog-single-information-box {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-author-image-box {
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  display: flex;
}
.description-medium {
  font-weight: var(--font-weight--medium);
}
.description-medium.dark {
  color: var(--color--dark);
}
.blog-single-information {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-flow: column;
  display: flex;
}
.image-wrap {
  position: relative;
  overflow: hidden;
}
.view-image.is-blog-details {
  min-height: 300px;
}
.view-image-overlay {
  background-color: #010101;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 100% 0% 0%;
}
.view-image-overlay.charcoal-gray {
  background-color: #151515;
}
.blog-post-wrapper {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.blog-single-left-box {
  max-width: 732px;
}
.blog-single-right-inner {
  padding: var(--_spacing---margin-padding--space-sm-plus);
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--dark);
}
.blog-introduction {
  margin-bottom: var(--_spacing---margin-padding--space-s);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.blog-post h4 {
  margin-top: var(--_spacing---margin-padding--space-m-plus);
}
.blog-post p {
  margin-top: var(--_spacing---margin-padding--space-s);
}
.blog-post ul {
  margin-top: var(--_spacing---margin-padding--space-s);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: var(--color--dark);
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--medium);
  flex-flow: column;
  display: flex;
}
.blog-post blockquote {
  margin-top: var(--_spacing---margin-padding--space-m-plus);
  margin-bottom: var(--_spacing---margin-padding--space-l);
  border-left-width: 6px;
  border-left-color: var(--color--primary-color);
  color: var(--color--dark);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h4--line-height);
}
.blog-post img {
  margin-bottom: var(--_spacing---margin-padding--space-l);
  border-radius: var(--_spacing---radius--radius-xs);
}
.get-in-touch-title {
  color: var(--color--white);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
  margin-bottom: 10px;
}
.small-text {
  font-size: var(--_typography---paragraph-large--font-size-small);
}
.small-text.gray {
  color: var(--color--text-grey-primary);
}
.small-text.dark {
  color: var(--color--dark);
}
.small-text.is-blog-form {
  color: var(--color--cool-gray);
}
.subscribe-button {
  border-radius: var(--_spacing---radius--radius-m);
  background-color: var(--color--primary-color);
  width: 100%;
  color: var(--color--dark);
  font-weight: var(--font-weight--medium);
  padding: 10px;
}
.touch-field {
  border: 1px solid var(--color--white);
  border-radius: var(--_spacing---radius--radius-m);
  background-color: var(--color--white);
  min-height: 42px;
  color: var(--color--black);
  font-size: var(--_typography---paragraph-large--font-size-small);
}
.touch-field:focus {
  border: 1px solid var(--color--primary-color);
  color: var(--color--dark);
}
.touch-field::placeholder {
  color: var(--color--text-grey-secondary);
}
.socal-icon-hover-image {
  z-index: 2;
  opacity: 0;
  max-width: 10px;
  max-height: 17px;
  position: absolute;
}
.socal-icon-hover-image.x, .socal-icon-hover-image.youtube {
  max-width: 15px;
  max-height: 15px;
}
.socal-icon-image {
  z-index: 2;
  max-width: 10px;
  max-height: 17px;
}
.socal-icon-image.x, .socal-icon-image.youtube {
  max-width: 15px;
  max-height: 15px;
}
.icon-box {
  background-color: var(--color--very-light-gray);
  border-radius: 80px;
  justify-content: center;
  align-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.socal-hover-box {
  z-index: 1;
  background-color: var(--color--primary-color);
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.icon-wrapper {
  margin-top: var(--_spacing---margin-padding--space-sm-plus);
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.blog-single-right-box {
  width: 100%;
  max-width: 296px;
  position: sticky;
  top: 120px;
}
.blog-social-share-box {
  margin-top: var(--_spacing---margin-padding--space-m-plus);
}
.related-articles-title-wrap {
  margin-bottom: var(--_spacing---margin-padding--space-xl-plus);
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.related-articles-title {
  font-size: var(--_typography---heading-h1--font-size);
}
.pricing-card-wrap {
  max-width: 1068px;
  margin-left: auto;
  margin-right: auto;
}
.pricing-card-grid {
  grid-column-gap: var(--_spacing---margin-padding--space-none);
  grid-row-gap: var(--_spacing---margin-padding--space-none);
  border: 1px solid var(--color--line-gray);
  border-radius: var(--_spacing---radius--rs-20);
  background-color: var(--color--background-light);
  grid-template-rows: auto;
  grid-template-columns: 69% 31%;
  grid-auto-columns: 1fr;
  display: grid;
  overflow: hidden;
}
.pricing-left-card {
  padding: var(--_spacing---margin-padding--space-m-plus);
  grid-column-gap: var(--_spacing---margin-padding--space-l);
  grid-row-gap: var(--_spacing---margin-padding--space-l);
  justify-content: space-between;
  display: flex;
}
.pricing-image {
  border-top: 1px solid var(--color--line-gray);
  border-right: 1px solid var(--color--line-gray);
  border-bottom: 1px solid var(--color--line-gray);
}
.pricing-single-card {
  width: 100%;
  max-width: 300px;
  position: relative;
}
.pricing-divider {
  background-color: var(--color--line-gray);
  width: 1px;
  height: 100%;
}
.pricing-feature-box {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 300px;
  display: flex;
}
.pricing-card-title-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.pricing-card-icon-box {
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}
.pricing-card-title {
  color: var(--color--dark);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.pricing-card-description {
  margin-top: 8px;
  margin-bottom: var(--_spacing---margin-padding--space-m);
}
.price-box {
  margin-bottom: var(--_spacing---margin-padding--space-m);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  display: flex;
}
.price-box-text {
  color: var(--color--dark);
  font-weight: var(--font-weight--medium);
  flex: none;
}
.exta-large-title {
  font-size: var(--_typography---paragraph-large--exta-large-title);
  font-weight: var(--font-weight--medium);
}
.pricing-feature-list {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  margin-top: 8px;
  display: flex;
}
.pricing-feature-list-item {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.pricing-feature-icon-box {
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  display: flex;
}
.best-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.pricing-button-box {
  position: absolute;
  inset: auto 0% 0%;
}
.default-state {
  margin-bottom: 0;
}
.add-to-cart-button {
  border-radius: var(--_spacing---radius--radius-m);
  background-color: var(--color--dark);
  width: 100%;
  color: var(--color--white);
  font-weight: var(--font-weight--medium);
  justify-content: center;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
  text-decoration: none;
  transition: all .55s;
}
.add-to-cart-button:hover {
  background-color: var(--color--primary-color);
  color: var(--color--dark);
}
.includes-box {
  margin-top: var(--_spacing---margin-padding--space-xl-plus);
}
.includes-title {
  margin-bottom: var(--_spacing---margin-padding--space-s);
}
.pricing-post h4 {
  margin-top: var(--_spacing---margin-padding--space-m-plus);
}
.pricing-post p {
  margin-top: var(--_spacing---margin-padding--space-s);
  font-size: var(--_typography---paragraph-large--font-size);
}
.pricing-post ul {
  margin-top: var(--_spacing---margin-padding--space-s);
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: var(--color--dark);
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--medium);
  flex-flow: column;
  display: flex;
}
.collection-list {
  grid-column-gap: var(--_spacing---margin-padding--space-m);
  grid-row-gap: var(--_spacing---margin-padding--space-m);
  flex-flow: column;
  display: flex;
}
.hero-sticky {
  z-index: 10;
  padding-right: var(--_spacing---margin-padding--container);
  padding-left: var(--_spacing---margin-padding--container);
  position: relative;
}
.section-hero-full {
  z-index: 1;
  flex-flow: column;
  position: relative;
}
.section-hero-full.is-service {
  background-color: var(--color--black);
}
.hero-bg {
  z-index: 2;
  background-image: url('../images/Solution-Hero.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  inset: 0%;
}
.hero-bg.service {
  background-image: url('../images/Service-Hero.webp');
}
.hero-bg.customer {
  background-image: url('../images/Customer.webp');
}
.hero-bg.about {
  background-image: url('../images/About-Bg.webp');
}
.hero-bg.hero {
  background-image: url('../images/Hero-Bg.webp');
}
.hero-wrap {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.container-full {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.hero-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.hero-title {
  z-index: 0;
  padding-top: var(--_spacing---margin-padding--banner-space);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 284px;
  display: flex;
  position: relative;
}
.hero-title.about {
  padding-bottom: var(--_spacing---margin-padding--space-none);
  grid-column-gap: var(--_spacing---margin-padding--space-none);
  grid-row-gap: var(--_spacing---margin-padding--space-none);
}
.hero-title.customer {
  padding-top: 354px;
  padding-bottom: 152px;
}
.hero-title.home {
  padding-top: var(--_spacing---margin-padding--section-padding);
  padding-bottom: var(--_spacing---margin-padding--space-none);
}
.solutions-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.inner-sub-title-box {
  padding: 6px var(--_spacing---margin-padding--space-s);
  border: .5px solid var(--color--text-grey-primary);
  border-radius: 50px;
  flex: none;
}
.solutions-right-box {
  width: 100%;
  max-width: 800px;
}
.solutions-title-box {
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  font-weight: var(--_typography---heading-h3--font-weight);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
.solutions-list-wrap {
  margin-top: var(--_spacing---margin-padding--space-xl-plus);
  grid-column-gap: var(--_spacing---margin-padding--space-ml);
  grid-row-gap: var(--_spacing---margin-padding--space-ml);
  flex-flow: column;
  display: flex;
}
.solutions-list-item-box {
  grid-column-gap: var(--_spacing---margin-padding--space-xl-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-xl-plus);
  display: flex;
}
.solutions-item-title-box {
  width: 100%;
  max-width: 241px;
}
.solution-divider {
  background-color: var(--color--line-gray);
  width: 100%;
  height: 1px;
}
.cta-wrap {
  padding-top: var(--_spacing---margin-padding--full-padding);
}
.cta-button-box {
  margin-top: 48px;
}
.accordion-icon-in {
  max-width: 24px;
  max-height: 24px;
}
.accordion {
  width: 100%;
  padding-right: var(--_spacing---margin-padding--space-m);
  padding-bottom: 4px;
  padding-left: var(--_spacing---margin-padding--space-m);
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--white);
  flex-flow: column;
  display: flex;
  position: static;
  overflow: hidden;
}
.inner-title-box.faq {
  margin-bottom: var(--_spacing---margin-padding--space-ml);
}
.accordion-description-wrap {
  background-color: #0000;
  width: 100%;
  position: static;
}
.inner-title {
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  font-weight: var(--_typography---heading-h1--font-weight);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
.faq-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 413px;
  display: flex;
}
.accordion-text-wrap {
  max-width: 650px;
  padding-bottom: 16px;
}
.faq-left-box {
  width: 100%;
  max-width: 468px;
}
.accordion-icon-wrapper {
  flex: none;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
  position: relative;
}
.accordion-title-wrap {
  margin-right: var(--_spacing---margin-padding--space-none);
  margin-left: var(--_spacing---margin-padding--space-none);
  padding: 24px var(--_spacing---margin-padding--space-none) 20px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: static;
}
.ans-text {
  font-size: var(--_typography---paragraph-large--font-size);
}
.accordion-title {
  margin-top: var(--_spacing---margin-padding--space-none);
  margin-bottom: var(--_spacing---margin-padding--space-none);
  color: var(--color--dark);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
  white-space: normal;
}
.faq-right-box {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  width: 100%;
  max-width: 738px;
  display: flex;
}
.accordion-icon-out {
  max-width: 24px;
  max-height: 24px;
  position: absolute;
}
.footer-wrap {
  position: relative;
}
.footer-wized-title {
  color: var(--color--text-grey-primary);
  font-size: var(--_typography---paragraph-large--font-size-small);
  margin-bottom: 8px;
}
.subscribe-field {
  border-style: solid;
  border-width: 1px;
  border-color: transparent transparent var(--color--dark);
  min-height: 45px;
  color: var(--color--white);
  font-size: var(--_typography---paragraph-large--font-size);
  background-color: #0000;
  margin-bottom: 0;
  padding: 10px 0;
}
.subscribe-field:focus {
  border-color: transparent transparent var(--color--primary-color);
  color: var(--color--white);
  background-color: #0000;
}
.subscribe-field::placeholder {
  color: var(--color--white);
}
.submit-button-two {
  background-color: var(--color--transparent);
  text-transform: uppercase;
  background-image: url('../images/Footer-right.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  width: 20px;
  height: 20px;
  margin-right: 0;
  padding: 0;
  transition: all .55s;
  position: absolute;
  inset: 15px 0% 0% auto;
}
.submit-button-two:hover {
  background-image: url('../images/Footer-right.svg');
  background-repeat: no-repeat;
  background-size: auto;
}
.form-block {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 8px;
}
.footer-inner-flex {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  flex-flow: row;
  justify-content: space-between;
  display: flex;
}
.footer-bottom-box {
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.footer-wedget-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-m);
  grid-row-gap: var(--_spacing---margin-padding--space-m);
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 628px;
  display: grid;
}
.subscribe-field-wrap {
  border-radius: 40px;
  position: relative;
}
.footer-link-blog {
  margin-bottom: var(--_spacing---margin-padding--space-4xl);
}
.footer-left-box {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border-bottom: 1px solid #101010;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  max-width: 412px;
  display: flex;
}
.footer-logo {
  max-width: 242px;
  max-height: 45px;
}
.footer-logo-box {
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 226px;
}
.footer-flex-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-4xl);
  grid-row-gap: var(--_spacing---margin-padding--space-4xl);
  flex-flow: column;
  display: flex;
}
.footer-right-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  display: flex;
}
.footer-single-widget {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.footer-bottom-content {
  color: var(--color--white);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--font-weight--medium);
}
.footer-menu {
  color: var(--color--white);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  transition: all .4s;
}
.footer-menu:hover {
  color: #fff;
  transform: translate(10px);
}
.footer-social-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.footer-social-menu {
  color: var(--color--white);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  transition: all .4s;
}
.footer-social-menu:hover {
  color: #fff;
}
.footer-divider {
  width: 100%;
  height: 1px;
  margin-bottom: var(--_spacing---margin-padding--space-m);
  background-color: var(--color--dark);
}
.footer-roofing-box {
  margin-top: var(--_spacing---margin-padding--space-4xl);
  margin-bottom: -123px;
  overflow: hidden;
}
.nav-menu-content {
  grid-column-gap: 47px;
  grid-row-gap: 47px;
  justify-content: flex-start;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
}
.apple-pay {
  border-radius: var(--_spacing---radius--radius-m);
}
.nav-all-menu-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: space-between;
  width: 100%;
  display: flex;
}
.nav-inner-flex-wrap {
  width: 100%;
}
.cart-container {
  background-color: var(--color--background-dark);
  color: #fff;
  border-radius: 16px;
}
.nav-close-ccon {
  opacity: 0;
  width: 24px;
  position: absolute;
}
.close-button {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: flex;
}
.navbar {
  background-color: #0000;
  padding-top: 20px;
  padding-bottom: 20px;
  position: absolute;
  inset: 0% 0% auto;
}
.medium-description {
  font-weight: 500;
}
.medium-description.white {
  color: #fff;
}
.navbar-content {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.cart-quantity-2 {
  display: none;
}
.dropdown-toggle-text-block {
  color: var(--color--dark);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--font-weight--medium);
}
.dropdown-toggle-text-block.white {
  color: var(--color--white);
}
.nav-hamburger-button {
  z-index: 201;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  transition: background-color .3s;
  display: flex;
}
.nav-menu-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  display: flex;
}
.navbar-right-content {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.nav-button {
  z-index: 1;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  text-decoration: none;
  position: relative;
}
.primary-button-text-wrap-2 {
  z-index: 1;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.your-cart {
  color: #fff;
}
.nav-dropdown-left-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.nav-button-hover-text {
  color: #191919;
  line-height: 140%;
  position: absolute;
}
.nav-right-btn-wrap {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  display: flex;
}
.nav-menu {
  color: var(--color--text-grey-primary);
  font-weight: var(--font-weight--medium);
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  transition: all .5s;
  overflow: hidden;
}
.nav-menu:hover {
  color: var(--color--dark);
  transform: translate(8px);
}
.nav-menu[aria-current="page"] {
  color: var(--color--dark);
}
.dropdown-colum-wrapper {
  background-color: #0000;
  width: 511px;
  margin-left: -170px;
  padding-top: 20px;
  overflow: hidden;
  transform: translate(-50%);
}
.drapdown-toggle {
  padding: var(--_spacing---margin-padding--space-none);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: flex-start;
  align-items: center;
  transition: all .3s;
  display: flex;
}
.nav-button-content {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.checkout-button {
  border-radius: var(--_spacing---radius--radius-m);
  background-color: var(--color--primary-color);
  color: var(--color--dark);
  transition: all .55s;
}
.checkout-button:hover {
  color: #000;
  background-color: #fff;
}
.menu-button {
  padding: 0;
}
.nav-link-wrapper {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.nav-link-wrapper.second {
  max-width: 215px;
  margin-right: 0;
  padding-right: 0;
}
.nav-link-wrapper._3rd {
  max-width: 150px;
  margin-right: 0;
  padding-right: 0;
}
.nav-link-wrapper.full-with {
  max-width: 100%;
}
.remove {
  font-weight: var(--font-weight--bold);
}
.nav-button-text {
  color: #191919;
  font-weight: 450;
  line-height: 140%;
}
.primary-button-wrapper-two.mobile {
  display: none;
}
.primary-button-wrapper-two.desktop {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.mobile-nav-wrap {
  padding: 30px 16px 16px;
  display: none;
}
.menu-button-wrap {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}
.error-state {
  border-radius: var(--_spacing---radius--radius-m);
  color: var(--color--white);
  text-align: center;
  background-color: red;
}
.remove-button {
  color: #fff;
}
.desktop {
  display: block;
}
.nav-hamburger-icon {
  opacity: 1;
  width: 24px;
  display: block;
  position: absolute;
}
.dropdown-main {
  background-color: var(--color--white);
  border-radius: 8px;
  margin-top: 8px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 80px #0a071912;
}
.dropdown-main.dark {
  box-shadow: none;
  background-color: #f5f5f5;
}
.mobile-nav-title-box {
  width: 100%;
}
.auto-container {
  max-width: 1310px;
  padding-right: var(--_spacing---margin-padding--container);
  padding-left: var(--_spacing---margin-padding--container);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.cart-quantity {
  background-color: var(--color--background-dark);
  min-width: 14px;
  height: 14px;
  color: var(--color--white);
  justify-content: center;
  align-items: center;
  padding-left: 0;
  padding-right: 0;
  font-size: 10px;
  font-weight: 400;
  line-height: 100%;
  display: flex;
  position: absolute;
  top: -10%;
  right: -50%;
}
.cart-quantity.white {
  color: #040404;
  background-color: #fff;
}
.nav-link {
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--font-weight--medium);
  padding: 0;
  text-decoration: none;
  transition: all .5s;
}
.nav-link[aria-current="page"] {
  color: var(--color--dark);
}
.nav-link.white {
  color: var(--color--white);
}
.nav-link.white:hover, .nav-link.white[aria-current="page"] {
  color: var(--color--primary-color);
}
.cart-button {
  background-color: #0000;
  padding: 0;
  position: relative;
}
.nav-dropdown-left-wrap-2 {
  grid-column-gap: 0px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: start stretch;
  display: grid;
}
.subtotal {
  font-size: 20px;
  font-weight: 550;
}
.navbar-logo-link {
  justify-content: flex-start;
  align-items: center;
  max-width: 114px;
  padding-left: 0;
  display: flex;
}
.works-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.works-single-card-wrap {
  width: var(--_spacing---full-size);
  max-width: 518px;
  min-height: 413px;
  padding: var(--_spacing---margin-padding--space-ml);
  border: 1px solid var(--color--line-gray);
  border-radius: var(--_spacing---radius--rs-20);
  background-color: var(--color--white);
  flex-flow: column;
  flex: none;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  position: relative;
  overflow: hidden;
}
.step-card-box {
  z-index: 1;
  padding: 6px var(--_spacing---margin-padding--space-s);
  background-color: var(--color--dark);
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: relative;
}
.stap {
  color: var(--color--white);
}
.step-content-wrap {
  z-index: 1;
  max-width: 219px;
  position: relative;
}
.step-card-title {
  margin-bottom: 12px;
}
.works-overly-box {
  height: 0%;
  position: absolute;
  inset: 0%;
}
.works-title-box {
  max-width: 385px;
  margin-right: auto;
  margin-bottom: var(--_spacing---margin-padding--space-2xl);
  text-align: center;
  margin-left: auto;
}
.works-title {
  font-family: var(--font-family--primary-font);
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  font-weight: var(--_typography---heading-h1--font-weight);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
.expertise-wrap {
  margin-top: var(--_spacing---margin-padding--space-xl-plus);
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  justify-content: space-between;
  display: flex;
}
.expertise-left-box {
  width: 100%;
  max-width: 460px;
  padding: var(--_spacing---margin-padding--space-m-plus);
  background-color: var(--color--primary-color);
  border-radius: 8px;
  overflow: hidden;
}
.counter-train-two {
  flex-flow: column-reverse;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.hero-counter-single-two {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.home-whole-counter {
  justify-content: flex-end;
  height: 80px;
  display: flex;
  overflow: hidden;
}
.home-whole-counter.regular-title {
  height: 48px;
}
.heading-three {
  color: var(--color--dark);
  font-size: var(--_typography---paragraph-large--exta-large-title);
  line-height: 80px;
  font-weight: var(--font-weight--medium);
}
.heading-three.regular-title, .heading-three.medium-title {
  font-size: var(--_typography---heading-h1--font-size);
  line-height: 48px;
}
.heading-three.large-title {
  font-size: var(--_typography---paragraph-large--large-title);
  line-height: 64px;
  font-weight: var(--_typography---heading-h2--font-weight);
}
.counter-train {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.laboratory-counter-wrapper {
  justify-content: flex-start;
  display: flex;
}
.laboratory-counter-wrapper.two {
  margin-bottom: var(--_spacing---margin-padding--space-2xl);
}
.laboratory-counter-wrapper.margin-bottom {
  margin-bottom: var(--_spacing---margin-padding--space-sm-plus);
}
.laboratory-counter-wrapper.about-bottom {
  margin-bottom: var(--_spacing---margin-padding--space-4xl);
}
.counter-marque {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  overflow: hidden;
}
.counter-marque-two {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.counter-title {
  color: var(--color--dark);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--_typography---heading-h5--font-weight);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
  margin-bottom: 8px;
}
.expertise-right-box {
  width: 100%;
  max-width: 800%;
  padding: var(--_spacing---margin-padding--space-l) 38px var(--_spacing---margin-padding--space-l) var(--_spacing---margin-padding--space-l);
  background-color: var(--color--dark);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.expertise-quation-box-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  max-width: 506px;
  display: flex;
}
.expertise-quation-left-box {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
}
.expertise-quation-right-box {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
  display: flex;
}
.quation-title {
  margin-bottom: var(--_spacing---margin-padding--space-l);
  color: var(--color--white);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--_typography---heading-h5--font-weight);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.quation-author-box {
  margin-top: 4px;
}
.quthor-author-box {
  color: var(--color--white);
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--medium);
}
.quthor-image-box {
  position: absolute;
  inset: 0% 38px 0% auto;
}
.discuss-box-wrap {
  z-index: 99;
  border-radius: 20px 20px 50px 50px;
  width: 100%;
  max-width: 446px;
  margin-top: -200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}
.content-cta-wrap {
  left: var(--_spacing---margin-padding--container);
  top: auto;
  right: var(--_spacing---margin-padding--space-m);
  bottom: var(--_spacing---margin-padding--container);
  position: absolute;
}
.content-cta {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: var(--color--white);
  border-radius: 100px;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  padding: 8px;
  display: flex;
  position: relative;
}
.avatar-info {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.avatar-image {
  z-index: 3;
  flex: none;
  width: 52px;
  height: 52px;
  position: relative;
}
.avatar-icon-wrap {
  border-radius: var(--_spacing---radius--circle-round);
  background-color: var(--color--dark);
  flex: none;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  display: flex;
}
.call {
  width: 24px;
  height: 24px;
}
.content-info {
  text-align: left;
  flex-flow: column;
  flex: none;
  display: flex;
}
.discuss-logo {
  max-width: 155px;
  max-height: 74px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  inset: 90px 0% auto;
}
.choose-hv2-content {
  min-height: 800px;
  position: relative;
  overflow: hidden;
}
.choose-img-wrapper {
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}
.our-services-img {
  position: absolute;
  inset: 0%;
}
.our-services-img._02, .our-services-img._03, .our-services-img._04 {
  opacity: 0;
}
.choosecard-wrapper {
  z-index: 2;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: auto auto 0% 0%;
}
.choose-grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: end center;
  width: 100%;
  height: 100%;
  display: grid;
}
.choose-card {
  width: 100%;
  height: 350px;
  padding-right: var(--_spacing---margin-padding--space-s);
  padding-bottom: var(--_spacing---margin-padding--space-m-plus);
  padding-left: var(--_spacing---margin-padding--space-s);
  background-color: #0e0e0e1a;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  position: relative;
}
.choose-card-single {
  z-index: 2;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  width: 100%;
  max-width: 208px;
  display: flex;
  position: relative;
}
.choose-icon-box {
  width: 80px;
  min-width: 80px;
  height: 80px;
  min-height: 80px;
}
.choose-card-title {
  color: var(--color--white);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h6--line-height);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.choose-text {
  color: var(--color--cool-gray);
  font-weight: var(--font-weight--medium);
}
.choose-card-title-wrapper {
  grid-column-gap: 52px;
  grid-row-gap: 52px;
  flex-flow: column;
  display: flex;
}
.choose-card-active-shape {
  z-index: 1;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  background-color: #1e1e1e1a;
  width: 100%;
  min-height: 350px;
  position: absolute;
  inset: auto auto 0% 0%;
}
.choose-card-active-shape.two, .choose-card-active-shape.three, .choose-card-active-shape.four {
  opacity: 0;
}
.full-width {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.choose-title-box {
  z-index: 4;
  padding: var(--_spacing---margin-padding--space-xs) var(--_spacing---margin-padding--space-s);
  border: 1px solid var(--color--white);
  border-radius: var(--_spacing---radius--rs-50);
  position: absolute;
  inset: 80px auto auto 80px;
}
.choose-name-text {
  color: var(--color--white);
}
.built-inner-box {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.built-left-box {
  top: var(--_spacing---margin-padding--full-padding);
  width: 100%;
  max-width: 510px;
  position: sticky;
}
.built-right-box {
  width: 100%;
  max-width: 460px;
}
.built-title {
  color: var(--color--white);
  font-size: var(--_typography---heading-h1--font-size);
  font-weight: var(--_typography---heading-h1--font-weight);
}
.built-list-wrapper {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}
.built-item-wrapper {
  padding: var(--_spacing---margin-padding--space-sm-plus);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-radius: var(--_spacing---radius--rs-20);
  background-color: var(--color--white);
  flex-flow: column;
  display: flex;
}
.built-card-title {
  color: var(--color--dark);
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--medium);
}
.built-card-text {
  font-size: var(--_typography---paragraph-large--font-size-small);
}
.built-card-image-box {
  border-radius: var(--_spacing---radius--radius-s);
  overflow: hidden;
}
.service-title-wrap {
  margin-bottom: var(--_spacing---margin-padding--space-2xl);
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.service-title-box {
  width: 100%;
  max-width: 708px;
}
.service-title {
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
.service-single-card-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  justify-content: space-between;
  display: flex;
}
.service-single-card-right-box {
  grid-column-gap: var(--_spacing---margin-padding--space-l);
  grid-row-gap: var(--_spacing---margin-padding--space-l);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 708px;
  display: grid;
}
.service-signle-card-title {
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
.service-card-list-wrap {
  margin-top: var(--_spacing---margin-padding--space-m);
  margin-bottom: 46px;
}
.service-single-card-list-title {
  color: var(--color--dark);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  font-weight: var(--font-weight--medium);
  margin-bottom: 12px;
}
.service-card-image-box {
  border-radius: var(--_spacing---radius--radius-s);
  overflow: hidden;
}
.service-card-image {
  transition: all 1s;
}
.service-card-image:hover {
  transform: scale(1.05);
}
.service-single-title {
  z-index: 0;
  padding-top: var(--_spacing---margin-padding--banner-space);
  padding-bottom: var(--_spacing---margin-padding--space-xl-plus);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}
.service-single-image-grid {
  grid-column-gap: var(--_spacing---margin-padding--space-m);
  grid-row-gap: var(--_spacing---margin-padding--space-m);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.service-single-image-box {
  border-radius: var(--_spacing---radius--rs-20);
  height: 418px;
  min-height: 418px;
  overflow: hidden;
}
.service-overview-box-wrap {
  margin-top: var(--_spacing---margin-padding--space-xl-plus);
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.service-overview-right-box {
  width: 100%;
  max-width: 800px;
}
.service-overview-title {
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.service-single-title-wrap {
  margin-top: var(--_spacing---margin-padding--space-xl-plus);
  grid-column-gap: var(--_spacing---margin-padding--space-ml);
  grid-row-gap: var(--_spacing---margin-padding--space-ml);
  flex-flow: column;
  display: flex;
}
.service-single-title-bpx-wrap {
  grid-column-gap: 125px;
  grid-row-gap: 125px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.service-single-title-box {
  width: 100%;
  max-width: 180px;
}
.service-single-divider {
  background-color: var(--color--line-gray);
  width: 100%;
  height: 1px;
}
.service-common-image-box {
  margin-top: var(--_spacing---margin-padding--space-xl-plus);
  border-radius: var(--_spacing---radius--rs-20);
  overflow: hidden;
}
.service-choose-box-wrap {
  margin-top: var(--_spacing---margin-padding--space-xl-plus);
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.service-choose-title-box {
  width: 100%;
  max-width: 311px;
}
.service-choose-title {
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  font-weight: var(--_typography---heading-h1--font-weight);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
.service-choose-list-title {
  margin-top: var(--_spacing---margin-padding--space-xl-plus);
  margin-bottom: var(--_spacing---margin-padding--space-sm-plus);
  color: var(--color--dark);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.service-choose-list {
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  flex-flow: column;
  display: flex;
}
.service-choose-list-item {
  color: var(--color--dark);
}
.service-choose-text-medium {
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--medium);
}
.service-choose-text-medium.dark {
  color: var(--color--dark);
  margin-bottom: 3px;
}
.service-details-card-wrap {
  margin-top: var(--_spacing---margin-padding--space-xl-plus);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.service-details-card {
  padding: var(--_spacing---margin-padding--space-sm-plus);
  border: 1px solid var(--color--line-gray);
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--white);
}
.service-details-step-box {
  margin-bottom: var(--_spacing---margin-padding--space-l);
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.step-text-medium {
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--medium);
}
.step-text-medium.dark {
  color: var(--color--dark);
  margin-bottom: 12px;
}
.service-conclusion-box-wrap {
  margin-top: var(--_spacing---margin-padding--space-xl-plus);
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.service-conclusion-title {
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  font-weight: var(--_typography---heading-h1--font-weight);
}
.service-conclusion-right-box {
  width: 100%;
  max-width: 800px;
}
.service-card-flex {
  grid-column-gap: var(--_spacing---margin-padding--space-3xl);
  grid-row-gap: var(--_spacing---margin-padding--space-3xl);
  flex-flow: column;
  display: flex;
}
.service-card-divider {
  background-color: var(--color--line-gray);
  width: 100%;
  height: 1px;
}
.featured-projects-wrap {
  top: var(--_spacing---margin-padding--full-padding);
  justify-content: space-between;
  display: flex;
  position: sticky;
}
.featured-projects-left-box {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 326px;
  display: flex;
}
.featured-projects-single-card {
  width: 100%;
  max-width: 738px;
  padding: var(--_spacing---margin-padding--space-ml) var(--_spacing---margin-padding--space-ml) 56px;
  background-color: var(--color--black);
  background-image: url('../images/Featured-Projects.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 8px;
}
.featured-projects-single-card._2 {
  z-index: 3;
  background-image: url('../images/Feature-Project-2.webp');
  position: absolute;
  inset: 0%;
}
.featured-projects-single-card._3 {
  z-index: 2;
  background-image: url('../images/Feature-Project-3.webp');
  position: absolute;
  inset: 0%;
}
.featured-projects-single-card._1 {
  z-index: 4;
  position: absolute;
  inset: 0%;
}
.featured-projects-single-card._4 {
  z-index: 1;
  background-image: url('../images/Feature-Project-4.webp');
  position: absolute;
  inset: 0%;
}
.featured-projects-title-box {
  margin-bottom: var(--_spacing---margin-padding--space-ml);
}
.featured-projects-title {
  font-size: var(--_typography---heading-h1--font-size);
  font-weight: var(--_typography---heading-h1--font-weight);
}
.feature-project-content-wrap {
  position: relative;
}
.feature-project-single-content-box {
  padding: var(--_spacing---margin-padding--space-s) var(--_spacing---margin-padding--space-sm-plus);
}
.featured-projects-card {
  max-width: 250px;
  padding: var(--_spacing---margin-padding--space-sm-plus);
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--white);
  margin-bottom: 268px;
}
.featured-projects-icon-box {
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin-bottom: 74px;
  display: flex;
}
.feature-project-text-medium {
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--medium);
}
.feature-project-text-medium.dark {
  color: var(--color--dark);
  margin-bottom: 8px;
}
.featured-projects-information-box {
  justify-content: space-between;
  display: flex;
}
.projects-information-single-box {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  width: 100%;
  max-width: 130px;
  display: flex;
}
.projects-information-single-box.v1 {
  max-width: 180px;
}
.project-information {
  color: var(--color--white);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.feature-project-divider {
  background-color: var(--color--line-gray);
  width: 1px;
  position: absolute;
  inset: 0% auto 0% 0%;
  overflow: hidden;
}
.feature-project-divider-in {
  background-color: var(--color--dark);
  width: 1px;
  height: 100%;
}
.featured-projects-stycky {
  height: 450vh;
}
.serve-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.serve-title-box {
  top: var(--_spacing---margin-padding--full-padding);
  flex: none;
  position: sticky;
}
.serve-title {
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  font-weight: var(--_typography---heading-h1--font-weight);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
.serve-grid {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 840px;
  display: grid;
}
.serve-single-card {
  padding: var(--_spacing---margin-padding--space-sm-plus);
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--white);
  overflow: hidden;
}
.serve-card-icon-box {
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
}
.serve-card-title {
  margin-top: var(--_spacing---margin-padding--space-xl-plus);
  margin-bottom: var(--_spacing---margin-padding--space-sm);
  color: var(--color--dark);
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--_typography---heading-h5--font-weight);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.serve-single-image-card {
  border-radius: var(--_spacing---radius--radius-s);
  overflow: hidden;
}
.counter-wrap {
  margin-top: var(--_spacing---margin-padding--space-l);
  grid-column-gap: var(--_spacing---margin-padding--space-m);
  grid-row-gap: var(--_spacing---margin-padding--space-m);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.counter-text-medium {
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--medium);
}
.counter-text-medium.dark {
  color: var(--color--dark);
  margin-bottom: 8px;
}
.counter-single-card {
  padding: var(--_spacing---margin-padding--space-sm-plus);
  border-radius: var(--_spacing---radius--rs-20);
  background-color: var(--color--background-light);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.about-banner-ticker-wrap {
  margin-top: var(--_spacing---margin-padding--space-xl-plus);
  overflow: hidden;
}
.about-banner-ticker {
  display: flex;
}
.about-hero-image-wrap {
  flex-flow: row;
  flex: none;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.about-hero-single-image-box {
  border-radius: 8px;
  width: 350px;
  height: 252px;
  margin-right: 20px;
  transition: all .5s;
  overflow: hidden;
}
.about-hero-single-image-box._2 {
  width: 226px;
  height: 190px;
}
.roofing-ticker {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  display: flex;
}
.roofing-image-wrap {
  flex-flow: row;
  flex: none;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.roofing-single-image-box {
  flex: none;
  margin-right: 10px;
  transition: all .5s;
  overflow: hidden;
}
.about-title-box {
  width: 100%;
  max-width: 926px;
}
.about-title-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.about-counter-wrap {
  grid-row-gap: var(--_spacing---margin-padding--space-m);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  overflow: hidden;
}
.about-single-card {
  padding: var(--_spacing---margin-padding--space-m-plus);
  border-top: 1px solid var(--color--line-gray);
  border-bottom: 1px solid var(--color--line-gray);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.about-single-card.left {
  border-right: 1px solid var(--color--line-gray);
  border-bottom: 1px solid var(--color--line-gray);
  border-left: 1px solid var(--color--line-gray);
  border-bottom-left-radius: 8px;
}
.about-single-card.right {
  border-right: 1px solid var(--color--line-gray);
  border-left: 1px solid var(--color--line-gray);
  border-bottom-right-radius: 8px;
}
.about-single-card.mobile-only {
  border-right: 1px solid var(--color--line-gray);
  border-left: 1px solid var(--color--line-gray);
  border-bottom-right-radius: 8px;
  display: none;
}
.about-single-rrview {
  width: var(--_spacing---full-size);
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 290px;
  display: flex;
  position: sticky;
  top: 40px;
}
.about-review-box-wrap {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.about-review-box {
  justify-content: center;
  align-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  display: flex;
}
.about-review-box._2 {
  margin-left: -5px;
}
.reviews-content-wrap {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 8px;
  display: flex;
}
.star {
  width: 18px;
  height: 18px;
  margin-right: 4px;
}
.team-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.team-title-box {
  margin-bottom: var(--_spacing---margin-padding--space-2xl);
}
.team-title {
  font-size: var(--_typography---heading-h1--font-size);
}
.team-single-card {
  border-radius: var(--_spacing---radius--radius-s);
  position: relative;
  overflow: hidden;
}
.team-overly-box {
  position: relative;
}
.team-social-icon-box-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: auto 0% 12px;
}
.team-social-icon-box {
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
  overflow: hidden;
}
.team-social-icon {
  transition: all .5s;
}
.team-social-icon:hover {
  transform: scale(1.05);
}
.team-overly-box-wrap {
  position: absolute;
  inset: 0%;
  overflow: hidden;
}
.team-single-card-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-m-plus);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}
.team-single-card-name-box {
  margin-top: var(--_spacing---margin-padding--space-sm-plus);
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.strengthen-wrap {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 638px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.strengthen-description-box {
  margin-top: var(--_spacing---margin-padding--space-s);
  margin-bottom: var(--_spacing---margin-padding--space-l-plus);
}
.hero-service-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.hero-service-title-box {
  max-width: 364px;
  margin-bottom: var(--_spacing---margin-padding--space-2xl);
  text-align: center;
}
.hero-service-title {
  font-family: var(--font-family--primary-font);
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  font-weight: var(--_typography---heading-h1--font-weight);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
.hero-service-grid {
  grid-column-gap: var(--_spacing---margin-padding--space-none);
  grid-row-gap: var(--_spacing---margin-padding--space-none);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}
.hero-service-single-card {
  padding: var(--_spacing---margin-padding--space-4xl);
  border-right: 2px solid var(--color--line-gray);
  background-color: var(--color--white);
  overflow: hidden;
}
.hero-service-single-card._4 {
  border-right-style: none;
}
.hero-service-icon-box {
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 100px;
  display: flex;
}
.hero-service-card-title {
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  font-weight: var(--_typography---heading-h5--font-weight);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
  margin-bottom: 12px;
}
.hero-service-card-title._2 {
  max-width: 154px;
}
.slider-number {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.slider-number-text {
  color: #ffffff4d;
  font-size: var(--_typography---heading-h3--font-size);
  flex: none;
}
.slider-number-text-active {
  color: var(--color--white);
}
.slider-left-box {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 381px;
  height: 100%;
  display: flex;
}
.slider-inner-title-box {
  max-width: 278px;
  margin-bottom: var(--_spacing---margin-padding--space-s);
}
.slider-button-box {
  margin-top: var(--_spacing---margin-padding--space-l-plus);
}
.display-none {
  display: none;
}
.materials-left-title-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-ml);
  grid-row-gap: var(--_spacing---margin-padding--space-ml);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}
.materials-title {
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
.hero-roofing-ticker-wrap {
  margin-top: 190px;
  margin-bottom: -50px;
  overflow: hidden;
}
.roofing-wrap {
  z-index: 1;
  position: relative;
  overflow: hidden;
}
.roofing-content-box {
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}
.roofing-content-left-box {
  width: var(--_spacing---full-size);
  flex-flow: column;
  justify-content: space-between;
  max-width: 832px;
  display: flex;
}
.roofing-review-box {
  width: var(--_spacing---full-size);
  text-align: left;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 353px;
  display: flex;
}
.roofing-content {
  max-width: 718px;
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  font-weight: var(--_typography---heading-h1--font-weight);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
.roofing-image-grid {
  margin-top: var(--_spacing---margin-padding--space-l);
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}
.roofing-image-box {
  width: var(--_spacing---full-size);
  border-radius: var(--_spacing---radius--rs-8);
  max-width: 225px;
  overflow: hidden;
}
.roofing-image-box.is-large {
  width: var(--_spacing---full-size);
  max-width: 400px;
}
.hero-review-box-wrap {
  margin-top: var(--_spacing---margin-padding--space-s);
  margin-bottom: var(--_spacing---margin-padding--space-ml);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.our-roofing-left-box {
  grid-column-gap: var(--_spacing---margin-padding--space-m);
  grid-row-gap: var(--_spacing---margin-padding--space-m);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  max-width: 305px;
  display: flex;
  position: absolute;
  inset: 0% auto auto 0%;
}
.roofs-counter-box {
  width: var(--_spacing---full-size);
  max-width: 498px;
  min-height: 374px;
  padding: var(--_spacing---margin-padding--space-m);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  border-radius: var(--_spacing---radius--rs-8);
  background-color: var(--color--primary-color);
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}
.our-roofing {
  font-size: var(--_typography---heading-h1--font-size);
}
.trust-wrap {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.trust-title-wrap {
  margin-right: auto;
  margin-bottom: var(--_spacing---margin-padding--space-xl-plus);
  grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
  grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  justify-content: space-between;
  align-items: flex-start;
  margin-left: auto;
  display: flex;
}
.trust-title-box {
  width: 100%;
  max-width: 888px;
}
.trust-grid {
  grid-column-gap: 10px;
  grid-row-gap: 8px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.trust-single-card {
  border-radius: var(--_spacing---radius--rs-20);
  background-color: var(--color--white);
  justify-content: center;
  align-items: center;
  min-height: 138px;
  padding: 10px;
  display: flex;
  position: relative;
}
.trust-single-card.center {
  background-color: var(--color--primary-color);
}
.trust-single-card.right {
  background-color: var(--color--dark);
}
.trust-image-v1 {
  max-width: 155px;
  max-height: 74px;
}
.trust-image-v1.ab {
  opacity: 0;
  position: absolute;
}
.trust-image-v1._2 {
  max-width: 66px;
  max-height: 40px;
}
.trust-image-v1._3 {
  max-width: 126px;
  max-height: 30px;
}
.trust-image-v1._4 {
  max-width: 72px;
  max-height: 40px;
}
.trust-image-v1._5 {
  max-width: 130px;
  max-height: 47px;
}
.trust-image-v1._6 {
  max-width: 67px;
  max-height: 41px;
}
.trust-image-v1._7 {
  max-width: 100px;
  max-height: 40px;
}
.trust-image-v1._8 {
  max-width: 53px;
  max-height: 40px;
}
.trust-image-v1._9 {
  max-width: 82px;
  max-height: 40px;
}
.trust-image-v1._10 {
  max-width: 84px;
  max-height: 40px;
}
.trust-image-v1._11 {
  max-width: 62px;
  max-height: 40px;
}
.trust-image-v1._12 {
  max-width: 70px;
  max-height: 44px;
}
.trust-image-v1._13 {
  max-width: 60px;
  max-height: 40px;
}
.primary-button-icon {
  z-index: 1;
  position: relative;
}
.join-button-content {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.join-button-icon-box {
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  display: flex;
}
.join-button-hover-text {
  color: var(--color--white);
  font-weight: var(--font-weight--medium);
  position: absolute;
}
.join-button-text {
  z-index: 1;
  color: var(--color--white);
  font-weight: var(--font-weight--medium);
  position: relative;
}
.primary-button-hover-icon {
  position: absolute;
}
.primary-button-icon-wrap, .primary-button-text-wrap {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.join-button {
  z-index: 1;
  flex: none;
  padding: 0;
  position: relative;
}
.trust-whole-counter {
  justify-content: flex-end;
  height: 64px;
  display: flex;
  overflow: hidden;
}
.say-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.say-title-box {
  margin-bottom: var(--_spacing---margin-padding--space-2xl);
  text-align: center;
}
.say-title {
  font-size: var(--_typography---heading-h1--font-size);
  line-height: var(--_typography---heading-h1--line-height);
  font-weight: var(--_typography---heading-h1--font-weight);
  letter-spacing: var(--_typography---heading-h1--letter-spacing);
}
.say-tabs {
  grid-column-gap: var(--_spacing---margin-padding--space-none);
  grid-row-gap: var(--_spacing---margin-padding--space-none);
  border-radius: var(--_spacing---radius--rs-20);
  background-color: var(--color--white);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: end stretch;
  width: 100%;
  overflow: hidden;
}
.say-tabs-menu {
  margin-bottom: var(--_spacing---margin-padding--space-l);
  margin-left: var(--_spacing---margin-padding--space-l);
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
  position: absolute;
  inset: 0% 40px 0% auto;
}
.say-tab-image-box {
  position: static;
}
.say-tab-link {
  border: 2px solid var(--color--transparent);
  border-radius: var(--_spacing---radius--radius-s);
  background-color: var(--color--transparent);
  background-image: url('../images/Say-Tab-Menu-Image-V1.webp');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  min-width: 128px;
  max-width: 128px;
  min-height: 128px;
  max-height: 128px;
  padding: 0;
  overflow: hidden;
}
.say-tab-link[aria-current="page"] {
  border: 2px solid var(--color--primary-color);
  background-image: url('../images/Say-Tab-Menu-Image-Active-V1.webp'), url('../images/Say-Tab-Menu-Image-V1.webp');
  background-position: 50%, 50%;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}
.say-tab-link._2 {
  background-image: url('../images/Say-Tab-Menu-Image-V2.webp');
}
.say-tab-link._2[aria-current="page"] {
  background-image: url('../images/Say-Tab-Menu-Image-Active-V2.webp'), url('../images/Say-Tab-Menu-Image-V2.webp');
  background-position: 50%, 50%;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}
.say-tab-link._3 {
  background-image: url('../images/Say-Tab-Menu-Image-V3.webp');
}
.say-tab-link._3[aria-current="page"] {
  background-image: url('../images/Say-Tab-Menu-Image-Active-V3.webp'), url('../images/Say-Tab-Menu-Image-V3.webp');
  background-position: 50%, 50%;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}
.say-tab-link._4 {
  background-image: url('../images/Say-Tab-Menu-Image-V4.webp');
}
.say-tab-link._4[aria-current="page"] {
  background-image: url('../images/Say-Tab-Menu-Image-Active-V4.webp'), url('../images/Say-Tab-Menu-Image-V4.webp');
  background-position: 50%, 50%;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}
.say-tab-relative-box {
  position: relative;
}
.say-tab-ab-box {
  padding-top: var(--_spacing---margin-padding--space-l);
  padding-right: var(--_spacing---margin-padding--space-l);
  grid-column-gap: var(--_spacing---margin-padding--space-l);
  grid-row-gap: var(--_spacing---margin-padding--space-l);
  flex-flow: column;
  display: flex;
}
.say-quation-icon-box {
  justify-content: center;
  align-items: center;
  max-width: 54px;
  max-height: 46px;
  display: flex;
}
.say-quation {
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
}
.checkout-form {
  padding: var(--_spacing---margin-padding--space-sm-plus);
  background-color: var(--color--white);
}
.check-out-input {
  border-color: var(--color--line-gray);
  border-radius: var(--_spacing---radius--radius-m);
  background-color: var(--color--background-light);
}
.check-out-input:focus, .check-out-input.-wfp-focus {
  border-color: var(--color--primary-color);
}
.order-button {
  margin-bottom: var(--_spacing---margin-padding--space-sm-plus);
  border-radius: var(--_spacing---radius--radius-m);
  background-color: var(--color--primary-color);
  color: var(--color--dark);
  transition: all .5s;
}
.order-button:hover {
  background-color: var(--color--dark);
  color: var(--color--white);
}
.order-right-wrap {
  top: var(--_spacing---margin-padding--full-padding);
}
.block-header {
  padding-right: var(--_spacing---margin-padding--space-sm-plus);
  padding-left: var(--_spacing---margin-padding--space-sm-plus);
  border-color: var(--color--line-gray);
  background-color: var(--color--white);
}
.block-content {
  padding: var(--_spacing---margin-padding--space-sm-plus);
  border-right-color: var(--color--line-gray);
  border-bottom-color: var(--color--line-gray);
  border-left-color: var(--color--line-gray);
  background-color: var(--color--white);
}
.shipping-method {
  border-bottom-color: var(--color--line-gray);
  background-color: var(--color--white);
}
.bold-text {
  color: var(--color--dark);
  font-size: var(--_typography---paragraph-large--font-size);
  font-weight: var(--font-weight--bold);
}
.checkbox {
  margin-top: var(--_spacing---margin-padding--space-none);
}
.checkbox-label {
  margin-bottom: var(--_spacing---margin-padding--space-none);
}
.shipping-method-list {
  border-right-color: var(--color--line-gray);
  border-left-color: var(--color--line-gray);
}
.utility-password-page-content {
  max-width: 572px;
  margin-right: auto;
  margin-bottom: var(--_spacing---margin-padding--space-none);
  padding-right: var(--_spacing---margin-padding--container);
  padding-left: var(--_spacing---margin-padding--container);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  display: flex;
}
.utility-password-page-wrap {
  background-color: var(--color--background-light);
  padding-top: 280px;
  padding-bottom: 252px;
}
.password-flex-box {
  width: 100%;
  max-width: 414px;
  margin-top: var(--_spacing---margin-padding--space-l);
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  flex-flow: column;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.password-title {
  margin-bottom: var(--_spacing---margin-padding--space-s);
  font-size: var(--_typography---paragraph-large--large-title);
  font-weight: var(--font-weight--regular);
  letter-spacing: var(--_typography---heading-h2--letter-spacing);
}
.utility-error-page-wrap {
  background-color: var(--color--background-light);
  justify-content: center;
  align-items: center;
  padding-top: 242px;
  display: flex;
  overflow: hidden;
}
.utility-error-page-content {
  max-width: 739px;
  padding-right: var(--_spacing---margin-padding--container);
  padding-left: var(--_spacing---margin-padding--container);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.error {
  max-width: 709px;
  margin-bottom: -50px;
}
.error-title-box {
  max-width: 438px;
  margin-right: auto;
  margin-bottom: var(--_spacing---margin-padding--space-l);
  margin-left: auto;
}
.error-large-title {
  margin-bottom: var(--_spacing---margin-padding--space-sm-plus);
  font-size: var(--_typography---paragraph-large--large-title);
  font-weight: var(--font-weight--regular);
  letter-spacing: var(--_typography---heading-h2--letter-spacing);
}
.play-pause-button {
  width: 80px;
  height: 80px;
  position: static;
  inset: 0% 0% auto;
}
.background-video {
  border-radius: var(--_spacing---radius--rs-8);
  justify-content: center;
  align-items: center;
  height: 690px;
  display: flex;
  position: relative;
}
.tesimonial-container {
  max-width: 1363px;
  padding-right: var(--_spacing---margin-padding--container);
  padding-left: var(--_spacing---margin-padding--container);
  margin-left: auto;
  margin-right: auto;
}
.testimonials-slider {
  background-color: var(--color--white);
  height: 100%;
}
.skider-mask {
  height: auto;
}
.slider-item {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}
.slider-content-box {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 908px;
  display: flex;
}
.slider-sub-title-box {
  margin-bottom: var(--_spacing---margin-padding--space-l);
  padding: 6px var(--_spacing---margin-padding--space-s);
  border: .5px solid var(--color--text-grey-primary);
  border-radius: 50px;
  flex: none;
}
.slider-author-image-wrap {
  margin-top: var(--_spacing---margin-padding--space-4xl);
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.slider-author-image-box {
  margin-top: var(--_spacing---margin-padding--space-l);
  border-radius: var(--_spacing---radius--radius-s);
  overflow: hidden;
}
.slider-author-image {
  z-index: 9;
  position: relative;
}
.slider-author-active-box {
  max-width: 309.004px;
}
.slider-author-active-image-box {
  border-radius: var(--_spacing---radius--radius-s);
  background-color: #f0f0f0;
  position: relative;
  overflow: hidden;
}
.slider-author-content-box {
  margin-top: var(--_spacing---margin-padding--space-ml);
}
.slider-author-name {
  font-size: var(--_typography---heading-h5--font-size);
  line-height: var(--_typography---heading-h5--line-height);
  letter-spacing: var(--_typography---heading-h5--letter-spacing);
}
.roofing {
  color: var(--color--white);
  font-size: var(--_typography---paragraph-large--marquee-text);
  line-height: var(--line-height--line-height-s);
  letter-spacing: -16.8px;
}
.roofing.is-stats {
  color: var(--color--lite-gray);
}
.linear {
  background-image: linear-gradient(#fafafa 25%, #fafafa00 56%);
  height: 923px;
  position: absolute;
  inset: 0% 0% auto;
}
.exhibition-section {
  width: 100%;
  height: 100vh;
  padding-top: var(--_spacing---margin-padding--space-4xl);
  padding-bottom: var(--_spacing---margin-padding--space-4xl);
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.exhibition-image {
  position: absolute;
}
.exhibition-block {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}
.exhibition-container {
  width: 100%;
  max-width: 1310px;
  height: 100%;
  padding-right: var(--_spacing---margin-padding--container);
  padding-left: var(--_spacing---margin-padding--container);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}
.dot-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-s);
  grid-row-gap: var(--_spacing---margin-padding--space-s);
  flex-flow: column;
  align-items: stretch;
  display: flex;
}
.slider-dot {
  border-radius: var(--_spacing---radius--circle-round);
  background-color: #fff6;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
}
.slider-dot.active {
  background-color: var(--color--white);
}
.contact-image {
  z-index: -9;
}
.contact-relative-box {
  position: relative;
}
.contact-shape-box {
  background-image: linear-gradient(#fafafa 20%, #fafafa00);
  min-height: 460px;
  position: absolute;
  inset: 0% 0% auto;
}
.div-block {
  width: 100%;
  max-width: 738px;
  height: 666px;
  position: relative;
  overflow: hidden;
}
.secondary-button-two-hover-text {
  color: var(--color--dark);
  position: absolute;
}
.primary-button-icon-box {
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 14px;
  min-width: 14px;
  height: 14px;
  min-height: 14px;
  display: flex;
}
.secondary-button-two-text {
  z-index: 1;
  color: var(--color--dark);
  position: relative;
}
.primary-button {
  z-index: 1;
  border: .5px solid var(--color--text-grey-primary);
  border-radius: 4px;
  padding: 13px 24px;
  text-decoration: none;
  position: relative;
}
.primary-button-content {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}
.primary-button-text-wrap-three {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.say-tab-wrap {
  grid-column-gap: var(--_spacing---margin-padding--space-l);
  grid-row-gap: var(--_spacing---margin-padding--space-l);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}
.slider-overly {
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.hero-title-block {
  width: var(--_spacing---full-size);
  border-top: 1px solid #ffffff29;
  border-bottom: 1px solid #ffffff29;
  justify-content: space-between;
  align-items: center;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.hero-form-block-wrap {
  width: var(--_spacing---full-size);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: #9595951f;
  border-radius: 12px;
  max-width: 310px;
  margin-top: -50px;
  margin-bottom: -50px;
  padding: 10px;
}
.hero-form-block {
  background-color: var(--color--white);
  border-radius: 8px;
  margin-bottom: 0;
  padding: 16px;
}
.hero-form-title {
  margin-bottom: var(--_spacing---margin-padding--space-s);
  font-family: var(--font-family--primary-font);
  font-size: var(--_typography---heading-h6--font-size);
  line-height: var(--_typography---heading-h6--line-height);
  font-weight: var(--_typography---heading-h6--font-weight);
  text-align: center;
  letter-spacing: var(--_typography---heading-h6--letter-spacing);
}
.hero-form-input {
  width: var(--_spacing---full-size);
  border: 1px solid var(--color--line-gray);
  background-color: var(--color--transparent);
  height: 34px;
  color: var(--color--black);
  border-radius: 6px;
  margin-bottom: 0;
  padding: 6px 10px 6px 30px;
}
.hero-form-input:focus {
  border-color: var(--color--line-gray);
}
.hero-form-input::placeholder {
  color: var(--color--dark);
}
.hero-input-wrap {
  position: relative;
}
.hero-input-icon-wrap {
  justify-content: center;
  align-items: center;
  padding-left: 10px;
  display: flex;
  position: absolute;
  inset: 0% auto 0% 0%;
}
.hero-input-icon {
  max-width: 14px;
  height: auto;
  display: flex;
}
.hero-input-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;
}
.select-field {
  background-color: var(--color--transparent);
  height: auto;
  color: var(--color--dark);
  border: 1px #000;
  margin-bottom: 0;
  padding: 0;
}
.hero-form-button-wrap {
  flex-flow: column;
  display: flex;
}
.submit-button {
  z-index: 5;
  opacity: 0;
  position: absolute;
  inset: 0%;
}
.hero-line-block {
  pointer-events: none;
  position: absolute;
  inset: 0%;
}
.hero-line-block-inner {
  width: var(--_spacing---full-size);
  height: var(--_spacing---full-size);
  border-left: 1px solid #ffffff29;
  border-right: 1px solid #ffffff29;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}
.stats-content-block {
  z-index: 1;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;
}
.secure-card {
  grid-row-gap: 10px;
  background-color: var(--color--lite-gray);
  background-image: url('../images/Secured-Background.webp');
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: auto;
  border-radius: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 498px;
  height: 374px;
  min-height: 374px;
  padding: 28px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.secure-card-inner {
  width: var(--_spacing---full-size);
  height: var(--_spacing---full-size);
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-decoration: none;
  display: flex;
}
.secure-card-icon {
  object-fit: cover;
  max-width: 64px;
  height: auto;
  overflow: hidden;
}
.secure-card-body {
  grid-row-gap: 15px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  text-decoration: none;
  display: flex;
}
.secure-card-title {
  width: 100%;
  color: var(--color--dark);
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
  text-decoration: none;
}
.secure-card-description {
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  letter-spacing: var(--_typography---paragraph-large--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
}
.stats-image {
  object-fit: cover;
  border-radius: 8px;
  max-width: 394px;
}
.stats-image.is-right {
  max-width: 283px;
}
.stats-content-col {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
}
.stats-content-col.is-right {
  justify-content: flex-start;
  align-items: flex-start;
}
.stats-content-col.is-left {
  padding-top: 180px;
}
.roofs-counter-box-bottom {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.roofs-counter-box-top {
  border-bottom: 1px dashed var(--color--black);
  padding-bottom: 12px;
}
.stats-marquee {
  padding-bottom: var(--_spacing---margin-padding--space-4xl);
  position: absolute;
  inset: auto 0% 0%;
}
.hero-service-card-block {
  border-top: 2px solid var(--color--lite-gray);
  background-color: var(--color--white);
}
.material-slide-content {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 405px;
  display: flex;
}
.material-slide-image-wrap {
  background-color: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
}
.material-slide-image {
  object-fit: cover;
}
.material-slide-text-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  display: flex;
}
.material-slide-title {
  color: var(--color--dark);
  font-size: var(--_typography---heading-h3--font-size);
  line-height: var(--_typography---heading-h3--line-height);
  letter-spacing: var(--_typography---heading-h3--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
}
.material-slide-description {
  width: 100%;
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph-large--line-height);
  letter-spacing: var(--_typography---paragraph-large--letter-spacing);
  margin-top: 0;
  margin-bottom: 0;
}
.material-slider {
  background-color: var(--color--transparent);
  height: auto;
  position: static;
}
.mask {
  max-width: 405px;
  height: auto;
  overflow: visible;
}
.material-slide {
  margin-right: 24px;
}
.material-content-block {
  display: flex;
  position: relative;
}
.material-arrow {
  z-index: 6;
  aspect-ratio: 1;
  background-color: #0e0e0e1a;
  border-radius: 50%;
  width: 44px;
  padding: 10px;
  inset: auto auto 0% 0%;
}
.material-arrow.is-right {
  margin-left: 54px;
}
.material-overlay {
  z-index: -1;
  background-color: var(--color--background-light);
  width: 2000px;
  position: absolute;
  inset: 0% 0% 0% auto;
}
.material-title-block {
  z-index: 5;
  width: 100%;
  max-width: 360px;
  padding-right: 124px;
  position: relative;
}
.about-content-block {
  z-index: 99;
  grid-column-gap: var(--_spacing---margin-padding--space-l);
  grid-row-gap: var(--_spacing---margin-padding--space-l);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}
.about-left-content {
  width: var(--_spacing---full-size);
  grid-column-gap: var(--_spacing---margin-padding--space-4xl);
  grid-row-gap: var(--_spacing---margin-padding--space-4xl);
  flex-flow: column;
  max-width: 883px;
  display: flex;
}
.story-image-block {
  margin-bottom: var(--_spacing---margin-padding--space-4xl);
  padding-top: 150px;
  position: relative;
}
.story-image-wrap {
  width: var(--_spacing---full-size);
  border-radius: var(--_spacing---radius--rs-8);
  max-width: 516px;
  overflow: hidden;
}
.story-image-wrap.is-main {
  z-index: 5;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.story-image-wrap.one {
  max-width: 212px;
  position: absolute;
  inset: 0% auto auto 0%;
}
.story-image-wrap.two {
  max-width: 258px;
  position: absolute;
  inset: 0% 0% auto auto;
}
.story-image-wrap.three {
  max-width: 205px;
  position: absolute;
  inset: auto auto 0% 0%;
}
.story-image-wrap.four {
  aspect-ratio: 1;
  border-radius: var(--_spacing---radius--circle-round);
  max-width: 142px;
  position: absolute;
  inset: auto 0% 0% auto;
}
.story-title {
  text-align: center;
}
.display-two {
  font-size: var(--_typography---paragraph-large--large-title);
}
.story-description-block {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 951px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
.story-description {
  color: var(--color--dark);
  font-size: var(--_typography---heading-h2--font-size);
  line-height: var(--_typography---heading-h2--line-height);
}
.story-sticky {
  position: sticky;
  top: 60px;
}
.pricing-collection-list {
  grid-column-gap: var(--_spacing---margin-padding--space-l);
  grid-row-gap: var(--_spacing---margin-padding--space-l);
  flex-flow: column;
  display: flex;
}
.slide-nav {
  margin-top: var(--_spacing---margin-padding--space-m);
  position: static;
}
.benefit-card-description {
  color: var(--color--cool-gray);
  font-size: var(--_typography---paragraph-large--font-size);
  line-height: var(--_typography---paragraph--line-height);
  letter-spacing: var(--_typography---heading-h6--letter-spacing);
}
.quation-author-designation {
  color: var(--color--cool-gray);
}
.heading-04 {
  font-size: var(--_typography---heading-h4--font-size);
  line-height: var(--_typography---heading-h4--line-height);
  font-weight: var(--_typography---heading-h4--font-weight);
  letter-spacing: var(--_typography---heading-h4--letter-spacing);
}
.terms-link {
  transition: color .3s;
}
.instruction-text-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  display: flex;
}
.utility-list-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}
.text-dark {
  color: #051408;
  text-decoration: none;
}
.utility-content-wrap {
  grid-row-gap: 44px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
.instruction-list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 20px;
}
.blog-form-input-wrap {
  margin-top: var(--_spacing---margin-padding--space-l);
}
.blog-input-label {
  color: var(--color--line-gray);
}
@media screen and (max-width: 991px) {
body {
    --_typography---paragraph--font-size: 16px;
    --_typography---paragraph--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph--font-weight: var(--font-weight--regular);
    --_typography---paragraph--letter-spacing: -.02em;
    --_typography---heading-h1--font-size: 42px;
    --_typography---heading-h1--line-height: var(--line-height--line-height-l);
    --_typography---heading-h1--font-weight: var(--font-weight--regular);
    --_typography---heading-h1--letter-spacing: -.02em;
    --_typography---heading-h2--font-size: 36px;
    --_typography---heading-h2--line-height: var(--line-height--line-height-l);
    --_typography---heading-h2--font-weight: var(--font-weight--regular);
    --_typography---heading-h2--letter-spacing: -.8px;
    --_typography---heading-h3--font-size: 30px;
    --_typography---heading-h3--line-height: var(--line-height--line-height-l);
    --_typography---heading-h3--font-weight: var(--font-weight--regular);
    --_typography---heading-h3--letter-spacing: -.02em;
    --_typography---heading-h4--font-size: 26px;
    --_typography---heading-h4--line-height: var(--line-height--line-height-l);
    --_typography---heading-h4--font-weight: var(--font-weight--regular);
    --_typography---heading-h4--letter-spacing: -.02em;
    --_typography---heading-h5--font-size: 22px;
    --_typography---heading-h5--line-height: var(--line-height--line-height-l);
    --_typography---heading-h5--font-weight: var(--font-weight--regular);
    --_typography---heading-h5--letter-spacing: -.25px;
    --_typography---heading-h6--font-size: 18px;
    --_typography---heading-h6--line-height: var(--line-height--line-height-xl);
    --_typography---heading-h6--font-weight: var(--font-weight--regular);
    --_typography---heading-h6--letter-spacing: -.25px;
    --_typography---paragraph-large--large-title: 48px;
    --_typography---paragraph-large--font-size-small: 14px;
    --_typography---paragraph-large--font-size: 18px;
    --_typography---paragraph-large--exta-large-title: 64px;
    --_typography---paragraph-large--line-height: var(--line-height--line-height-x);
    --_typography---paragraph-large--marquee-text: 300px;
    --_typography---paragraph-large--letter-spacing: -.02em;
    --_typography---paragraph-large--font-weight: var(--font-weight--regular);
    --_spacing---margin-padding--space-none: 0px;
    --_spacing---margin-padding--space-xl-plus: 50px;
    --_spacing---margin-padding--utlity-hero: 160px;
    --_spacing---margin-padding--full-padding: 100px;
    --_spacing---margin-padding--banner-space: 140px;
    --_spacing---margin-padding--space-4xl: 60px;
    --_spacing---margin-padding--space-3xl: 50px;
    --_spacing---margin-padding--space-m: 20px;
    --_spacing---margin-padding--section-padding: 120px;
    --_spacing---margin-padding--space-sm-plus: 16px;
    --_spacing---margin-padding--space-l: 36px;
    --_spacing---radius--radius-s: 8px;
    --_spacing---margin-padding--container: 15px;
    --_spacing---margin-padding--space-xl: 40px;
    --_spacing---radius--radius-xs: 12px;
    --_spacing---margin-padding--space-m-plus: 24px;
    --_spacing---margin-padding--space-s: 16px;
    --_spacing---radius--radius-m: 4px;
    --_spacing---margin-padding--space-2xl: 50px;
    --_spacing---radius--rs-20: 16px;
    --_spacing---radius--circle-round: 50%;
    --_spacing---full-size: 100%;
    --_spacing---margin-padding--space-ml: 24px;
    --_spacing---margin-padding--space-xs: 6px;
    --_spacing---radius--rs-50: 30px;
    --_spacing---margin-padding--space-sm: 16px;
    --_spacing---margin-padding--space-l-plus: 40px;
    --_spacing---radius--rs-8: 6px;
    --_spacing---gap--gap-xxs: 0px;
    --_spacing---gap--gap-xs: 0px;
    --_spacing---gap--gap-s: 0px;
  }
.title-box {
    margin-bottom: 24px;
  }
.style-title-box-wrapper {
    text-align: center;
  }
.section.strengthen {
    padding-top: var(--_spacing---margin-padding--banner-space);
    padding-bottom: var(--_spacing---margin-padding--banner-space);
  }
.uttlity-title-box.is-instruction {
    margin-bottom: 40px;
  }
.style-size-box {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.style-category-grid-box {
    grid-template-columns: minmax(30%, 1fr) minmax(26%, 1fr) minmax(23%, .75fr) minmax(15px, 1fr);
  }
.style-wrap {
    max-width: 75%;
  }
.typography-button-box {
    padding: 24px;
  }
.single-button-box {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.style-left-box {
    top: 80px;
  }
.license-wrap {
    max-width: 75%;
  }
.license-left-box {
    top: 80px;
  }
.license-grid {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.license-single-card {
    min-height: 250px;
    padding: 24px;
  }
.license-image-box {
    width: 80px;
    height: 80px;
  }
.license-image.phosphor {
    max-width: 60px;
  }
.license-font-box {
    width: 100px;
    height: 100px;
  }
.secondary-text.is-step {
    color: var(--color--dark);
  }
.container-left-box {
    top: 80px;
  }
.container-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.contract-field-wrap {
    grid-column-gap: var(--_spacing---margin-padding--space-none);
    grid-row-gap: var(--_spacing---margin-padding--space-none);
    flex-flow: wrap;
  }
.career-gallery-wrap, .gallery-right-box {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.benefits-single-card {
    padding: var(--_spacing---margin-padding--space-m);
  }
.career-single-right-box {
    position: sticky;
    top: 80px;
  }
.career-single-information-wrap {
    flex-flow: wrap;
  }
.upload-wrap {
    margin-bottom: var(--_spacing---margin-padding--space-l);
  }
.inner-hero-wrap.center.solution {
    max-width: 600px;
  }
.inner-hero-wrap.center.cta {
    max-width: 500px;
  }
.inner-hero-wrap.center.about {
    max-width: 700px;
  }
.inner-hero-wrap.center.is-home, .inner-hero-wrap.center.is-customer {
    max-width: 600px;
  }
.inner-hero-title-box.pricing {
    max-width: 500px;
  }
.blog-collection-list {
    flex-flow: wrap;
    display: flex;
  }
.collection-item {
    flex: 1;
    min-width: 300px;
    max-width: 100%;
  }
.blog-singe-hero-wrap {
    grid-column-gap: var(--_spacing---margin-padding--space-l);
    grid-row-gap: var(--_spacing---margin-padding--space-l);
    grid-template-columns: 100%;
  }
.blog-singe-hero-left-box {
    padding-right: 0;
  }
.blog-singe-hero-top-box {
    max-width: 681px;
  }
.icon-box {
    width: 32px;
    height: 32px;
  }
.icon-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.blog-single-right-box {
    flex: none;
  }
.pricing-left-card {
    padding: var(--_spacing---margin-padding--space-sm-plus);
    grid-column-gap: var(--_spacing---margin-padding--space-s);
    grid-row-gap: var(--_spacing---margin-padding--space-s);
  }
.pricing-single-card {
    position: relative;
  }
.pricing-button-box {
    position: absolute;
    inset: auto 0% 0%;
  }
.container-full {
    border-radius: 0;
  }
.hero-title {
    padding-bottom: var(--_spacing---margin-padding--full-padding);
  }
.hero-title.service-hero {
    padding-bottom: 250px;
  }
.hero-title.customer {
    padding-top: var(--_spacing---margin-padding--banner-space);
    padding-bottom: var(--_spacing---margin-padding--section-padding);
  }
.solutions-wrap {
    flex-flow: wrap;
  }
.solutions-right-box {
    max-width: 100%;
  }
.cta-button-box {
    margin-top: var(--_spacing---margin-padding--space-l);
  }
.faq-wrapper {
    margin-bottom: var(--_spacing---margin-padding--utlity-hero);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: wrap;
  }
.faq-left-box {
    width: 100%;
    max-width: 328px;
    position: static;
  }
.faq-right-box {
    flex: 1;
    min-width: 600px;
    max-width: 100%;
  }
.footer-wedget-wrap {
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }
.footer-roofing-box {
    margin-bottom: -60px;
  }
.nav-menu-content {
    grid-row-gap: 15px;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 16px;
    overflow: auto;
  }
.nav-close-ccon {
    opacity: 0;
    position: absolute;
  }
.navbar {
    padding-top: 16px;
    padding-bottom: 16px;
  }
.nav-hamburger-button {
    justify-content: center;
    align-items: center;
    transition: background-color .3s;
    display: flex;
  }
.nav-menu.dark[aria-current="page"] {
    color: var(--color--dark);
  }
.dropdown-colum-wrapper {
    margin-left: 0;
  }
.dropdown-colum-wrapper.is-open {
    min-width: 0;
    transform: translate(0%);
  }
.drapdown-toggle {
    justify-content: flex-start;
    align-items: center;
  }
.nave-menu {
    background-color: var(--color--black);
    max-height: 90vh;
    overflow: auto;
  }
.nave-menu.light-mood {
    background-color: var(--color--white);
  }
.menu-button {
    flex-flow: column;
    justify-content: center;
    padding: 0;
    display: flex;
  }
.menu-button.is-open {
    background-color: #0000;
  }
.primary-button-wrapper-two.mobile {
    display: flex;
  }
.primary-button-wrapper-two.desktop {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
.menu-dropdown-wrapper {
    width: 100%;
    display: block;
  }
.nav-hamburger-icon {
    opacity: 1;
    flex: none;
    width: 100%;
    min-width: 40px;
    min-height: 40px;
    display: block;
    position: absolute;
  }
.dropdown-main {
    box-shadow: none;
  }
.cart-quantity {
    color: #fff;
    background-color: #191919;
  }
.nav-link {
    width: 100%;
  }
.navbar-logo-link {
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
.nav-button-box {
    display: none;
  }
.works-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.works-single-card-wrap {
    grid-column-gap: var(--_spacing---margin-padding--space-4xl);
    grid-row-gap: var(--_spacing---margin-padding--space-4xl);
    min-width: 100%;
    min-height: 350px;
  }
.expertise-wrap {
    flex-flow: column;
  }
.expertise-left-box {
    flex: 1;
    min-width: 300px;
    max-width: 100%;
  }
.home-whole-counter {
    height: 56px;
  }
.heading-three {
    line-height: 56px;
  }
.heading-three.large-title {
    line-height: 48px;
  }
.expertise-right-box {
    flex: 1;
    max-width: 100%;
  }
.our-services-img._01 {
    background-image: linear-gradient(#00000080, #00000080);
  }
.choose-grid {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    place-items: end center;
    height: auto;
  }
.choose-card {
    height: 200px;
    padding-bottom: var(--_spacing---margin-padding--space-none);
    justify-content: center;
    align-items: center;
  }
.choose-card-single {
    flex-flow: column;
    max-width: 100%;
  }
.choose-icon-box {
    width: 64px;
    min-width: 64px;
    height: 64px;
    min-height: 64px;
  }
.choose-card-title-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }
.choose-card-active-shape {
    min-height: 200px;
  }
.choose-title-box {
    top: 40px;
    left: 40px;
  }
.service-single-card-wrap {
    grid-column-gap: var(--_spacing---margin-padding--space-m-plus);
    grid-row-gap: var(--_spacing---margin-padding--space-m-plus);
    flex-flow: column;
  }
.service-single-card-right-box {
    grid-column-gap: var(--_spacing---margin-padding--space-m);
    grid-row-gap: var(--_spacing---margin-padding--space-m);
    max-width: 100%;
  }
.service-card-list-wrap {
    margin-bottom: var(--_spacing---margin-padding--space-m-plus);
  }
.service-single-image-box {
    height: auto;
    min-height: 0;
  }
.service-overview-box-wrap {
    flex-flow: wrap;
  }
.service-overview-right-box {
    max-width: 100%;
  }
.service-choose-box-wrap, .service-conclusion-box-wrap {
    flex-flow: column;
  }
.service-conclusion-right-box {
    max-width: 100%;
  }
.featured-projects-wrap {
    grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
    grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  }
.featured-projects-left-box {
    max-width: 250px;
  }
.featured-projects-card {
    margin-bottom: var(--_spacing---margin-padding--space-3xl);
  }
.featured-projects-information-box {
    grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
    grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.serve-wrap {
    grid-column-gap: var(--_spacing---margin-padding--space-none);
    grid-row-gap: var(--_spacing---margin-padding--space-none);
    flex-flow: wrap;
  }
.serve-title-box {
    position: static;
  }
.serve-grid {
    max-width: 100%;
    margin-top: var(--_spacing---margin-padding--space-m-plus);
  }
.counter-wrap {
    grid-column-gap: var(--_spacing---margin-padding--space-m);
    grid-row-gap: var(--_spacing---margin-padding--space-m);
    grid-template-columns: 1fr 1fr;
  }
.about-hero-single-image-box {
    width: 300px;
    height: 300px;
  }
.roofing-single-image-box {
    margin-right: 0;
  }
.about-counter-wrap {
    grid-row-gap: var(--_spacing---margin-padding--space-none);
    grid-template-columns: 1fr 1fr;
  }
.about-single-card.left {
    border-bottom-left-radius: 0;
  }
.about-single-card.right {
    border-top-style: none;
    border-bottom-left-radius: 8px;
  }
.about-single-card.v2 {
    border-right: 1px solid var(--color--line-gray);
    border-bottom-right-radius: 8px;
  }
.about-single-card.mobile-only {
    border-top-style: none;
    border-bottom-left-radius: 8px;
  }
.about-single-rrview {
    max-width: 220px;
  }
.team-single-card-wrap {
    grid-template-columns: 1fr 1fr 1fr;
  }
.strengthen-title-box {
    max-width: 484px;
  }
.hero-service-title {
    max-width: 323px;
  }
.hero-service-grid {
    grid-template-columns: 1fr 1fr;
  }
.hero-service-single-card {
    padding: var(--_spacing---margin-padding--space-m-plus) var(--_spacing---margin-padding--space-m-plus) var(--_spacing---margin-padding--space-m-plus) var(--_spacing---margin-padding--space-l-plus);
  }
.hero-service-single-card._2 {
    border-right-style: none;
  }
.hero-service-icon-box {
    margin-bottom: var(--_spacing---margin-padding--space-l);
  }
.hero-service-card-title._2 {
    max-width: 100%;
  }
.slider-number {
    right: 14%;
  }
.hero-roofing-ticker-wrap {
    margin-top: var(--_spacing---margin-padding--full-padding);
    margin-bottom: -24px;
  }
.roofing-content-box {
    flex-flow: wrap;
    position: relative;
  }
.roofing-image-box.is-large {
    max-width: none;
  }
.trust-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
.trust-single-card {
    min-height: 120px;
  }
.trust-whole-counter {
    height: 48px;
  }
.say-tabs {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
.say-tabs-menu {
    margin-left: var(--_spacing---margin-padding--space-none);
    grid-column-gap: var(--_spacing---margin-padding--space-s);
    grid-row-gap: var(--_spacing---margin-padding--space-s);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
    position: static;
  }
.say-tab-link {
    max-width: 100%;
    max-height: 100%;
  }
.say-tab-link[aria-current="page"] {
    max-width: 100%;
  }
.say-tab-relative-box {
    width: 100%;
  }
.say-tab-ab-box {
    top: 0;
    right: 0;
  }
.tabs-content {
    margin-bottom: var(--_spacing---margin-padding--space-l);
  }
.utility-password-page-wrap {
    padding-top: var(--_spacing---margin-padding--utlity-hero);
    padding-bottom: var(--_spacing---margin-padding--full-padding);
  }
.utility-error-page-wrap {
    padding-top: var(--_spacing---margin-padding--utlity-hero);
  }
.background-video {
    height: 400px;
  }
.div-block {
    height: 550px;
  }
.secure-card {
    padding: 20px;
  }
.work-blank {
    display: none;
  }
.material-slide-content {
    grid-column-gap: 28px;
    grid-row-gap: 28px;
  }
.material-slide-text-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.mask {
    overflow: visible;
  }
.material-title-block {
    max-width: 288px;
    padding-right: 60px;
  }
.story-image-wrap.is-main {
    max-width: 385px;
  }
.story-image-wrap.one {
    max-width: 179px;
  }
.story-image-wrap.two {
    max-width: 180px;
  }
.story-image-wrap.three {
    max-width: 129px;
  }
.story-image-wrap.four {
    max-width: 82px;
  }
.utility-content-wrap {
    grid-row-gap: 32px;
  }
}
@media screen and (max-width: 767px) {
body {
    --_typography---paragraph--font-size: 16px;
    --_typography---paragraph--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph--font-weight: var(--font-weight--regular);
    --_typography---paragraph--letter-spacing: -.02em;
    --_typography---heading-h1--font-size: 36px;
    --_typography---heading-h1--line-height: var(--line-height--line-height-l);
    --_typography---heading-h1--font-weight: var(--font-weight--regular);
    --_typography---heading-h1--letter-spacing: -.02em;
    --_typography---heading-h2--font-size: 30px;
    --_typography---heading-h2--line-height: var(--line-height--line-height-l);
    --_typography---heading-h2--font-weight: var(--font-weight--regular);
    --_typography---heading-h2--letter-spacing: -.02em;
    --_typography---heading-h3--font-size: 26px;
    --_typography---heading-h3--line-height: var(--line-height--line-height-l);
    --_typography---heading-h3--font-weight: var(--font-weight--regular);
    --_typography---heading-h3--letter-spacing: -.5px;
    --_typography---heading-h4--font-size: 22px;
    --_typography---heading-h4--line-height: var(--line-height--line-height-l);
    --_typography---heading-h4--font-weight: var(--font-weight--regular);
    --_typography---heading-h4--letter-spacing: 0px;
    --_typography---heading-h5--font-size: 20px;
    --_typography---heading-h5--line-height: var(--line-height--line-height-l);
    --_typography---heading-h5--font-weight: var(--font-weight--regular);
    --_typography---heading-h5--letter-spacing: 0px;
    --_typography---heading-h6--font-size: 18px;
    --_typography---heading-h6--line-height: var(--line-height--line-height-xl);
    --_typography---heading-h6--font-weight: var(--font-weight--regular);
    --_typography---heading-h6--letter-spacing: 0px;
    --_typography---paragraph-large--large-title: 38px;
    --_typography---paragraph-large--font-size-small: 14px;
    --_typography---paragraph-large--font-size: 18px;
    --_typography---paragraph-large--exta-large-title: 48px;
    --_typography---paragraph-large--line-height: var(--line-height--line-height-x);
    --_typography---paragraph-large--marquee-text: 200px;
    --_typography---paragraph-large--letter-spacing: -.02em;
    --_typography---paragraph-large--font-weight: var(--font-weight--regular);
    --_spacing---margin-padding--space-none: 0px;
    --_spacing---margin-padding--space-xl-plus: 46px;
    --_spacing---margin-padding--utlity-hero: 150px;
    --_spacing---margin-padding--full-padding: 80px;
    --_spacing---margin-padding--banner-space: 120px;
    --_spacing---margin-padding--space-4xl: 50px;
    --_spacing---margin-padding--space-3xl: 40px;
    --_spacing---margin-padding--space-m: 18px;
    --_spacing---margin-padding--section-padding: 80px;
    --_spacing---margin-padding--space-sm-plus: 16px;
    --_spacing---margin-padding--space-l: 30px;
    --_spacing---radius--radius-s: 8px;
    --_spacing---margin-padding--container: 15px;
    --_spacing---margin-padding--space-xl: 30px;
    --_spacing---radius--radius-xs: 10px;
    --_spacing---margin-padding--space-m-plus: 20px;
    --_spacing---margin-padding--space-s: 16px;
    --_spacing---radius--radius-m: 4px;
    --_spacing---margin-padding--space-2xl: 40px;
    --_spacing---radius--rs-20: 12px;
    --_spacing---radius--circle-round: 50%;
    --_spacing---full-size: 100%;
    --_spacing---margin-padding--space-ml: 20px;
    --_spacing---margin-padding--space-xs: 6px;
    --_spacing---radius--rs-50: 24px;
    --_spacing---margin-padding--space-sm: 14px;
    --_spacing---margin-padding--space-l-plus: 36px;
    --_spacing---radius--rs-8: 4px;
    --_spacing---gap--gap-xxs: 0px;
    --_spacing---gap--gap-xs: 0px;
    --_spacing---gap--gap-s: 0px;
  }
.title-box {
    margin-bottom: 20px;
  }
.section.strengthen {
    padding-top: var(--_spacing---margin-padding--full-padding);
    padding-bottom: var(--_spacing---margin-padding--full-padding);
  }
.section.is-story {
    height: auto;
  }
.utlitty-inner-title {
    font-size: 46px;
  }
.uttlity-title-box.is-instruction {
    margin-bottom: 32px;
  }
.style-single-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.style-category-grid-box {
    grid-template-columns: minmax(auto, 1fr) minmax(auto, 1fr);
  }
.style-wrap {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    max-width: 60%;
  }
.typography-button-box {
    padding: 20px;
  }
.color-grid {
    grid-template-columns: 1fr 1fr;
  }
.primary-button-link {
    padding-top: 12px;
    padding-bottom: 12px;
  }
.single-button-box {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
.style-left-box {
    width: 100%;
    max-width: 40%;
  }
.license-wrap {
    max-width: 60%;
  }
.license-left-box {
    width: 100%;
    max-width: 40%;
  }
.license-grid {
    grid-template-columns: 1fr;
  }
.changle-log-wrap {
    padding-right: var(--_spacing---margin-padding--space-xl);
    padding-left: var(--_spacing---margin-padding--space-xl);
  }
.contract-list {
    flex-flow: wrap;
  }
.contract-list-item {
    flex: 1;
    min-width: 170px;
    max-width: 100%;
  }
.container-left-box {
    max-width: 100%;
    position: static;
  }
.container-wrap {
    flex-flow: wrap;
    margin-bottom: -120px;
  }
.career-gallery-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: 67% 31%;
  }
.gallery-right-box {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
.career-with-us-wrap, .values-wrap {
    flex-flow: wrap;
  }
.values-left-box {
    position: static;
  }
.benefits-grid {
    grid-template-columns: 1fr 1fr;
  }
.career-wrap {
    flex-flow: wrap;
  }
.career-left-box {
    position: static;
  }
.career-single-wrapper {
    grid-column-gap: var(--_spacing---margin-padding--space-l);
    grid-row-gap: var(--_spacing---margin-padding--space-l);
    flex-flow: wrap;
  }
.career-single-left-box {
    max-width: 100%;
  }
.career-single-right-box {
    max-width: 100%;
    position: static;
  }
.inner-hero-wrap.center.blog {
    max-width: 500px;
  }
.inner-hero-title-box.pricing, .inner-hero-title-box.solution {
    max-width: 400px;
  }
.inner-hero-title-box.cta {
    max-width: 461px;
  }
.inner-hero-title-box.hero {
    max-width: 469px;
  }
.inner-hero-title-box.about {
    max-width: 500px;
  }
.blog-tabs-menu {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    flex-flow: wrap;
  }
.blog-tab-link {
    padding-right: var(--_spacing---margin-padding--space-sm-plus);
    padding-left: var(--_spacing---margin-padding--space-sm-plus);
  }
.blog-post-wrapper {
    flex-flow: column;
  }
.icon-wrapper {
    flex-flow: row;
  }
.blog-single-right-box {
    max-width: 100%;
    position: static;
  }
.pricing-card-grid {
    grid-template-columns: 100%;
  }
.pricing-single-card {
    max-width: 200px;
  }
.pricing-feature-box {
    max-width: 100%;
  }
.solutions-list-item-box {
    grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
    grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
    flex-flow: wrap;
  }
.solutions-item-title-box {
    max-width: 100%;
  }
.faq-wrapper {
    flex-flow: wrap;
  }
.faq-right-box {
    flex: 0 auto;
    min-width: 0;
    max-width: 100%;
  }
.form-block {
    width: 100%;
    min-width: 100%;
  }
.footer-inner-flex {
    grid-row-gap: 40px;
    flex-flow: wrap;
  }
.footer-bottom-box {
    text-align: center;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }
.footer-wedget-wrap {
    flex-flow: wrap;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 100%;
    display: flex;
  }
.footer-left-box {
    order: -9999;
    max-width: 100%;
  }
.footer-flex-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }
.footer-right-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    width: 100%;
  }
.footer-roofing-box {
    margin-bottom: -30px;
  }
.nav-menu-content {
    padding-top: 24px;
    padding-bottom: 24px;
  }
.nav-all-menu-wrap {
    justify-content: space-between;
    max-width: 100%;
  }
.dropdown-colum-wrapper {
    width: 100%;
  }
.dropdown-colum-wrapper.is-open {
    min-width: 100%;
  }
.primary-button-wrapper-two.desktop {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.works-single-card-wrap {
    min-height: 300px;
  }
.works-title-box {
    max-width: 356px;
  }
.home-whole-counter {
    height: 44px;
  }
.heading-three {
    line-height: 44px;
  }
.heading-three.large-title {
    line-height: 38px;
  }
.expertise-right-box {
    padding: var(--_spacing---margin-padding--space-m-plus) 20px var(--_spacing---margin-padding--space-none) var(--_spacing---margin-padding--space-m-plus);
    display: flex;
  }
.expertise-quation-box-wrap {
    max-width: 300px;
    margin-bottom: var(--_spacing---margin-padding--space-m-plus);
  }
.quthor-image-box {
    position: static;
  }
.choose-icon-box {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
.choose-card-title-wrapper {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }
.choose-card-active-shape.four {
    justify-content: center;
    align-items: center;
  }
.choose-title-box {
    top: 20px;
    left: 20px;
  }
.built-inner-box {
    flex-flow: column;
  }
.built-left-box {
    max-width: 400px;
    position: static;
  }
.built-right-box {
    max-width: 100%;
  }
.built-list-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.service-single-title-bpx-wrap {
    grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
    grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }
.service-details-card-wrap {
    grid-template-columns: 1fr 1fr;
  }
.featured-projects-wrap {
    flex-flow: column;
    position: static;
  }
.featured-projects-left-box {
    max-width: 100%;
  }
.featured-projects-single-card {
    margin-top: var(--_spacing---margin-padding--space-m-plus);
    padding-bottom: var(--_spacing---margin-padding--space-ml);
  }
.featured-projects-single-card._2, .featured-projects-single-card._3, .featured-projects-single-card._1, .featured-projects-single-card._4 {
    position: static;
  }
.featured-projects-title-box {
    max-width: 250px;
  }
.feature-project-content-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.featured-projects-information-box {
    display: flex;
  }
.feature-project-divider {
    display: none;
  }
.featured-projects-stycky {
    height: auto;
  }
.about-hero-single-image-box {
    width: 300px;
    height: 300px;
  }
.about-title-wrap {
    flex-flow: column;
  }
.about-single-card.right, .about-single-card.v2 {
    border-bottom-right-radius: 0;
  }
.about-single-card.mobile-only {
    border-left-style: none;
    border-bottom-left-radius: 0;
    display: flex;
  }
.about-single-rrview {
    order: 9999;
    max-width: none;
  }
.about-single-rrview.desktop-only {
    display: none;
  }
.team-single-card-wrap {
    grid-row-gap: var(--_spacing---margin-padding--space-l);
    grid-template-columns: 1fr 1fr;
  }
.strengthen-title-box {
    max-width: 383px;
  }
.hero-service-title {
    max-width: 276px;
  }
.slider-number {
    right: 12%;
  }
.slider-button-box {
    margin-top: var(--_spacing---margin-padding--space-m-plus);
  }
.hero-roofing-ticker-wrap {
    margin-bottom: -18px;
  }
.roofing-content-left-box {
    max-width: 100%;
  }
.roofing-image-grid {
    margin-top: var(--_spacing---margin-padding--full-padding);
  }
.roofing-image {
    max-height: 500px;
  }
.our-roofing-left-box {
    max-width: 204px;
  }
.trust-title-wrap {
    flex-flow: column;
  }
.trust-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
.trust-whole-counter {
    height: 38px;
  }
.say-tabs-menu {
    margin-bottom: var(--_spacing---margin-padding--space-m);
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
.say-quation {
    font-size: var(--_typography---heading-h5--font-size);
  }
.background-video {
    height: 350px;
  }
.slider-author-image-wrap {
    display: none;
  }
.roofing {
    letter-spacing: -8px;
  }
.linear {
    height: 500px;
  }
.contact-shape-box {
    min-height: 300px;
  }
.div-block {
    height: auto;
  }
.say-tab-wrap {
    grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
    grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
  }
.hero-form-block-wrap {
    margin-top: 0;
    margin-bottom: 0;
  }
.secure-card {
    padding: 18px;
  }
.material-slide-content {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
.material-slide-text-block {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
.material-title-block {
    max-width: 240px;
  }
.about-content-block {
    flex-flow: column;
  }
.story-image-block {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    padding-top: 40px;
    display: grid;
  }
.story-image-wrap.is-main {
    max-width: none;
  }
.story-image-wrap.one, .story-image-wrap.two, .story-image-wrap.three {
    max-width: none;
    position: static;
  }
.story-image-wrap.four {
    border-radius: var(--_spacing---radius--radius-s);
    max-width: none;
    position: static;
  }
.utility-content-wrap {
    grid-row-gap: 24px;
  }
}
@media screen and (max-width: 479px) {
body {
    --_typography---paragraph--font-size: 16px;
    --_typography---paragraph--line-height: var(--line-height--line-height-xl);
    --_typography---paragraph--font-weight: var(--font-weight--regular);
    --_typography---paragraph--letter-spacing: -.02em;
    --_typography---heading-h1--font-size: 30px;
    --_typography---heading-h1--line-height: var(--line-height--line-height-l);
    --_typography---heading-h1--font-weight: var(--font-weight--regular);
    --_typography---heading-h1--letter-spacing: -.02em;
    --_typography---heading-h2--font-size: 26px;
    --_typography---heading-h2--line-height: var(--line-height--line-height-l);
    --_typography---heading-h2--font-weight: var(--font-weight--regular);
    --_typography---heading-h2--letter-spacing: -.02em;
    --_typography---heading-h3--font-size: 22px;
    --_typography---heading-h3--line-height: var(--line-height--line-height-l);
    --_typography---heading-h3--font-weight: var(--font-weight--regular);
    --_typography---heading-h3--letter-spacing: 0px;
    --_typography---heading-h4--font-size: 20px;
    --_typography---heading-h4--line-height: var(--line-height--line-height-l);
    --_typography---heading-h4--font-weight: var(--font-weight--regular);
    --_typography---heading-h4--letter-spacing: 0px;
    --_typography---heading-h5--font-size: 18px;
    --_typography---heading-h5--line-height: var(--line-height--line-height-l);
    --_typography---heading-h5--font-weight: var(--font-weight--regular);
    --_typography---heading-h5--letter-spacing: 0px;
    --_typography---heading-h6--font-size: 16px;
    --_typography---heading-h6--line-height: var(--line-height--line-height-xl);
    --_typography---heading-h6--font-weight: var(--font-weight--regular);
    --_typography---heading-h6--letter-spacing: 0px;
    --_typography---paragraph-large--large-title: 30px;
    --_typography---paragraph-large--font-size-small: 14px;
    --_typography---paragraph-large--font-size: 16px;
    --_typography---paragraph-large--exta-large-title: 36px;
    --_typography---paragraph-large--line-height: var(--line-height--line-height-x);
    --_typography---paragraph-large--marquee-text: 150px;
    --_typography---paragraph-large--letter-spacing: -.02em;
    --_typography---paragraph-large--font-weight: var(--font-weight--regular);
    --_spacing---margin-padding--space-none: 0px;
    --_spacing---margin-padding--space-xl-plus: 40px;
    --_spacing---margin-padding--utlity-hero: 140px;
    --_spacing---margin-padding--full-padding: 60px;
    --_spacing---margin-padding--banner-space: 100px;
    --_spacing---margin-padding--space-4xl: 40px;
    --_spacing---margin-padding--space-3xl: 36px;
    --_spacing---margin-padding--space-m: 16px;
    --_spacing---margin-padding--section-padding: 70px;
    --_spacing---margin-padding--space-sm-plus: 16px;
    --_spacing---margin-padding--space-l: 28px;
    --_spacing---radius--radius-s: 8px;
    --_spacing---margin-padding--container: 15px;
    --_spacing---margin-padding--space-xl: 24px;
    --_spacing---radius--radius-xs: 10px;
    --_spacing---margin-padding--space-m-plus: 18px;
    --_spacing---margin-padding--space-s: 16px;
    --_spacing---radius--radius-m: 4px;
    --_spacing---margin-padding--space-2xl: 36px;
    --_spacing---radius--rs-20: 10px;
    --_spacing---radius--circle-round: 50%;
    --_spacing---full-size: 100%;
    --_spacing---margin-padding--space-ml: 18px;
    --_spacing---margin-padding--space-xs: 6px;
    --_spacing---radius--rs-50: 24px;
    --_spacing---margin-padding--space-sm: 14px;
    --_spacing---margin-padding--space-l-plus: 30px;
    --_spacing---radius--rs-8: 4px;
    --_spacing---gap--gap-xxs: 0px;
    --_spacing---gap--gap-xs: 0px;
    --_spacing---gap--gap-s: 0px;
  }
.utlitty-inner-title {
    font-size: 40px;
  }
.style-single-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }
.style-wrapper {
    flex-flow: wrap;
  }
.style-category-box {
    padding-top: 16px;
    padding-bottom: 16px;
  }
.style-category-grid-box {
    grid-template-columns: minmax(auto, 1fr);
  }
.style-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    max-width: 100%;
  }
.style-left-box {
    max-width: 100%;
    position: static;
  }
.license-wrap {
    max-width: 100%;
  }
.license-left-box {
    max-width: 100%;
    position: static;
  }
.license-single-card {
    min-height: 200px;
  }
.changle-log-wrap {
    padding: var(--_spacing---margin-padding--space-sm-plus);
  }
.contract-list-item {
    flex: 1;
    min-width: 158px;
    max-width: 100%;
  }
.container-left-box {
    max-width: 100%;
  }
.container-wrap {
    margin-bottom: -60px;
  }
.textareea {
    min-height: 120px;
  }
.career-gallery-wrap {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    grid-template-columns: 49% 49%;
  }
.career-gallery-image-box {
    border-radius: var(--_spacing---radius--radius-m);
  }
.gallery-right-box {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }
.values-right-box, .benefits-grid {
    grid-template-columns: 1fr;
  }
.career-single-card {
    flex-flow: wrap;
  }
.career-single-logo-box {
    max-width: 200px;
  }
.inner-hero-wrap.center.solution, .inner-hero-wrap.center.is-home, .inner-hero-wrap.center.is-customer {
    text-align: center;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 32px;
    padding: 16px;
  }
.inner-hero-title-box.blog {
    max-width: 390px;
  }
.inner-hero-title-box.pricing {
    max-width: 321px;
  }
.inner-hero-title-box.cta {
    max-width: 290px;
  }
.inner-hero-title-box.hero {
    max-width: 396px;
  }
.collection-item {
    min-width: 100%;
  }
.blog-single-information-wrap {
    grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
    grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.related-articles-title-wrap, .pricing-left-card {
    flex-flow: wrap;
  }
.pricing-single-card {
    max-width: 100%;
  }
.pricing-divider {
    display: none;
  }
.pricing-button-box {
    position: static;
  }
.footer-inner-flex {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.footer-wedget-wrap {
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    max-width: 100%;
    display: grid;
  }
.footer-flex-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
.footer-single-widget {
    width: 100%;
  }
.nav-menu-content {
    display: none;
  }
.nav-all-menu-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-top: 20px;
  }
.nav-hamburger-button {
    width: 30px;
  }
.nav-dropdown-left-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 40px;
    flex-flow: wrap;
    grid-template: ". ."
                   "Area Area"
                   / 74px 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    display: grid;
  }
.nav-menu:hover, .nav-menu[aria-current="page"] {
    color: var(--color--white);
  }
.nav-menu.dark:hover {
    color: var(--color--dark);
  }
.nav-link-wrapper {
    margin-right: 0;
  }
.primary-button-wrapper-two.desktop {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.mobile-nav-wrap {
    display: block;
  }
.dropdown-main {
    padding: 16px;
  }
.navbar-logo-image {
    height: 21px;
  }
.mobile-nav-title-box {
    text-align: left;
  }
.nav-dropdown-left-wrap-2 {
    grid-column-gap: 0px;
    grid-row-gap: 20px;
    flex-flow: wrap;
    grid-template: "Area"
    / 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    display: grid;
  }
.works-wrap {
    grid-template-columns: 1fr;
  }
.works-title-box {
    max-width: 290px;
  }
.expertise-right-box {
    flex-flow: column;
  }
.expertise-quation-box-wrap {
    flex-flow: column;
    max-width: 100%;
  }
.avatar-plus-icon, .avatar-icon-wrap {
    display: none;
  }
.choose-grid {
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 1fr;
  }
.choose-card {
    height: 140px;
  }
.choose-card-title-wrapper {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }
.choose-card-active-shape {
    min-height: 140px;
  }
.choose-title-box {
    top: 16px;
    left: 16px;
  }
.built-left-box {
    max-width: 300px;
  }
.built-list-wrapper {
    grid-template-columns: 1fr;
  }
.service-title-wrap {
    flex-flow: column;
  }
.service-single-card-right-box, .service-single-image-grid {
    grid-template-columns: 1fr;
  }
.service-single-title-bpx-wrap {
    grid-column-gap: var(--_spacing---margin-padding--space-xs);
    grid-row-gap: var(--_spacing---margin-padding--space-xs);
  }
.service-details-card-wrap {
    grid-template-columns: 1fr;
  }
.featured-projects-single-card {
    padding-bottom: var(--_spacing---margin-padding--space-xl);
  }
.feature-project-content-wrap {
    grid-template-columns: 1fr;
  }
.featured-projects-card {
    margin-bottom: var(--_spacing---margin-padding--space-4xl);
  }
.featured-projects-information-box {
    grid-column-gap: var(--_spacing---margin-padding--space-sm-plus);
    grid-row-gap: var(--_spacing---margin-padding--space-sm-plus);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.serve-grid, .counter-wrap {
    grid-template-columns: 1fr;
  }
.about-hero-single-image-box {
    width: 290px;
    height: 290px;
  }
.about-title-wrap {
    flex-flow: column;
  }
.about-counter-wrap {
    grid-template-columns: 1fr;
  }
.about-single-card.left {
    border-bottom-style: none;
  }
.about-single-card.right {
    border-left: 1px solid var(--color--line-gray);
    border-bottom-left-radius: 0;
  }
.about-single-card.v2 {
    border-left: 1px solid var(--color--line-gray);
  }
.about-single-card.mobile-only {
    border-left: 1px solid var(--color--line-gray);
    border-bottom-left-radius: 8px;
  }
.team-single-card-wrap {
    grid-row-gap: var(--_spacing---margin-padding--space-l);
    grid-template-columns: 1fr;
  }
.strengthen-title-box {
    max-width: 372px;
  }
.hero-service-title {
    max-width: 230px;
  }
.hero-service-grid {
    grid-template-columns: 1fr;
  }
.hero-service-single-card {
    padding: var(--_spacing---margin-padding--space-l) var(--_spacing---margin-padding--space-sm-plus);
    border-right-style: none;
  }
.slider-number {
    left: auto;
    top: var(--_spacing---margin-padding--space-4xl);
    margin-top: var(--_spacing---margin-padding--space-l-plus);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    bottom: auto;
    right: 4%;
  }
.materials-left-title-wrap {
    text-align: center;
    justify-content: flex-start;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }
.hero-roofing-ticker-wrap {
    margin-bottom: -16px;
  }
.roofing-review-box {
    text-align: left;
    justify-content: center;
    align-items: flex-start;
    max-width: 100%;
    position: static;
  }
.roofing-image-grid {
    max-width: 100%;
    margin-top: var(--_spacing---margin-padding--space-l);
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }
.roofing-image-box {
    max-width: none;
  }
.roofing-image {
    max-height: 300px;
  }
.our-roofing-left-box {
    max-width: 100%;
    position: static;
  }
.roofs-counter-box {
    width: 100%;
  }
.our-roofing {
    max-width: 216px;
  }
.trust-title-wrap {
    flex-flow: column;
  }
.trust-grid {
    grid-template-columns: 1fr 1fr;
  }
.trust-single-card.right {
    min-height: 100px;
  }
.trust-image-v1 {
    max-width: 135px;
    max-height: 54px;
  }
.say-tabs-menu {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-flow: column;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }
.say-tab-image-box {
    width: 100%;
    height: auto;
  }
.say-tab-link {
    max-width: 100%;
    height: auto;
  }
.say-tab-ab-box {
    max-width: 100%;
    padding-top: var(--_spacing---margin-padding--space-none);
  }
.background-video {
    height: 250px;
  }
.linear {
    height: 400px;
  }
.exhibition-block {
    flex-flow: column;
    position: relative;
  }
.dot-wrap {
    flex-flow: row;
    justify-content: center;
  }
.contact-shape-box {
    min-height: 120px;
  }
.say-tab-wrap {
    grid-template-columns: 1fr;
  }
.hero-title-block {
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
.hero-form-block-wrap {
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;
  }
.stats-content-block {
    flex-flow: column;
    align-items: stretch;
  }
.secure-card {
    order: -9999;
  }
.stats-image.is-right {
    max-width: 180px;
  }
.stats-content-col.is-left {
    padding-top: 20px;
  }
.material-slide-content {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
.material-content-block {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
  }
.material-arrow {
    margin-top: 32px;
    position: relative;
  }
.material-arrow.is-right {
    margin-top: -44px;
    margin-left: auto;
    left: 25px;
  }
.material-arrow.is-left {
    left: -25px;
  }
.material-title-block {
    max-width: none;
    padding-right: 0;
  }
.story-image-block {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    padding-top: 32px;
  }
}
#node-eb1b49d8-e71e-f7a7-d9ad-836610abf652-fa0d5dd1 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-abe7c5c8-7257-fb3a-2ab2-6677c5f2d4cb-fa0d5dd1, #node-_675fc80b-fc53-d929-f96f-763611e5029c-fa0d5dd1, #node-abea9a6a-29cd-95b6-3e9e-b311e313976a-fa0d5dd1, #node-_74672fd8-e30e-556b-825c-f5734ac91e73-fa0d5dd1, #node-_0896c830-c25c-0910-f674-1b11eac9bae6-fa0d5dd1, #node-ed2f6285-bd0d-b87f-2d2f-cb4c8d90045d-fa0d5dd1 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
#node-_8c95b06c-3db1-8e2f-101f-2874817c5b8c-817c5b8c, #node-_0f76bbd0-b7de-bb76-661d-2683d79ae1cb-fa0d5dd6, #node-eb2201df-a9e1-81cf-4ee7-1cb0b805b603-fa0d5dd6 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-dc7b769a-46ac-df01-066b-b4b7094f8dab-fa0d5dd8 {
  place-self: end stretch;
}
#node-_1cd1b0e5-5c4a-cd59-33d2-e31b2eb7ac2f-fa0d5dd9, #node-b4eaf56a-c08b-d680-fe87-f2675edc4ede-fa0d5dd9, #node-a158c87b-a1d2-0834-81ee-04266eec5c78-fa0d5dd9, #node-_650ef981-0cce-6654-ab70-320f806d1d68-fa0d5dde {
  grid-area: span 1 / span 1 / span 1 / span 1;
}
#node-_38fc7e8b-7f38-e924-389a-2a7057161a1e-fa0d5de1 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}
@media screen and (max-width: 991px) {
#node-_56f28e7a-8d1a-5a96-faff-8cf6bbbb71c5-3301756d {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}
@media screen and (max-width: 767px) {
#node-_09296a9d-51c4-91c3-9377-32c8b6f77d20-fa0d5dd2 {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }
#node-_28367915-4764-cb0a-8838-38ad649c5e51-fa0d5dd2 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
#node-c7bfd390-2266-7323-f64f-88cbfb6b9eb7-f6c8f8d3 {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: center;
  }
}
@media screen and (max-width: 479px) {
#node-_45e5b901-c7f4-283d-5f0f-a774bdcc743a-bdcc7420, #node-_68b47c9d-91e2-256b-f7a5-e4e33fb8c7ef-3fb8c7b2, #node-_68b47c9d-91e2-256b-f7a5-e4e33fb8c82f-3fb8c7b2 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
#node-_28367915-4764-cb0a-8838-38ad649c5e51-fa0d5dd2 {
    grid-column: span 1 / span 1;
  }
#node-d9c9076b-133e-f5d7-c8b7-990d548ed1ab-548ed16e, #node-d9c9076b-133e-f5d7-c8b7-990d548ed1eb-548ed16e {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
#node-c7bfd390-2266-7323-f64f-88cbfb6b9eb7-f6c8f8d3 {
    grid-column: span 1 / span 1;
  }
}
/* ======================================================================
   4. Components (hand-written)
   ====================================================================== */
/* ---------------------------------------------------------------------------
   TitanPipe — component layer.

   Hand-written vanilla replacements for everything the Webflow runtime used to
   do: the base-widget rules that were dropped with the framework, the nav /
   dropdown / accordion / tab / slider / video behaviour, the localStorage cart, and every IX2 + IX3 animation reproduced from the export's OWN payload
   (see build_ix2_map.py for the mapping, inspect_ix2.py for the raw numbers).

   RULE OF THUMB: anything that reinstates a dropped Webflow *base* default goes
   inside :where() so it carries zero specificity and the design sheet always
   wins. Anything that is genuinely this template's own behaviour is a normal
   rule.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   1. Reinstated base-widget defaults (zero specificity)
   =========================================================================== */

/* navbar (was .w-nav / .w-nav-brand / .w-nav-link / .w-nav-menu / .w-nav-button) */
:where([data-nav]) { position: relative; z-index: 1000; }
:where(.navbar-logo-link, .nav-link, .nav-menu, .dropdown-link, .tab-link) {
  text-decoration: none;
}
:where(.nav-link, .nav-menu) {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-align: left;
}
:where([data-nav-menu]) { position: relative; }
:where([data-nav-toggle]) { display: none; cursor: pointer; user-select: none; }
/* dropdown (was .w-dropdown / -toggle / -list) */
:where([data-dropdown]) {
  display: inline-block;
  position: relative;
  text-align: left;
  z-index: 900;
}
:where([data-dropdown-toggle], [data-accordion-toggle]) {
  position: relative;
  vertical-align: top;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
:where([data-dropdown-list]) { position: absolute; min-width: 100%; }
:where([data-dropdown-list] a) { display: block; text-decoration: none; white-space: nowrap; }
/* slider (was .w-slider / -mask / -slide / -nav / -arrow) */
:where([data-slider]) { position: relative; text-align: center; clear: both; }
:where([data-slider-mask]) {
  position: relative;
  display: block;
  overflow: hidden;
  height: 100%;
}
:where([data-slide]) { position: relative; width: 100%; height: 100%; text-align: left; }
:where([data-slider-nav]) {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  margin: auto;
  padding-top: 10px;
  height: 40px;
  text-align: center;
}
:where([data-slider-prev], [data-slider-next]) {
  position: absolute;
  inset: 0;
  width: 80px;
  margin: auto;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}
/* tabs (was .w-tabs / -menu / -link / -content / -pane) */
:where(.tabs, .tab-menu) { position: relative; }
:where(.tab-link) {
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
}
:where(.tab-content) { position: relative; display: block; overflow: hidden; }
:where(.tab-pane) { position: relative; display: none; }
.tab-pane.is-active { display: block; }
/* background video (was .w-background-video) */
:where([data-video]) { position: relative; overflow: hidden; color: #fff; }
:where([data-video] > video) {
  position: absolute;
  inset: -100%;
  width: 100%;
  height: 100%;
  margin: auto;
  object-fit: cover;
  background-size: cover;
  background-position: 50% 50%;
  z-index: -100;
}
:where([data-video-toggle]) {
  position: absolute;
  right: 1em;
  bottom: 1em;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
[data-video-toggle] > [hidden] { display: none !important; }
/* Divs promoted to real <button>s (nav toggle, dropdown/accordion toggles, slider arrows, video control) must not inherit the UA button look. Zero
   specificity so every design rule on those elements still wins. */
:where([data-nav-toggle], [data-dropdown-toggle], [data-accordion-toggle], [data-slider-prev], [data-slider-next], [data-video-toggle]) {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}
.is-hidden { display: none !important; }
/* ===========================================================================
   2. Navigation
   =========================================================================== */

/* The desktop menu collapses at Webflow's "medium" breakpoint (991px), where the
   runtime used to move it into an absolutely positioned overlay under the bar. */
/* NB: the collapse rules below are deliberately NOT wrapped in :where(). The
   panel is a <nav>, and normalize.css sets `nav { display: block }
` at element
   specificity — a zero-specificity `display: none` would lose to it and the
   mobile menu would render permanently open. This is the template's own
   behaviour (the runtime used to toggle it), not a reinstated Webflow default, so normal specificity is correct. `.nave-menu` carries no display rule of its
   own, so nothing in the design sheet is overridden. */
@media screen and (max-width: 991px) {
  [data-nav-menu] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    display: none;
  }
  [data-nav-menu].is-open { display: block; }
  :where([data-nav-toggle]) { display: block; }
}
/* Hamburger <-> close cross-fade (IX2 a-80 / a-81: 300ms / 500ms opacity). */
.nav-hamburger-button { position: relative; display: flex; }
.nav-close-ccon {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transition: opacity .3s ease;
}
.nav-hamburger-icon { transition: opacity .3s ease; }
[data-nav-toggle][aria-expanded="true"] .nav-hamburger-icon { opacity: 0; }
[data-nav-toggle][aria-expanded="true"] .nav-close-ccon { opacity: 1; }
/* ===========================================================================
   3. "Pages" mega dropdown  (IX2 a-21 / a-22: height 0 -> auto, arrow 180deg)
   =========================================================================== */
[data-dropdown-list] {
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: height .4s ease, visibility 0s linear .4s;
}
[data-dropdown-list].is-open {
  height: auto;
  visibility: visible;
  transition: height .4s ease, visibility 0s;
}
.dropdown-toggle-icon, [data-dropdown-toggle] .dropdown-arrow-icon {
  transition: transform .5s ease;
}
[data-dropdown-toggle][aria-expanded="true"] .dropdown-toggle-icon, [data-dropdown-toggle][aria-expanded="true"] .dropdown-arrow-icon {
  transform: rotate(180deg);
}
/* ===========================================================================
   4. FAQ accordion  (IX2 a-15 / a-16: height 300-500ms + icon cross-fade)
   =========================================================================== */
[data-accordion-panel] {
  height: 0;
  overflow: hidden;
  transition: height .4s ease;
}
/* Icon naming is counter-intuitive: `-in` is plus.svg and `-out` is the minus.
   Per a-15's initial group the CLOSED row shows `-in` (plus) and the OPEN row
   shows `-out` (minus) — the two are stacked, `-out` being the absolute one. */
.accordion-icon-in, .accordion-icon-out { transition: opacity .5s ease; }
.accordion-icon-out { opacity: 0; }
[data-accordion].is-open .accordion-icon-out { opacity: 1; }
[data-accordion].is-open .accordion-icon-in { opacity: 0; }
/* ===========================================================================
   5. Slider
   =========================================================================== */
.slider-track {
  display: flex;
  align-items: flex-start;
  transition: transform .5s cubic-bezier(.165, .84, .44, 1);
  will-change: transform;
}
:where([data-slide]) { flex: 0 0 100%; }
.slider-nav-dot {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 3px .5em;
  border: 0;
  padding: 0;
  border-radius: 100%;
  background-color: rgba(34, 34, 34, .4);
  cursor: pointer;
  transition: background-color .1s;
}
.slider-nav-dot.is-active { background-color: #222; }
.slider-nav-dot:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
[data-slider-prev][disabled], [data-slider-next][disabled] { opacity: .35; cursor: default; }
/* ===========================================================================
   6. Cart (localStorage)
   =========================================================================== */
[data-cart-modal] {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
}
[data-cart-modal].is-open { display: flex; }
.cart-line-item-image { flex: none; }
/* ===========================================================================
   7. Scroll reveals — every SCROLL_INTO_VIEW preset in TitanPipe's IX2 payload.
      All timed steps run 1000ms outQuart, exactly as the payload specifies.
   =========================================================================== */
.js .reveal-up, .js .reveal-left, .js .reveal-right, .js .reveal-grow, .js .reveal-grow-big, .js .reveal-blur, .js .reveal-blur-fast {
  opacity: 0;
  transition: opacity 1s cubic-bezier(.165, .84, .44, 1),
              transform 1s cubic-bezier(.165, .84, .44, 1),
              filter 1s cubic-bezier(.165, .84, .44, 1);
  will-change: opacity, transform;
}
/* The left/right presets park their element 100px outside its layout box, which
   on wide cards (the service and career galleries) reaches past the viewport and
   would add a horizontal scrollbar until the reveal fires. Webflow's runtime
   avoided that by applying the offset only for the frames it animates; clipping
   the page wrapper on the X axis gets the same result declaratively.
   `overflow-x: clip` — NOT `hidden` — because clip creates no scroll container, so the sticky exhibition/featured-project sections keep working. */
.js .page-wrapper { overflow-x: clip; }
.js .reveal-up { transform: translateY(100px); }
.js .reveal-left { transform: translateX(-100px); }
.js .reveal-right { transform: translateX(100px); }
.js .reveal-grow { transform: scale(.75); }
.js .reveal-grow-big { transform: scale(0); }
.js .reveal-blur { transform: translateY(50px); filter: blur(3px); transition-duration: 1.2s; transition-delay: .2s; }
.js .reveal-blur-fast { transform: translateY(50px); filter: blur(2px); transition-duration: 1.2s; transition-delay: .03s; }
.js .reveal-up.is-visible, .js .reveal-left.is-visible, .js .reveal-right.is-visible, .js .reveal-grow.is-visible, .js .reveal-grow-big.is-visible, .js .reveal-blur.is-visible, .js .reveal-blur-fast.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}
/* a-2 "Heading animation": every .animation-content line rolls up out of a
   clipped row, from skewY(5deg) translateY(100%) opacity 0. */
.js .reveal-heading .animation-content {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%) skewY(5deg);
  transition: opacity 1s cubic-bezier(.165, .84, .44, 1),
              transform 1s cubic-bezier(.165, .84, .44, 1);
}
.js .reveal-heading.is-visible .animation-content {
  opacity: 1;
  transform: none;
}
/* a-20 / a-45 dividers: width 0 -> 100% over 500ms. */
.js .reveal-divider { width: 0; transition: width .5s ease; }
.js .reveal-divider.is-visible { width: 100%; }
/* a-11 footer "view" image: the overlay slides down off the image while the
   photo settles from scale(1.3) to scale(1.02). */
.js .reveal-view-image .view-image { transform: scale(1.3); transition: transform 1.1s ease .3s; }
.js .reveal-view-image .view-image-overlay { transform: translateY(-100%); transition: transform 1s ease .3s; }
.js .reveal-view-image.is-visible .view-image { transform: scale(1.02); }
.js .reveal-view-image.is-visible .view-image-overlay { transform: translateY(0); }
/* ===========================================================================
   8. Hero intro — the IX3 timeline (t-30a92a6f) that runs once on load:
      [animation="word"] fades/slides/skews/scales in, .hero-container zooms
      out of scale(1.5). Both 1s.
   =========================================================================== */
/* No fill-mode on purpose: the keyframes' `from` state only applies while the
   animation is actually running, so anywhere animations are suppressed the hero
   simply renders in its finished state instead of staying invisible. */
.js .hero-intro { animation: hero-intro 1s cubic-bezier(.165, .84, .44, 1); }
.js .hero-zoom { animation: hero-zoom 1s cubic-bezier(.165, .84, .44, 1); }
@keyframes hero-intro {
from { opacity: 0; transform: translateY(60%) skewY(10deg) scale(.5); }
to { opacity: 1; transform: none; }
}
@keyframes hero-zoom {
from { transform: scale(1.5); }
to { transform: none; }
}
/* ===========================================================================
   9. Counters — IX2 a-33 / a-34 slid the digit trains 100% over 3s so the
      column lands on its final digit. main.js measures the train and sets the
      distance; the easing is the payload's own cubic-bezier.
   =========================================================================== */
.count-roll .counter-train, .count-roll .counter-train-two {
  transform: translateY(0);
  transition: transform 3s cubic-bezier(.784, .325, .222, .98);
  will-change: transform;
}
.count-roll.is-visible .counter-train { transform: translateY(-100%); }
.count-roll.is-visible .counter-train-two { transform: translateY(100%); }
/* ===========================================================================
   10. Tickers — IX2 a-46 / a-47 looped translateX 0 -> -100% over 60s. Each
       row already ships three identical copies inside an overflow-hidden
       wrapper, so -100% is exactly one copy width and the loop is seamless.
   =========================================================================== */
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.roofing-image-wrap, .about-hero-image-wrap { animation: ticker-scroll 60s linear infinite; }
/* ===========================================================================
   11. Hover states — one block per MOUSE_OVER action list in the payload.
   =========================================================================== */

/* a-3 family (a-3/5/9/14/23/27/42/50/57/63/66/73/75/78) — the shared button:
   a rotated "shadow" panel sweeps across while the label rolls up and its
   hover twin rolls in behind it. */
.primary-button-shadow {
  width: 0;
  height: 200px;
  transform: translateY(-50%) rotate(30deg);
  transition: width .3s ease, height .3s ease;
}
.primary-button-text, .join-button-text, .nav-button-text, .secondary-button-two-text { transition: transform .5s ease; }
.primary-button-hover-text, .join-button-hover-text, .nav-button-hover-text, .secondary-button-two-hover-text {
  transform: translateY(100%);
  transition: transform .5s ease, opacity .5s ease;
}
.primary-button-link:hover .primary-button-shadow, .secondary-button-link:hover .primary-button-shadow, .primary-button-link:focus-visible .primary-button-shadow, .secondary-button-link:focus-visible .primary-button-shadow { width: 120%; height: 150px; }
.primary-button-link:hover .primary-button-text, .secondary-button-link:hover .primary-button-text, .primary-button:hover .secondary-button-two-text, .join-button:hover .join-button-text, .nav-button:hover .nav-button-text { transform: translateY(-100%); }
.primary-button-link:hover .primary-button-hover-text, .secondary-button-link:hover .primary-button-hover-text, .primary-button:hover .secondary-button-two-hover-text, .join-button:hover .join-button-hover-text, .nav-button:hover .nav-button-hover-text { transform: translateY(0); opacity: 1; }
/* a-57 / a-73 also swap the trailing arrow diagonally. */
.primary-button-icon { transition: transform .5s ease; }
.primary-button-hover-icon {
  transform: translate(-100%, 100%);
  transition: transform .5s ease;
}
.join-button:hover .primary-button-icon, .primary-button:hover .primary-button-icon { transform: translate(100%, -100%); }
.join-button:hover .primary-button-hover-icon, .primary-button:hover .primary-button-hover-icon { transform: translate(0, 0); }
/* a-12 social icons: the accent panel grows up from the bottom and the icon
   swaps for its hover twin. */
.socal-hover-box { height: 0; width: 100%; top: auto; bottom: 0; transition: height .5s ease; }
.socal-icon-image, .socal-icon-hover-image { transition: opacity .5s ease; }
.icon-box:hover .socal-hover-box { height: 100%; }
.icon-box:hover .socal-icon-image { opacity: 0; }
.icon-box:hover .socal-icon-hover-image { opacity: 1; }
/* a-29 work cards: the dark overlay rises from the bottom and the text inverts. */
.works-overly-box { height: 0; top: auto; bottom: 0; transition: height .5s ease; }
.works-single-card-wrap .step-card-title, .works-single-card-wrap .secondary-text { transition: color .5s ease; }
.works-single-card-wrap:hover .works-overly-box { height: 100%; }
.works-single-card-wrap:hover .step-card-title { color: var(--color--white); }
.works-single-card-wrap:hover .secondary-text { color: var(--color--line-gray); }
/* a-48 team cards: overlay grows to full height. */
.team-overly-box-wrap { height: 0; top: auto; bottom: 0; transition: height .5s ease; }
.team-single-card:hover .team-overly-box-wrap { height: 100%; }
/* a-71 trust logos: the card darkens and the logo swaps to its light variant. */
.trust-single-card { transition: background-color .5s ease; }
.trust-image-v1 { transition: opacity .5s ease; }
.trust-single-card:hover { background-color: var(--color--dark); }
.trust-single-card:hover .trust-image-v1 { opacity: 0; }
.trust-single-card:hover .trust-image-v1.ab { opacity: 1; }
/* a-82 testimonial slider avatars. */
.slider-overly { transition: opacity .5s ease; }
.slider-author-active-box:hover .slider-overly { opacity: 1; }
/* a-35 / a-36 contact CTA: at rest the row is collapsed to the avatar alone —
   the call icon is tucked behind it, scaled down, and the "+" is hidden. On
   hover the row widens and the call icon slides out into place.
   (a-35's FIRST group is the rest state, not the hover state — reading it the
   other way round leaves the icon permanently out and nothing to reveal.) */
.avatar-info { width: 52px; transition: width .5s ease; }
.avatar-plus-icon { opacity: 0; transition: opacity .5s ease; }
.avatar-icon-wrap {
  transform: translateX(-74px) scale(.8);
  transition: transform .5s ease;
}
.content-cta:hover .avatar-info { width: 126px; }
.content-cta:hover .avatar-plus-icon { opacity: 1; }
.content-cta:hover .avatar-icon-wrap { transform: translateX(0) scale(1); }
/* a-37..a-40 "why choose us": hovering a card cross-fades both its own blurred
   panel and the matching background photo. The default (card 1) has to be
   switched off explicitly, hence :has() on the shared ancestor. */
.choose-card-active-shape, .our-services-img { transition: opacity .5s ease; }
.choose-card:hover .choose-card-active-shape { opacity: 1; }
.choose-hv2-content:has(.choose-card._02:hover) .our-services-img._01, .choose-hv2-content:has(.choose-card._03:hover) .our-services-img._01, .choose-hv2-content:has(.choose-card._04:hover) .our-services-img._01, .choose-hv2-content:has(.choose-card._02:hover) .choose-card-active-shape.one, .choose-hv2-content:has(.choose-card._03:hover) .choose-card-active-shape.one, .choose-hv2-content:has(.choose-card._04:hover) .choose-card-active-shape.one { opacity: 0; }
.choose-hv2-content:has(.choose-card._02:hover) .our-services-img._02, .choose-hv2-content:has(.choose-card._03:hover) .our-services-img._03, .choose-hv2-content:has(.choose-card._04:hover) .our-services-img._04 { opacity: 1; }
/* a-65 portfolio tabs: the active image slides in from 1rem left. */
.say-tab-image-box { transition: transform 1s ease; }
.tab-pane:not(.is-active) .say-tab-image-box { transform: translateX(-1rem); }
/* ===========================================================================
   12. Scroll-linked (SCROLLING_IN_VIEW) sections — main.js drives the
       transforms; these rules only supply the rest state and make sure a
       no-JS render is still laid out sensibly.
   =========================================================================== */
.js .works-wrap { will-change: transform; }
.js .featured-projects-single-card { will-change: transform; }
.js .story-image-wrap, .js .story-image { will-change: transform; }
.js .built-item-wrapper { will-change: transform; }
.js .exhibition-section, .js .exhibition-container { will-change: width, opacity; }
/* ===========================================================================
   13. Forms
   =========================================================================== */
[data-form-done], [data-form-fail] { display: none; }
[data-form-done]:not([hidden]) { display: block; }
[data-form-fail]:not([hidden]) { display: block; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color--primary-color); outline-offset: 1px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color--primary-color); outline-offset: 3px; }
/* ===========================================================================
   14. Reduced motion — hold every reveal at its final state.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .reveal-up,
  .js .reveal-left,
  .js .reveal-right,
  .js .reveal-grow,
  .js .reveal-grow-big,
  .js .reveal-blur,
  .js .reveal-blur-fast,
  .js .reveal-heading .animation-content {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .js .reveal-divider { width: 100%; transition: none; }
  .js .hero-intro,
  .js .hero-zoom { animation: none; }
  .roofing-image-wrap,
  .about-hero-image-wrap { animation: none; }
  .count-roll .counter-train,
  .count-roll .counter-train-two { transition: none; }
  .slider-track { transition: none; }
}