/**
* Fuel Theme
* Version 5.0.0
**/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Hero
# Welcome
# CTA's
--------------------------------------------------------------*/
.main-front {
  z-index: 1;
  position: relative;
  overflow: hidden;
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero {
  padding-top: 4.2em;
  padding-bottom: 13.5em;
  z-index: 2;
  overflow: hidden;
  /* margin-top: -4em; */
}
.hero p {
  width: fit-content;
  border-bottom: 0.05em solid #62676f;
  margin: auto;
  margin-bottom: 0.5em;
  text-align: center;
  position: relative;
  z-index: 1;
}
.hero::before {
  content: '';
  width: 3em;
  aspect-ratio: 62 / 414;
  background: url('../images/hero-right-mobile.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 0em;
  right: 0em;
  z-index: 1;
}
.hero h2 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 0em;
  z-index: 2;
  position: relative;
}
.hero h3 {
  text-align: center;
  font-size: 1.2em;
  font-family: var(--content-font);
  color: var(--site-gray);
  position: relative;
  z-index: 2;
}
.hero .cross-logo {
  width: 11em;
  aspect-ratio: 1 / 1;
  margin: 0;
  position: absolute;
  color: #F6F3EA;
  left: calc(50% - 13em);
  top: 7em;
  z-index: -1;
}
@media (min-width: 68.5em) {
  .hero .cross-logo {
    width: 40em;
    left: -12.5em;
  }
  .hero .hero-group {
    max-width: 38em;
  }
  .hero p {
    font-size: 1.2em;
    padding: 0 2em;
  }
  .hero h2 {
    text-align: right;
    font-size: 5em;
  }
  .hero h3 {
    text-align: right;
    font-size: 2.4em;
  }
  .hero::before {
    display: none;
  }
  .home .header::after {
    content: '';
    width: 30em;
    aspect-ratio: 606 / 1156;
    background: url('../images/hero-right.webp');
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
  }
}


/*--------------------------------------------------------------
# Welcome
--------------------------------------------------------------*/
.welcome {
  padding-bottom: 1.5em;
  margin-top: -9em;
  z-index: 2;
  background: var(--site-white);
  padding-top: 1.5em;
  margin-bottom: 3.5em;
  max-width: calc(100% - 0.5em);
  border-radius: 0.5em;
}
.welcome-top {
  border-radius: 0.5em;
  background: var(--site-white);
}
.welcome .welcome-title {
  text-align: center;
  color: var(--site-gray);
  letter-spacing: 0.75em;
  margin-bottom: 0.7em;
}
.welcome h1 {
  text-align: center;
  font-size: 1.6em;
}
.welcome p {
  color: var(--site-gray);
  margin-bottom: 3em;
  background: var(--site-white);
}
.welcome em {
  font-weight: 500;
  font-style: normal;
}
.welcome .wp-block-buttons {
  width: fit-content;
  margin: auto;
}
.welcome .wp-block-button a {
  padding-left: 4em;
  padding-right: 4em;
}
.welcome .left-arrow {
  position: absolute;
  bottom: 0;
  right: 50%;
  width: 42.5em;
}
@media (min-width: 68.5em) {
  .welcome {
    display: flex;
    justify-content: center;
    gap: 2.5em;
    padding: 4em;
    padding-left: 2.5em;
    padding-right: 2.5em;
    background: var(--site-white);
    width: fit-content;
    border-radius: 0.5em;
    margin-top: -5em;
    margin-bottom: 4em;
    position: relative;
    margin-left: clamp(0em, 8vw, 8em);
  }
  .welcome-top .welcome-title,
  .welcome-top h1 {
    text-align: right;
  }
  .welcome .wp-block-group__inner-container p {
    max-width: 37.5em;
  }
  .welcome .wp-block-buttons {
    margin: unset;
  }
  .welcome h1 {
    max-width: 7.6em;
    font-size: 2.4em;
  }
  .welcome-title {
    font-size: 1.2em;
  }
  .welcome .left-arrow {
    right: calc(50% + 2em);
  }
}

/*--------------------------------------------------------------
# CTA's
--------------------------------------------------------------*/
#ctas {
  overflow: hidden;
  padding-bottom: 2em;
}
.cta-text-1 .right-arrow {
  position: absolute;
  bottom: 1em;
  left: 50%;
  width: 29em;
}
.cta-1 {
  position: relative;
  padding-bottom: 2.5em;
}
.cta-1 figure {
  max-width: 43em;
  margin: auto;
}
.cta-text-1 {
  width: calc(100% - 1.5vw);
  padding: 1.5em 1em;
  padding-bottom: 2.5em;
  max-width: 20em;
  border-radius: 0.5em;
  background: linear-gradient(16deg, #F2F2F2 5.94%, #FFF 125.91%);
  margin-top: -21%;
  margin-left: auto;
  position: relative;
  right: 0;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.25);
}
.cta-1 h2 {
  max-width: 13em;
  margin-bottom: 2em;
}
.cta-2 h2 {
  margin-bottom: 2em;
}
.cta-2 figure {
  display: flex;
  flex-direction: row-reverse;
}
.cta-text-2 {
  margin-left: unset;
  margin-top: -37%;
}
.cta-text-2 .left-arrow {
  position: absolute;
  bottom: 1em;
  right: 50%;
  width: 42.5em;
}
#ctas .cross-logo {
  display: none;
}
@media (min-width: 47.5em) {
  .cta-2 {margin-bottom: 1em;position: relative;min-height: 24em;}
  .cta-text-2 {
    margin-top: -19em;
    margin-left: calc(50% - 19em);
  }
  .cta-2 figure {
  padding-right: var(--contain-padding);
  }
}
@media (min-width: 68.5em) {
  #ctas {
    margin-bottom: 0em;
    padding-bottom: 0;
    position: relative;
    z-index: 0;
  }
  #ctas .cross-logo {
    display: block;
    position: absolute;
    width: 40em;
    color: #F7F7F7;
    right: -13em;
    top: 20em;
    z-index: -1;
 }
 .cta-text-1 .right-arrow {
  left: 11em;
  bottom: 2em;
 }
 .cta-text-2 .left-arrow {
  bottom: 2em;
  right: 20em;
 }
  .cta-text-1 {
    margin-right: clamp(6em, 9.3vw, 9rem);
    margin-top: -27%;
    max-width: 30em;
    padding: 2.5em 3.5em;
    padding-right: 1em;
    padding-bottom: 4em;
    min-height: 20em;
  }
  .cta-text-1 p {
    margin-bottom: 2.6em;
  }
  .cta-1 {
    padding-bottom: 7.5em;
  }
  .cta-text-2 {
  margin-top: clamp(-37em, -38vw, -30em);
  margin-right: unset;
  margin-left: clamp(5em, 14.4vw, calc(50% - 31em));
  }
  .cta-2 figure {
    padding-right: calc(50% - 19.7em);
  }
  .cta-2 img {
    width: 23em;
  }
}
.home p:empty {
  display: none;
}


/**
 * NOTE: If map and/or contact form styling appears on secondary pages, place styles in style.css
 */