:root {
  /* Spacing */
  --space-base: 16px;
  --space-xxs: calc(var(--space-base) * 0.25); /* 4px */
  --space-xs: calc(var(--space-base) * 0.5); /* 8px */
  --space-sm: calc(var(--space-base) * 0.75); /* 12px */
  --space-md: calc(var(--space-base) * 1.5); /* 24px */
  --space-lg: calc(var(--space-base) * 2); /* 32px */
  --space-xl: calc(var(--space-base) * 2.5); /* 40px */
  --space-xxl: calc(var(--space-base) * 4); /* 64px */
  --space-xxxl: calc(var(--space-base) * 5); /* 80px */
  --section-space: var(--space-xxxl); /* 80px */
  --gutter: var(--space-xxl); /* 64px */
  --gutter-sm: var(--space-lg); /* 32px */

  /* Fonts */
  --text-base: 16px;
  --text-sm: calc(var(--text-base) * 0.875); /* 14px */
  --text-lg: calc(var(--text-base) * 1.125); /* 18px */
  --heading-xxs: calc(var(--text-base) * 1.5); /* 24px */
  --heading-xs: calc(var(--text-base) * 1.625); /* 26px */
  --heading-sm: calc(var(--text-base) * 1.75); /* 28px */
  --heading-md: calc(var(--text-base) * 2); /* 32px */
  --heading-lg: calc(var(--text-base) * 2.5); /* 40px */
  --heading-xl: calc(var(--text-base) * 3); /* 48px */
  --heading-xxl: calc(var(--text-base) * 3.25); /* 52px */
  --heading-xxxl: calc(var(--text-base) * 4); /* 64px */
  --font-weight-regular: 500;
  --font-weight-bold: 700;
  --line-height-body: 1.5;
  --line-height-heading: 1.25;
  --font-family-heading: "Barlow Condensed", sans-serif;
  --font-family-body: "Inter", sans-serif;

  /* Colors */
  --color-brand-01: #22356f;
  --color-brand-02: #1b284d;
  --color-brand-03: #3a4f8b;
  --color-brand-04: #e6eaf3;
  --color-brand-05: #f8f9fb;
  --color-brand-06: #3da9fc;
  --color-text-black: #1b1f23;
  --color-text-white: #ffffff;
  --color-text-01: #808590;
  --color-text-02: #c99400;
  --color-text-03: #177ac6;
  --color-ui-01: #f8f9fb;
  --color-ui-02: #e6eaf3;
  --color-ui-03: #2f437f;
  --color-ui-white: #ffffff;
  --color-ui-border: #bfc7d6;
  --color-ui-accent: #3da9fc;
  --color-ui-black: #010101;

  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 24px;
  --border-radius-button: var(--border-radius-sm);
  --border-radius-element: 0;
}

@media only screen and (max-width: 991px) {
  :root {
    --heading-xxs: calc(var(--text-base) * 0.875); /* 14px */
    --heading-xs: calc(var(--text-base) * 1); /* 16px */
    --heading-sm: calc(var(--text-base) * 1.125); /* 18px */
    --heading-md: calc(var(--text-base) * 1.25); /* 20px */
    --heading-lg: calc(var(--text-base) * 1.5); /* 24px */
    --heading-xl: calc(var(--text-base) * 2); /* 32px */
    --heading-xxl: calc(var(--text-base) * 2.5); /* 40px */
    --heading-xxxl: calc(var(--text-base) * 3); /* 48px */
    --section-space: var(--space-xl); /* 40px */
    --gutter: var(--space-md); /* 40px */
    --gutter-sm: var(--space-md); /* 24px */
  }
}

/* Utility */
html,
body {
  font-size: var(--text-base);
  color: var(--color-text-black);
}

p {
  margin-bottom: 0 !important;
  font-size: var(--text-base);
  font-family: var(--font-family-body);
  line-height: var(--line-height-body);
}

.p--small {
  font-size: var(--text-sm);
}

.p--large {
  font-size: var(--text-lg);
}

p + p {
  margin-top: var(--space-base) !important;
}

p a {
  color: var(--color-brand-01);
  text-decoration: underline !important;
}

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

/* Typography */
h1,
.entry-content h1,
.heading1 {
  line-height: var(--line-height-heading) !important;
  font-size: var(--heading-xxl);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  margin: 0;

  span,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: var(--line-height-heading) !important;
    font-size: var(--heading-xxl);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    margin: 0;
  }
}

