:root {
  /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
  --primary: #1cb42b;
  --primaryDark: #13701c;
  --primaryLight: #689689;
  --secondary: #689689;
  --secondaryLight: #689689;
  --headerColor: #1a1a1a;
  --bodyTextColor: #4e4b66;
  --bodyTextColorWhite: #fafbfc;
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

*,
*:before,
*:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}

.cs-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: block;
}

.cs-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 43.75rem;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  position: relative;
}

.cs-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--bodyTextColor);
}

/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  body.cs-open {
    overflow: hidden;
  }
  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem 1rem;
    background-color: #000;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation:before {
    content: "";
    width: 100%;
    height: 0vh;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: -1100;
    transition: height 0.5s, opacity 0.5s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  #cs-navigation.cs-active:before {
    height: 150vh;
    opacity: 1;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    opacity: 1;
    transform: scaleY(1);
    transition-delay: 0.15s;
  }
  #cs-navigation.cs-active .cs-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  #cs-navigation .cs-logo {
    width: 40%;
    max-width: 9.125rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-toggle {
    /* 44px - 48px */
    width: clamp(2.75rem, 6vw, 3rem);
    height: clamp(2.75rem, 6vw, 3rem);
    margin: 0 0 0 auto;
    background-color: var(--primary);
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-navigation .cs-active .cs-line1 {
    top: 50%;
    transform: translate(-50%, -50%) rotate(225deg);
  }
  #cs-navigation .cs-active .cs-line2 {
    top: 50%;
    transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
    transform-origin: center;
  }
  #cs-navigation .cs-active .cs-line3 {
    opacity: 0;
    bottom: 100%;
  }
  #cs-navigation .cs-box {
    /* 24px - 28px */
    width: clamp(1.5rem, 2vw, 1.75rem);
    /* 14px - 16px */
    height: clamp(0.875rem, 1.5vw, 1rem);
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    background-color: #1a1a1a;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transition: transform 0.5s, top 0.3s, left 0.3s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    transform-origin: center;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: top 0.3s, left 0.3s, transform 0.5s;
    animation-duration: 0.7s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
    transition: bottom 0.3s, opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    height: auto;
    padding-bottom: 2.4em;
    background-color: hsl(0, 0%, 10%);
    box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s, opacity 0.3s;
    transform-origin: top;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: auto;
    max-height: 65vh;
    margin: 0;
    padding: 3rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: scroll;
  }
  #cs-navigation .cs-li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-4.375rem);
    transition: transform 0.6s, opacity 0.9s;
  }
  #cs-navigation .cs-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li:nth-of-type(10) {
    transition-delay: 0.5s;
  }
  #cs-navigation .cs-li:nth-of-type(11) {
    transition-delay: 0.55s;
  }
  #cs-navigation .cs-li:nth-of-type(12) {
    transition-delay: 0.6s;
  }
  #cs-navigation .cs-li:nth-of-type(13) {
    transition-delay: 0.65s;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 24px */
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    line-height: 1.2em;
    text-decoration: none;
    margin: 0;
    color: #fff;
    display: inline-block;
    position: relative;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: "";
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    display: none;
    position: absolute;
    bottom: -0.125rem;
    left: 0;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    display: block;
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation {
    width: 100%;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 0 1rem;
    background-color: #000;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: fixed;
    z-index: 10000;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    width: 18.4%;
    max-width: 21.875rem;
    height: 4.0625rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  #cs-navigation .cs-logo img {
    width: 100%;
    height: 100%;
    /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
    object-fit: contain;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* 20px - 36px */
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
  }
  #cs-navigation .cs-li {
    list-style: none;
    padding: 2rem 0;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1vw, 1rem);
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: #fff;
    display: block;
    position: relative;
  }
  #cs-navigation .cs-li-link:hover:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link.cs-active:before {
    width: 100%;
  }
  #cs-navigation .cs-li-link:before {
    /* active state underline */
    content: "";
    width: 0%;
    height: 2px;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: absolute;
    bottom: 0rem;
    left: 0;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    color: #fff;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #cs-navigation .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: var(--primaryDark);
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
}
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1898 {
    /* 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-1898 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem;
  }
  #hero-1898 .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-1898 .cs-title {
    /* 49px - 84px */
    font-size: clamp(3.0625rem, 6vw, 5.25rem);
    letter-spacing: -2px;
    max-width: 100%;
  }
  #hero-1898 .cs-title,
  #hero-1898 .cs-text {
    text-align: left;
    color: var(--bodyTextColorWhite);
  }
  #hero-1898 .cs-text {
    margin-bottom: 2rem;
  }
  #hero-1898 .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-1898 .cs-button-solid:before {
    content: "";
    width: 0;
    height: 100%;
    background: var(--primaryDark);
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-1898 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1898 .cs-content-graphic {
    width: auto;
    height: 305%;
    max-height: 81.25rem;
    position: absolute;
    top: 50%;
    right: -4rem;
    left: auto;
    z-index: -3;
    transform: translateY(-50%);
  }
  #hero-1898 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #hero-1898 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 24px - 40px */
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background-color: #fff;
    box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: span 12;
    grid-row: span 1;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
  }
  #hero-1898 .cs-picture {
    width: 100%;
    height: 10rem;
    display: block;
    /* causes the image to grow to it's "auto" size, but won't shrink. the cs-info fills the remaining space */
    flex: 1 0 auto;
  }
  #hero-1898 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #hero-1898 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    font-weight: bold;
    line-height: 1.2em;
    text-align: inherit;
    /* 8px - 16px */
    margin: 0 0 clamp(0.5rem, 1.2vw, 1rem) 0;
    color: var(--headerColor);
  }
  #hero-1898 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
  }
  #hero-1898 .cs-link {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    text-decoration: none;
    width: 100%;
    margin: 1.5rem 0 0;
    color: var(--primary);
    display: flex;
    gap: 0.25rem;
  }
  #hero-1898 .cs-link:hover img {
    transform: translateX(0.25rem);
  }
  #hero-1898 .cs-link img {
    transition: transform 0.3s;
  }
  #hero-1898 .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-1898 .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-1898 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Large Phone/Tablet - 500px */
