/**
 * Theme Name: Recast 2025
 * Template: hello-elementor
 * Description: A custom Elementor theme for Recast.
 * Version:   1.0.0
 * Author: Dragon Army
 * Author URI: https://www.dragonarmy.com
 */

/* font */
@import url("https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap");

/* --- BRAND LIBRARY --- */
/* color */
:root {
  --animation-duration: 1s;
  --animation-duration-fast: 0.5s;
  --animation-duration-slow: 1.5s;
  --animation-delay-second: 0.2s;
  --animation-delay-third: 0.4s;
  --animation-delay-fourth: 0.6s;

  --neutrals-black: #161f5b;
  --primary-royal-blue: #1f289c;
  --primary-recast-blue: #0372ff;
  --primary-recast-teal: #31d1ff;
  --neutrals-grey-3: #6e75b1;
  --neutrals-grey-2: #b2b5e5;
  --neutrals-grey-1: #e1e9f9;
  --neutrals-white: #ffffff;
  --secondary-orange: #f05928;
  --informational-error: #ec0951;
  --informational-success: #2fa77d;
  --informational-info: var(--primary-recast-blue);
  --informational-warning: #ffbb01;
  --interactive-interactive: var(--primary-recast-blue);
  --tools-right-click-tools: #ec0951;
  --tools-application-workspace: #0372ff;
  --tools-application-manager: #1ab489;
  --tools-endpoint-inisights: #d749c8;
  --tools-privilige-manager: #ffbb01;

  --font-family-headings: "Host Grotesk";
  --font-family-body: "Host Grotesk";

  --stroke-width: 2px;
  --spacing-margins-base: 80px;
  --spacing-margins-l: 64px;
  --spacing-margins-m: 48px;
  --spacing-margins-s: 24px;
  --spacing-gap-base: 64px;
  --spacing-gap-xl: 56px;
  --spacing-gap-l: 40px;
  --spacing-gap-m: 32px;
  --spacing-gap-s: 24px;
  --spacing-gap-xs: 16px;
  --spacing-gap-xxs: 8px;
}

/* Mode: Desktop HD */
:root {
  --global-maxwidth-maxwidth-l: 1600px;
  --global-maxwidth-maxwidth-m: 1200px;
  --global-maxwidth-maxwidth-s: 600px;
  --global-maxwidth-maxwidth-xs: 288px;
  --margins-base-hori: 100px;
  --margins-base-vert: 100px;
  --margins-l: 48px;
  --margins-m: 32px;
  --margins-s: 20px;
  --gap-xl: 80px;
  --gap-base: 56px;
  --gap-l: 32px;
  --gap-m: 24px;
  --gap-s: 16px;
  --gap-xs: 8px;
  --breakpoint: 1920px;
  --navigation-desktop-height: 100px;
  --navigation-mobile-height: 48px;
  --global-card-minwidth: 300px;
  --global-digital-grid-maxwidth: 400px;
  --global-card-maxwidth: 600px;
  --home-hero-height: 800px;
  --home-hero-anchor-maxwidth: 40px;
  --product-cardgrid-minwidth: 400px;
  --timeline-cardgrid-minwidth: 400px;
  --icon-maxwidth-l: 120px;
  --icon-maxwidth-m: 88px;
  --icon-maxwidth-s: 64px;
  --icon-maxwidth-xs: 48px;
  --grids-minwidth-4-2: 400px;

  --size-heading-disp: 96px;
  --size-heading-xl: 72px;
  --size-heading-l: 48px;
  --size-heading-m: 40px;
  --size-heading-s: 32px;
  --size-heading-xs: 20px;
  --size-body-xl: 28px;
  --size-body-l: 26px;
  --size-button-l: 20px;
  --size-button-m: 16px;
  --size-button-s: 14px;
  --size-body-m: 24px;
  --size-body-s: 20px;
  --size-body-xs: 18px;
  --size-body-sub: 14px;
}