/* Mobile Menu */
#offCanvas {
  background-color: var(--color-ui-white);
  padding: var(--space-base);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-text-black);
  position: fixed;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  width: 100vw;
  overflow-y: auto;
  left: 100%;
  transition: 0.3s;

  &[aria-expanded="true"] {
    left: 0;
  }

  ul {
    background-color: var(--color-ui-white);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;

    ul {
      padding: var(--space-base);
      position: absolute;
      inset-block: 0;
      overflow-y: auto;
      width: 100%;
      left: 100%;
      transition: 0.3s;
      z-index: 2;
      height: calc(100vh - var(--header-height));

      &[aria-expanded="true"] {
        left: 0;
      }
    }

    li {
      padding-block: var(--space-base);
      width: 100%;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid var(--color-ui-02);
      display: flex;
      justify-content: space-between;
      align-items: center;

      &.submenu-back {
        padding-block: 0;
        border-bottom-color: var(--color-ui-03);
      }
    }
  }

  .mobile-navigation {
    > li > a {
      color: var(--color-text-black);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    ul > li > a {
      font-size: var(--text-sm);
      color: var(--color-text-black);
    }
  }

  button.submenu-toggle:before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background-color: var(--color-brand-06);
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg>');
    mask-repeat: no-repeat;
    mask-position: right center;
    mask-size: contain;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .submenu-back-button:before {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    background-color: var(--color-brand-01);
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>');
    mask-repeat: no-repeat;
    mask-position: left center;
    mask-size: contain;
  }

  .btn.btn--text-only {
    --btn-font-weight: var(--font-weight-bold);
  }

  .iso__container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-brand-04);
    color: var(--color-text-black);
    width: 100%;
    padding-block: var(--space-xs);
    padding-inline: var(--space-md);
  }
}

/* BUTTONS */
button,
.btn,
a.btn,
.elementor-button,
[id^="gform_submit_button_"] {
  /* basic button style */
  --btn-font-size: var(--text-base);
  --btn-color: var(--color-brand-01);
  --btn-border-color: var(--color-brand-01);
  --btn-text-color: var(--color-text-white);
  --btn-border-size: 2px;
  --btn-transform: uppercase;
  --btn-font-weight: var(--font-weight-bold, 900);
  --btn-padding-inline: var(--space-md, 16px);
  --btn-padding-block: var(--space-sm, 12px);

  font-family: var(--font-family-body);
  position: relative;
  display: inline-flex;
  gap: var(--space-xs);
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  font-size: var(--btn-font-size, 1em);
  font-weight: var(--btn-font-weight, inherit) !important;
  text-decoration: none !important;
  text-transform: var(--btn-transform, uppercase) !important;
  color: var(--btn-text-color, inherit) !important;
  background-color: var(--btn-color, inherit) !important;
  padding-inline: var(--btn-padding-inline, inherit) !important;
  padding-block: var(--btn-padding-block, inherit) !important;
  border-radius: var(--border-radius-button, 0) !important;
  border-style: solid !important;
  border-width: var(--btn-border-size, 1px) !important;
  border-color: var(--btn-border-color, inherit) !important;
  cursor: pointer;
  line-height: 1.5;
  letter-spacing: 1px;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;

  .elementor-button-content-wrapper {
    gap: var(--space-xs);
  }
}

.btn--primary-dark,
a.btn--primary-dark {
  --btn-color: var(--color-brand-06);
  --btn-border-color: var(--color-brand-06);
  --btn-text-color: var(--color-text-black);
}

.faux-link:hover .btn--primary-dark,
.faux-link:focus .btn--primary-dark,
.btn--primary-dark:hover,
.btn--primary-dark:focus,
a.btn--primary-dark:hover,
a.btn--primary-dark:focus {
  --btn-color: var(--color-ui-white);
  --btn-border-color: var(--color-ui-white);
  --btn-text-color: var(--color-text-black);
}

.faux-link:active .btn--primary-dark,
.btn--primary-dark:active,
a.btn--primary-dark:active {
  --btn-color: transparent;
  --btn-border-color: var(--color-text-white);
  --btn-text-color: var(--color-text-white);
}

.btn--text-only,
a.btn--text-only,
button.submenu-toggle,
button.submenu-back-button {
  --btn-color: transparent;
  --btn-border-color: transparent;
  --btn-text-color: inherit;
  --btn-transform: none;
  --btn-padding-inline: 0;
  --btn-font-weight: var(--font-weight-regular);
  --border-radius-button: 0;

  transition: 0.4s;
}

button.submenu-back-button {
  --btn-text-color: var(--color-text-black);
}

.btn--text-only:hover,
.btn--text-only:focus,
a.btn--text-only:hover,
a.btn--text-only:focus,
button.submenu-toggle:hover,
button.submenu-toggle:focus,
button.submenu-back-button:hover,
button.submenu-back-button:focus {
  --btn-color: transparent;
  --btn-border-color: transparent;
  --btn-text-color: inherit;
  --btn-font-weight: var(--font-weight-bold);
}

