@charset "UTF-8";
:root {
  --regular-font-family: "Red Hat Text";
  --regular-font-style: normal;
  --h1: 200 clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem) / 1.3 "Red Hat Text";
  --h2: 800 clamp(2.03rem, calc(1.36rem + 3.36vw), 5.96rem) / 1.1 "Red Hat Text";
  --h3: 800 clamp(1.31rem, calc(1.24rem + 0.37vw), 1.5rem) / 1 "Red Hat Text";
  --title: 200 clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem) / 1.3 "Red Hat Text";
  --p: 400 clamp(1rem, calc(0.99rem + 0.1vw), 1.4rem) / 1.8 "Red Hat Text";
}

@font-face {
  font-family: "Red Hat Text";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/RedHatText-Regular.woff") format("woff2"), url("../fonts/RedHatText-Regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Text";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/RedHatText-Regular.woff2") format("woff2"), url("../fonts/RedHatText-Regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Text";
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/RedHatText-SemiBold.woff2") format("woff2"), url("../fonts/RedHatText-SemiBold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Text";
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/RedHatText-Bold.woff2") format("woff2"), url("../fonts/RedHatText-Bold.woff") format("woff");
  font-display: swap;
}
:root {
  --bsize: 1rem;
  --bsize-s: 0.7;
  --bsize-l: 1.9;
  --bsize-xl: 2.5;
  --border-size: 1px;
  --shadow:
    rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
  --spacing-x: 2rem;
  --spacing-y: 3rem;
  --position: 0rem;
  --hue: 0;
  --sat: 0%;
  --lit: 0%;
  --white: 100%;
  --light: 90%;
  --dark: 20%;
  --p-hue: 11;
  --p-sat: 100%;
  --p-lit: 58%;
  --s-hue: 190;
  --s-sat: 48%;
  --s-lit: 20%;
  --col-lighter: 25%;
  --brand-orange: hsl(11deg 100% 58%);
  --brand-petrol: hsl(190deg 48% 20%);
  --brand-beige: hsl(12deg 10% 90%);
  --bg-white: hsl(0deg 0% 100%);
  --card-pad: calc(var(--bsize) * 1.5);
}

.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.d-none {
  display: none;
}

.d-inline {
  display: inline-block;
}

.d-grid {
  display: grid;
}

@media (min-width: 576px) {
  .d-sm-flex {
    display: flex;
  }
  .d-sm-block {
    display: block;
  }
  .d-sm-none {
    display: none;
  }
  .d-sm-inline-block {
    display: inline-block;
  }
  .d-sm-grid {
    display: grid;
  }
}
@media (min-width: 768px) {
  .d-md-flex {
    display: flex;
  }
  .d-md-block {
    display: block;
  }
  .d-md-none {
    display: none;
  }
  .d-md-inline-block {
    display: inline-block;
  }
  .d-md-grid {
    display: grid;
  }
}
@media (min-width: 992px) {
  .d-lg-flex {
    display: flex;
  }
  .d-lg-block {
    display: block;
  }
  .d-lg-none {
    display: none;
  }
  .d-lg-inline-block {
    display: inline-block;
  }
  .d-ld-grid {
    display: grid;
  }
}
@media (min-width: 1200px) {
  .d-xl-flex {
    display: flex;
  }
  .d-xl-block {
    display: block;
  }
  .d-xl-none {
    display: none;
  }
  .d-xl-inline-block {
    display: inline-block;
  }
  .d-xl-grid {
    display: grid;
  }
}
@media (min-width: 1600px) {
  .d-xxl-flex {
    display: flex;
  }
  .d-xxl-block {
    display: block;
  }
  .d-xxl-none {
    display: none;
  }
  .d-xxl-inline-block {
    display: inline-block;
  }
  .d-xxl-grid {
    display: grid;
  }
}
.space-between {
  justify-content: space-between;
}

.place-center {
  place-content: center;
}

.justify-center {
  justify-content: center;
}

/* ==========================================================================
   175fp — lean base stylesheet
   Scope: design tokens (color/font), base reset, header, contact modal ONLY.
   The page grid (hero/statement/how/what/who/contact section layouts) is
   deliberately NOT included here — that's being rebuilt separately.

   This file replaces the equivalent rules from the old _novex.scss (12.7k
   lines), which had every property below re-declared 6-12x across three
   parallel, overlapping breakpoint systems:
     1) plain `@media (max-width: ...)` queries
     2) `html.iphone-bp-*` classes set by a JS UA-sniffing/matchMedia script
     3) a one-off `@media (hover:hover) and (pointer:fine) and (min-width:620px)
        and (max-width:980px)` "tablet with a mouse" tier
   Here each property gets ONE desktop value and ONE mobile (<=980px) value.
   Device-specific fixes are kept only where they're genuinely necessary
   (iOS 16px input font-size to prevent auto-zoom, mobile backdrop-filter
   removal for performance) — noted inline with why.
   ========================================================================== */
/* ---------- Fonts ---------- */
@font-face {
  font-family: "Red Hat Display Local";
  src: url("../fonts/Red_Hat_Display/RedHatDisplay-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono Local";
  src: url("../fonts/Red_Hat_Mono/RedHatMono-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* ---------- Design tokens ---------- */
:root {
  /* Color */
  --orange: #ff4e27;
  --petrol: #1b444c;
  --beige: #e9e5e4;
  --rgb-orange: 255, 78, 39;
  --rgb-petrol: 27, 68, 76;
  --rgb-beige: 233, 229, 228;
  --brand-hover-color: #c13a1f;
  --brand-hover-filter: brightness(0.72) saturate(1.08);
  /* Type */
  --font-display: "Red Hat Display Local", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Red Hat Mono Local", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --tracking-10: 0.1em;
  --tracking-20: 0.2em;
  /* Layout base */
  --page-space: 47px;
  --top-line-height: 1px;
  --path-line-weight: 1px;
  --header-height: 104px;
  --footer-height: 90px;
  --header-logo-full-width: 226px;
  --section-height: 100vh;
  --layout-width: min(calc(100vw - 90px), 1180px);
  --what-width: var(--layout-width);
  --contact-width: var(--layout-width);
  --what-stage-top: 87px;
  --what-stage-bottom: 0px;
  --statement-design-top: clamp(180px, 27.2vh, 236px);
  --statement-design-width: min(calc(100vw - 190px), 1040px);
  /* Language button */
  --language-hit-size: 42px;
  --language-flag-size: 32px;
  --language-ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 980px) {
  :root {
    --page-space: clamp(26px, 4.4vw, 42px);
    --header-height: 84px;
    --footer-height: 62px;
    --header-logo-full-width: 148px;
    --language-hit-size: 36px;
    --language-flag-size: 28px;
    --mobile-content-pad: clamp(76px, 10vw, 100px);
  }
}
/* ---------- Base reset ---------- */
* {
  box-sizing: border-box;
}

html {
  font-synthesis: none;
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 12px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--beige);
}

html.anchor-scroll-active,
html.anchor-scroll-active body {
  scroll-behavior: auto !important;
}

body,
html {
  color: var(--petrol);
  font-family: var(--font-display);
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior-x: none;
  background: var(--beige);
}

body.page-scroll-locked {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

button,
input,
select,
textarea {
  font-family: var(--font-display);
}

a,
button,
input,
label,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

/* A thin petrol accent line pinned to the very top of the viewport, above
   the header — the header's own `top` offset accounts for its height. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: var(--top-line-height);
  background: var(--petrol);
}

/* ==========================================================================
   Header
   ========================================================================== */
.skip-link {
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 10000;
  padding: 10px 14px;
  border: 1px solid var(--petrol);
  background: var(--beige);
  color: var(--petrol);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transform: translate(-50%, calc(-100% - 24px));
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

.site-header {
  position: fixed;
  top: var(--top-line-height);
  left: 0;
  z-index: 300;
  width: 100%;
  height: var(--header-height);
  padding: 0 var(--page-space);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--beige);
  border-bottom: 1px solid rgba(27, 68, 76, 0.1);
}

@media (max-width: 980px) {
  .site-header {
    top: 0;
    z-index: 900;
    height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
    padding: 0 max(var(--page-space), env(safe-area-inset-left, 0px)) 0 max(var(--page-space), env(safe-area-inset-right, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    box-shadow: 0 1px 0 rgba(27, 68, 76, 0.1);
  }
}
.logo-area {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  max-width: var(--header-logo-full-width);
  line-height: 0;
  text-decoration: none;
  color: var(--orange);
}

.header-logo-full {
  display: block;
  width: var(--header-logo-full-width);
  height: auto;
  max-width: 100%;
  margin: 0;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
  filter: none;
  transition: filter 220ms ease;
}

.logo-area:focus-visible .header-logo-full,
.logo-area:hover .header-logo-full {
  filter: var(--brand-hover-filter);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 38px;
  flex-shrink: 0;
}

@media (max-width: 980px) {
  .header-right {
    gap: 10px;
    margin-left: auto;
    flex: 0 0 auto;
  }
}
/* --- Desktop inline nav / mobile dropdown --- */
.main-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.main-nav a {
  display: inline-block;
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: var(--tracking-20);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 220ms ease, letter-spacing 220ms ease;
}

.main-nav a:focus-visible,
.main-nav a:hover {
  color: var(--brand-hover-color);
  letter-spacing: 0.24em;
}

@media (max-width: 980px) {
  .site-header .main-nav {
    position: fixed;
    top: calc(var(--header-height) + env(safe-area-inset-top, 0px) - 1px);
    right: max(var(--page-space), env(safe-area-inset-right, 0px));
    left: max(var(--page-space), env(safe-area-inset-left, 0px));
    z-index: 850;
    width: auto;
    max-height: calc(100vh - var(--header-height) - 16px);
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 12px;
    border: var(--path-line-weight) solid rgba(27, 68, 76, 0.24);
    border-radius: 16px;
    background: rgba(233, 229, 228, 0.96);
    box-shadow: 0 20px 58px rgba(27, 68, 76, 0.16), inset 1px 1px 2px rgba(255, 255, 255, 0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-14px) scale(0.985);
    transform-origin: top right;
    transition: opacity 240ms ease, visibility 240ms ease, transform 280ms var(--language-ease-premium);
  }
  body.mobile-nav-open .site-header .main-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .site-header .main-nav a {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 10px;
    letter-spacing: 3.2px;
    background: none;
    transition: background-color 220ms ease, color 220ms ease, letter-spacing 220ms ease;
  }
  .site-header .main-nav a:focus-visible,
  .site-header .main-nav a:hover {
    color: var(--orange);
    background: var(--petrol);
    letter-spacing: 3.6px;
    outline: 0;
  }
}
/* --- Hamburger toggle (mobile only) --- */
.menu-toggle {
  display: none;
}

@media (max-width: 980px) {
  .menu-toggle {
    order: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 72px;
    height: 38px;
    padding: 0 11px 0 13px;
    border: var(--path-line-weight) solid rgba(27, 68, 76, 0.32);
    border-radius: 999px;
    background: rgba(233, 229, 228, 0.86);
    color: var(--orange);
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 2.4px;
    cursor: pointer;
    appearance: none;
    box-shadow: inset 1px 1px 2px rgba(27, 68, 76, 0.05);
    transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
  }
  .menu-toggle:focus-visible,
  .menu-toggle:hover,
  body.mobile-nav-open .menu-toggle {
    border-color: rgba(27, 68, 76, 0.62);
    background: var(--petrol);
    color: var(--orange);
    outline: 0;
  }
  .menu-toggle-lines {
    position: relative;
    width: 16px;
    height: 10px;
    display: block;
  }
  .menu-toggle-lines span {
    position: absolute;
    left: 0;
    width: 16px;
    height: var(--path-line-weight);
    background: currentColor;
    transform-origin: center;
    transition: top 220ms ease, transform 260ms var(--language-ease-premium);
  }
  .menu-toggle-lines span:first-child {
    top: 2px;
  }
  .menu-toggle-lines span:last-child {
    top: 8px;
  }
  body.mobile-nav-open .menu-toggle-lines span:first-child {
    top: 5px;
    transform: rotate(42deg);
  }
  body.mobile-nav-open .menu-toggle-lines span:last-child {
    top: 5px;
    transform: rotate(-42deg);
  }
}
@media (max-width: 460px) {
  .menu-toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .menu-toggle {
    min-width: 38px;
    width: 38px;
    padding: 0;
  }
}
/* --- Language switch link (a real <a>, not JS-toggled — see novex.js) --- */
.language-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--language-hit-size);
  height: var(--language-hit-size);
  flex: 0 0 var(--language-hit-size);
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: transparent;
  cursor: pointer;
  appearance: none;
  transform: translateZ(0) scale(1);
  transition: transform 260ms var(--language-ease-premium);
}

.language-button:focus-visible,
.language-button:hover {
  transform: translateZ(0) scale(1.055);
}

.language-button:active {
  transform: translateZ(0) scale(0.965);
}

.language-button-inner {
  position: relative;
  z-index: 1;
  width: var(--language-flag-size);
  height: var(--language-flag-size);
  flex: 0 0 var(--language-flag-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
}

.language-icon {
  display: block;
  width: 100%;
  height: 100%;
  transform: translateZ(0) scale(1) rotate(0deg);
  transition: transform 260ms var(--language-ease-premium), opacity 180ms ease;
}

.language-button:focus-visible .language-icon,
.language-button:hover .language-icon {
  transform: translateZ(0) scale(1.045) rotate(-1.5deg);
}

.language-icon-flag {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Shows the flag of the language you'd switch TO, not the current one. */
.language-button[data-current-language=de] .language-icon-flag-en,
.language-button[data-current-language=en] .language-icon-flag-de {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .language-button,
  .language-button-inner,
  .language-icon {
    transition: none;
  }
}
.language-button:focus-visible,
.logo-area:focus-visible,
.main-nav a:focus-visible,
.menu-toggle:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 5px;
}

/* ==========================================================================
   Contact modal
   Shown/hidden by js/novex.js's openContactOverlay()/closeContactOverlay():
     - `hidden` attribute: hard display:none, set/cleared at the animation
       boundary (not immediately) so the close transition can play out.
     - `.contact-form-section.contact-overlay.is-active`: the actual
       opacity/visibility/transform state driving the open/close animation.
     - `body.contact-overlay-open`: locks page scroll + blurs the header/
       footer behind the modal. Unrelated to the modal's own visibility.
   ========================================================================== */
.contact-form-section.contact-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  width: 100vw;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: none;
  isolation: isolate;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 460ms;
}

.contact-form-section.contact-overlay.is-active {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

html body .contact-form-section.contact-overlay[hidden] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.contact-overlay-open {
  overflow: hidden;
}

body.contact-overlay-open .site-footer,
body.contact-overlay-open .site-header {
  filter: blur(1px);
}

@media (max-width: 980px) {
  .contact-form-section.contact-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 4vw, 28px);
  }
  /* No room to spare on mobile — skip the header/footer blur-behind effect. */
  body.contact-overlay-open .site-footer,
  body.contact-overlay-open .site-header {
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-form-section.contact-overlay,
  .contact-form-stage,
  .contact-overlay-backdrop,
  .contact-overlay-close,
  .contact-phone-field {
    transition: none !important;
    animation: none !important;
  }
}
.contact-overlay-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: linear-gradient(135deg, rgba(233, 229, 226, 0.94), rgba(233, 229, 226, 0.84)), rgba(27, 68, 76, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 320ms ease;
}

.contact-form-section.contact-overlay.is-active .contact-overlay-backdrop {
  opacity: 1;
}

@media (max-width: 980px) {
  /* backdrop-filter blur is expensive on mobile GPUs — drop it there */
  .contact-overlay-backdrop {
    background: rgba(233, 229, 226, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.contact-form-stage {
  position: relative;
  z-index: 2;
  width: min(100vw - 88px, 1140px);
  max-height: calc(100dvh - 70px);
  padding: clamp(34px, 4.6vh, 50px) clamp(38px, 4.8vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(390px, 1.12fr);
  column-gap: clamp(44px, 5.4vw, 78px);
  align-items: start;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: rgba(233, 229, 226, 0.985);
  border: 1px solid rgba(27, 68, 76, 0.23);
  border-radius: 18px;
  box-shadow: 0 30px 82px rgba(27, 68, 76, 0.18);
  opacity: 0;
  transform: translateY(30px) scale(0.985);
  transition: opacity 300ms ease, transform 440ms var(--language-ease-premium);
}

.contact-form-stage::-webkit-scrollbar {
  display: none;
}

.contact-form-section.contact-overlay.is-active .contact-form-stage {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 980px) {
  .contact-form-stage {
    width: 100%;
    max-width: 620px;
    height: auto;
    max-height: calc(100dvh - 28px);
    padding: 28px 22px;
    grid-template-columns: 1fr;
    row-gap: 32px;
    border-radius: 14px;
  }
  .contact-form-stage {
    transform: translateY(24px) scale(1);
  }
}
.contact-overlay-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 8;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(27, 68, 76, 0.32);
  border-radius: 50%;
  background: none;
  color: var(--orange);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-5px) scale(0.86);
  transition: opacity 220ms ease, transform 420ms var(--language-ease-premium), border-color 220ms ease, background-color 220ms ease, color 220ms ease;
}

.contact-form-section.contact-overlay.is-active .contact-overlay-close {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.contact-overlay-close:active {
  transform: scale(0.93);
}

.contact-overlay-close:focus-visible {
  outline: 1px solid var(--orange);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .contact-overlay-close:hover {
    border-color: var(--petrol);
    background: var(--petrol);
    color: var(--orange);
  }
  .contact-overlay-close:hover .contact-overlay-close-icon {
    transform: rotate(90deg);
  }
}
.contact-overlay-close-icon {
  position: relative;
  width: 15px;
  height: 15px;
  display: block;
  color: currentColor;
  transform: rotate(-45deg);
  transition: transform 360ms var(--language-ease-premium);
}

.contact-form-section.contact-overlay.is-active .contact-overlay-close-icon {
  transform: rotate(0deg);
}

.contact-overlay-close-icon > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 1.25px;
  display: block;
  border-radius: 999px;
  background: currentColor;
}

.contact-overlay-close-icon > span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.contact-overlay-close-icon > span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 980px) {
  .contact-overlay-close {
    top: 12px;
    right: 12px;
    background: rgba(233, 229, 226, 0.94);
  }
}
.contact-form-ghost {
  position: relative;
  pointer-events: none;
  padding: 72px 0 0;
}

.contact-form-ghost-marker {
  position: absolute;
  top: 1px;
  left: 1px;
  z-index: 2;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  background: var(--petrol);
  border: 1px solid rgba(27, 68, 76, 0.9);
  transform: rotate(45deg);
  transform-origin: 50% 50%;
}

.contact-form-ghost-marker > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding-left: 0.12em;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--orange);
  transform: rotate(-45deg);
}

.contact-form-ghost-message {
  margin: 0 0 clamp(46px, 6.2vh, 70px);
  max-width: 440px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(14px, 1.06vw, 17px);
  line-height: 1.74;
  letter-spacing: clamp(4px, 0.43vw, 6.8px);
  color: rgba(255, 78, 39, 0.76);
}

.contact-form-ghost-copy {
  margin: 0;
  max-width: 455px;
  font-family: var(--font-display);
  font-size: clamp(13px, 0.98vw, 15.5px);
  line-height: 1.86;
  letter-spacing: clamp(2px, 0.28vw, 3.8px);
  color: rgba(27, 68, 76, 0.76);
}

@media (max-width: 980px) {
  .contact-form-ghost {
    display: none;
  }
}
.contact-form-panel {
  position: relative;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 360ms var(--language-ease-premium) 80ms, transform 360ms var(--language-ease-premium) 80ms;
}

.contact-form-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.contact-overlay-kicker {
  margin: 0 0 34px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 5px;
  color: var(--orange);
  text-transform: uppercase;
}

.contact-overlay-title {
  margin: 0 0 28px;
  max-width: 560px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 2.25vw, 30px);
  line-height: 1.2;
  letter-spacing: clamp(4px, 0.55vw, 7px);
  color: var(--petrol);
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .contact-overlay-kicker {
    margin-bottom: 20px;
    letter-spacing: 3px;
  }
  .contact-overlay-title {
    margin-bottom: 20px;
    font-size: 22px;
    letter-spacing: 3px;
  }
}
.contact-form {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.contact-field {
  display: block;
  width: 100%;
  height: 49px;
  margin: 0 0 8px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid rgba(27, 68, 76, 0.82);
  outline: 0;
  background: none;
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  background-image: linear-gradient(90deg, var(--orange), var(--orange));
  color: var(--petrol);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0.055em;
  appearance: none;
  transition: border-color 260ms ease, background-size 360ms var(--language-ease-premium), transform 260ms var(--language-ease-premium);
}

.contact-field.has-value,
.contact-field:focus {
  background-size: 100% 1px;
  border-bottom-color: rgba(var(--rgb-orange), 0.45);
}

.contact-field:hover {
  border-bottom-color: rgba(27, 68, 76, 0.95);
}

.contact-field:focus {
  transform: translateY(-2px);
}

.contact-field::placeholder {
  color: var(--petrol);
  opacity: 0.84;
  transition: opacity 220ms ease, letter-spacing 220ms ease;
}

.contact-field:focus::placeholder {
  opacity: 0.46;
  letter-spacing: 1.75px;
}

.contact-message-editor {
  position: relative;
  width: 100%;
  margin: 4px 0 10px;
  border-bottom: 1px solid rgba(27, 68, 76, 0.72);
  transition: border-color 220ms ease, background-color 220ms ease;
}

.contact-message-editor:focus-within {
  border-bottom-color: var(--orange);
  background: linear-gradient(180deg, transparent 0, rgba(255, 255, 255, 0.11) 100%);
}

.contact-message-field {
  display: block;
  width: 100%;
  height: 116px;
  margin: 0;
  padding: 14px 4px 16px;
  border: 0;
  outline: 0;
  background: none;
  line-height: 1.62;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(27, 68, 76, 0.32) transparent;
}

.contact-message-field::-webkit-scrollbar {
  width: 4px;
}

.contact-message-field::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(27, 68, 76, 0.32);
}

/* Prevents iOS Safari's auto-zoom-on-focus for inputs under 16px. */
html.is-ios .contact-field,
html.is-ios .contact-message-field {
  font-size: 16px;
}

.contact-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.12em;
  color: var(--orange);
  text-transform: uppercase;
  --contact-check-marker-width: 5.25em;
}