/* Mode: Desktop */
@media (min-width: 1201px) and (max-width: 1600px) {
  :root {
    --global-maxwidth-maxwidth-l: 1600px;
    --global-maxwidth-maxwidth-m: 1200px;
    --global-maxwidth-maxwidth-s: 600px;
    --global-maxwidth-maxwidth-xs: 288px;
    --margins-base-hori: 88px;
    --margins-base-vert: 100px;
    --margins-l: 40px;
    --margins-m: 32px;
    --margins-s: 20px;
    --gap-xl: 80px;
    --gap-base: 48px;
    --gap-l: 32px;
    --gap-m: 22px;
    --gap-s: 14px;
    --gap-xs: 8px;
    --breakpoint: 1440px;
    --navigation-desktop-height: 100px;
    --navigation-mobile-height: 48px;
    --global-card-minwidth: 300px;
    --global-digital-grid-maxwidth: 300px;
    --global-card-maxwidth: 600px;
    --home-hero-height: 600px;
    --home-hero-anchor-maxwidth: 40px;
    --product-cardgrid-minwidth: 400px;
    --timeline-cardgrid-minwidth: 400px;
    --icon-maxwidth-l: 100px;
    --icon-maxwidth-m: 88px;
    --icon-maxwidth-s: 64px;
    --icon-maxwidth-xs: 48px;
    --grids-minwidth-4-2: 400px;

    --size-heading-disp: 88px;
    --size-heading-xl: 56px;
    --size-heading-l: 48px;
    --size-heading-m: 40px;
    --size-heading-s: 32px;
    --size-heading-xs: 20px;
    --size-body-xl: 28px;
    --size-body-l: 26px;
    --size-button-l: 20px;
    --size-button-m: 16px;
    --size-button-s: 14px;
    --size-body-m: 22px;
    --size-body-s: 18px;
    --size-body-xs: 16px;
    --size-body-sub: 14px;
  }
}

/* Mode: Tablet */
@media (min-width: 601px) and (max-width: 1200px) {
  :root {
    --global-maxwidth-maxwidth-l: 1600px;
    --global-maxwidth-maxwidth-m: 1200px;
    --global-maxwidth-maxwidth-s: 600px;
    --global-maxwidth-maxwidth-xs: 288px;
    --margins-base-hori: 40px;
    --margins-base-vert: 56px;
    --margins-l: 24px;
    --margins-m: 22px;
    --margins-s: 20px;
    --gap-xl: 64px;
    --gap-base: 32px;
    --gap-l: 26px;
    --gap-m: 18px;
    --gap-s: 12px;
    --gap-xs: 4px;
    --breakpoint: 820px;
    --navigation-desktop-height: 100px;
    --navigation-mobile-height: 48px;
    --global-card-minwidth: 300px;
    --global-digital-grid-maxwidth: 200px;
    --global-card-maxwidth: 600px;
    --home-hero-height: 600px;
    --home-hero-anchor-maxwidth: 32px;
    --product-cardgrid-minwidth: 300px;
    --timeline-cardgrid-minwidth: 300px;
    --icon-maxwidth-l: 88px;
    --icon-maxwidth-m: 72px;
    --icon-maxwidth-s: 56px;
    --icon-maxwidth-xs: 48px;
    --grids-minwidth-4-2: 400px;

    --size-heading-disp: 88px;
    --size-heading-xl: 48px;
    --size-heading-l: 40px;
    --size-heading-m: 36px;
    --size-heading-s: 30px;
    --size-heading-xs: 20px;
    --size-body-xl: 28px;
    --size-body-l: 24px;
    --size-button-l: 20px;
    --size-button-m: 16px;
    --size-button-s: 14px;
    --size-body-m: 20px;
    --size-body-s: 18px;
    --size-body-xs: 16px;
    --size-body-sub: 14px;
  }
}

/* Mode: Mobile */
@media (max-width: 600px) {
  :root {
    --global-maxwidth-maxwidth-l: 1600px;
    --global-maxwidth-maxwidth-m: 1200px;
    --global-maxwidth-maxwidth-s: 600px;
    --global-maxwidth-maxwidth-xs: 288px;
    --margins-base-hori: 20px;
    --margins-base-vert: 40px;
    --margins-l: 32px;
    --margins-m: 24px;
    --margins-s: 16px;
    --gap-xl: 48px;
    --gap-base: 32px;
    --gap-l: 20px;
    --gap-m: 16px;
    --gap-s: 12px;
    --gap-xs: 4px;
    --breakpoint: 400px;
    --navigation-desktop-height: 64px;
    --navigation-mobile-height: 48px;
    --global-card-minwidth: 300px;
    --global-digital-grid-maxwidth: 140px;
    --global-card-maxwidth: 300px;
    --home-hero-height: 600px;
    --home-hero-anchor-maxwidth: 24px;
    --product-cardgrid-minwidth: 300px;
    --timeline-cardgrid-minwidth: 300px;
    --icon-maxwidth-l: 64px;
    --icon-maxwidth-m: 64px;
    --icon-maxwidth-s: 48px;
    --icon-maxwidth-xs: 48px;
    --grids-minwidth-4-2: 300px;

    --size-heading-disp: 72px;
    --size-heading-xl: 42px;
    --size-heading-l: 38px;
    --size-heading-m: 34px;
    --size-heading-s: 28px;
    --size-heading-xs: 16px;
    --size-body-xl: 26px;
    --size-body-l: 24px;
    --size-button-l: 20px;
    --size-button-m: 16px;
    --size-button-s: 14px;
    --size-body-m: 20px;
    --size-body-s: 18px;
    --size-body-xs: 16px;
    --size-body-sub: 14px;
  }
}