.btn--text-only i,
a.btn--text-only i,
.header-nav .e-n-menu-dropdown-icon i,
button.e-search-submit i,
button.submenu-back-button i {
  color: var(--color-ui-accent) !important;
  transition: 0.3s;
}

/* Header */
.utility-nav .elementor-nav-menu--main,
.utility-nav .elementor-nav-menu--main ul,
.utility-nav .elementor-button-wrapper:has(.btn--text-only),
.utility-nav form.hfe-search-button-wrapper,
.header-nav nav,
.header-nav nav .e-n-menu-wrapper,
.header-nav nav .e-n-menu-wrapper ul {
  height: 100%;
}

.utility-nav .elementor-nav-menu--main,
.utility-nav .elementor-button-wrapper:has(.btn--text-only),
.utility-nav form.hfe-search-button-wrapper {
  border-left: 1px solid rgba(213, 220, 235, 0.3);
  display: flex;
  align-items: center;
}

.utility-nav {
  a {
    color: var(--color-text-white);

    &.btn--text-only {
      --btn-padding-inline: var(--space-md);
      --btn-padding-block: 5px; // needed to make the height 36px for utility nav

      &:hover {
        --btn-padding-inline: var(--space-md);
        --btn-font-weight: var(--font-weight-regular);

        text-decoration: underline !important;
      }
    }
  }

  .elementor-nav-menu a {
    padding-block: 5px !important; // needed to make the height 36px for utility nav
  }

  .elementor-nav-menu--main ul li {
    &:not(:first-child) {
      border-left: 1px solid rgba(213, 220, 235, 0.3);
    }

    a:hover {
      text-decoration: underline;
    }
  }

  .hfe-search-button-wrapper.hfe-input-focus i {
    color: var(--color-text-black) !important;
  }

  .btn--text-only:hover {
    --btn-text-color: var(--color-text-white);
  }
}

.header-nav {
  .e-n-menu-content {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.11);

    ul {
      columns: 2;
    }
  }

  a:hover {
    font-weight: var(--font-weight-bold);
  }

  .e-n-menu-title {
    border-bottom: 0 solid var(--color-brand-06) !important;
    transition: 0.4s;
  }

  li:hover .e-n-menu-title {
    border-bottom-width: 4px !important;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(61, 169, 252, 0.3) 100%
    ),
      var(--Colors-UI-ui-black, #010101);
  }
}

.gt_selector,
.gt_selector:focus {
  background-color: transparent;
  border: none;
  color: var(--color-text-white);
  padding-block: 7px; // needed to make the height 36px for utility nav
}

.btn--rfq-mobile a.btn {
  --btn-padding-inline: var(--space-base);
}

.e-off-canvas__content button.e-search-submit {
  --btn-color: var(--color-ui-01);
  --btn-border-color: var(--color-brand-06);
  --btn-border-size: 0 0 2px 0;

  margin: 0 !important;
}

/* Footer */
footer .far.fa-building {
  font-weight: var(--font-weight-bold);
}

.footer--black {
  background-color: var(--color-ui-black);
  padding-inline: var(--space-xxl);
  padding-block: var(--space-xl);

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  a:hover {
    color: var(--color-text-white);
  }

  a.btn--text-only:hover {
    --btn-font-weight: var(--font-weight-regular);

    text-decoration: underline !important;
  }

  .copyright-block {
    column-gap: var(--space-lg);
    display: flex;
    flex-wrap: wrap;

    .btn.btn--text-only {
      --btn-text-color: var(--color-text-white);
    }
  }

  .contact__socials {
    display: flex;
    align-items: center;
    justify-content: center;

    .social-icon {
      --icon-size: 24px;
      --icon-padding: 10px;

      background-color: #FFFFFF1A;
      font-size: var(--icon-size, 25px);
      height: calc(var(--icon-size, 25px) + 2 * var(--icon-padding, .5em));
      line-height: var(--icon-size, 25px);
      width: calc(var(--icon-size, 25px) + 2 * var(--icon-padding, .5em));
      
      i {
        color: #BDBDBD;
      }
    }
  }

  @media (min-width: 1024px) {
    .copyright-block {
      column-gap: 0;
      flex-wrap: nowrap;

      a.btn--text-only {
        --btn-padding-inline: var(--space-base);
      }
    }
  }
}

@media (min-width: 1024px) {
  .footer-menu {
    .elementor-nav-menu--main {
      ul.elementor-nav-menu {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);

        a {
          padding-block: 0;

          &:hover {
            text-decoration: underline !important;
          }
        }
      }
    }

    > * {
      ul > li:first-child > a,
        &:last-child ul > li > a {
          color: var(--color-brand-06);
          font-weight: var(--font-weight-bold);
      }
    }
  }
}