.contact-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-check > span {
  position: relative;
  display: block;
  width: 100%;
  padding-left: calc(var(--contact-check-marker-width) + 10px);
}

.contact-check > span::before {
  content: "[   ]";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--contact-check-marker-width);
  font-family: var(--font-mono);
  letter-spacing: 0.13em;
  white-space: pre;
  color: var(--orange);
  transition: color 220ms ease;
}

.contact-check:hover > span::before {
  letter-spacing: 0.15em;
}

.contact-check input:focus-visible + span::before {
  color: var(--petrol);
}

.contact-check input:checked + span::before {
  content: "[ X ]";
  color: var(--petrol);
}

.contact-callback-check {
  margin: 25px 0 0;
}

.contact-privacy-check {
  margin: 18px 0 0;
  max-width: none;
}

.contact-privacy-check a {
  color: var(--orange);
  text-decoration: none;
}

.contact-privacy-check a:hover {
  color: var(--petrol);
}

.contact-privacy-check a:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 5px;
}

/* "Request a callback" field — revealed when the callback checkbox is
   checked (see js/novex.js). Not the honeypot; that's .contact-honeypot-field
   below, which needs no CSS at all, it's just the native [hidden] attribute. */
.contact-phone-field {
  display: block;
  width: 100%;
  height: 58px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 320ms var(--language-ease-premium), visibility 0s linear 320ms;
}

.contact-phone-field > .contact-field {
  height: 49px;
  margin: 0;
}

.contact-phone-field.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 220ms ease, transform 320ms var(--language-ease-premium), visibility 0s linear 0s;
}

@media (max-width: 980px) {
  .contact-phone-field {
    height: 46px;
  }
}
.contact-form-status {
  min-height: 20px;
  margin: 24px 0 -10px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: 2.2px;
  color: var(--petrol);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease, color 220ms ease;
}

.contact-form-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.contact-form-status.is-success {
  color: var(--petrol);
}

.contact-form-status.is-error {
  color: var(--orange);
  font-family: var(--font-display);
}

.contact-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  margin-top: 32px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--petrol);
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  transition: color 250ms ease, letter-spacing 250ms ease, background-color 250ms ease;
}

.contact-submit:hover {
  color: #ff4e27;
  letter-spacing: 5.5px;
}

.contact-submit:focus-visible {
  outline: 1px solid var(--orange);
  outline-offset: 6px;
}

.contact-submit::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: -34%;
  bottom: 0;
  width: 34%;
  height: 2px;
  border-radius: 999px;
  background: var(--orange);
  opacity: 0;
}

.contact-submit.is-sending {
  color: var(--petrol);
  background-color: rgba(27, 68, 76, 0.045);
  background-image: linear-gradient(100deg, transparent 0, transparent 35%, rgba(255, 78, 39, 0.13) 50%, transparent 65%, transparent 100%);
  background-size: 220% 100%;
  cursor: wait;
  animation: contactSubmitSweepV7 920ms linear infinite, contactSubmitBreathV7 640ms ease-in-out infinite alternate;
}