@media only screen and (min-width: 31.25rem) {
  #hero-1898 .cs-item {
    flex-direction: row;
    align-items: stretch;
  }
  #hero-1898 .cs-picture {
    max-width: 8.75rem;
    height: auto;
    min-height: 8.75rem;
  }
  #hero-1898 .cs-info {
    align-self: center;
  }
  #hero-1898 .cs-background {
    height: 60%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1898 .cs-background::before {
    content: none;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-1898 .cs-item {
    grid-column: span 6;
  }
  #hero-1898 .cs-background {
    height: 70%;
  }
}
/* Desktop Parallax - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-1898 .cs-content-graphic {
    top: 30%;
  }
  #hero-1898 .cs-background {
    background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/gym-hero-image-2.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* creates the parallax effect */
    background-attachment: fixed;
  }
  #hero-1898 .cs-background img {
    display: none;
  }
}
/* Large Desktop - 1920px */
@media only screen and (min-width: 120rem) {
  #hero-1898 {
    /* 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;
  }
}
#hero-1898 .cs-arrow {
  filter: grayscale(1);
}

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1748 {
    padding: var(--sectionPadding);
    background-color: #1a1a1a;
    position: relative;
  }
  #services-1748 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1748 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #services-1748 .cs-title {
    max-width: 20ch;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #services-1748 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  #services-1748 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    /* 260px - 320px */
    height: clamp(16.25rem, 33vw, 20rem);
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    grid-column: span 12;
    position: relative;
    z-index: 1;
  }
  #services-1748 .cs-item:hover .cs-background:before {
    background-color: var(--primary);
    opacity: 0.84;
  }
  #services-1748 .cs-item:hover .cs-background img {
    transform: scale(1.2);
  }
  #services-1748 .cs-link {
    text-decoration: none;
    width: 100%;
    height: 100%;
    /* padding goes on the link, not the cs-item as is normal. We do this because we want the whole card to be hoverable. So we add the padding to the link tag to create the space inside the card. By adding the space inside the cs-link tag we can make the whole card hoverable since the padding is now contributing to the height and width of the link */
    padding: 1.5rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #services-1748 .cs-h3 {
    /* 25px - 39px */
    font-size: clamp(1.5625rem, 3vw, 2.4375rem);
    line-height: 1.2em;
    font-weight: bold;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #services-1748 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-1748 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background-color: #000;
    opacity: 0.4;
    top: 0;
    left: 0;
    z-index: 1;
    transition: background-color 0.3s, opacity 0.3s;
  }
  #services-1748 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    transition: transform 0.6s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1748 .cs-container {
    max-width: 80rem;
  }
  #services-1748 .cs-item {
    grid-column: span 4;
  }
}
/*-- -------------------------- -->
<!--       Why Choose Us        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1876 {
    padding: var(--sectionPadding);
    /* 128px - 192px */
    padding-bottom: clamp(8rem, 14vw, 12rem);
    overflow-x: clip;
    position: relative;
  }
  #why-choose-1876 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #why-choose-1876 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #why-choose-1876 .cs-text {
    /* 12px - 24px */
    margin-bottom: clamp(0.75rem, 4vw, 1.5rem);
  }
  #why-choose-1876 .cs-ul {
    max-width: 39.375rem;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-flow: row;
    /* 4px - 12px */
    gap: clamp(0.25rem, 2vw, 0.75rem);
  }
  #why-choose-1876 .cs-li {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    list-style: none;
    width: 100%;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #why-choose-1876 .cs-check-icon {
    width: 1.5rem;
    height: auto;
    /* adds extra space between the icon and top of parent so it's more centered */
    margin-top: 1px;
    display: block;
    filter: grayscale(1);
  }
  #why-choose-1876 .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: 9.375rem;
    margin: 2rem 0 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: #fff;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #why-choose-1876 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: var(--primaryDark);
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #why-choose-1876 .cs-button-solid:hover:before {
    width: 100%;
  }
  #why-choose-1876 .cs-video-wrapper {
    width: 100%;
    height: 111vw;
    max-height: 22.5rem;
    display: block;
    position: relative;
    z-index: 1;
  }
  #why-choose-1876 .cs-video-wrapper:hover {
    cursor: pointer;
  }
  #why-choose-1876 .cs-video-wrapper:hover .cs-play {
    transform: translate(-50%, -50%) scale(1.2);
  }
  #why-choose-1876 .cs-video-wrapper video,
  #why-choose-1876 .cs-video-wrapper .cs-picture {
    width: 100%;
    height: 100%;
    /* makes image act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose-1876 .cs-video-wrapper video img,
  #why-choose-1876 .cs-video-wrapper .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes image act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose-1876 .cs-play {
    /* 80px - 120px */
    width: clamp(5rem, 10vw, 7.5rem);
    height: clamp(5rem, 10vw, 7.5rem);
    background-color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s, opacity 0.3s;
    backdrop-filter: blur(8px);
  }
  #why-choose-1876 .cs-play.cs-hide {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0) !important;
  }
  #why-choose-1876 .cs-icon {
    width: 1.25rem;
    height: auto;
  }
  #why-choose-1876 .cs-picture {
    width: 100%;
    height: 95vw;
    /* 260px - 324px */
    min-height: clamp(16.25rem, 32vw, 20.25rem);
    margin: clamp(3rem, 6vw, 4rem) 0 0;
    display: block;
    position: relative;
    z-index: 1;
  }
  #why-choose-1876 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #why-choose-1876 .cs-graphic {
    width: 100%;
    min-width: 75rem;
    height: auto;
    object-fit: cover;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
  }
  #why-choose-1876 .cs-dark {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1876 .cs-video-wrapper {
    height: 90%;
    max-height: 100%;
    /* 420px - 740px */
    min-height: clamp(26.25rem, 50vw, 46.25rem);
  }
  #why-choose-1876 .cs-container {
    max-width: 80rem;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: stretch;
  }
  #why-choose-1876 .cs-content {
    width: 52%;
    max-width: 34.375rem;
    /* sends it to the right in the 2nd position */
    order: 2;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #why-choose-1876 .cs-ul {
    grid-template-columns: repeat(2, 1fr);
  }
  #why-choose-1876 .cs-picture {
    height: 100%;
    max-height: 100%;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #why-choose-1876 {
    padding-bottom: 10vw;
  }
  #why-choose-1876 .cs-container {
    align-items: stretch;
  }
  #why-choose-1876 .cs-video-wrapper {
    height: auto;
    margin-bottom: 8.75rem;
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-1775 {
    padding: var(--sectionPadding);
    background-color: #222;
    position: relative;
  }
  #reviews-1775 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 49rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-1775 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #reviews-1775 .cs-title {
    max-width: 24ch;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #reviews-1775 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #reviews-1775 .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    grid-column: span 12;
    grid-row: span 1;
  }
  #reviews-1775 .cs-picture {
    width: 100%;
    min-height: 21.25rem;
    display: block;
    position: relative;
    /* causes this element to grow to its maximum width, before its sibling elements take up the remaining space */
    flex: 1 0 auto;
  }
  #reviews-1775 .cs-picture img {
    width: 100%;
    height: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    /* pushes the top of the image to the top of the container */
    object-position: top;
    position: absolute;
    top: 0;
    left: 0;
  }
  #reviews-1775 .cs-review {
    text-align: left;
    width: 100%;
    /* prevents padding from affecting height and wodth */
    box-sizing: border-box;
    /* left & right 16px - 32px */
    padding: 2rem clamp(1rem, 5vw, 2rem);
    border-top: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  #reviews-1775 .cs-info {
    background-color: rgba(0, 0, 0, 0.2);
  }
  #reviews-1775 .cs-name {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    margin: 0 0 0.25rem;
    color: var(--bodyTextColorWhite);
    display: block;
  }
  #reviews-1775 .cs-flex {
    width: 100%;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #reviews-1775 .cs-desc {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5em;
    color: var(--primary);
    display: block;
  }
  #reviews-1775 .cs-item-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 3vw, 1.25rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #reviews-1775 .cs-boxes {
    display: flex;
  }
  #reviews-1775 .cs-box {
    /* 24px - 32px top & bottom, 16px - 32px left & right */
    padding: clamp(1.5rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* causes the boxes to grow, equally, within the parent container */
    flex: 1;
  }
  #reviews-1775 .cs-box-light {
    background-color: #767676;
  }
  #reviews-1775 .cs-box-dark {
    background-color: #5f5f5f;
    color: #f7f7f7;
  }
  #reviews-1775 .cs-weight {
    /* 25px - 31px */
    font-size: clamp(1.5625rem, 4vw, 1.9375rem);
    font-weight: 900;
    line-height: 1.2em;
    margin: 0 0 0.25rem;
    color: var(--bodyTextColorWhite);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  #reviews-1775 .cs-arrow {
    width: 1.125rem;
    height: 1.125rem;
  }
  #reviews-1775 .cs-tagline {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-1775 .cs-item {
    flex-direction: row;
  }
  #reviews-1775 .cs-picture {
    max-width: 15rem;
    min-height: 0;
  }
}
/* Large Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #reviews-1775 .cs-container {
    max-width: 80rem;
  }
  #reviews-1775 .cs-item {
    grid-column: span 6;
  }
  #reviews-1775 .cs-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-1268 {
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #contact-1268 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: column;
  }
  #contact-1268 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    padding: var(--sectionPadding);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #contact-1268 .cs-form-group {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 44rem;
    /* resets to 0 at tablet */
    margin: auto;
    padding: var(--sectionPadding);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    order: 2;
  }
  #contact-1268 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #contact-1268 .cs-text {
    margin: 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #contact-1268 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    max-width: 32.625rem;
    margin: 0 auto 2rem 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
  }
  #contact-1268 .cs-picture {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    position: relative;
    z-index: 1;
  }
  #contact-1268 .cs-picture:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.2;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #contact-1268 .cs-form {
    width: 100%;
    padding: 0;
    /* prevents flexbox from affecting height and width */
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.75rem;
  }
  #contact-1268 .cs-label {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    color: var(--headerColor);
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #contact-1268 .cs-input {
    font-size: 1rem;
    width: 100%;
    /* 46px - 56px */
    height: clamp(2.875rem, 4.5vw, 3.5rem);
    padding: 0;
    padding-left: 1.5rem;
    color: var(--headerColor);
    border-radius: 0.5rem;
    border: 1px solid #dad9e3;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
  }
  #contact-1268 .cs-input::placeholder {
    color: #7d799c;
    opacity: 0.6;
  }
  #contact-1268 .cs-textarea {
    min-height: 7.5rem;
    padding-top: 1.5rem;
    margin-bottom: 1rem;
    font-family: inherit;
  }
  #contact-1268 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #1a1a1a;
    border: none;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
  }
  #contact-1268 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: var(--primaryDark);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #contact-1268 .cs-button-solid:hover {
    color: #fff;
  }
  #contact-1268 .cs-button-solid:hover:before {
    width: 100%;
  }
  #contact-1268 .cs-submit {
    width: 100%;
    margin: 0;
    color: var(--bodyTextColorWhite);
    border-radius: 0.5rem;
    grid-column: span 12;
  }
  #contact-1268 .cs-submit:hover {
    cursor: pointer;
  }
  #contact-1268 .cs-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #contact-1268 .cs-card-group {
    width: 100%;
    max-width: 32.625rem;
    margin: 0;
    padding: var(--sectionPadding);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
    order: 1;
    position: relative;
    z-index: 1;
  }
  #contact-1268 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    /* 16px - 20px */
    padding: clamp(1rem, 4vw, 2.5rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
    z-index: 1;
  }
  #contact-1268 .cs-item:hover:before {
    opacity: 1;
  }
  #contact-1268 .cs-item:hover .cs-header,
  #contact-1268 .cs-item:hover .cs-item-text,
  #contact-1268 .cs-item:hover .cs-link {
    color: var(--bodyTextColorWhite);
  }
  #contact-1268 .cs-item:hover .cs-text,
  #contact-1268 .cs-item:hover .cs-link {
    opacity: 0.8;
  }
  #contact-1268 .cs-item:hover .cs-link:hover {
    color: var(--primary);
  }
  #contact-1268 .cs-item:hover .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
  #contact-1268 .cs-item:before {
    /* hover border and background */
    content: "";
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    border: 1px solid var(--primary);
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s;
  }
  #contact-1268 .cs-header {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    /* 12px - 16px */
    margin: 0 0 clamp(0.75rem, 1.6vw, 1rem);
    display: block;
    transition: color 0.3s;
  }
  #contact-1268 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0 0 0.25rem;
    color: var(--bodyTextColor);
    display: block;
    transition: color 0.3s;
  }
  #contact-1268 .cs-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.3s;
  }
  #contact-1268 .cs-icon {
    width: 1rem;
    height: auto;
  }
  #contact-1268 .cs-background {
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #contact-1268 .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) {
  #contact-1268 .cs-label:nth-of-type(1), #contact-1268 .cs-label:nth-of-type(2) {
    grid-column: span 6;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-1268 {
    /* moved padding back to the section container */
    padding: var(--sectionPadding);
  }
  #contact-1268 .cs-container {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #contact-1268 .cs-content {
    text-align: left;
    margin: 0;
    padding: 0;
    align-items: flex-start;
  }
  #contact-1268 .cs-form-group {
    width: 43%;
    max-width: 32.625rem;
    margin: 0;
    padding: 0;
  }
  #contact-1268 .cs-form {
    padding: 0;
  }
  #contact-1268 .cs-wrapper {
    width: 50%;
    max-width: 32.75rem;
    flex: none;
    /* removes position from it so the absolutely positioned background group can now be positioned relative to the section container */
    position: initial;
  }
  #contact-1268 .cs-background {
    width: 60vw;
    height: 100%;
    left: auto;
    right: 50%;
    top: 0;
  }
  #contact-1268 .cs-card-group {
    padding: 0;
  }
}
#contact-1268 picture img {
  filter: grayscale(1);
}/*# sourceMappingURL=main.css.map */