/* Overrides */
@media only screen and (min-width: 1024px) {
  .is-hidden--desktop {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) and (width < 1024px) {
  .is-hidden--tablet {
    display: none !important;
  }
}
@media only screen and (width < 768px) {
  .is-hidden--mobile {
    display: none !important;
  }
}

html:has(#offCanvas[aria-expanded="true"]) {
  overflow: hidden;
}

header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  background-color: var(--color-ui-black);

  a:hover {
    opacity: 1;
  }

  .fa,
  .fas {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
  }

  .fa-phone-alt:before {
    content: "\f879";
  }

  .container {
    max-width: min(100%, 1440px);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .utility-bar--mobile {
    display: flex;
    align-items: stretch;
    padding-inline: 0;
    border-bottom: 1px solid #D5DCEB4D;

    > * {
      --border-radius-button: 0;

      flex-basis: 50%;
    }

    .btn.btn--text-only {
      --btn-padding-inline: var(--space-md, 16px);
      --btn-text-color: var(--color-text-white);
    }
  }

  .utility-bar--desktop {
    border-bottom: 1px solid #D5DCEB4D;

    > .container {
      display: flex;
      align-items: stretch;

      > * {
        display: flex;
        align-items: center;
        padding-right: var(--space-md);

        &:not(:first-child) {
          padding-left: var(--space-md);
          border-left: 1px solid #D5DCEB4D;
        }
      }

      ul {
        list-style: none;
        margin: 0;
        padding: 0;

        &.utility-nav {
          display: flex;
          padding-inline: 0;

          > li {
            height: 100%;
            display: flex;
            align-items: center;
            border-right: 1px solid #D5DCEB4D;

            a {
              padding-inline: 20px;
              padding-block: 5px;
              line-height: 20px;

              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
      }

      .spacer {
        flex-grow: 1;
      }

      .btn.btn--text-only,
      .btn.btn--text-only:hover {
        --btn-padding-inline: var(--space-md, 16px);
        --btn-text-color: var(--color-text-white);
      }
    }
  }

  .logo__container {
    margin-block: var(--space-xs);

    img {
      height: 59px;
      max-width: 200px;
      object-fit: contain;
      object-position: center left;
    }
  }

  .main-nav--mobile,
  .main-nav--desktop {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .main-nav--desktop {
    align-items: stretch;
    justify-content: flex-start;
    column-gap: 24px;
    position: relative;

    > * {
      display: flex;
      align-items: center;
    }

    > .btn {
      align-self: center;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      &.desktop-navigation {
        flex-grow: 1;
        justify-content: flex-end;

        > li {
          height: 100%;
          padding: 0;
          margin: 0;
          border: none;
          width: max-content;

          &:hover .mega-menu__title,
          &:focus .mega-menu__title {
            border-bottom-width: 4px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(61, 169, 252, 0.3) 100%), #010101;

            i {
              transform: rotate(180deg);
            }
          }

          .mega-menu__title {
            transition: 0.4s;
            border-bottom: 0 solid var(--color-brand-06);
            height: 100%;
            display: flex;
            align-items: center;
            padding: 0.5rem 1rem;
            column-gap: 5px;
            color: var(--color-text-white);
            white-space: nowrap;

            i {
              color: var(--color-brand-06);
            }
          }
        }
      }

      li {
        padding-block: var(--space-base);
        width: 100%;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid var(--color-ui-02);
        display: flex;
        justify-content: space-between;
        align-items: center;

        &:hover .mega-menu__content,
        &:focus .mega-menu__content {
          opacity: 1;
          pointer-events: auto;
        }

        .mega-menu__content {
          position: absolute;
          inset-inline: 0;
          top: 100%;
          transition: 0.3s;
          z-index: 2;
          opacity: 0;
          pointer-events: none;
          background-color: var(--color-ui-white);
        }

        &.submenu-back {
          padding-block: 0;
          border-bottom-color: var(--color-ui-03);
        }
      }
    }
  }

  .menu-toggle {
    color: var(--color-brand-06);

    &[aria-expanded="true"] .fa-bars::before {
      content: '\f00d';
    }
  }

  .mega-menu__container {
    color: var(--color-text-black);
    padding-block: var(--section-space);
    padding-inline: var(--gutter);
    display: flex;

    > * {
      width: 100%;
    }

    .mega-menu__submenu {
      columns: 2;

      li {
        border: none;
        padding: 0;
        margin: 0;

        a {
          color: var(--text-color-black);
          padding-inline: 20px;
          padding-block: 12px;
        }
      }
    }
  }