.contact-submit.is-sending::after {
  opacity: 1;
  animation: contactSubmitLineV7 920ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.contact-submit.is-success {
  color: var(--orange);
  background: var(--petrol);
  letter-spacing: 0.28em;
  animation: contactSubmitThanksV7 440ms var(--language-ease-premium) both;
}

.contact-submit.is-success::after {
  opacity: 0;
  animation: none;
}

.contact-submit.is-invalid {
  animation: contactSubmitInvalidV7 340ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes contactSubmitSweepV7 {
  0% {
    background-position: 130% 0;
  }
  100% {
    background-position: -30% 0;
  }
}
@keyframes contactSubmitBreathV7 {
  0% {
    opacity: 0.85;
  }
  100% {
    opacity: 1;
  }
}
@keyframes contactSubmitLineV7 {
  0% {
    left: -34%;
  }
  100% {
    left: 100%;
  }
}
@keyframes contactSubmitThanksV7 {
  0% {
    opacity: 0.35;
    transform: scale(0.985);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes contactSubmitInvalidV7 {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-submit,
  .contact-submit::after {
    animation: none !important;
  }
}
/* ==========================================================================
   Section shells
   Outer box model only — position, height, overflow, background, and each
   section's single "stage"/"content" wrapper. The actual grid/layout of
   what goes inside each stage is intentionally NOT here; that's being
   rebuilt separately. Desktop uses the original design's fixed-height
   (var(--section-height), i.e. 100vh), each section's inner "stage" element
   absolutely positioned/centered within it; ≤980px collapses every section
   to normal block flow instead, since there's no room to pin things to
   exact coordinates on a small screen.
   ========================================================================== */
main {
  display: block;
}

section {
  position: relative;
  width: 100%;
  display: block;
}

.statement-content {
  position: absolute;
  top: var(--statement-design-top);
  left: 50%;
  width: var(--statement-design-width);
  max-width: var(--statement-design-width);
  min-height: 0;
  display: block;
  text-align: center;
  transform: translateX(-50%);
}

.how-section {
  position: relative;
  height: var(--section-height);
  padding-top: var(--header-height);
  padding-bottom: var(--footer-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.how-panel {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

.how-content {
  width: 100%;
  height: 100%;
  padding: 38px var(--page-space) 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Content is vertically centered on tall viewports so it doesn't sit
   pinned to the top with a lot of empty space below it. */
@media (min-width: 981px) and (min-height: 1000px) {
  .how-content {
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media (max-width: 980px) {
  .how-section {
    position: relative;
    height: auto;
    min-height: 0;
    display: block;
    background: var(--beige);
  }
  .how-panel,
  .how-content {
    position: relative;
    inset: auto;
    max-width: none;
    min-height: 0;
    height: auto;
    transform: none;
  }
}
.what-section {
  position: relative;
  height: var(--section-height);
  overflow: hidden;
}

.what-stage {
  position: absolute;
  top: var(--what-stage-top);
  bottom: var(--what-stage-bottom);
  left: 50%;
  width: var(--what-width);
  transform: translateX(-50%);
}

@media (max-width: 980px) {
  .what-section {
    position: relative;
    height: auto;
    min-height: 0;
    display: block;
    background: var(--beige);
  }
  .what-stage {
    position: relative;
    inset: auto;
    max-width: none;
    min-height: 0;
    height: auto;
    transform: none;
  }
}
/* Basic stacking so the .what-row articles don't collide inside the fixed-
   height .what-section — not a tuned design, just keeps them apart. */
.what-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 40px);
}

.what-title {
  margin: 0 0 8px;
}

.what-copy {
  margin: 0;
}

.how-continuation-section {
  position: relative;
  height: var(--section-height);
  overflow: hidden;
  isolation: isolate;
}

.how-continuation-stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--what-width);
  transform: translateX(-50%);
}

@media (max-width: 980px) {
  .how-continuation-section {
    position: relative;
    height: auto;
    min-height: 0;
    display: block;
    background: var(--beige);
  }
  .how-continuation-stage {
    position: relative;
    inset: auto;
    max-width: none;
    min-height: 0;
    height: auto;
    transform: none;
  }
}
.what-core-stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--what-width);
  transform: translateX(-50%);
}

.what-extension-section {
  position: relative;
  height: var(--section-height);
  overflow: hidden;
}

.what-extension-stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--what-width);
  transform: translateX(-50%);
}

@media (max-width: 980px) {
  .what-extension-section {
    position: relative;
    height: auto;
    min-height: 0;
    display: block;
    background: var(--beige);
  }
  .what-extension-stage {
    position: relative;
    inset: auto;
    max-width: none;
    min-height: 0;
    height: auto;
    transform: none;
  }
}
.who-section {
  position: relative;
  height: var(--section-height);
  overflow: hidden;
  isolation: isolate;
}

.who-stage {
  position: absolute;
  inset: 0 auto 0 50%;
  width: var(--what-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: translateX(-50%);
}

@media (max-width: 980px) {
  .who-section {
    position: relative;
    height: auto;
    min-height: 0;
    display: block;
    background: var(--beige);
  }
  .who-stage {
    position: relative;
    inset: auto;
    max-width: none;
    min-height: 0;
    height: auto;
    transform: none;
  }
}
.contact-section {
  position: relative;
  height: var(--section-height);
  overflow: hidden;
  isolation: isolate;
}

.contact-stage {
  position: absolute;
  inset: 0 auto 0 50%;
  width: var(--contact-width);
  transform: translateX(-50%);
}

@media (max-width: 980px) {
  .contact-section {
    padding-top: clamp(72px, 11vw, 104px);
  }
  .contact-stage {
    position: relative;
    inset: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: clamp(38px, 7vw, 62px);
    max-width: none;
    min-height: 0;
    height: auto;
    padding-left: var(--mobile-content-pad);
    padding-bottom: calc(var(--mobile-contact-cta-gap, 36px) + var(--mobile-contact-cta-height, 44px) + 28px);
    overflow: visible;
    transform: none;
  }
  .contact-section {
    overflow: hidden;
    padding-bottom: clamp(128px, 22vw, 176px);
  }
}
/* The small fixed "[ CONTACT US DIRECTLY ]" pill that stays docked to the
   bottom of the viewport (see footer-cta-main.kit) — not the legal footer
   below it. */
.site-footer {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 300;
  width: 100%;
  height: var(--footer-height);
  padding: 0 var(--page-space);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: none;
  pointer-events: none;
}

.closing-footer-section {
  position: relative;
  min-height: 0;
  height: auto;
  padding: 24px 0 22px;
  overflow: hidden;
  background: var(--petrol);
  color: var(--beige);
}

.closing-footer-stage {
  position: relative;
  z-index: 2;
  width: var(--layout-width);
  min-height: 0;
  height: auto;
  margin: 0 auto;
  display: block;
}

.closing-footer-bottom {
  margin: 0;
  padding: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
}

.closing-footer-copy {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.055em;
  color: rgba(var(--rgb-beige), 0.92);
}

.closing-footer-copy span:nth-child(2) {
  font-weight: 300;
  color: var(--orange);
}

.closing-footer-legal {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.closing-footer-legal a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 2.8px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 180ms ease, filter 180ms ease;
}

.closing-footer-legal a:hover,
.closing-footer-legal a:focus-visible {
  color: var(--orange);
  filter: brightness(0.84) saturate(1.08);
}

/* The sticky CTA pill and the legal footer occupy the same bottom-right
   corner on mobile — hide the pill whenever the legal footer (or the
   contact modal/docked state) is showing instead. */
body.contact-docked .site-footer a,
body.contact-static-cta-visible .site-footer a,
body.closing-footer-visible .site-footer a {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 980px) {
  .closing-footer-section {
    position: relative;
    z-index: 40;
    display: block;
    width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 24px var(--page-space) calc(24px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }
  .closing-footer-stage {
    width: 100%;
    max-width: 760px;
  }
  .closing-footer-bottom {
    justify-content: center;
    gap: 16px;
    text-align: center;
  }
  .closing-footer-copy {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
}
@media (max-width: 520px) {
  .closing-footer-bottom {
    flex-direction: column;
    gap: 9px;
  }
  .closing-footer-copy {
    width: 100%;
    font-size: 12px;
  }
  .closing-footer-legal {
    width: 100%;
    justify-content: center;
  }
}
/* NOTE: .impressum-section/.impressum-stage and .status-section/.status-stage
   (used by impressum.kit, gesendet.kit, 404.kit) have ZERO rules anywhere in
   the original _novex.scss — verified, not an oversight. Those pages have no
   shell CSS to port; they'll need one designed fresh rather than imported. */
/* ==========================================================================
   Content typography — font-family/font-weight only
   _novex.scss assigns these per selector in ~15 separate, sometimes
   contradicting passes (earlier passes gave most "technical label" elements
   var(--font-mono); a late !important pass near the end of the file, marked
   "FINAL v16" in its own comment, flipped most of them back to
   var(--font-display) at weight 300 — only the actual step-number digits
   and the hero/statement-claim big statement stayed mono). What's below is
   the resolved end state of that cascade, not a literal copy of any one
   rule. Font only — size/spacing/color for the grid content is yours to set.
   ========================================================================== */
.statement-copy,
.statement-lead,
.what-copy,
.what-core-copy,
.what-extension-copy,
.how-copy p,
.who-card p,
.contact-copy,
.how-continuation-copy {
  font-family: var(--font-display);
  font-weight: 400;
}

.how-heading,
.how-heading-line,
.what-core-intro h2,
.what-intro h2,
.who-intro h2 {
  font-family: var(--font-display);
  font-weight: 300;
}

.statement-claim {
  font-family: var(--font-mono);
  font-weight: 300;
  letter-spacing: 0.2em;
}

/* Small-caps technical labels: section tags, nav/footer links, buttons. */
.how-tag,
.what-tag,
.what-core-tag,
.who-tag,
.who-card-claim,
.contact-anchor-label,
.contact-anchor-button,
.contact-message,
.closing-footer-legal a,
.text-orange {
  font-family: var(--font-display);
  font-weight: 300;
}

/* The step/marker digits themselves ("01", "07", "13"…) stay mono. */
.marker-diamond > span,
.what-core-step > span,
.what-extension-step > span,
.what-step > span,
.who-step > span,
.how-continuation-step > span,
.contact-step > span {
  font-family: var(--font-mono);
  font-weight: 300;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  pointer-events: auto;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 300;
  width: 100%;
}
@media (min-width: 992px) {
  .site-footer a {
    width: auto;
  }
}

.site-footer a .contact-cta-badge {
  display: none;
}

.site-footer a .contact-cta-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 2.4px;
  color: var(--orange);
  background-color: var(--petrol);
  text-transform: uppercase;
  transition: color 180ms ease, filter 180ms ease;
}
@media (min-width: 992px) {
  .site-footer a .contact-cta-label {
    font-size: 12px;
    background-color: transparent;
  }
}

.site-footer a:hover,
.site-footer a:focus-visible {
  letter-spacing: inherit;
  transform: none;
}

.site-footer a.is-near-page-end,
.contact-static-cta.is-near-page-end {
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.site-footer a:hover .contact-cta-label,
.site-footer a:focus-visible .contact-cta-label {
  color: var(--brand-hover-color, #c13a1f);
  filter: brightness(0.86) saturate(1.08);
}

@media (max-width: 980px) {
  .site-footer a .contact-cta-label {
    font-size: 10px;
    letter-spacing: 2px;
    width: 100%;
    text-align: center;
    padding: 1rem;
    border-radius: 2rem;
  }
}
.closing-footer-legal a {
  color: var(--orange);
}

.fin-hero {
  display: flex;
  align-content: center;
  align-items: center;
}
.fin-hero h1 {
  font-size: 1.3rem;
  padding: 17rem 2rem;
}
@media (min-width: 992px) {
  .fin-hero h1 {
    padding: 2rem 2rem;
  }
}

h1 {
  font-family: var(--font-mono);
  font-weight: 300;
  letter-spacing: 0.2em;
  font-size: clamp(1.2rem, 1.36vw, 13.2px);
  text-align: center;
  width: 100%;
}
@media (min-width: 992px) {
  h1 {
    font-size: clamp(18px, 1.48vw, 20px);
  }
}

p {
  font-size: clamp(18px, 1.52vw, 20px);
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: 0.065em;
}

.orange {
  color: var(--orange);
}

.diamond {
  position: relative;
  width: 30px;
  height: 30px;
  font-size: 10px;
  background-color: transparent;
  transform: rotate(45deg);
  margin: 0 auto;
  background-color: var(--beige);
  border: 1px solid var(--petrol);
  z-index: 1;
}
@media (min-width: 992px) {
  .diamond {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}
@media (min-width: 1600px) {
  .diamond {
    width: 50px;
    height: 50px;
  }
}
.diamond span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  font-family: var(--font-mono);
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--orange);
}
.diamond.absolute {
  position: absolute;
}
.diamond.center {
  left: -15px;
}
@media (min-width: 992px) {
  .diamond.center {
    left: calc(50% - 20px);
  }
}
@media (min-width: 1600px) {
  .diamond.center {
    left: calc(50% - 25px);
  }
}
.diamond.center-all {
  left: calc(50% - 15px);
}
@media (min-width: 992px) {
  .diamond.center-all {
    left: calc(50% - 20px);
  }
}
@media (min-width: 1600px) {
  .diamond.center-all {
    left: calc(50% - 25px);
  }
}
.diamond.top {
  top: 5rem;
}
@media (min-width: 992px) {
  .diamond.top {
    top: -20px;
  }
}
@media (min-width: 1600px) {
  .diamond.top {
    top: -25px;
  }
}
.diamond.bottom {
  bottom: -15px;
}
@media (min-width: 992px) {
  .diamond.bottom {
    bottom: -20px;
  }
}
@media (min-width: 1600px) {
  .diamond.bottom {
    bottom: -25px;
  }
}
.diamond.left {
  left: -15px;
}
@media (min-width: 768px) {
  .diamond.left {
    left: -1rem;
  }
}
@media (min-width: 992px) {
  .diamond.left {
    left: -6.25rem;
  }
}
@media (min-width: 1600px) {
  .diamond.left {
    left: -6.55rem;
  }
}
.diamond.center-left {
  left: 1.15rem;
  top: 10px;
}
@media (min-width: 768px) {
  .diamond.center-left {
    left: 1.1rem;
  }
}
@media (min-width: 992px) {
  .diamond.center-left {
    left: calc(50% - 20px);
  }
}
@media (min-width: 1600px) {
  .diamond.center-left {
    left: calc(50% - 25px);
  }
}
.diamond.hardleft {
  left: 1.15rem;
  top: -1rem;
}
@media (min-width: 992px) {
  .diamond.hardleft {
    left: 3.75rem;
    top: -1.25rem;
  }
}
@media (min-width: 1600px) {
  .diamond.hardleft {
    left: 3.5rem;
    top: -1.5rem;
  }
}

.what-section.craft::before {
  display: none;
}
.what-section.craft .what-row {
  position: relative;
  margin-top: 10rem;
  top: 0;
}
.what-section.craft .what-row:nth-child(2),
.what-section.craft .what-row:nth-child(3) {
  position: relative;
  top: 0;
  margin-top: 4rem;
}

.bg-petrol {
  background-color: var(--petrol);
}

.txt-beige {
  color: var(--beige);
}

.txt-orange {
  color: var(--orange);
}

.fs-sm {
  font-size: 0.75rem;
  letter-spacing: clamp(2.4px, 0.62vw, 5.6px);
}

.fs-xs {
  font-size: 10px;
  letter-spacing: 0.2rem;
}

.dia-two {
  position: absolute;
  top: -68px;
  left: calc(50% - 36px);
  z-index: 99;
}

.dia-three {
  position: absolute;
  top: -68px;
  left: calc(50% - 36px);
  z-index: 99;
}
.dia-three .marker-line-top {
  top: -100px;
  height: 200px;
}

.w-100 {
  width: 100%;
}

.bg-white {
  background-color: #efeceb;
}

.shadow-sm {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

.craft .contact-submit {
  color: #fff;
  opacity: 1;
  font-size: 0.8rem;
  padding: 1.8rem;
  font-weight: 800;
}

.inlinelogo img {
  width: 40px;
  margin: 0 5px;
}

.txt-center {
  text-align: center;
}

.fw-light {
  font-weight: 300;
}

.fw-bold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.fs-lead {
  font-size: 1.4rem;
}
@media (min-width: 992px) {
  .fs-lead {
    font-size: 1.6rem;
  }
}

.fs-txt {
  font-size: 1rem;
}

.ls-md {
  letter-spacing: 0.1rem;
}

.ls-lg {
  letter-spacing: 0.2rem;
}

.ls-xl {
  letter-spacing: 0.2rem;
}
@media (min-width: 992px) {
  .ls-xl {
    letter-spacing: 0.4rem;
  }
}

.f-mono {
  font-family: var(--font-mono);
}

.a-end {
  align-items: flex-end;
}

.b-l {
  border-left: 1px solid var(--petrol);
}

.b-r {
  border-right: 1px solid var(--petrol);
}

.b-t {
  border-top: 1px solid var(--petrol);
}

.b-b {
  border-bottom: 1px solid var(--petrol);
}

.b-b-lg {
  border-bottom: 0px solid var(--petrol);
}
@media (min-width: 992px) {
  .b-b-lg {
    border-bottom: 1px solid var(--petrol);
  }
}

.b-l-r {
  border-left: 1px solid var(--petrol);
}
@media (min-width: 992px) {
  .b-l-r {
    border-left: none;
    border-right: 1px solid var(--petrol);
  }
}

.bt-r,
.bt-l {
  position: relative;
}
.bt-r::before,
.bt-l::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 1px;
  background: currentColor;
}

.bt-r::before {
  left: auto;
  right: 0;
}

.bb-r::after,
.bb-l::after {
  display: none;
}
@media (min-width: 992px) {
  .bb-r,
  .bb-l {
    position: relative;
  }
  .bb-r::after,
  .bb-l::after {
    display: block;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 1px;
    background: currentColor;
  }
}

.bb-r::after {
  right: 0;
  left: auto;
}

.bc {
  position: relative;
  border-left: 1px solid var(--petrol);
  border-left: none;
}
.bc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: currentColor;
}

@media (min-width: 992px) {
  .bc-lg {
    position: relative;
    border-left: 1px solid var(--petrol);
    border-left: none;
  }
  .bc-lg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: currentColor;
  }
}
.b-light {
  border-color: var(--beige);
}

.h-10 {
  height: 10rem;
}

.h-20 {
  height: 20rem;
}

.herosec {
  height: 100vh;
  margin-bottom: -10rem;
}
@media (min-width: 992px) {
  .herosec {
    margin-bottom: -20rem;
  }
}

.hero-path-triangle {
  top: 0;
  width: 0;
  height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-top: 22px solid rgb(27, 68, 76);
  margin-bottom: -1rem;
  display: block;
  margin-inline: auto;
  z-index: 2;
  position: relative;
}

.buttons {
  background: var(--petrol);
  padding: 10px 20px;
  border-radius: 4px;
  color: var(--orange);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.2rem;
  z-index: 1;
  display: inline-block;
  height: auto;
  font-weight: bold;
  width: 100%;
  text-align: center;
}
.buttons:hover {
  background: var(--orange);
  color: var(--petrol);
}
@media (min-width: 992px) {
  .buttons {
    width: fit-content;
  }
}

.relative {
  position: relative;
}

.h-100 {
  height: 100%;
}

.bradius-sm {
  border-radius: 0.5rem;
}

ul li {
  line-height: 2;
  letter-spacing: 1px;
}

.container-sm,
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

@media (min-width: 768px) {
  .container-sm,
  .container {
    max-width: 900px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1600px) {
  .container {
    max-width: 1320px;
  }
}
section:first-of-type {
  margin-top: 0;
  min-height: calc(100vh - 151px);
  text-align: center;
  align-content: center;
}
@media (min-width: 768px) {
  section {
    padding: 2rem;
  }
}

section.no-bg + section.no-bg {
  padding-top: 0;
}

.section-title {
  margin-bottom: calc(var(--bsize) * 3);
}

@media (min-width: 768px) {
  section {
    padding: calc(var(--spacing-y) * 3) 4rem;
  }
  section:first-of-type {
    margin-top: 0;
    text-align: left;
  }
}
.m-0 {
  margin: 0;
}

.m-s {
  margin: calc(var(--bsize) * var(--bsize-s));
}

.mt-s {
  margin-top: calc(var(--bsize) * var(--bsize-s));
}

.mr-s {
  margin-right: calc(var(--bsize) * var(--bsize-s));
}

.mb-s {
  margin-bottom: calc(var(--bsize) * var(--bsize-s));
}

.ml-s {
  margin-left: calc(var(--bsize) * var(--bsize-s));
}

.mx-auto {
  margin-inline: auto;
}

.m-m {
  margin: var(--bsize);
}

.mt-m {
  margin-top: var(--bsize);
}

.mr-m {
  margin-right: var(--bsize);
}

.mb-m {
  margin-bottom: var(--bsize);
}

.ml-m {
  margin-left: var(--bsize);
}

.m-lg {
  margin: calc(var(--bsize) * var(--bsize-l));
}

.mt-lg {
  margin-top: calc(var(--bsize) * var(--bsize-l));
}

.mr-lg {
  margin-right: calc(var(--bsize) * var(--bsize-l));
}

.mb-lg {
  margin-bottom: calc(var(--bsize) * var(--bsize-l));
}

.ml-lg {
  margin-left: calc(var(--bsize) * var(--bsize-l));
}

.m-xl {
  margin: calc(var(--bsize) * var(--bsize-xl));
}

.mt-xl {
  margin-top: calc(var(--bsize) * var(--bsize-xl));
}

.mr-xl {
  margin-right: calc(var(--bsize) * var(--bsize-xl));
}

.mb-xl {
  margin-bottom: calc(var(--bsize) * var(--bsize-xl));
}

.ml-xl {
  margin-left: calc(var(--bsize) * var(--bsize-xl));
}

.p-0 {
  padding: 0 !important;
}

.p-s {
  padding: calc(var(--bsize) * var(--bsize-s));
}

.pt-s {
  padding-top: calc(var(--bsize) * var(--bsize-s));
}

.pr-s {
  padding-right: calc(var(--bsize) * var(--bsize-s));
}

.pb-s {
  padding-bottom: calc(var(--bsize) * var(--bsize-s));
}

.pl-s {
  padding-left: calc(var(--bsize) * var(--bsize-s));
}

.p-md {
  padding: var(--bsize);
}

.pt-md {
  padding-top: var(--bsize);
}

.pr-md {
  padding-right: var(--bsize);
}

.pb-md {
  padding-bottom: var(--bsize);
}

.pl-md {
  padding-left: var(--bsize);
}

.p-lg {
  padding: calc(var(--bsize) * var(--bsize-l));
}

.pt-lg {
  padding-top: calc(var(--bsize) * var(--bsize-l));
}

.pr-lg {
  padding-right: calc(var(--bsize) * var(--bsize-l));
}

.pb-lg {
  padding-bottom: calc(var(--bsize) * var(--bsize-l));
}

.pl-lg {
  padding-left: calc(var(--bsize) * var(--bsize-l));
}

.p-xl {
  padding: calc(var(--bsize) * var(--bsize-xl));
}

.pt-xl {
  padding-top: calc(var(--bsize) * var(--bsize-xl));
}

.pr-xl {
  padding-right: calc(var(--bsize) * var(--bsize-xl));
}

.pb-xl {
  padding-bottom: calc(var(--bsize) * var(--bsize-xl));
}

.pl-xl {
  padding-left: calc(var(--bsize) * var(--bsize-xl));
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.px-6 {
  padding-left: 6rem;
  padding-right: 6rem;
}

.pt-3 {
  padding-top: 3rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mx-2 {
  margin: 0rem;
}
@media (min-width: 768px) {
  .mx-2 {
    margin: 0 2rem;
  }
}

.mx-1 {
  margin: 0rem;
}
@media (min-width: 768px) {
  .mx-1 {
    margin: 0 1rem;
  }
}

.mt-1 {
  margin-top: 0.5rem;
}

.mt--1 {
  margin-top: -1rem;
}

.mt--25 {
  margin-top: -2.5rem;
}

.mb--1 {
  margin-bottom: -0.5rem;
}

.mb-05 {
  margin-bottom: 0.5rem;
}

.m-0 {
  margin: 0rem;
}

.m-1 {
  margin: 1rem;
}

.m-2 {
  margin: 2rem;
}

.m-3 {
  margin: 3rem;
}

.m-4 {
  margin: 4rem;
}

.m-5 {
  margin: 5rem;
}

.m-6 {
  margin: 6rem;
}

.m-7 {
  margin: 7rem;
}

.m-8 {
  margin: 8rem;
}

.m-9 {
  margin: 9rem;
}

.m-10 {
  margin: 10rem;
}

.p-0 {
  padding: 0rem;
}

.p-1 {
  padding: 1rem;
}

.p-2 {
  padding: 2rem;
}

.p-3 {
  padding: 3rem;
}

.p-4 {
  padding: 4rem;
}

.p-5 {
  padding: 5rem;
}

.p-6 {
  padding: 6rem;
}

.p-7 {
  padding: 7rem;
}

.p-8 {
  padding: 8rem;
}

.p-9 {
  padding: 9rem;
}

.p-10 {
  padding: 10rem;
}

.mx-0 {
  margin-left: 0rem;
  margin-right: 0rem;
}

.mx-1 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-2 {
  margin-left: 2rem;
  margin-right: 2rem;
}

.mx-3 {
  margin-left: 3rem;
  margin-right: 3rem;
}

.mx-4 {
  margin-left: 4rem;
  margin-right: 4rem;
}

.mx-5 {
  margin-left: 5rem;
  margin-right: 5rem;
}

.mx-6 {
  margin-left: 6rem;
  margin-right: 6rem;
}

.mx-7 {
  margin-left: 7rem;
  margin-right: 7rem;
}

.mx-8 {
  margin-left: 8rem;
  margin-right: 8rem;
}

.mx-9 {
  margin-left: 9rem;
  margin-right: 9rem;
}

.mx-10 {
  margin-left: 10rem;
  margin-right: 10rem;
}

.px-0 {
  padding-left: 0rem;
  padding-right: 0rem;
}

.px-1 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-2 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.px-3 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.px-4 {
  padding-left: 4rem;
  padding-right: 4rem;
}

.px-5 {
  padding-left: 5rem;
  padding-right: 5rem;
}

.px-6 {
  padding-left: 6rem;
  padding-right: 6rem;
}

.px-7 {
  padding-left: 7rem;
  padding-right: 7rem;
}

.px-8 {
  padding-left: 8rem;
  padding-right: 8rem;
}

.px-9 {
  padding-left: 9rem;
  padding-right: 9rem;
}

.px-10 {
  padding-left: 10rem;
  padding-right: 10rem;
}

.my-0 {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

.my-1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.my-3 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.my-4 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.my-5 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.my-6 {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.my-7 {
  margin-top: 7rem;
  margin-bottom: 7rem;
}

.my-8 {
  margin-top: 8rem;
  margin-bottom: 8rem;
}

.my-9 {
  margin-top: 9rem;
  margin-bottom: 9rem;
}

.my-10 {
  margin-top: 10rem;
  margin-bottom: 10rem;
}

.py-0 {
  padding-top: 0rem;
  padding-bottom: 0rem;
}

.py-1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-3 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-4 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-5 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-6 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.py-7 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.py-8 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.py-9 {
  padding-top: 9rem;
  padding-bottom: 9rem;
}

.py-10 {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.mt-0 {
  margin-top: 0rem;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.mt-3 {
  margin-top: 3rem;
}

.mt-4 {
  margin-top: 4rem;
}

.mt-5 {
  margin-top: 5rem;
}

.mt-6 {
  margin-top: 6rem;
}

.mt-7 {
  margin-top: 7rem;
}

.mt-8 {
  margin-top: 8rem;
}

.mt-9 {
  margin-top: 9rem;
}

.mt-10 {
  margin-top: 10rem;
}

.mr-0 {
  margin-right: 0rem;
}

.mr-1 {
  margin-right: 1rem;
}

.mr-2 {
  margin-right: 2rem;
}

.mr-3 {
  margin-right: 3rem;
}

.mr-4 {
  margin-right: 4rem;
}

.mr-5 {
  margin-right: 5rem;
}

.mr-6 {
  margin-right: 6rem;
}

.mr-7 {
  margin-right: 7rem;
}

.mr-8 {
  margin-right: 8rem;
}

.mr-9 {
  margin-right: 9rem;
}

.mr-10 {
  margin-right: 10rem;
}

.mb-0 {
  margin-bottom: 0rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.mb-3 {
  margin-bottom: 3rem;
}

.mb-4 {
  margin-bottom: 4rem;
}

.mb-5 {
  margin-bottom: 5rem;
}

.mb-6 {
  margin-bottom: 6rem;
}

.mb-7 {
  margin-bottom: 7rem;
}

.mb-8 {
  margin-bottom: 8rem;
}

.mb-9 {
  margin-bottom: 9rem;
}

.mb-10 {
  margin-bottom: 10rem;
}

.ml-0 {
  margin-left: 0rem;
}

.ml-1 {
  margin-left: 1rem;
}

.ml-2 {
  margin-left: 2rem;
}

.ml-3 {
  margin-left: 3rem;
}

.ml-4 {
  margin-left: 4rem;
}

.ml-5 {
  margin-left: 5rem;
}

.ml-6 {
  margin-left: 6rem;
}

.ml-7 {
  margin-left: 7rem;
}

.ml-8 {
  margin-left: 8rem;
}

.ml-9 {
  margin-left: 9rem;
}

.ml-10 {
  margin-left: 10rem;
}

.pt-0 {
  padding-top: 0rem;
}

.pt-1 {
  padding-top: 1rem;
}

.pt-2 {
  padding-top: 2rem;
}

.pt-3 {
  padding-top: 3rem;
}

.pt-4 {
  padding-top: 4rem;
}

.pt-5 {
  padding-top: 5rem;
}

.pt-6 {
  padding-top: 6rem;
}

.pt-7 {
  padding-top: 7rem;
}

.pt-8 {
  padding-top: 8rem;
}

.pt-9 {
  padding-top: 9rem;
}

.pt-10 {
  padding-top: 10rem;
}

.pr-0 {
  padding-right: 0rem;
}

.pr-1 {
  padding-right: 1rem;
}

.pr-2 {
  padding-right: 2rem;
}

.pr-3 {
  padding-right: 3rem;
}

.pr-4 {
  padding-right: 4rem;
}

.pr-5 {
  padding-right: 5rem;
}

.pr-6 {
  padding-right: 6rem;
}

.pr-7 {
  padding-right: 7rem;
}

.pr-8 {
  padding-right: 8rem;
}

.pr-9 {
  padding-right: 9rem;
}

.pr-10 {
  padding-right: 10rem;
}

.pb-0 {
  padding-bottom: 0rem;
}

.pb-1 {
  padding-bottom: 1rem;
}

.pb-2 {
  padding-bottom: 2rem;
}

.pb-3 {
  padding-bottom: 3rem;
}

.pb-4 {
  padding-bottom: 4rem;
}

.pb-5 {
  padding-bottom: 5rem;
}

.pb-6 {
  padding-bottom: 6rem;
}

.pb-7 {
  padding-bottom: 7rem;
}

.pb-8 {
  padding-bottom: 8rem;
}

.pb-9 {
  padding-bottom: 9rem;
}

.pb-10 {
  padding-bottom: 10rem;
}

.pl-0 {
  padding-left: 0rem;
}

.pl-1 {
  padding-left: 1rem;
}

.pl-2 {
  padding-left: 2rem;
}

.pl-3 {
  padding-left: 3rem;
}

.pl-4 {
  padding-left: 4rem;
}

.pl-5 {
  padding-left: 5rem;
}

.pl-6 {
  padding-left: 6rem;
}

.pl-7 {
  padding-left: 7rem;
}

.pl-8 {
  padding-left: 8rem;
}

.pl-9 {
  padding-left: 9rem;
}

.pl-10 {
  padding-left: 10rem;
}

@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0rem;
  }
  .m-sm-1 {
    margin: 1rem;
  }
  .m-sm-2 {
    margin: 2rem;
  }
  .m-sm-3 {
    margin: 3rem;
  }
  .m-sm-4 {
    margin: 4rem;
  }
  .m-sm-5 {
    margin: 5rem;
  }
  .m-sm-6 {
    margin: 6rem;
  }
  .m-sm-7 {
    margin: 7rem;
  }
  .m-sm-8 {
    margin: 8rem;
  }
  .m-sm-9 {
    margin: 9rem;
  }
  .m-sm-10 {
    margin: 10rem;
  }
  .p-sm-0 {
    padding: 0rem;
  }
  .p-sm-1 {
    padding: 1rem;
  }
  .p-sm-2 {
    padding: 2rem;
  }
  .p-sm-3 {
    padding: 3rem;
  }
  .p-sm-4 {
    padding: 4rem;
  }
  .p-sm-5 {
    padding: 5rem;
  }
  .p-sm-6 {
    padding: 6rem;
  }
  .p-sm-7 {
    padding: 7rem;
  }
  .p-sm-8 {
    padding: 8rem;
  }
  .p-sm-9 {
    padding: 9rem;
  }
  .p-sm-10 {
    padding: 10rem;
  }
  .mx-sm-0 {
    margin-left: 0rem;
    margin-right: 0rem;
  }
  .mx-sm-1 {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .mx-sm-2 {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .mx-sm-3 {
    margin-left: 3rem;
    margin-right: 3rem;
  }
  .mx-sm-4 {
    margin-left: 4rem;
    margin-right: 4rem;
  }
  .mx-sm-5 {
    margin-left: 5rem;
    margin-right: 5rem;
  }
  .mx-sm-6 {
    margin-left: 6rem;
    margin-right: 6rem;
  }
  .mx-sm-7 {
    margin-left: 7rem;
    margin-right: 7rem;
  }
  .mx-sm-8 {
    margin-left: 8rem;
    margin-right: 8rem;
  }
  .mx-sm-9 {
    margin-left: 9rem;
    margin-right: 9rem;
  }
  .mx-sm-10 {
    margin-left: 10rem;
    margin-right: 10rem;
  }
  .px-sm-0 {
    padding-left: 0rem;
    padding-right: 0rem;
  }
  .px-sm-1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .px-sm-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .px-sm-3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .px-sm-4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .px-sm-5 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .px-sm-6 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .px-sm-7 {
    padding-left: 7rem;
    padding-right: 7rem;
  }
  .px-sm-8 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .px-sm-9 {
    padding-left: 9rem;
    padding-right: 9rem;
  }
  .px-sm-10 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .my-sm-0 {
    margin-top: 0rem;
    margin-bottom: 0rem;
  }
  .my-sm-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-sm-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .my-sm-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-sm-4 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  .my-sm-5 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .my-sm-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
  .my-sm-7 {
    margin-top: 7rem;
    margin-bottom: 7rem;
  }
  .my-sm-8 {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
  .my-sm-9 {
    margin-top: 9rem;
    margin-bottom: 9rem;
  }
  .my-sm-10 {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
  .py-sm-0 {
    padding-top: 0rem;
    padding-bottom: 0rem;
  }
  .py-sm-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-sm-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .py-sm-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .py-sm-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .py-sm-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .py-sm-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .py-sm-7 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .py-sm-8 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .py-sm-9 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
  .py-sm-10 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  .mt-sm-0 {
    margin-top: 0rem;
  }
  .mt-sm-1 {
    margin-top: 1rem;
  }
  .mt-sm-2 {
    margin-top: 2rem;
  }
  .mt-sm-3 {
    margin-top: 3rem;
  }
  .mt-sm-4 {
    margin-top: 4rem;
  }
  .mt-sm-5 {
    margin-top: 5rem;
  }
  .mt-sm-6 {
    margin-top: 6rem;
  }
  .mt-sm-7 {
    margin-top: 7rem;
  }
  .mt-sm-8 {
    margin-top: 8rem;
  }
  .mt-sm-9 {
    margin-top: 9rem;
  }
  .mt-sm-10 {
    margin-top: 10rem;
  }
  .mr-sm-0 {
    margin-right: 0rem;
  }
  .mr-sm-1 {
    margin-right: 1rem;
  }
  .mr-sm-2 {
    margin-right: 2rem;
  }
  .mr-sm-3 {
    margin-right: 3rem;
  }
  .mr-sm-4 {
    margin-right: 4rem;
  }
  .mr-sm-5 {
    margin-right: 5rem;
  }
  .mr-sm-6 {
    margin-right: 6rem;
  }
  .mr-sm-7 {
    margin-right: 7rem;
  }
  .mr-sm-8 {
    margin-right: 8rem;
  }
  .mr-sm-9 {
    margin-right: 9rem;
  }
  .mr-sm-10 {
    margin-right: 10rem;
  }
  .mb-sm-0 {
    margin-bottom: 0rem;
  }
  .mb-sm-1 {
    margin-bottom: 1rem;
  }
  .mb-sm-2 {
    margin-bottom: 2rem;
  }
  .mb-sm-3 {
    margin-bottom: 3rem;
  }
  .mb-sm-4 {
    margin-bottom: 4rem;
  }
  .mb-sm-5 {
    margin-bottom: 5rem;
  }
  .mb-sm-6 {
    margin-bottom: 6rem;
  }
  .mb-sm-7 {
    margin-bottom: 7rem;
  }
  .mb-sm-8 {
    margin-bottom: 8rem;
  }
  .mb-sm-9 {
    margin-bottom: 9rem;
  }
  .mb-sm-10 {
    margin-bottom: 10rem;
  }
  .ml-sm-0 {
    margin-left: 0rem;
  }
  .ml-sm-1 {
    margin-left: 1rem;
  }
  .ml-sm-2 {
    margin-left: 2rem;
  }
  .ml-sm-3 {
    margin-left: 3rem;
  }
  .ml-sm-4 {
    margin-left: 4rem;
  }
  .ml-sm-5 {
    margin-left: 5rem;
  }
  .ml-sm-6 {
    margin-left: 6rem;
  }
  .ml-sm-7 {
    margin-left: 7rem;
  }
  .ml-sm-8 {
    margin-left: 8rem;
  }
  .ml-sm-9 {
    margin-left: 9rem;
  }
  .ml-sm-10 {
    margin-left: 10rem;
  }
  .pt-sm-0 {
    padding-top: 0rem;
  }
  .pt-sm-1 {
    padding-top: 1rem;
  }
  .pt-sm-2 {
    padding-top: 2rem;
  }
  .pt-sm-3 {
    padding-top: 3rem;
  }
  .pt-sm-4 {
    padding-top: 4rem;
  }
  .pt-sm-5 {
    padding-top: 5rem;
  }
  .pt-sm-6 {
    padding-top: 6rem;
  }
  .pt-sm-7 {
    padding-top: 7rem;
  }
  .pt-sm-8 {
    padding-top: 8rem;
  }
  .pt-sm-9 {
    padding-top: 9rem;
  }
  .pt-sm-10 {
    padding-top: 10rem;
  }
  .pr-sm-0 {
    padding-right: 0rem;
  }
  .pr-sm-1 {
    padding-right: 1rem;
  }
  .pr-sm-2 {
    padding-right: 2rem;
  }
  .pr-sm-3 {
    padding-right: 3rem;
  }
  .pr-sm-4 {
    padding-right: 4rem;
  }
  .pr-sm-5 {
    padding-right: 5rem;
  }
  .pr-sm-6 {
    padding-right: 6rem;
  }
  .pr-sm-7 {
    padding-right: 7rem;
  }
  .pr-sm-8 {
    padding-right: 8rem;
  }
  .pr-sm-9 {
    padding-right: 9rem;
  }
  .pr-sm-10 {
    padding-right: 10rem;
  }
  .pb-sm-0 {
    padding-bottom: 0rem;
  }
  .pb-sm-1 {
    padding-bottom: 1rem;
  }
  .pb-sm-2 {
    padding-bottom: 2rem;
  }
  .pb-sm-3 {
    padding-bottom: 3rem;
  }
  .pb-sm-4 {
    padding-bottom: 4rem;
  }
  .pb-sm-5 {
    padding-bottom: 5rem;
  }
  .pb-sm-6 {
    padding-bottom: 6rem;
  }
  .pb-sm-7 {
    padding-bottom: 7rem;
  }
  .pb-sm-8 {
    padding-bottom: 8rem;
  }
  .pb-sm-9 {
    padding-bottom: 9rem;
  }
  .pb-sm-10 {
    padding-bottom: 10rem;
  }
  .pl-sm-0 {
    padding-left: 0rem;
  }
  .pl-sm-1 {
    padding-left: 1rem;
  }
  .pl-sm-2 {
    padding-left: 2rem;
  }
  .pl-sm-3 {
    padding-left: 3rem;
  }
  .pl-sm-4 {
    padding-left: 4rem;
  }
  .pl-sm-5 {
    padding-left: 5rem;
  }
  .pl-sm-6 {
    padding-left: 6rem;
  }
  .pl-sm-7 {
    padding-left: 7rem;
  }
  .pl-sm-8 {
    padding-left: 8rem;
  }
  .pl-sm-9 {
    padding-left: 9rem;
  }
  .pl-sm-10 {
    padding-left: 10rem;
  }
}
@media (min-width: 768px) {
  .m-md-0 {
    margin: 0rem;
  }
  .m-md-1 {
    margin: 1rem;
  }
  .m-md-2 {
    margin: 2rem;
  }
  .m-md-3 {
    margin: 3rem;
  }
  .m-md-4 {
    margin: 4rem;
  }
  .m-md-5 {
    margin: 5rem;
  }
  .m-md-6 {
    margin: 6rem;
  }
  .m-md-7 {
    margin: 7rem;
  }
  .m-md-8 {
    margin: 8rem;
  }
  .m-md-9 {
    margin: 9rem;
  }
  .m-md-10 {
    margin: 10rem;
  }
  .p-md-0 {
    padding: 0rem;
  }
  .p-md-1 {
    padding: 1rem;
  }
  .p-md-2 {
    padding: 2rem;
  }
  .p-md-3 {
    padding: 3rem;
  }
  .p-md-4 {
    padding: 4rem;
  }
  .p-md-5 {
    padding: 5rem;
  }
  .p-md-6 {
    padding: 6rem;
  }
  .p-md-7 {
    padding: 7rem;
  }
  .p-md-8 {
    padding: 8rem;
  }
  .p-md-9 {
    padding: 9rem;
  }
  .p-md-10 {
    padding: 10rem;
  }
  .mx-md-0 {
    margin-left: 0rem;
    margin-right: 0rem;
  }
  .mx-md-1 {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .mx-md-2 {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .mx-md-3 {
    margin-left: 3rem;
    margin-right: 3rem;
  }
  .mx-md-4 {
    margin-left: 4rem;
    margin-right: 4rem;
  }
  .mx-md-5 {
    margin-left: 5rem;
    margin-right: 5rem;
  }
  .mx-md-6 {
    margin-left: 6rem;
    margin-right: 6rem;
  }
  .mx-md-7 {
    margin-left: 7rem;
    margin-right: 7rem;
  }
  .mx-md-8 {
    margin-left: 8rem;
    margin-right: 8rem;
  }
  .mx-md-9 {
    margin-left: 9rem;
    margin-right: 9rem;
  }
  .mx-md-10 {
    margin-left: 10rem;
    margin-right: 10rem;
  }
  .px-md-0 {
    padding-left: 0rem;
    padding-right: 0rem;
  }
  .px-md-1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .px-md-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .px-md-3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .px-md-4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .px-md-5 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .px-md-6 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .px-md-7 {
    padding-left: 7rem;
    padding-right: 7rem;
  }
  .px-md-8 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .px-md-9 {
    padding-left: 9rem;
    padding-right: 9rem;
  }
  .px-md-10 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .my-md-0 {
    margin-top: 0rem;
    margin-bottom: 0rem;
  }
  .my-md-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-md-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .my-md-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-md-4 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  .my-md-5 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .my-md-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
  .my-md-7 {
    margin-top: 7rem;
    margin-bottom: 7rem;
  }
  .my-md-8 {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
  .my-md-9 {
    margin-top: 9rem;
    margin-bottom: 9rem;
  }
  .my-md-10 {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
  .py-md-0 {
    padding-top: 0rem;
    padding-bottom: 0rem;
  }
  .py-md-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-md-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .py-md-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .py-md-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .py-md-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .py-md-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .py-md-7 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .py-md-8 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .py-md-9 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
  .py-md-10 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  .mt-md-0 {
    margin-top: 0rem;
  }
  .mt-md-1 {
    margin-top: 1rem;
  }
  .mt-md-2 {
    margin-top: 2rem;
  }
  .mt-md-3 {
    margin-top: 3rem;
  }
  .mt-md-4 {
    margin-top: 4rem;
  }
  .mt-md-5 {
    margin-top: 5rem;
  }
  .mt-md-6 {
    margin-top: 6rem;
  }
  .mt-md-7 {
    margin-top: 7rem;
  }
  .mt-md-8 {
    margin-top: 8rem;
  }
  .mt-md-9 {
    margin-top: 9rem;
  }
  .mt-md-10 {
    margin-top: 10rem;
  }
  .mr-md-0 {
    margin-right: 0rem;
  }
  .mr-md-1 {
    margin-right: 1rem;
  }
  .mr-md-2 {
    margin-right: 2rem;
  }
  .mr-md-3 {
    margin-right: 3rem;
  }
  .mr-md-4 {
    margin-right: 4rem;
  }
  .mr-md-5 {
    margin-right: 5rem;
  }
  .mr-md-6 {
    margin-right: 6rem;
  }
  .mr-md-7 {
    margin-right: 7rem;
  }
  .mr-md-8 {
    margin-right: 8rem;
  }
  .mr-md-9 {
    margin-right: 9rem;
  }
  .mr-md-10 {
    margin-right: 10rem;
  }
  .mb-md-0 {
    margin-bottom: 0rem;
  }
  .mb-md-1 {
    margin-bottom: 1rem;
  }
  .mb-md-2 {
    margin-bottom: 2rem;
  }
  .mb-md-3 {
    margin-bottom: 3rem;
  }
  .mb-md-4 {
    margin-bottom: 4rem;
  }
  .mb-md-5 {
    margin-bottom: 5rem;
  }
  .mb-md-6 {
    margin-bottom: 6rem;
  }
  .mb-md-7 {
    margin-bottom: 7rem;
  }
  .mb-md-8 {
    margin-bottom: 8rem;
  }
  .mb-md-9 {
    margin-bottom: 9rem;
  }
  .mb-md-10 {
    margin-bottom: 10rem;
  }
  .ml-md-0 {
    margin-left: 0rem;
  }
  .ml-md-1 {
    margin-left: 1rem;
  }
  .ml-md-2 {
    margin-left: 2rem;
  }
  .ml-md-3 {
    margin-left: 3rem;
  }
  .ml-md-4 {
    margin-left: 4rem;
  }
  .ml-md-5 {
    margin-left: 5rem;
  }
  .ml-md-6 {
    margin-left: 6rem;
  }
  .ml-md-7 {
    margin-left: 7rem;
  }
  .ml-md-8 {
    margin-left: 8rem;
  }
  .ml-md-9 {
    margin-left: 9rem;
  }
  .ml-md-10 {
    margin-left: 10rem;
  }
  .pt-md-0 {
    padding-top: 0rem;
  }
  .pt-md-1 {
    padding-top: 1rem;
  }
  .pt-md-2 {
    padding-top: 2rem;
  }
  .pt-md-3 {
    padding-top: 3rem;
  }
  .pt-md-4 {
    padding-top: 4rem;
  }
  .pt-md-5 {
    padding-top: 5rem;
  }
  .pt-md-6 {
    padding-top: 6rem;
  }
  .pt-md-7 {
    padding-top: 7rem;
  }
  .pt-md-8 {
    padding-top: 8rem;
  }
  .pt-md-9 {
    padding-top: 9rem;
  }
  .pt-md-10 {
    padding-top: 10rem;
  }
  .pr-md-0 {
    padding-right: 0rem;
  }
  .pr-md-1 {
    padding-right: 1rem;
  }
  .pr-md-2 {
    padding-right: 2rem;
  }
  .pr-md-3 {
    padding-right: 3rem;
  }
  .pr-md-4 {
    padding-right: 4rem;
  }
  .pr-md-5 {
    padding-right: 5rem;
  }
  .pr-md-6 {
    padding-right: 6rem;
  }
  .pr-md-7 {
    padding-right: 7rem;
  }
  .pr-md-8 {
    padding-right: 8rem;
  }
  .pr-md-9 {
    padding-right: 9rem;
  }
  .pr-md-10 {
    padding-right: 10rem;
  }
  .pb-md-0 {
    padding-bottom: 0rem;
  }
  .pb-md-1 {
    padding-bottom: 1rem;
  }
  .pb-md-2 {
    padding-bottom: 2rem;
  }
  .pb-md-3 {
    padding-bottom: 3rem;
  }
  .pb-md-4 {
    padding-bottom: 4rem;
  }
  .pb-md-5 {
    padding-bottom: 5rem;
  }
  .pb-md-6 {
    padding-bottom: 6rem;
  }
  .pb-md-7 {
    padding-bottom: 7rem;
  }
  .pb-md-8 {
    padding-bottom: 8rem;
  }
  .pb-md-9 {
    padding-bottom: 9rem;
  }
  .pb-md-10 {
    padding-bottom: 10rem;
  }
  .pl-md-0 {
    padding-left: 0rem;
  }
  .pl-md-1 {
    padding-left: 1rem;
  }
  .pl-md-2 {
    padding-left: 2rem;
  }
  .pl-md-3 {
    padding-left: 3rem;
  }
  .pl-md-4 {
    padding-left: 4rem;
  }
  .pl-md-5 {
    padding-left: 5rem;
  }
  .pl-md-6 {
    padding-left: 6rem;
  }
  .pl-md-7 {
    padding-left: 7rem;
  }
  .pl-md-8 {
    padding-left: 8rem;
  }
  .pl-md-9 {
    padding-left: 9rem;
  }
  .pl-md-10 {
    padding-left: 10rem;
  }
}
@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0rem;
  }
  .m-lg-1 {
    margin: 1rem;
  }
  .m-lg-2 {
    margin: 2rem;
  }
  .m-lg-3 {
    margin: 3rem;
  }
  .m-lg-4 {
    margin: 4rem;
  }
  .m-lg-5 {
    margin: 5rem;
  }
  .m-lg-6 {
    margin: 6rem;
  }
  .m-lg-7 {
    margin: 7rem;
  }
  .m-lg-8 {
    margin: 8rem;
  }
  .m-lg-9 {
    margin: 9rem;
  }
  .m-lg-10 {
    margin: 10rem;
  }
  .p-lg-0 {
    padding: 0rem;
  }
  .p-lg-1 {
    padding: 1rem;
  }
  .p-lg-2 {
    padding: 2rem;
  }
  .p-lg-3 {
    padding: 3rem;
  }
  .p-lg-4 {
    padding: 4rem;
  }
  .p-lg-5 {
    padding: 5rem;
  }
  .p-lg-6 {
    padding: 6rem;
  }
  .p-lg-7 {
    padding: 7rem;
  }
  .p-lg-8 {
    padding: 8rem;
  }
  .p-lg-9 {
    padding: 9rem;
  }
  .p-lg-10 {
    padding: 10rem;
  }
  .mx-lg-0 {
    margin-left: 0rem;
    margin-right: 0rem;
  }
  .mx-lg-1 {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .mx-lg-2 {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .mx-lg-3 {
    margin-left: 3rem;
    margin-right: 3rem;
  }
  .mx-lg-4 {
    margin-left: 4rem;
    margin-right: 4rem;
  }
  .mx-lg-5 {
    margin-left: 5rem;
    margin-right: 5rem;
  }
  .mx-lg-6 {
    margin-left: 6rem;
    margin-right: 6rem;
  }
  .mx-lg-7 {
    margin-left: 7rem;
    margin-right: 7rem;
  }
  .mx-lg-8 {
    margin-left: 8rem;
    margin-right: 8rem;
  }
  .mx-lg-9 {
    margin-left: 9rem;
    margin-right: 9rem;
  }
  .mx-lg-10 {
    margin-left: 10rem;
    margin-right: 10rem;
  }
  .px-lg-0 {
    padding-left: 0rem;
    padding-right: 0rem;
  }
  .px-lg-1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .px-lg-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .px-lg-3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .px-lg-4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .px-lg-5 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .px-lg-6 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .px-lg-7 {
    padding-left: 7rem;
    padding-right: 7rem;
  }
  .px-lg-8 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .px-lg-9 {
    padding-left: 9rem;
    padding-right: 9rem;
  }
  .px-lg-10 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .my-lg-0 {
    margin-top: 0rem;
    margin-bottom: 0rem;
  }
  .my-lg-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-lg-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .my-lg-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-lg-4 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  .my-lg-5 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .my-lg-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
  .my-lg-7 {
    margin-top: 7rem;
    margin-bottom: 7rem;
  }
  .my-lg-8 {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
  .my-lg-9 {
    margin-top: 9rem;
    margin-bottom: 9rem;
  }
  .my-lg-10 {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
  .py-lg-0 {
    padding-top: 0rem;
    padding-bottom: 0rem;
  }
  .py-lg-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-lg-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .py-lg-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .py-lg-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .py-lg-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .py-lg-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .py-lg-7 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .py-lg-8 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .py-lg-9 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
  .py-lg-10 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  .mt-lg-0 {
    margin-top: 0rem;
  }
  .mt-lg-1 {
    margin-top: 1rem;
  }
  .mt-lg-2 {
    margin-top: 2rem;
  }
  .mt-lg-3 {
    margin-top: 3rem;
  }
  .mt-lg-4 {
    margin-top: 4rem;
  }
  .mt-lg-5 {
    margin-top: 5rem;
  }
  .mt-lg-6 {
    margin-top: 6rem;
  }
  .mt-lg-7 {
    margin-top: 7rem;
  }
  .mt-lg-8 {
    margin-top: 8rem;
  }
  .mt-lg-9 {
    margin-top: 9rem;
  }
  .mt-lg-10 {
    margin-top: 10rem;
  }
  .mr-lg-0 {
    margin-right: 0rem;
  }
  .mr-lg-1 {
    margin-right: 1rem;
  }
  .mr-lg-2 {
    margin-right: 2rem;
  }
  .mr-lg-3 {
    margin-right: 3rem;
  }
  .mr-lg-4 {
    margin-right: 4rem;
  }
  .mr-lg-5 {
    margin-right: 5rem;
  }
  .mr-lg-6 {
    margin-right: 6rem;
  }
  .mr-lg-7 {
    margin-right: 7rem;
  }
  .mr-lg-8 {
    margin-right: 8rem;
  }
  .mr-lg-9 {
    margin-right: 9rem;
  }
  .mr-lg-10 {
    margin-right: 10rem;
  }
  .mb-lg-0 {
    margin-bottom: 0rem;
  }
  .mb-lg-1 {
    margin-bottom: 1rem;
  }
  .mb-lg-2 {
    margin-bottom: 2rem;
  }
  .mb-lg-3 {
    margin-bottom: 3rem;
  }
  .mb-lg-4 {
    margin-bottom: 4rem;
  }
  .mb-lg-5 {
    margin-bottom: 5rem;
  }
  .mb-lg-6 {
    margin-bottom: 6rem;
  }
  .mb-lg-7 {
    margin-bottom: 7rem;
  }
  .mb-lg-8 {
    margin-bottom: 8rem;
  }
  .mb-lg-9 {
    margin-bottom: 9rem;
  }
  .mb-lg-10 {
    margin-bottom: 10rem;
  }
  .ml-lg-0 {
    margin-left: 0rem;
  }
  .ml-lg-1 {
    margin-left: 1rem;
  }
  .ml-lg-2 {
    margin-left: 2rem;
  }
  .ml-lg-3 {
    margin-left: 3rem;
  }
  .ml-lg-4 {
    margin-left: 4rem;
  }
  .ml-lg-5 {
    margin-left: 5rem;
  }
  .ml-lg-6 {
    margin-left: 6rem;
  }
  .ml-lg-7 {
    margin-left: 7rem;
  }
  .ml-lg-8 {
    margin-left: 8rem;
  }
  .ml-lg-9 {
    margin-left: 9rem;
  }
  .ml-lg-10 {
    margin-left: 10rem;
  }
  .pt-lg-0 {
    padding-top: 0rem;
  }
  .pt-lg-1 {
    padding-top: 1rem;
  }
  .pt-lg-2 {
    padding-top: 2rem;
  }
  .pt-lg-3 {
    padding-top: 3rem;
  }
  .pt-lg-4 {
    padding-top: 4rem;
  }
  .pt-lg-5 {
    padding-top: 5rem;
  }
  .pt-lg-6 {
    padding-top: 6rem;
  }
  .pt-lg-7 {
    padding-top: 7rem;
  }
  .pt-lg-8 {
    padding-top: 8rem;
  }
  .pt-lg-9 {
    padding-top: 9rem;
  }
  .pt-lg-10 {
    padding-top: 10rem;
  }
  .pr-lg-0 {
    padding-right: 0rem;
  }
  .pr-lg-1 {
    padding-right: 1rem;
  }
  .pr-lg-2 {
    padding-right: 2rem;
  }
  .pr-lg-3 {
    padding-right: 3rem;
  }
  .pr-lg-4 {
    padding-right: 4rem;
  }
  .pr-lg-5 {
    padding-right: 5rem;
  }
  .pr-lg-6 {
    padding-right: 6rem;
  }
  .pr-lg-7 {
    padding-right: 7rem;
  }
  .pr-lg-8 {
    padding-right: 8rem;
  }
  .pr-lg-9 {
    padding-right: 9rem;
  }
  .pr-lg-10 {
    padding-right: 10rem;
  }
  .pb-lg-0 {
    padding-bottom: 0rem;
  }
  .pb-lg-1 {
    padding-bottom: 1rem;
  }
  .pb-lg-2 {
    padding-bottom: 2rem;
  }
  .pb-lg-3 {
    padding-bottom: 3rem;
  }
  .pb-lg-4 {
    padding-bottom: 4rem;
  }
  .pb-lg-5 {
    padding-bottom: 5rem;
  }
  .pb-lg-6 {
    padding-bottom: 6rem;
  }
  .pb-lg-7 {
    padding-bottom: 7rem;
  }
  .pb-lg-8 {
    padding-bottom: 8rem;
  }
  .pb-lg-9 {
    padding-bottom: 9rem;
  }
  .pb-lg-10 {
    padding-bottom: 10rem;
  }
  .pl-lg-0 {
    padding-left: 0rem;
  }
  .pl-lg-1 {
    padding-left: 1rem;
  }
  .pl-lg-2 {
    padding-left: 2rem;
  }
  .pl-lg-3 {
    padding-left: 3rem;
  }
  .pl-lg-4 {
    padding-left: 4rem;
  }
  .pl-lg-5 {
    padding-left: 5rem;
  }
  .pl-lg-6 {
    padding-left: 6rem;
  }
  .pl-lg-7 {
    padding-left: 7rem;
  }
  .pl-lg-8 {
    padding-left: 8rem;
  }
  .pl-lg-9 {
    padding-left: 9rem;
  }
  .pl-lg-10 {
    padding-left: 10rem;
  }
}
@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0rem;
  }
  .m-xl-1 {
    margin: 1rem;
  }
  .m-xl-2 {
    margin: 2rem;
  }
  .m-xl-3 {
    margin: 3rem;
  }
  .m-xl-4 {
    margin: 4rem;
  }
  .m-xl-5 {
    margin: 5rem;
  }
  .m-xl-6 {
    margin: 6rem;
  }
  .m-xl-7 {
    margin: 7rem;
  }
  .m-xl-8 {
    margin: 8rem;
  }
  .m-xl-9 {
    margin: 9rem;
  }
  .m-xl-10 {
    margin: 10rem;
  }
  .p-xl-0 {
    padding: 0rem;
  }
  .p-xl-1 {
    padding: 1rem;
  }
  .p-xl-2 {
    padding: 2rem;
  }
  .p-xl-3 {
    padding: 3rem;
  }
  .p-xl-4 {
    padding: 4rem;
  }
  .p-xl-5 {
    padding: 5rem;
  }
  .p-xl-6 {
    padding: 6rem;
  }
  .p-xl-7 {
    padding: 7rem;
  }
  .p-xl-8 {
    padding: 8rem;
  }
  .p-xl-9 {
    padding: 9rem;
  }
  .p-xl-10 {
    padding: 10rem;
  }
  .mx-xl-0 {
    margin-left: 0rem;
    margin-right: 0rem;
  }
  .mx-xl-1 {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .mx-xl-2 {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .mx-xl-3 {
    margin-left: 3rem;
    margin-right: 3rem;
  }
  .mx-xl-4 {
    margin-left: 4rem;
    margin-right: 4rem;
  }
  .mx-xl-5 {
    margin-left: 5rem;
    margin-right: 5rem;
  }
  .mx-xl-6 {
    margin-left: 6rem;
    margin-right: 6rem;
  }
  .mx-xl-7 {
    margin-left: 7rem;
    margin-right: 7rem;
  }
  .mx-xl-8 {
    margin-left: 8rem;
    margin-right: 8rem;
  }
  .mx-xl-9 {
    margin-left: 9rem;
    margin-right: 9rem;
  }
  .mx-xl-10 {
    margin-left: 10rem;
    margin-right: 10rem;
  }
  .px-xl-0 {
    padding-left: 0rem;
    padding-right: 0rem;
  }
  .px-xl-1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .px-xl-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .px-xl-3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .px-xl-4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .px-xl-5 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .px-xl-6 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .px-xl-7 {
    padding-left: 7rem;
    padding-right: 7rem;
  }
  .px-xl-8 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .px-xl-9 {
    padding-left: 9rem;
    padding-right: 9rem;
  }
  .px-xl-10 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .my-xl-0 {
    margin-top: 0rem;
    margin-bottom: 0rem;
  }
  .my-xl-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-xl-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .my-xl-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-xl-4 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  .my-xl-5 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .my-xl-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
  .my-xl-7 {
    margin-top: 7rem;
    margin-bottom: 7rem;
  }
  .my-xl-8 {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
  .my-xl-9 {
    margin-top: 9rem;
    margin-bottom: 9rem;
  }
  .my-xl-10 {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
  .py-xl-0 {
    padding-top: 0rem;
    padding-bottom: 0rem;
  }
  .py-xl-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-xl-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .py-xl-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .py-xl-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .py-xl-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .py-xl-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .py-xl-7 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .py-xl-8 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .py-xl-9 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
  .py-xl-10 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  .mt-xl-0 {
    margin-top: 0rem;
  }
  .mt-xl-1 {
    margin-top: 1rem;
  }
  .mt-xl-2 {
    margin-top: 2rem;
  }
  .mt-xl-3 {
    margin-top: 3rem;
  }
  .mt-xl-4 {
    margin-top: 4rem;
  }
  .mt-xl-5 {
    margin-top: 5rem;
  }
  .mt-xl-6 {
    margin-top: 6rem;
  }
  .mt-xl-7 {
    margin-top: 7rem;
  }
  .mt-xl-8 {
    margin-top: 8rem;
  }
  .mt-xl-9 {
    margin-top: 9rem;
  }
  .mt-xl-10 {
    margin-top: 10rem;
  }
  .mr-xl-0 {
    margin-right: 0rem;
  }
  .mr-xl-1 {
    margin-right: 1rem;
  }
  .mr-xl-2 {
    margin-right: 2rem;
  }
  .mr-xl-3 {
    margin-right: 3rem;
  }
  .mr-xl-4 {
    margin-right: 4rem;
  }
  .mr-xl-5 {
    margin-right: 5rem;
  }
  .mr-xl-6 {
    margin-right: 6rem;
  }
  .mr-xl-7 {
    margin-right: 7rem;
  }
  .mr-xl-8 {
    margin-right: 8rem;
  }
  .mr-xl-9 {
    margin-right: 9rem;
  }
  .mr-xl-10 {
    margin-right: 10rem;
  }
  .mb-xl-0 {
    margin-bottom: 0rem;
  }
  .mb-xl-1 {
    margin-bottom: 1rem;
  }
  .mb-xl-2 {
    margin-bottom: 2rem;
  }
  .mb-xl-3 {
    margin-bottom: 3rem;
  }
  .mb-xl-4 {
    margin-bottom: 4rem;
  }
  .mb-xl-5 {
    margin-bottom: 5rem;
  }
  .mb-xl-6 {
    margin-bottom: 6rem;
  }
  .mb-xl-7 {
    margin-bottom: 7rem;
  }
  .mb-xl-8 {
    margin-bottom: 8rem;
  }
  .mb-xl-9 {
    margin-bottom: 9rem;
  }
  .mb-xl-10 {
    margin-bottom: 10rem;
  }
  .ml-xl-0 {
    margin-left: 0rem;
  }
  .ml-xl-1 {
    margin-left: 1rem;
  }
  .ml-xl-2 {
    margin-left: 2rem;
  }
  .ml-xl-3 {
    margin-left: 3rem;
  }
  .ml-xl-4 {
    margin-left: 4rem;
  }
  .ml-xl-5 {
    margin-left: 5rem;
  }
  .ml-xl-6 {
    margin-left: 6rem;
  }
  .ml-xl-7 {
    margin-left: 7rem;
  }
  .ml-xl-8 {
    margin-left: 8rem;
  }
  .ml-xl-9 {
    margin-left: 9rem;
  }
  .ml-xl-10 {
    margin-left: 10rem;
  }
  .pt-xl-0 {
    padding-top: 0rem;
  }
  .pt-xl-1 {
    padding-top: 1rem;
  }
  .pt-xl-2 {
    padding-top: 2rem;
  }
  .pt-xl-3 {
    padding-top: 3rem;
  }
  .pt-xl-4 {
    padding-top: 4rem;
  }
  .pt-xl-5 {
    padding-top: 5rem;
  }
  .pt-xl-6 {
    padding-top: 6rem;
  }
  .pt-xl-7 {
    padding-top: 7rem;
  }
  .pt-xl-8 {
    padding-top: 8rem;
  }
  .pt-xl-9 {
    padding-top: 9rem;
  }
  .pt-xl-10 {
    padding-top: 10rem;
  }
  .pr-xl-0 {
    padding-right: 0rem;
  }
  .pr-xl-1 {
    padding-right: 1rem;
  }
  .pr-xl-2 {
    padding-right: 2rem;
  }
  .pr-xl-3 {
    padding-right: 3rem;
  }
  .pr-xl-4 {
    padding-right: 4rem;
  }
  .pr-xl-5 {
    padding-right: 5rem;
  }
  .pr-xl-6 {
    padding-right: 6rem;
  }
  .pr-xl-7 {
    padding-right: 7rem;
  }
  .pr-xl-8 {
    padding-right: 8rem;
  }
  .pr-xl-9 {
    padding-right: 9rem;
  }
  .pr-xl-10 {
    padding-right: 10rem;
  }
  .pb-xl-0 {
    padding-bottom: 0rem;
  }
  .pb-xl-1 {
    padding-bottom: 1rem;
  }
  .pb-xl-2 {
    padding-bottom: 2rem;
  }
  .pb-xl-3 {
    padding-bottom: 3rem;
  }
  .pb-xl-4 {
    padding-bottom: 4rem;
  }
  .pb-xl-5 {
    padding-bottom: 5rem;
  }
  .pb-xl-6 {
    padding-bottom: 6rem;
  }
  .pb-xl-7 {
    padding-bottom: 7rem;
  }
  .pb-xl-8 {
    padding-bottom: 8rem;
  }
  .pb-xl-9 {
    padding-bottom: 9rem;
  }
  .pb-xl-10 {
    padding-bottom: 10rem;
  }
  .pl-xl-0 {
    padding-left: 0rem;
  }
  .pl-xl-1 {
    padding-left: 1rem;
  }
  .pl-xl-2 {
    padding-left: 2rem;
  }
  .pl-xl-3 {
    padding-left: 3rem;
  }
  .pl-xl-4 {
    padding-left: 4rem;
  }
  .pl-xl-5 {
    padding-left: 5rem;
  }
  .pl-xl-6 {
    padding-left: 6rem;
  }
  .pl-xl-7 {
    padding-left: 7rem;
  }
  .pl-xl-8 {
    padding-left: 8rem;
  }
  .pl-xl-9 {
    padding-left: 9rem;
  }
  .pl-xl-10 {
    padding-left: 10rem;
  }
}
@media (min-width: 1600px) {
  .m-xxl-0 {
    margin: 0rem;
  }
  .m-xxl-1 {
    margin: 1rem;
  }
  .m-xxl-2 {
    margin: 2rem;
  }
  .m-xxl-3 {
    margin: 3rem;
  }
  .m-xxl-4 {
    margin: 4rem;
  }
  .m-xxl-5 {
    margin: 5rem;
  }
  .m-xxl-6 {
    margin: 6rem;
  }
  .m-xxl-7 {
    margin: 7rem;
  }
  .m-xxl-8 {
    margin: 8rem;
  }
  .m-xxl-9 {
    margin: 9rem;
  }
  .m-xxl-10 {
    margin: 10rem;
  }
  .p-xxl-0 {
    padding: 0rem;
  }
  .p-xxl-1 {
    padding: 1rem;
  }
  .p-xxl-2 {
    padding: 2rem;
  }
  .p-xxl-3 {
    padding: 3rem;
  }
  .p-xxl-4 {
    padding: 4rem;
  }
  .p-xxl-5 {
    padding: 5rem;
  }
  .p-xxl-6 {
    padding: 6rem;
  }
  .p-xxl-7 {
    padding: 7rem;
  }
  .p-xxl-8 {
    padding: 8rem;
  }
  .p-xxl-9 {
    padding: 9rem;
  }
  .p-xxl-10 {
    padding: 10rem;
  }
  .mx-xxl-0 {
    margin-left: 0rem;
    margin-right: 0rem;
  }
  .mx-xxl-1 {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .mx-xxl-2 {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .mx-xxl-3 {
    margin-left: 3rem;
    margin-right: 3rem;
  }
  .mx-xxl-4 {
    margin-left: 4rem;
    margin-right: 4rem;
  }
  .mx-xxl-5 {
    margin-left: 5rem;
    margin-right: 5rem;
  }
  .mx-xxl-6 {
    margin-left: 6rem;
    margin-right: 6rem;
  }
  .mx-xxl-7 {
    margin-left: 7rem;
    margin-right: 7rem;
  }
  .mx-xxl-8 {
    margin-left: 8rem;
    margin-right: 8rem;
  }
  .mx-xxl-9 {
    margin-left: 9rem;
    margin-right: 9rem;
  }
  .mx-xxl-10 {
    margin-left: 10rem;
    margin-right: 10rem;
  }
  .px-xxl-0 {
    padding-left: 0rem;
    padding-right: 0rem;
  }
  .px-xxl-1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .px-xxl-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .px-xxl-3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .px-xxl-4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
  .px-xxl-5 {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  .px-xxl-6 {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .px-xxl-7 {
    padding-left: 7rem;
    padding-right: 7rem;
  }
  .px-xxl-8 {
    padding-left: 8rem;
    padding-right: 8rem;
  }
  .px-xxl-9 {
    padding-left: 9rem;
    padding-right: 9rem;
  }
  .px-xxl-10 {
    padding-left: 10rem;
    padding-right: 10rem;
  }
  .my-xxl-0 {
    margin-top: 0rem;
    margin-bottom: 0rem;
  }
  .my-xxl-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-xxl-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .my-xxl-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .my-xxl-4 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  .my-xxl-5 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  .my-xxl-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }
  .my-xxl-7 {
    margin-top: 7rem;
    margin-bottom: 7rem;
  }
  .my-xxl-8 {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }
  .my-xxl-9 {
    margin-top: 9rem;
    margin-bottom: 9rem;
  }
  .my-xxl-10 {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }
  .py-xxl-0 {
    padding-top: 0rem;
    padding-bottom: 0rem;
  }
  .py-xxl-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-xxl-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .py-xxl-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .py-xxl-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .py-xxl-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .py-xxl-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .py-xxl-7 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .py-xxl-8 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
  .py-xxl-9 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }
  .py-xxl-10 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
  .mt-xxl-0 {
    margin-top: 0rem;
  }
  .mt-xxl-1 {
    margin-top: 1rem;
  }
  .mt-xxl-2 {
    margin-top: 2rem;
  }
  .mt-xxl-3 {
    margin-top: 3rem;
  }
  .mt-xxl-4 {
    margin-top: 4rem;
  }
  .mt-xxl-5 {
    margin-top: 5rem;
  }
  .mt-xxl-6 {
    margin-top: 6rem;
  }
  .mt-xxl-7 {
    margin-top: 7rem;
  }
  .mt-xxl-8 {
    margin-top: 8rem;
  }
  .mt-xxl-9 {
    margin-top: 9rem;
  }
  .mt-xxl-10 {
    margin-top: 10rem;
  }
  .mr-xxl-0 {
    margin-right: 0rem;
  }
  .mr-xxl-1 {
    margin-right: 1rem;
  }
  .mr-xxl-2 {
    margin-right: 2rem;
  }
  .mr-xxl-3 {
    margin-right: 3rem;
  }
  .mr-xxl-4 {
    margin-right: 4rem;
  }
  .mr-xxl-5 {
    margin-right: 5rem;
  }
  .mr-xxl-6 {
    margin-right: 6rem;
  }
  .mr-xxl-7 {
    margin-right: 7rem;
  }
  .mr-xxl-8 {
    margin-right: 8rem;
  }
  .mr-xxl-9 {
    margin-right: 9rem;
  }
  .mr-xxl-10 {
    margin-right: 10rem;
  }
  .mb-xxl-0 {
    margin-bottom: 0rem;
  }
  .mb-xxl-1 {
    margin-bottom: 1rem;
  }
  .mb-xxl-2 {
    margin-bottom: 2rem;
  }
  .mb-xxl-3 {
    margin-bottom: 3rem;
  }
  .mb-xxl-4 {
    margin-bottom: 4rem;
  }
  .mb-xxl-5 {
    margin-bottom: 5rem;
  }
  .mb-xxl-6 {
    margin-bottom: 6rem;
  }
  .mb-xxl-7 {
    margin-bottom: 7rem;
  }
  .mb-xxl-8 {
    margin-bottom: 8rem;
  }
  .mb-xxl-9 {
    margin-bottom: 9rem;
  }
  .mb-xxl-10 {
    margin-bottom: 10rem;
  }
  .ml-xxl-0 {
    margin-left: 0rem;
  }
  .ml-xxl-1 {
    margin-left: 1rem;
  }
  .ml-xxl-2 {
    margin-left: 2rem;
  }
  .ml-xxl-3 {
    margin-left: 3rem;
  }
  .ml-xxl-4 {
    margin-left: 4rem;
  }
  .ml-xxl-5 {
    margin-left: 5rem;
  }
  .ml-xxl-6 {
    margin-left: 6rem;
  }
  .ml-xxl-7 {
    margin-left: 7rem;
  }
  .ml-xxl-8 {
    margin-left: 8rem;
  }
  .ml-xxl-9 {
    margin-left: 9rem;
  }
  .ml-xxl-10 {
    margin-left: 10rem;
  }
  .pt-xxl-0 {
    padding-top: 0rem;
  }
  .pt-xxl-1 {
    padding-top: 1rem;
  }
  .pt-xxl-2 {
    padding-top: 2rem;
  }
  .pt-xxl-3 {
    padding-top: 3rem;
  }
  .pt-xxl-4 {
    padding-top: 4rem;
  }
  .pt-xxl-5 {
    padding-top: 5rem;
  }
  .pt-xxl-6 {
    padding-top: 6rem;
  }
  .pt-xxl-7 {
    padding-top: 7rem;
  }
  .pt-xxl-8 {
    padding-top: 8rem;
  }
  .pt-xxl-9 {
    padding-top: 9rem;
  }
  .pt-xxl-10 {
    padding-top: 10rem;
  }
  .pr-xxl-0 {
    padding-right: 0rem;
  }
  .pr-xxl-1 {
    padding-right: 1rem;
  }
  .pr-xxl-2 {
    padding-right: 2rem;
  }
  .pr-xxl-3 {
    padding-right: 3rem;
  }
  .pr-xxl-4 {
    padding-right: 4rem;
  }
  .pr-xxl-5 {
    padding-right: 5rem;
  }
  .pr-xxl-6 {
    padding-right: 6rem;
  }
  .pr-xxl-7 {
    padding-right: 7rem;
  }
  .pr-xxl-8 {
    padding-right: 8rem;
  }
  .pr-xxl-9 {
    padding-right: 9rem;
  }
  .pr-xxl-10 {
    padding-right: 10rem;
  }
  .pb-xxl-0 {
    padding-bottom: 0rem;
  }
  .pb-xxl-1 {
    padding-bottom: 1rem;
  }
  .pb-xxl-2 {
    padding-bottom: 2rem;
  }
  .pb-xxl-3 {
    padding-bottom: 3rem;
  }
  .pb-xxl-4 {
    padding-bottom: 4rem;
  }
  .pb-xxl-5 {
    padding-bottom: 5rem;
  }
  .pb-xxl-6 {
    padding-bottom: 6rem;
  }
  .pb-xxl-7 {
    padding-bottom: 7rem;
  }
  .pb-xxl-8 {
    padding-bottom: 8rem;
  }
  .pb-xxl-9 {
    padding-bottom: 9rem;
  }
  .pb-xxl-10 {
    padding-bottom: 10rem;
  }
  .pl-xxl-0 {
    padding-left: 0rem;
  }
  .pl-xxl-1 {
    padding-left: 1rem;
  }
  .pl-xxl-2 {
    padding-left: 2rem;
  }
  .pl-xxl-3 {
    padding-left: 3rem;
  }
  .pl-xxl-4 {
    padding-left: 4rem;
  }
  .pl-xxl-5 {
    padding-left: 5rem;
  }
  .pl-xxl-6 {
    padding-left: 6rem;
  }
  .pl-xxl-7 {
    padding-left: 7rem;
  }
  .pl-xxl-8 {
    padding-left: 8rem;
  }
  .pl-xxl-9 {
    padding-left: 9rem;
  }
  .pl-xxl-10 {
    padding-left: 10rem;
  }
}
.m-md-35 {
  margin: 2.7rem;
}

@media (min-width: 768px) {
  .m-md-35 {
    margin: 3.7rem;
  }
}
[class*=grid-] {
  display: grid;
  grid-auto-rows: auto;
  gap: var(--spacing-y);
}

@media (min-width: 0px) {
  .grid-xs-1 {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  }
  .grid-xs-2 {
    grid-template-columns: 1fr 1fr;
  }
  .grid-xs-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-xs-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 576px) {
  .grid-sm-2 {
    grid-template-columns: 1fr 1fr;
  }
  .grid-sm-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-sm-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 768px) {
  .grid-md-2 {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacing-y) * 2);
  }
  .grid-md-2-3 {
    grid-template-columns: 2fr 3fr;
    gap: calc(var(--spacing-y) * 2);
  }
  .grid-md-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-md-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 992px) {
  .grid-lg-2 {
    grid-template-columns: 1fr 1fr;
  }
  .grid-lg-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-lg-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1200px) {
  .grid-xl-2 {
    grid-template-columns: 1fr 1fr;
  }
  .grid-xl-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-xl-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 1600px) {
  .grid-xxl-2 {
    grid-template-columns: 1fr 1fr;
  }
  .grid-xxl-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-xxl-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.nogap {
  gap: 0 !important;
}

.item {
  height: 100%;
  position: relative;
  display: grid;
  align-items: center;
}

.align-top {
  align-items: start;
}

.align-center {
  align-items: center;
}

.item-3,
.item-2 {
  grid-column: span 1;
}

@media (min-width: 768px) {
  .item-2 {
    grid-column: span 2;
  }
  .item-3 {
    grid-column: span 3;
  }
}
.gap-1 {
  gap: 1vw;
}

.gap-0 {
  gap: 0;
}

.space-between {
  justify-content: space-between;
}

.gap-0 {
  gap: 0rem;
}

.gap-1 {
  gap: 1rem;
}

.gap-2 {
  gap: 2rem;
}

.gap-3 {
  gap: 3rem;
}

.gap-4 {
  gap: 4rem;
}

.gap-5 {
  gap: 5rem;
}

.gap-6 {
  gap: 6rem;
}

.gap-7 {
  gap: 7rem;
}

.gap-8 {
  gap: 8rem;
}

.gap-9 {
  gap: 9rem;
}

.gap-10 {
  gap: 10rem;
}

@media (min-width: 576px) {
  .gap-sm-0 {
    gap: 0rem;
  }
  .gap-sm-1 {
    gap: 1rem;
  }
  .gap-sm-2 {
    gap: 2rem;
  }
  .gap-sm-3 {
    gap: 3rem;
  }
  .gap-sm-4 {
    gap: 4rem;
  }
  .gap-sm-5 {
    gap: 5rem;
  }
  .gap-sm-6 {
    gap: 6rem;
  }
  .gap-sm-7 {
    gap: 7rem;
  }
  .gap-sm-8 {
    gap: 8rem;
  }
  .gap-sm-9 {
    gap: 9rem;
  }
  .gap-sm-10 {
    gap: 10rem;
  }
}
@media (min-width: 768px) {
  .gap-md-0 {
    gap: 0rem;
  }
  .gap-md-1 {
    gap: 1rem;
  }
  .gap-md-2 {
    gap: 2rem;
  }
  .gap-md-3 {
    gap: 3rem;
  }
  .gap-md-4 {
    gap: 4rem;
  }
  .gap-md-5 {
    gap: 5rem;
  }
  .gap-md-6 {
    gap: 6rem;
  }
  .gap-md-7 {
    gap: 7rem;
  }
  .gap-md-8 {
    gap: 8rem;
  }
  .gap-md-9 {
    gap: 9rem;
  }
  .gap-md-10 {
    gap: 10rem;
  }
}
@media (min-width: 992px) {
  .gap-lg-0 {
    gap: 0rem;
  }
  .gap-lg-1 {
    gap: 1rem;
  }
  .gap-lg-2 {
    gap: 2rem;
  }
  .gap-lg-3 {
    gap: 3rem;
  }
  .gap-lg-4 {
    gap: 4rem;
  }
  .gap-lg-5 {
    gap: 5rem;
  }
  .gap-lg-6 {
    gap: 6rem;
  }
  .gap-lg-7 {
    gap: 7rem;
  }
  .gap-lg-8 {
    gap: 8rem;
  }
  .gap-lg-9 {
    gap: 9rem;
  }
  .gap-lg-10 {
    gap: 10rem;
  }
}
@media (min-width: 1200px) {
  .gap-xl-0 {
    gap: 0rem;
  }
  .gap-xl-1 {
    gap: 1rem;
  }
  .gap-xl-2 {
    gap: 2rem;
  }
  .gap-xl-3 {
    gap: 3rem;
  }
  .gap-xl-4 {
    gap: 4rem;
  }
  .gap-xl-5 {
    gap: 5rem;
  }
  .gap-xl-6 {
    gap: 6rem;
  }
  .gap-xl-7 {
    gap: 7rem;
  }
  .gap-xl-8 {
    gap: 8rem;
  }
  .gap-xl-9 {
    gap: 9rem;
  }
  .gap-xl-10 {
    gap: 10rem;
  }
}
@media (min-width: 1600px) {
  .gap-xxl-0 {
    gap: 0rem;
  }
  .gap-xxl-1 {
    gap: 1rem;
  }
  .gap-xxl-2 {
    gap: 2rem;
  }
  .gap-xxl-3 {
    gap: 3rem;
  }
  .gap-xxl-4 {
    gap: 4rem;
  }
  .gap-xxl-5 {
    gap: 5rem;
  }
  .gap-xxl-6 {
    gap: 6rem;
  }
  .gap-xxl-7 {
    gap: 7rem;
  }
  .gap-xxl-8 {
    gap: 8rem;
  }
  .gap-xxl-9 {
    gap: 9rem;
  }
  .gap-xxl-10 {
    gap: 10rem;
  }
}
.gap-xs {
  gap: 2px;
}

@keyframes floater-drift {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  30% {
    transform: translate(5px, -9px) rotate(1.5deg);
  }
  65% {
    transform: translate(-4px, 7px) rotate(-1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
.floater-item {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  animation: floater-drift var(--float-dur, 5s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

.show {
  --delay: 100ms;
  transition: 1000ms cubic-bezier(0.49, 0.13, 0.25, 1.25);
  transition-delay: var(--delay);
}

[class*=arepeat-u],
[class*=ain-u] {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(1px);
  z-index: 100;
  transition: 1000ms cubic-bezier(0.49, 0.13, 0.25, 1.25);
}

[class*=arepeat-u].show,
[class*=ain-u].show {
  opacity: 1;
  transform: translateY(0px);
  filter: blur(0px);
  z-index: 100;
}

[class*=arepeat-d],
[class*=ain-d] {
  opacity: 0;
  transform: translateY(-30px);
  filter: blur(1px);
  z-index: 100;
}

[class*=arepeat-d].show,
[class*=ain-d].show {
  opacity: 1;
  transform: translateY(0px);
  filter: blur(0px);
  z-index: 100;
}

[class*=ain-l] {
  opacity: 0;
  transform: translateX(30px);
  filter: blur(1px);
  z-index: 100;
}

[class*=ain-l].show {
  opacity: 1;
  transform: translateX(0px);
  filter: blur(0px);
  z-index: 100;
}

[class*=ain-r] {
  opacity: 0;
  transform: translateX(-30px);
  filter: blur(1px);
  z-index: 100;
}

[class*=ain-r].show {
  opacity: 1;
  transform: translateX(0px);
  filter: blur(0px);
  z-index: 100;
}

[class*=ain-f] {
  opacity: 0;
  transform: scale(0.98);
  filter: blur(1px);
  z-index: 100;
}

[class*=ain-f].show {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
  z-index: 100;
}

[class*=arepeat-f] {
  opacity: 0;
  transform: scale(0.98);
  filter: blur(1px);
  z-index: 100;
}

[class*=arepeat-f].show {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
  z-index: 100;
}

/*# sourceMappingURL=style-new.css.map */