/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

body{
    font-family: sans-serif;
    font-weight: 400;
}
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #hero-1856 {
      /* 200px - 300px - leaving extra space for the navigation */
      padding: clamp(12.5rem, 25.95vw, 18.75em) 1rem;
      /* prevents the topper line from causing an overflow */
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    #hero-1856 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      gap: 3rem;
    }
    #hero-1856 .cs-content {
      text-align: left;
      width: 100%;
      max-width: 46.875rem;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;
      z-index: 1;
    }
    #hero-1856 .cs-title {
      /* 49px - 84px */
      font-size: clamp(3.0625rem, 6vw, 5.25rem);
      max-width: 100%;
      letter-spacing: -2px;
    }
    #hero-1856 .cs-title,
    #hero-1856 .cs-text {
      text-align: left;
      color: var(--bodyTextColorWhite);
    }
    #hero-1856 .cs-text {
      margin-bottom: 2rem;
    }
    #hero-1856 .cs-button-solid {
      font-size: 1rem;
      font-weight: 700;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-align: center;
      text-decoration: none;
      min-width: 12.5rem;
      margin: 0;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      padding: 0 1.5rem;
      background-color: var(--primary);
      color: var(--bodyTextColorWhite);
      border-radius: 0.25rem;
      display: inline-block;
      position: relative;
      z-index: 1;
    }
    #hero-1856 .cs-button-solid:before {
      content: "";
      width: 0%;
      height: 100%;
      background: #000;
      opacity: 1;
      border-radius: 0.25rem;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
    }
    #hero-1856 .cs-button-solid:hover:before {
      width: 100%;
    }
    #hero-1856 .cs-content-graphic {
      height: 305%;
      max-height: 81.25rem;
      filter: brightness(60%);
      width: auto;
      position: absolute;
      top: 50%;
      right: -4rem;
      left: auto;
      z-index: -1;
      transform: translateY(-50%);
      z-index: -3;
    }
    #hero-1856 .cs-graphic {
      width: 100%;
      min-width: 120rem;
      height: auto;
      object-fit: cover;
      position: absolute;
      bottom: -1px;
      left: 50%;
      z-index: 2;
      transform: translateX(-50%);
    }
    #hero-1856 .cs-graphic-dark {
      display: none;
    }
    #hero-1856 .cs-background {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
      /* Overlay on the background image that gets removed at tablet+, in favour of the svg graphic */
    }
    #hero-1856 .cs-background:before {
      content: "";
      width: 100%;
      height: 100%;
      background: #000;
      /* prevents the cursor from interacting with it */
      pointer-events: none;
      opacity: 0.4;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    #hero-1856 .cs-background img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #hero-1856 .cs-background::before {
      content: none;
    }
  }
  /* Desktop Parallax - 1300px */
  @media only screen and (min-width: 81.25rem) {
    #hero-1856 .cs-background {
      background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/gym-hero-image-2.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      /* creates the parallax effect */
      background-attachment: fixed;
    }
    #hero-1856 .cs-background img {
      display: none;
    }
  }
  /* Large Desktop - 1920px */
  @media only screen and (min-width: 120rem) {
    #hero-1856 {
      /* this ties the padding bottom value to the size of the screen width. The wider the image gets the taller it gets, meaning it will get closer and closer to the content. This makes the padding bottom value grow with the screen size so it accounts for the growing height of the svg graphic getting taller */
      padding-bottom: 14vw;
    }
  }