/* Spacing */
/* Grid settings */
/* Useful calculation variabls */
/* Row inner box */
/* Columns in px - this is to set max-widths and should correspond to the widths set in the theme's image options */
/* Breakpoint options */
/* Calculated variables - do not edit unless you are a space cowboy */
/**
    Colours also need to be updated in:
    - functions-template-helpers.php 158-162
    - functions-template-helpers.php 190-230
    - acf-layout-selector/class-uu-acf-field-layout-selector.php 180
    - In the colour selector component
*/
/* Split colours - set colours when using .row.split */
/* Overlays - for modals, cookie popups */
/* Type */
/* Quotes */
/* Icons - see font-awesome.scss for more info */
/* Buttons */ /* Woocommerce */ /* Notifications */ /* Pagination */ /* Logo */ /* Header */
/* Header navigation */
/* Footer */
/* Mobile menu */ /* Cookie bar */ /* Social links */ /* Transitions */ /* Loader */ /* Modals */ /* Dots */
/* Tables */
.row.hero {
  z-index: 2;
}

.hero {
  min-height: 100vh;
  height: auto;
  z-index: 0;
  width: 100%;
}
.hero .row-inner {
  min-height: 400px;
  min-height: 100vh;
  height: auto;
  z-index: 2;
}
.hero .row-inner .col:first-of-type {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .hero {
    height: auto;
  }
}
.hero img.hero-image {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
.hero .overlay {
  z-index: 1;
  background: rgba(var(--black), 0.3);
}
.bg-light .hero .overlay {
  background: rgba(var(--white), 0.3);
}
.hero video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
  overflow: hidden;
}
.hero ul.stats {
  list-style: none;
  padding: 30px 0 0 0 !important;
  margin: 0;
}
.hero ul.stats li {
  width: 100%;
  line-height: 1;
  padding: 7px 0 15px 0;
  position: relative;
}
.hero ul.stats li span {
  display: block;
}
.hero ul.stats li span.stat-value {
  font-size: var(--step-4);
  font-weight: 600;
  font-family: "segoe-ui", sans-serif;
  line-height: 1.1;
  letter-spacing: -0.05em;
}
.hero ul.stats li:before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--green);
  -webkit-mask-image: linear-gradient(to right, transparent, black);
          mask-image: linear-gradient(to right, transparent, black);
}

body.admin-bar .hero, body.admin-bar .hero .row-inner {
  min-height: calc(100vh - 32px);
}