/* animations 
   example: class="animated animated-fast fadeInUp"
   You can sequence them by adding "animation-delay-second" or third or fourth.
*/
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(20%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fadeInRight {
  animation-name: fadeInRight;
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-20%, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fadeInLeft {
  animation-name: fadeInLeft;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}
.fadeInUp.animated {
  animation-duration: var(--animation-duration);
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}
.fadeInUp.animated-fast {
  animation-duration: var(--animation-duration-fast);
}
.fadeInUp.animated-slow {
  animation-duration: var(--animation-duration-slow);
}
.fadeInRight.animated {
  animation-duration: var(--animation-duration);
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}
.fadeInRight.animated-fast {
  animation-duration: var(--animation-duration-fast);
}
.fadeInRight.animated-slow {
  animation-duration: var(--animation-duration-slow);
}
.fadeInLeft.animated {
  animation-duration: var(--animation-duration);
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}
.fadeInLeft.animated-fast {
  animation-duration: var(--animation-duration-fast);
}
.fadeInLeft.animated-slow {
  animation-duration: var(--animation-duration-slow);
}
.fadeIn.animated {
  animation-duration: var(--animation-duration);
  animation-fill-mode: both;
  animation-timing-function: ease-out;
}
.fadeIn.animated-fast {
  animation-duration: var(--animation-duration-fast);
}
.fadeIn.animated-slow {
  animation-duration: var(--animation-duration-slow);
}
.animation-delay-second {
  animation-delay: var(--animation-delay-second);
}
.animation-delay-third {
  animation-delay: var(--animation-delay-third);
}
.animation-delay-fourth {
  animation-delay: var(--animation-delay-fourth);
}
.doAnimation {
  animation-play-state: paused;
  opacity: 0;
}
.elementor-editor-active .doAnimation {
  opacity: 1;
  animation: none;
}
.animated {
  animation-play-state: running;
}

/* Prevents rubber-band / overscroll “bounce” effect on mobile */
html,
body {
  overscroll-behavior-x: none;
  overflow-x: hidden;
}

body {
  font-family: "Host Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.heading-disp {
  font-family: var(--font-family-headings, "Host Grotesk");
  font-size: var(--size-heading-disp, 96px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}
.heading-xl {
  font-family: var(--font-family-headings, "Host Grotesk");
  font-size: var(--size-heading-xl, 72px);
  font-style: normal;
  font-weight: 400;
  line-height: 90%;
}
.heading-l {
  font-family: var(--font-family-headings, "Host Grotesk");
  font-size: var(--size-heading-l, 48px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}
.heading-m {
  font-family: var(--font-family-headings, "Host Grotesk");
  font-size: var(--size-heading-m, 40px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}
.heading-s {
  font-family: var(--font-family-headings, "Host Grotesk");
  font-size: var(--size-heading-s, 32px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}
.heading-xs {
  font-family: var(--font-family-headings, "Host Grotesk");
  font-size: var(--size-heading-xs, 20px);
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}

.body-xl {
  font-family: var(--font-family-body, "Host Grotesk");
  font-size: var(--size-body-xl, 26px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}
.body-l {
  font-family: var(--font-family-body, "Host Grotesk");
  font-size: var(--size-body-l, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}
.body-m {
  font-family: var(--font-family-body, "Host Grotesk");
  font-size: var(--size-body-m, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}
.body-s {
  font-family: var(--font-family-body, "Host Grotesk");
  font-size: var(--size-body-s, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}
.body-xs {
  font-family: var(--font-family-body, "Host Grotesk");
  font-size: var(--size-body-xs, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}
.body-sub {
  font-family: var(--font-family-body, "Host Grotesk");
  font-size: var(--size-body-sub, 14px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

/* a {
    font-weight: 700;
    color: var(--primary-recast-blue);
    text-decoration: underline;
} */

/* using important in order to override any elementor settings */
.cta-primary-on-light,
.e-cta-primary-on-light a {
  font-size: var(--size-button-l, 20px) !important;
  background: linear-gradient(
    90deg,
    #124ac9 0%,
    #124ac9 50%,
    var(--primary-royal-blue) 50%,
    var(--primary-royal-blue) 100%
  ) !important;
  background-size: 200% 100% !important;
  background-position: right center !important;
  color: var(--neutrals-white, #ffffff) !important;
  padding: 14px 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition: background-position 0.4s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.cta-primary-on-light:hover,
.e-cta-primary-on-light a:hover {
  background-position: left center !important;
}
.cta-primary-on-dark, .e-cta-primary-on-dark a {
  font-size: var(--size-button-l, 20px);
  background: linear-gradient(
    90deg,
    #124ac9 0%,
    #124ac9 50%,
    #0371ff 50%,
    #0371ff 100%
  ) !important;
  background-size: 200% 100% !important;
  background-position: right center !important;
  color: var(--neutrals-white, #ffffff) !important;
  padding: 14px 16px;
  font-weight: 700;
  line-height: 1;
  transition: background-position 0.4s ease;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.cta-primary-on-dark:hover, .e-cta-primary-on-dark a:hover {
  color: var(--neutrals-white, #ffffff) !important;
  background-position: left center !important;
}

/* using important in order to override any elementor settings */
.cta-secondary-on-light,
.e-cta-secondary-on-light a {
  font-size: var(--size-button-l, 20px) !important;
  background: linear-gradient(
    90deg,
    #0372ff33 0%,
    #0372ff33 50%,
    #ffffff00 50%,
    #ffffff00 100%
  ) !important;
  background-size: 200% 100% !important;
  background-position: right center !important;
  color: var(--neutrals-black) !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border: 2px solid var(--primary-royal-blue);
  transition: background-position 0.4s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.cta-secondary-on-light:hover,
.e-cta-secondary-on-light a:hover {
  background-position: left center !important;
}
.cta-secondary-on-dark, .e-cta-secondary-on-dark a {
  font-size: var(--size-button-l, 20px);
  background: linear-gradient(
    90deg,
    #0372ff33 0%,
    #0372ff33 50%,
    var(--primary-royal-blue) 50%,
    var(--primary-royal-blue) 100%
  );
  background-size: 200% 100%;
  background-position: right center;
  color: var(--neutrals-white, #ffffff) !important;
  padding: 12px 16px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--primary-recast-blue, #0372ff);
  transition: background-position 0.4s ease;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.cta-secondary-on-dark:hover, .e-cta-secondary-on-dark a:hover {
  color: var(--neutrals-white, #ffffff);
  background-position: left center;
}

.card {
  background: var(--neutrals-white, #ffffff);
  border: var(--stroke-width, 2px) solid var(--neutrals-grey-1, #e1e9f9);
  position: relative;
  overflow: hidden;
  transition: border 500ms ease, box-shadow 500ms ease;
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    120% 120% at 100% 100%,
    rgba(49, 209, 255, 0.15) 0%,
    rgba(49, 209, 255, 0.05) 40%,
    rgba(49, 209, 255, 0) 80%
  );
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
  z-index: 1;
}
.card:hover {
  border: 2px solid var(--Neutrals-Grey-2, #b2b5e5) !important;
  box-shadow: 0px 24px 24px 0px #161f5b1a;
}
.card:hover::before {
  opacity: 1;
}

/* header */
.nav-cta-primary a,
.nav-cta-secondary a {
  font-size: var(--size-button-l, 20px) !important;
  padding: 12px 14px !important;
  white-space: nowrap !important;
}
.nav-cta-primary a {
  padding: 14px 14px !important;
}

.elementor-location-header {
  font-weight: 400;
  color: var(--neutrals-black) !important;
  position: relative;
  z-index: 100;
}

.elementor-location-header
  .elementor-widget-n-menu
  .e-n-menu-title:not(.e-current):not(:hover)
  .e-n-menu-title-container
  .e-n-menu-title-text {
  color: var(--neutrals-black) !important;
}

.elementor-location-header a {
  text-decoration: none !important;
}

#desktopSearch .e-n-menu-dropdown-icon {
  display: none;
}

#desktopSearch {
  cursor: pointer !important;
}

#desktopSearch .e-n-menu-dropdown-icon {
  display: none;
}

.search-container {
  width: 100% !important;
}



/* footer */
footer a {
  text-decoration: none !important;
}

/* containers */
.grid-container,
.outer-container,
.base-container {
  margin: 0 auto;
  padding: var(--margins-base-vert, 100px) var(--margins-base-hori, 100px);
}

.outer-container.short {
  padding: 0 var(--margins-base-hori, 100px);
}

.loop-filter-select {
  width: auto;
  color: var(--neutrals-black) !important;
}

.padding-short {
  padding-top: var(--gap-m) !important;
  padding-bottom: var(--gap-m) !important;
}

/* mobile nav adjustments */
@media (max-width: 1024px) {
  .nav-cta-primary a,
  .nav-cta-secondary a {
    font-size: var(--size-button-m, 16px) !important;
    padding: 10px 12px !important;
  }
  header nav .e-n-menu-title-text {
    font-weight: 400 !important;
    font-size: var(--size-body-xs) !important;
    color: var(--neutrals-black) !important;
  }
  
  header nav .menu-item a {
    font-size: 16px !important;
    color: var(--neutrals-black) !important;
    font-weight: 400 !important;
  }
  header nav .e-n-menu-title-container {
    cursor: pointer;
    width: 100% !important;
    justify-content: space-between !important;
  }

  header .e-off-canvas__content {
    margin-top: 80px;
  }

  .nav-mobile-back .elementor-button-text {
    color: var(--neutrals-white);
  }

  /* faster mobile nav slide in */
  header .elementor-widget-off-canvas {
    --e-off-canvas-animation-duration: 0.5s;
    --e-off-canvas-animation-duration-minimum: Max(
      0.001s,
      var(--e-off-canvas-animation-duration)
    );
  }

  /* bump off-canvas down when logged into Wordpress */
  .admin-bar header .elementor-widget-off-canvas .e-off-canvas__content {
    margin-top: 46px;
  }

  .nav-mobile-back .elementor-button-icon {
    fill: var(--primary-recast-blue);
  }

  header
    .elementor-widget-n-menu
    .e-n-menu[data-layout="dropdown"]
    .e-n-menu-toggle[aria-expanded="true"]
    + .e-n-menu-wrapper {
    height: 100vh;
    max-height: 100vh;
    background-color: var(--neutrals-white);
  }

  /* sub items in mobile nav (if necessary) */
  .elementor-item-anchor.has-submenu.highlighted,
  .elementor-item-anchor:hover,
  .elementor-item-anchor:focus {
    background-color: var(--neutrals-grey-1) !important;
    color: var(--neutrals-black) !important;
  }
  .elementor-nav-menu .sub-arrow .e-font-icon-svg {
    fill: var(--neutrals-black);
  }
  .elementor-item-anchor.has-submenu.highlighted .sub-arrow {
    transform: rotate(180deg);
    transform-origin: 70% 50%;
  }

  /* hide off-canvas overlay */
  header .elementor-widget-off-canvas .e-off-canvas__overlay {
    display: none;
  }

  .button-container {
    position: absolute;
    right: var(--margins-m);
  }

  /* animate main menu on mobile */
  :root {
    --n-menu-dropdown-content-box-height: 0; /* need a starting value for this in order to animate it */
  }
  .e-n-menu-wrapper {
    transition: all 0.5s ease-out !important;
    height: var(--n-menu-dropdown-content-box-height) !important;
    /* top: calc(var(--n-menu-dropdown-content-box-height) - 100vh) !important; */
    display: flex !important;
    overflow-y: hidden !important;
  }
}

@media (max-width: 400px) {
  main#content {
    padding-top: 75px !important;
  }
}

/* post filters */
select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  height: 45px;
  width: 100%;
  max-width: none;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAMAAACtdX32AAAAdVBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhMdQaAAAAJ3RSTlMAAAECAwQGBwsOFBwkJTg5RUZ4eYCHkJefpaytrsXGy8zW3+Do8vNn0bsyAAAAYElEQVR42tXROwJDQAAA0Ymw1p9kiT+L5P5HVEi3qJn2lcPjtIuzUIJ/rhIGy762N3XaThqMN1ZPALsZPEzG1x8LrFL77DHBnEMxBewz0fJ6LyFHTPL7xhwzWYrJ9z22AqmQBV757MHfAAAAAElFTkSuQmCC);
  background-position: 100%;
  background-repeat: no-repeat;
  padding: 0.5rem;
  padding-right: 40px;
  border-radius: 0;
  margin-bottom: var(--gap-m);
}

.single-post-container {
  padding: var(--gap-m) var(--margins-base-hori) !important;
}

/* loop grid load more */
.e-loop__load-more a {
  font-size: var(--size-button-l, 20px) !important;
  background: linear-gradient(
    90deg,
    #124ac9 0%,
    #124ac9 50%,
    var(--primary-royal-blue) 50%,
    var(--primary-royal-blue) 100%
  ) !important;
  background-size: 200% 100% !important;
  background-position: right center !important;
  color: var(--neutrals-white, #ffffff) !important;
  padding: 14px 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition: background-position 0.4s ease !important;
  white-space: nowrap !important;
  border-radius: 0 !important;
}
.e-loop__load-more a:hover {
  background-position: left center !important;
}


/* text editor widget */
.elementor-widget-text-editor {
  color: var(--neutrals-black);
}

.elementor-widget-text-editor h1 {
  font-family: var(--font-family-headings, "Host Grotesk");
  font-size: var(--size-heading-xl, 72px);
  font-style: normal;
  font-weight: 400;
  line-height: 90%;
  margin-top: var(--gap-l);
}

.elementor-widget-text-editor h2 {
  font-family: var(--font-family-headings, "Host Grotesk");
  font-size: var(--size-heading-l, 48px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin-top: var(--gap-m);
}

.elementor-widget-text-editor h3 {
  font-family: var(--font-family-headings, "Host Grotesk");
  font-size: var(--size-heading-m, 40px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin-top: var(--gap-m);
}

.elementor-widget-text-editor h4 {
  font-family: var(--font-family-headings, "Host Grotesk");
  font-size: var(--size-heading-s, 32px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin-top: var(--gap-s);
}

.elementor-widget-text-editor h5 {
  font-family: var(--font-family-headings, "Host Grotesk");
  font-size: var(--size-heading-xs, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin-top: var(--gap-s);
}

.elementor-widget-text-editor h1 span,
.elementor-widget-text-editor h2 span,
.elementor-widget-text-editor h3 span,
.elementor-widget-text-editor h4 span,
.elementor-widget-text-editor h5 span {
  color: var(--primary-recast-blue);
}



.elementor-widget-text-editor p:not(header nav p):not(footer p),
.elementor-widget-text-editor li:not(header nav p):not(footer p),
.elementor-widget-text-editor blockquote {
  font-family: var(--font-family-body, "Host Grotesk");
  /* font-size: var(--size-body-s, 18px); */
  font-style: normal;
  /* font-weight: 400; */
  line-height: 120%;
  margin-top: var(--gap-s);
}

.elementor-widget-text-editor a {
    font-weight: 500;
    color: var(--primary-recast-blue);
}

/* header */
header a {
  text-decoration: none !important;
}

/* footer */
footer a {
  text-decoration: none !important;
}

.footer-heading {
  margin-bottom: var(--gap-s) !important;
}

/* search results */
.search-result {
  text-decoration: none !important;
  color: var(--neutrals-black) !important;
}

/* heading widget */
.elementor-widget-heading {
  font-family: var(--font-family-body, "Host Grotesk");
  color: var(--neutrals-black);
}

/* swiper */
.swiper {
  max-width: var(--global-maxwidth-maxwidth-l, 1600px);
} 

/* post content */
.elementor-widget-theme-post-content,
.elementor-author-box__bio {
  color: var(--neutrals-black);
}
.elementor-widget-theme-post-content a {
  font-weight: 500;
  color: var(--primary-recast-blue);
}
.elementor-author-box__button {
  text-decoration: none !important;
}

/* careers - Lever */
a.lever-job-title {
    text-decoration: none !important;
    color: var(--primary-recast-blue);
    font-size: 18px;
}