: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: #7c3aed;
  --primaryLight: #7c3aed;
  --secondary: #bc2971;
  --secondaryLight: #ec4899;
  --headerColor: #1f2937;
  --bodyTextColor: #374151;
  --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;
  --headerPadding: clamp(11.25rem, 23.82vw, 12.75rem) 1rem clamp(3.75rem, 7.82vw, 8.25rem);

}

body {
  margin: 0;
  padding: 0;
  font-family: 'PT Sans';
}

*, *: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: .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;
  }
  body.scroll #cs-navigation {
    width: 100%;
    max-width: 100%;
    top: 0;
  }
  body.scroll #cs-navigation:before {
    border-radius: 0;
  }
  body.scroll #cs-navigation .cs-ul-wrapper {
    top: 100%;
  }
  #cs-navigation {
    width: 94%;
    max-width: 80rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    padding: clamp(0.75rem, 2vw, 1.5rem);
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    position: fixed;
    top: 1rem;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%);
    transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
  }
  #cs-navigation:before {
    /* background color */
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    opacity: 1;
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.2s, border-radius 0.3s ease-in-out;
  }
  #cs-navigation.cs-active:before {
    transform: translateX(-50%) scale(1.03);
  }
  #cs-navigation.cs-active .cs-toggle {
    transform: rotate(180deg);
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    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;
    gap: 1.5rem;
  }
  #cs-navigation .cs-logo {
    width: auto;
    max-width: 12.5rem;
    height: 100%;
    margin: 0 auto 0 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    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 {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 0 0 auto;
    background-color: #1a1a1a;
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    transition: transform 0.6s;
  }
  #cs-navigation .cs-nav {
    /* sends it to the right in the 3rd position */
    order: 3;
  }
  #cs-navigation .cs-contact-group {
    display: none;
    position: relative;
    z-index: 10;
  }
  #cs-navigation .cs-phone {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, color 0.3s;
  }
  #cs-navigation .cs-phone-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-social {
    display: none;
  }
  #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);
    height: 1rem;
    position: relative;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    background-color: #fafbfc;
    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: #fff;
    border-radius: 0 0 1.5rem 1.5rem;
    position: absolute;
    top: 85%;
    left: 0;
    z-index: -1;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.4s;
    transform-origin: top;
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: auto;
    max-height: 65vh;
    margin: 0;
    padding: 4rem 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
    overflow: auto;
  }
  #cs-navigation .cs-li {
    text-align: center;
    list-style: none;
    width: 100%;
    margin-right: 0;
    opacity: 0;
    /* transition from these values */
    transform: translateY(-70/16rem);
    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: var(--headerColor);
    display: inline-block;
    position: relative;
  }
  #cs-navigation .cs-li-link.cs-active {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-button-solid {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-navigation .cs-contact-group {
    display: block;
  }
}
/*-- -------------------------- -->
<---     Navigation Dropdown    -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
  #cs-navigation .cs-li {
    text-align: center;
    width: 100%;
    display: block;
  }
  #cs-navigation .cs-dropdown {
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    height: auto;
    margin: 0.75rem 0 0 0;
    padding: 0.75rem 0;
    opacity: 1;
    visibility: visible;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-link {
    opacity: 1;
  }
  #cs-navigation .cs-dropdown .cs-li-link {
    position: relative;
    transition: opacity 0.3s;
  }
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    position: absolute;
    top: 50%;
    right: -1.25rem;
    transform: translateY(-50%);
  }
  #cs-navigation .cs-drop-ul {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    background-color: var(--primary);
    opacity: 0;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, visibility 0.3s;
  }
  #cs-navigation .cs-drop-li {
    list-style: none;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    color: #fff;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-navigation .cs-dropdown {
    position: relative;
  }
  #cs-navigation .cs-dropdown:hover {
    cursor: pointer;
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-ul {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-li {
    opacity: 1;
    transform: translateY(0);
  }
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    display: inline-block;
  }
  #cs-navigation .cs-drop-ul {
    min-width: 12.5rem;
    margin: 0;
    padding: 0;
    background-color: #fff;
    box-shadow: inset rgba(149, 157, 165, 0.1) 0px 8px 10px;
    opacity: 0;
    border-bottom: 5px solid var(--primary);
    border-radius: 0 0 1.5rem 1.5rem;
    visibility: hidden;
    /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the cs-drop-li so they don't have weird scattered animations */
    position: absolute;
    top: 100%;
    z-index: -100;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
    transform-origin: top;
  }
  #cs-navigation .cs-drop-li {
    font-size: 1rem;
    text-decoration: none;
    list-style: none;
    width: 100%;
    height: auto;
    opacity: 0;
    display: block;
    transform: translateY(-0.625rem);
    transition: opacity 0.6s, transform 0.6s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(1) {
    transition-delay: 0.05s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(3) {
    transition-delay: 0.15s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(4) {
    transition-delay: 0.2s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(5) {
    transition-delay: 0.25s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(7) {
    transition-delay: 0.35s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(8) {
    transition-delay: 0.4s;
  }
  #cs-navigation .cs-drop-li:nth-of-type(9) {
    transition-delay: 0.45s;
  }
  #cs-navigation .cs-li-link.cs-drop-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-transform: capitalize;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0.75rem;
    color: var(--headerColor);
    display: block;
    transition: color 0.3s, background-color 0.3s;
  }
  #cs-navigation .cs-li-link.cs-drop-link:hover {
    color: var(--bodyTextColorWhite);
    background-color: var(--primary);
  }
  #cs-navigation .cs-li-link.cs-drop-link:before {
    display: none;
  }
}
/*-- -------------------------- -->
<---     Desktop Navigation     -->
<--- -------------------------- -*/
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  body.scroll #cs-navigation {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    top: 0;
  }
  #cs-navigation {
    width: 94%;
    max-width: 90rem;
    height: 6rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 12px - 24px */
    padding: clamp(0.75rem, 2vw, 1.5rem) 0;
    background-color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    /* 12px - 24px */
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    display: flex;
    align-items: center;
    position: fixed;
    top: 2rem;
    left: 50%;
    z-index: 10000;
    transform: translateX(-50%);
    transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s;
  }
  #cs-navigation .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-toggle {
    display: none;
  }
  #cs-navigation .cs-logo {
    width: 18.4%;
    max-width: 21.875rem;
    height: 2rem;
    /* margin-right auto pushes everything away from it to the right */
    margin: 0 auto 0 0;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 100;
  }
  #cs-navigation .cs-logo img {
    width: auto;
    height: 55px;
    /* 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-contact-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
  }
  #cs-navigation .cs-phone {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, color 0.3s;
  }
  #cs-navigation .cs-phone-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }
  #cs-navigation .cs-social {
    height: 2rem;
    opacity: 1;
    display: none;
    visibility: visible;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.3s, visibility 0.3s, height 0.3s;
  }
  #cs-navigation .cs-social-link {
    text-decoration: none;
    width: 2rem;
    height: 2rem;
    background-color: #f7f7f7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
  }
  #cs-navigation .cs-social-link:hover {
    background-color: var(--primary);
  }
  #cs-navigation .cs-social-link:hover .cs-social-icon {
    opacity: 1;
    filter: grayscale(1) brightness(10000%);
  }
  #cs-navigation .cs-social-icon {
    width: 0.75rem;
    height: auto;
    opacity: 0.6;
    display: block;
    transition: opacity 0.3s;
  }
  #cs-navigation .cs-ul-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    /* absolutely positioned to be dead center */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #cs-navigation .cs-ul {
    width: 100%;
    height: 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;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #cs-navigation .cs-li-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: var(--headerColor);
    display: block;
    position: relative;
    transition: color 0.3s;
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link.cs-active {
    color: var(--primary);
  }
  #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 2rem;
    color: #fff;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    border-radius: 0.5rem;
    z-index: 1;
    transition: color 0.3s;
  }
  #cs-navigation .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #fff;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cs-navigation .cs-button-solid:hover {
    color: #1a1a1a;
  }
  #cs-navigation .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #cs-navigation .cs-social {
    display: flex;
  }
}
                                
       

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1426 {
    /* Centers button */
    text-align: center;
    /* 200px - 300px - leaving extra space for the navigation */
    padding: var(--headerPadding);
    /* prevents the topper line from causing an overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-1426 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-1426 .cs-background:before {
    /* Overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.48;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-1426 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #hero-1426 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
  }
  #hero-1426 .cs-content {
    width: 100%;
    max-width: 45rem;
  }
  #hero-1426 .cs-topper {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: var(--secondary);
    display: inline-block;
    position: relative;
  }
  #hero-1426 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 3.4vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    max-width: 51.8125rem;
    color: #fff;
    position: relative;
  }
  #hero-1426 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    /* 464px - 622px */
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: 0 auto 0;
    margin-bottom: 2rem;
    color: #fff;
  }
  #hero-1426 .cs-button-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  #hero-1426 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 12.5rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.5rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #hero-1426 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #hero-1426 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1426 .cs-button1 {
    background-color: var(--secondary);
  }
}


/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-43 {
      padding: var(--sectionPadding);
      position: relative;
      /* Prevents overflow from the image going off screen */
      overflow: hidden;
  }
  #gallery-43 .cs-container {
      width: 100%;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #gallery-43 .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;
  }

  #gallery-43 .cs-image-group {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 16px - 20px */
      gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #gallery-43 .cs-item {
      width: 100%;
      height: 100%;
      aspect-ratio: 16/9;
      margin: 0;
      position: relative;
      display: block;
  }
  #gallery-43 .cs-item:hover .cs-hover-box {
      opacity: 1;
  }
  #gallery-43 .cs-item:hover .cs-icon {
      /* return to original position */
      transform: rotateY(0);
  }
  #gallery-43 .cs-item:hover .cs-h3 {
      opacity: 1;
      /* Return to original position */
      transform: translateY(0);
  }
  #gallery-43 .cs-item:hover .cs-hover-box-text {
      opacity: 1;
      /* Return to original position */
      transform: translateY(0);
  }
  #gallery-43 .cs-picture {
      margin: auto;
      width: 100%;
      height: 100%;
      display: block;
      position: relative;
  }
  #gallery-43 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
  #gallery-43 .cs-hover-box {
      text-align: center;
      width: 100%;
      height: 100%;
      padding: 1em;
      background-color: var(--primary);
      opacity: 0;
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* Prevents padding from contributing to height & width */
      box-sizing: border-box;
      /* Sets stage for 3d transform animation */
      perspective: 700px;
      top: 0;
      left: 0;
      z-index: 10;
      /* prevents mouse from being able to interact with these elements */
      pointer-events: none;
      transition: opacity 0.3s;
  }
  #gallery-43 .cs-icon {
      /* 50px - 60px */
      width: clamp(3.125rem, 5vw, 3.75rem);
      height: clamp(3.125rem, 5vw, 3.75rem);
      /* 16px - 32px */
      margin-bottom: clamp(1rem, 5vw, 2rem);
      border-radius: 50%;
      background-color: #fff;
      outline: 0.5rem solid rgba(255, 255, 255, 0.7);
      /* Start with the icon box rotated 90deg */
      transform: rotateY(90deg);
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      flex: none;
      transition: transform 0.5s;
  }
  #gallery-43 .cs-icon img {
      width: 1.25rem;
      height: 1.25rem;
  }
  #gallery-43 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2vw, 1.5625rem);
      line-height: 1.2em;
      font-weight: 700;
      margin: 0 auto;
      max-width: 16.875rem;
      color: #fff;
      /* make starting position down 10px and invisible */
      opacity: 0;
      transform: translateY(0.625rem);
      margin-bottom: 0.5rem;
      transition:
          opacity 0.3s,
          transform 0.3s ease-out;
      transition-delay: 0.1s;
  }
  #gallery-43 .cs-hover-box-text {
      /* 13px - 16px */
      font-size: clamp(0.8125rem, 1vw, 1rem);
      line-height: 1.5em;
      margin: 0 auto;
      max-width: 16.875rem;
      color: #fff;
      /* make starting position down 10px and invisible */
      opacity: 0;
      transform: translateY(0.625rem);
      transition:
          opacity 0.3s,
          transform 0.3s ease-out;
      transition-delay: 0.2s;
  }
}
/* In Between - 600px */
@media only screen and (min-width: 37.5rem) {
  #gallery-43 .cs-image-group {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: 1fr;
  }
  #gallery-43 .cs-item {
      grid-column: span 6;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery-43 .cs-item {
      grid-column: span 4;
  }
}

                                          
/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-516 {
        padding: var(--sectionPadding);
        background: var(--headerColor);
    }
    #sbsr-516 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375em;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 60px */
        gap: clamp(3rem, 10vw, 3.75rem);
    }
    #sbsr-516 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 33.875rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbsr-516 .cs-color {
        color: var(--secondaryLight);
    }
    #sbsr-516 .cs-topper,
    #sbsr-516 .cs-title {
        color: var(--bodyTextColorWhite);
    }
    #sbsr-516 .cs-text {
        margin-bottom: 1rem;
        color: var(--bodyTextColorWhite);
        opacity: 0.8;
    }
    #sbsr-516 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbsr-516 .cs-ul {
        width: 80%;
        /* 32px - 36px */
        margin: 0 0 clamp(2rem, 4vw, 2.25rem) 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* 24px - 32px */
        row-gap: clamp(1.5rem, 4vw, 2rem);
    }
    #sbsr-516 .cs-li {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        list-style: none;
        line-height: 1.5em;
        font-weight: 700;
        margin: 0;
        color: var(--bodyTextColorWhite);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 2rem;
    }

    #sbsr-516 .cs-li .cs-icon {
      width: 4.5rem;
      height: auto;
    }

    #sbsr-516 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #sbsr-516 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #sbsr-516 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbsr-516 .cs-image-group {
        width: 100%;
        max-width: 39.375rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        /* 40px - 48px */
        row-gap: clamp(2.5rem, 6vw, 3rem);
        /* sends it to the top in the first position */
        order: -1;
    }
    #sbsr-516 .cs-stat-group {
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
    }
    #sbsr-516 .cs-stat {
        list-style: none;
        max-width: 14.375rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    #sbsr-516 .cs-number {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 5vw, 3.8125rem);
        line-height: 1.2em;
        font-weight: 900;
        color: var(--secondaryLight);
    }
    #sbsr-516 .cs-desc {
        font-size: clamp(0.875rem, 1rem, 1.25rem);
        line-height: 1.5em;
        font-weight: 400;
        margin: 0;
        color: var(--bodyTextColorWhite);
    }
    #sbsr-516 .cs-picture {
        width: 100%;
        /* 244px - 339px, changes clamp at tablet */
        height: clamp(14rem, 62vw, 21.1875rem);
        display: block;
        position: relative;
    }
    #sbsr-516 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbsr-516 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
    #sbsr-516 .cs-content {
        width: 71%;
    }
    #sbsr-516 .cs-image-group {
        width: 68%;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
    #sbsr-516 .cs-picture {
        /* 340px - 461px */
        height: clamp(21.25rem, 35vw, 28.8125rem);
    }
}

                                

/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-964 {
        padding: var(--sectionPadding);
        background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/chevron-pattern-light1.svg");
        background-size: auto;
        background-position: center;
        background-repeat: repeat;
        position: relative;
        z-index: 1;
    }
    #services-964 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-964 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        max-width: 50rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }

    #services-964 .cs-title,
    #services-964 .cs-text {
        max-width: 100%;
    }
    #services-964 .cs-card-group {
        margin: 0;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        row-gap: 1.875rem;
    }
    #services-964 .cs-item {
        width: 100%;
        text-align: left;
        list-style: none;
        /* margin top value to match the negative margin value of the .cs-icon-wrapper */
        margin: 2.75rem 0 0 0;
        /* 24px - 64px bottom */
        /* 24px - 40px left & right */
        padding: 0 clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 6vw, 4rem);
        background-color: #f7f3ee;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        grid-column: span 12;
        grid-row: span 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        position: relative;
        z-index: 1;
    }
    #services-964 .cs-item:hover .cs-h3 {
        color: var(--bodyTextColorWhite);
    }
    #services-964 .cs-item:hover .cs-item-text {
        color: var(--bodyTextColorWhite);
        opacity: 0.9;
    }
    #services-964 .cs-item:hover .cs-background {
        opacity: 1;
    }
    #services-964 .cs-icon-wrapper {
        width: 5.5rem;
        height: 5.5rem;
        margin: -2.75rem auto 2rem 0;
        background-color: var(--primary);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        left: calc(clamp(1.5rem, 4vw, 2.5rem) * -1);
    }
    #services-964 .cs-icon {
        width: 2.5rem;
        height: auto;
        filter: invert(.9) sepia(1);
    }

    #services-964 .cs-h3 {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: bold;
        text-align: inherit;
        margin: 0 0 0.75rem 0;
        color: var(--headerColor);
    }
    #services-964 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        max-width: 18.75rem;
        margin: 0 0 2rem 0;
        padding: 0;
        color: var(--bodyTextColor);
    }
    #services-964 .cs-link {
        text-decoration: none;
        font-size: 0.8rem;
        line-height: 1.2em;
        font-weight: bold;
        margin: 0;
        padding: 0;
        color: var(--primary);
        position: relative;
        transition: color 0.3s;
    }
    #services-964 .cs-link:hover {
        color: #fff;
    }
    #services-964 .cs-link:before {
        /* underline */
        content: "";
        width: 100%;
        height: 1px;
        background: currentColor;
        opacity: 1;
        position: absolute;
        display: block;
        bottom: 0rem;
        left: 0;
    }
    #services-964 .cs-background {
        width: 100%;
        height: 100%;
        opacity: 0;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        transition: opacity 0.3s;
    }
    #services-964 .cs-background:before {
        /* background color overlay */
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        background: var(--secondary);
        top: 0;
        left: 0;
        z-index: 1;
    }

    #services-964 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* Makes img tag act as a background image */
        object-fit: cover;
    }
    #services-964 .cs-waves {
        width: 100%;
        height: 13.875rem;
        background-color: var(--primary);
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
    }
    #services-964 .cs-waves img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-964 .cs-container {
        max-width: 80rem;
    }
    #services-964 .cs-card-group {
        column-gap: 1.875rem;
    }
    #services-964 .cs-item {
        grid-column: span 6;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #services-964 .cs-item {
        grid-column: span 4;
    }
}
                                

/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-51 {
      padding: var(--sectionPadding);
      position: relative;
      z-index: 1;
      background-color: var(--primaryLight);
      background-image: url(/assets/images/shattered-dark.png);
  }
  #cta-51 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-51 .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;
      color: #fff;
  }

  #cta-51 .cs-title {
      color: var(--bodyTextColorWhite);
  }

  #cta-51 span.cs-topper {
    color: #fff;
  }

  #cta-51 .cs-text {
      margin-bottom: 1rem;
      color: var(--bodyTextColorWhite);
      opacity: 0.8;
  }
  #cta-51 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #cta-51 .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      margin: 0;
      color: #fff;
      min-width: 9.375rem;
      padding: 0 1.5rem;
      background-color: var(--secondary);
      border-radius: 0.5rem;
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
  }
  #cta-51 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 0.25rem;
      transition: width 0.3s;
  }
  #cta-51 .cs-button-solid:hover:before {
      width: 100%;
  }
  #cta-51 .cs-picture {
      height: 100%;
      width: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #cta-51 .cs-picture:before {
      /* black color overlay */
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      background: #000;
      opacity: 0.8;
      top: 0;
      left: 0;
      z-index: 1;
  }
  #cta-51 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
}

/*-- -------------------------- -->
<---          Contact           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-717 {
      padding: var(--sectionPadding);
      position: relative;
      z-index: 1;
  }
  #contact-717 .cs-container {
      width: 100%;
      /* changes to 1280px at desktop */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 3.25rem;
  }
  #contact-717 .cs-picture {
      width: 100%;
      max-width: 40.625rem;
      height: auto;
      /* reset at desktop */
      aspect-ratio: 1.00516351;
      position: relative;
  }
  #contact-717 .cs-picture img {
      width: 100%;
      height: 100%;
      /* makes it act like a background image */
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
  }
  #contact-717 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      max-width: 33.875rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
  }

  #contact-717 .cs-text {
      margin: 0 0 2rem 0;
  }
  #contact-717 .cs-form {
      /* 24px - 48px top and bottom */
      /* 20px - 32px left and right */
      padding: clamp(1.25rem, 4.18vw, 3rem) clamp(1.25rem, 4.18vw, 2rem);
      background-color: #f7f8f8;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.75rem;
  }
  #contact-717 .cs-label {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      width: 100%;
      color: var(--headerColor);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 0.25rem;
  }
  #contact-717 .cs-input {
      font-size: 1rem;
      width: 100%;
      height: 3.5rem;
      padding: 0;
      padding-left: 1.5rem;
      color: var(--headerColor);
      background-color: #fff;
      border: none;
      /* prevents padding from adding to height and width */
      box-sizing: border-box;
  }
  #contact-717 .cs-input::placeholder {
      color: #7d799c;
      opacity: 0.6;
  }
  #contact-717 .cs-textarea {
      min-height: 7.5rem;
      padding-top: 1.5rem;
      margin-bottom: 0.75rem;
      font-family: inherit;
  }
  #contact-717 .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: #fff;
      border: none;
      min-width: 9.375rem;
      padding: 0 1.5rem;
      background-color: var(--primary);
      border-radius: 0.5rem;
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
      transition: color 0.3s;
  }
  #contact-717 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 0.5rem;
      transition: width 0.3s;
  }
  #contact-717 .cs-button-solid:hover {
      color: #fff;
  }
  #contact-717 .cs-button-solid:hover:before {
      width: 100%;
  }
  #contact-717 .cs-submit {
      min-width: 17.6875rem;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-717 .cs-container {
      max-width: 80rem;
      flex-direction: row;
      justify-content: space-between;
      gap: 3.25rem;
  }
  #contact-717 .cs-picture {
      height: 51.875rem;
      aspect-ratio: initial;
  }
}

/*-- -------------------------- -->
<---        Recent Posts        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #blog-1347 {
      padding: var(--sectionPadding);
      position: relative;
      z-index: 1;
      overflow: hidden;
  }
  #blog-1347 .cs-container {
      width: 100%;
      /* changes to 1280px on desktop */
      max-width: 43.75rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #blog-1347 .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;
  }

  #blog-1347 .cs-title {
      max-width: 20ch;
  }
  #blog-1347 .cs-topper {
      color: var(--secondary);
  }
  #blog-1347 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1rem;
  }
  #blog-1347 .cs-item {
      list-style: none;
      display: flex;
      flex-direction: column;
      grid-column: span 12;
  }
  #blog-1347 .cs-item:hover .cs-h3,
  #blog-1347 .cs-item:hover .cs-date,
  #blog-1347 .cs-item:hover .cs-category {
      color: #fff;
  }
  #blog-1347 .cs-item:hover .cs-item-text {
      background-color: var(--primary);
  }
  #blog-1347 .cs-item:hover .cs-icon-wrapper {
      border-color: #fff;
  }
  #blog-1347 .cs-item:hover .cs-icon,
  #blog-1347 .cs-item:hover .cs-date-icon {
      filter: brightness(1000%) grayscale(1);
  }
  #blog-1347 .cs-item:hover .cs-icon {
      transform: rotate(45deg);
  }
  #blog-1347 .cs-item:hover .cs-category::before {
      background-color: #fff;
      opacity: 0.2;
  }
  #blog-1347 .cs-link {
      text-decoration: none;
      display: flex;
      flex-direction: column;
      /* if one card has more content then the others, the card will stretch to fill the parent container */
      flex-grow: 1;
      gap: 1rem;
  }
  #blog-1347 .cs-picture {
      width: 100%;
      height: 20rem;
      margin: 0;
      border-radius: 1.5rem;
      display: block;
      position: relative;
      z-index: 1;
      overflow: hidden;
  }
  #blog-1347 .cs-picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
  }
  #blog-1347 .cs-item-text {
      padding: 1.25rem;
      background-color: #f7f7f7;
      border-radius: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /* makes the item text the element that grows to fill the container */
      flex-grow: 1;
      transition: background-color 0.3s;
  }
  #blog-1347 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 1.8vw, 1.5625rem);
      line-height: 1.2em;
      text-align: left;
      margin: 0;
      color: #1a1a1a;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      transition: color 0.3s;
  }
  #blog-1347 .cs-icon-wrapper {
      width: 3rem;
      height: 3rem;
      border: 1px solid #bababa;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      /* prevents the parent flexbox from shrinking the icon */
      flex-shrink: 0;
      transition: border-color 0.3s;
  }
  #blog-1347 .cs-icon {
      width: auto;
      height: 0.75rem;
      transition:
          filter 0.3s,
          transform 0.3s;
  }
  #blog-1347 .cs-info {
      margin: 1rem 0 0;
      padding: 1rem 0 0;
      border-top: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  #blog-1347 .cs-date {
      font-size: 0.875rem;
      line-height: 1.5em;
      text-align: left;
      color: #1a1a1a;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      transition: color 0.3s;
  }
  #blog-1347 .cs-date-icon {
      width: auto;
      height: 1.5rem;
      transition: filter 0.3s;
  }
  #blog-1347 .cs-category {
      font-size: 0.875rem;
      /* centers the text if the category bullet has to span multiple lines */
      text-align: center;
      padding: 0.25rem 1rem;
      color: #1a1a1a;
      border-radius: 5rem;
      position: relative;
      z-index: 0;
      overflow: hidden;
  }
  #blog-1347 .cs-category::before {
      content: "";
      width: 100%;
      height: 100%;
      background: #e8e8e8;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #blog-1347 .cs-bubbles {
      width: 20.0625rem;
      height: 26.4375rem;
      display: none;
      position: absolute;
      top: 66.4375rem;
      right: -8.75rem;
      z-index: -1;
  }
  #blog-1347 .cs-bubbles:before {
      /* white border bubble */
      content: "";
      width: 16.5rem;
      height: 16.5rem;
      background: transparent;
      opacity: 1;
      border: 1px solid #1a1a1a;
      border-radius: 50%;
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      animation-name: floatAnimation;
      animation-duration: 5s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-fill-mode: forwards;
  }
  #blog-1347 .cs-bubbles:after {
      /* orange bubble */
      content: "";
      width: 16.5rem;
      height: 16.5rem;
      background: var(--primary);
      opacity: 0.1;
      border-radius: 50%;
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: -1;
      animation-name: floatAnimation2;
      animation-duration: 14s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-fill-mode: forwards;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #blog-1347 .cs-bubbles {
      display: block;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #blog-1347 .cs-container {
      max-width: 80rem;
  }
  #blog-1347 .cs-item {
      grid-column: span 4;
  }
  #blog-1347 .cs-bubbles {
      top: 17.5625rem;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #blog-1347 .cs-bubbles {
      margin-right: -61.875rem;
      right: 50%;
  }
}


/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #reviews-727 {
        padding: var(--sectionPadding);
    }
    #reviews-727 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #reviews-727 .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-727 .cs-title {
        /* cs-title override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This second cs-title is a section specific override that stays inside this stitch */
        max-width: 20ch;
    }
    #reviews-727 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }
    #reviews-727 .cs-item {
        list-style: none;
        width: 100%;
        margin: 0;
        /* 32px - 48px top & bottom */
        /* 16px - 32px left & right */
        padding: clamp(2rem, 7vw, 3rem) clamp(1rem, 4vw, 2rem);
        /* makes padding not affect height and width */
        box-sizing: border-box;
        background-color: #f0f0f0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    #reviews-727 .cs-icon {
        /* 30px - 40px */
        width: clamp(1.875rem, 4vw, 2.5rem);
        height: auto;
        margin: 0 0 2rem 0;
        display: block;
    }
    #reviews-727 .cs-item-text {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 4vw, 1rem);
        line-height: 1.5em;
        margin: 0 0 3rem 0;
        color: var(--bodyTextColor);
    }
    #reviews-727 .cs-name {
        font-size: 1.25rem;
        line-height: 1.2em;
        font-weight: 500;
        margin: auto 0 0 0;
        color: var(--headerColor);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.5rem;
        position: relative;
    }
    #reviews-727 .cs-name:before {
        content: "";
        width: 0.5rem;
        height: 1px;
        background: currentColor;
        display: block;
        position: relative;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #reviews-727 .cs-container {
        max-width: 80rem;
    }
    #reviews-727 .cs-card-group {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    #reviews-727 .cs-item {
        width: 48.5%;
    }
}

                                
                                

/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #banner-849 {
    /* 175px - 260px top */
    padding: var(--headerPadding);
    /* clips svg wave from causing overflow issues */
    overflow: hidden;
    position: relative;
    z-index: 1;
    background-color: var(--primaryLight);
    background-image: url("/assets/images/shattered-dark.png");
  }
  #banner-849 .cs-container {
    text-align: center;
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
  }
  #banner-849 .cs-int-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #banner-849 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #banner-849 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1a1a1a;
    opacity: 0.64;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #banner-849 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
  #banner-849 .cs-wave {
    /* we're stretching the svg wider than the viewport so it's taller and has more of a presence */
    width: 48rem;
    height: auto;
    display: block;
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    z-index: -1;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48em) {
  #banner-849 .cs-background:before {
    opacity: 1;
    background: linear-gradient(90.01deg, rgba(0, 0, 0, 0.9) 16.86%, rgba(0, 0, 0, 0) 100%);
  }
  #banner-849 .cs-wave {
    width: 100%;
    left: 0;
    transform: none;
  }
}

/*-- -------------------------- -->
<---        Content Page        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #content-page-849 {
    padding: var(--sectionPadding);
    background-color: #fff;
    /* clips the wave background from causing overflow issues when it goes off screen */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #content-page-849 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #content-page-849 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 80rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #content-page-849 .cs-content .cs-title {
    max-width: 80rem; 
  }
  #content-page-849 h2,
  #content-page-849 h3,
  #content-page-849 h4,
  #content-page-849 h5,
  #content-page-849 h6 {
    font-weight: 700;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #content-page-849 h2 {
    font-size: 2rem;
    margin-top: 2rem;
  }
  #content-page-849 h3 {
    font-size: 1.5rem;
    color: var(--primary);
  }
  #content-page-849 h4,
  #content-page-849 h5,
  #content-page-849 h6 {
    font-size: 1.25rem;
  }
  #content-page-849 .cs-button-solid {
    margin-bottom: 2rem;
  }
  #content-page-849 .cs-no-margin {
    margin: 0;
  }
  #content-page-849 .cs-color {
    color: var(--primary);
  }
  #content-page-849 p {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColor);
  }
  #content-page-849 p:last-of-type {
    margin-bottom: 2rem;
  }
  #content-page-849 p a {
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
    color: var(--primary);
  }
  #content-page-849 ol,
  #content-page-849 ul {
    padding-left: 1.5rem;
    margin: 0 0 2rem 0;
    color: var(--bodyTextColor);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #content-page-849 ul li {
    list-style: none;
    color: inherit;
    position: relative;
  }
  #content-page-849 ul li:before {
    /* custom list bullet */
    content: "";
    width: 3px;
    height: 3px;
    background: currentColor;
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 0.625rem;
    left: -0.75rem;
  }
  #content-page-849 img {
    width: 100%;
    height: auto;
    display: block;
  }
  #content-page-849 .cs-image-group {
    width: 50%;
    max-width: 33.875rem;
    display: none;
    position: relative;
    flex-direction: column;
    gap: 1.25rem;
  }
  #content-page-849 .cs-picture {
    width: 100%;
    /* 300px - 520px */
    height: clamp(18.75rem, 40vw, 32.5rem);
    box-shadow: 0px 3.3478px 50.2169px rgba(0, 0, 0, 0.16);
    /* 125px - 200px */
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    /* clips img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
  }
  #content-page-849 .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes it act like a background image */
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #content-page-849 .cs-container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  #content-page-849 .cs-content {
    flex: none;
    width: 60%;
  }
  #content-page-849 .cs-image-group {
    display: flex;
  }
}
      
/*-- -------------------------- -->
<---           Video            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #video-548 {
      padding: var(--sectionPadding);
  }
  #video-548 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10vh;
  }
  #video-548 .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;
  }

  #video-548 .cs-text {
    text-align: left;
  }

  #video-548 .cs-big-link {
      width: 100%;
      /* 430px - 580px */
      height: 35vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
  }
  #video-548 .cs-big-link:hover .cs-background img {
      transform: scale(1.1);
  }
  #video-548 .cs-background {
      width: 100%;
      height: 100%;
      /* clips the img from overflowing the container on hover */
      overflow: hidden;
      display: block;
      position: relative;
      top: 0;
      left: 0;
      z-index: 1;
  }
  #video-548 .cs-background:before {
      /* color overlay */
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: 10;
  }
  #video-548 .cs-background img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: contain;
      z-index: -1;
      transition: transform 0.7s;
  }
}

/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RTsbs-581 .cs-container,
  #RTsbsr-581 .cs-container,
  #RTsbst-581 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 7vw, 4rem);
  }
  #RTsbs-581 .cs-content,
  #RTsbsr-581 .cs-content,
  #RTsbst-581 .cs-content {
      /* set text aling to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      max-width: 32.625rem;
      /* moved section padding to the .cs-content so we can have the cs-picture be full width on mobile without the padding preventing it from doing so */
      padding: var(--sectionPadding);
      padding-top: 0;
      /* prevents padding from affecting width and height */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
  }

  #RTsbs-581 .cs-text,
  #RTsbsr-581 .cs-text,
  #RTsbst-581 .cs-text {
      margin-bottom: 1rem;
  }
  #RTsbs-581 .cs-text:last-of-type,
  #RTsbsr-581 .cs-text:last-of-type,
  #RTsbst-581 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #RTsbs-581 .cs-button-solid,
  #RTsbsr-581 .cs-button-solid,
  #RTsbst-581 .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      margin: 0;
      color: #fff;
      min-width: 9.375rem;
      padding: 0 1.5rem;
      background-color: var(--primary);
      border-radius: 0.25rem;
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
  }
  #RTsbs-581 .cs-button-solid:before,
  #RTsbsr-581 .cs-button-solid:before,
  #RTsbst-581 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 0.25rem;
      transition: width 0.3s;
  }
  #RTsbs-581 .cs-button-solid:hover:before,
  #RTsbsr-581 .cs-button-solid:hover:before,
  #RTsbst-581 .cs-button-solid:hover:before {
      width: 100%;
  }
  #RTsbs-581 .cs-picture,
  #RTsbsr-581 .cs-picture,
  #RTsbst-581 .cs-picture {
      display: block;
      position: relative;
      width: 100%;
      height: 18.75rem;
  }
  #RTsbs-581 .cs-picture img,
  #RTsbsr-581 .cs-picture img,
  #RTsbst-581 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #RTsbs-581,
  #RTsbsr-581,
  #RTsbst-581 {
      padding: var(--sectionPadding);
  }
  #RTsbs-581 .cs-container,
  #RTsbsr-581 .cs-container,
  #RTsbst-581 .cs-container {
      flex-direction: row;
      justify-content: flex-start;
      /* 60px - 128px */
      gap: clamp(3.75rem, 10vw, 8rem);
  }
  #RTsbs-581 .cs-content,
  #RTsbsr-581 .cs-content,
  #RTsbst-581 .cs-content {
      width: 53%;
      /* reset the padding, add the section padding back to the section container */
      padding: 0;
  }
  #RTsbs-581 .cs-picture,
  #RTsbsr-581 .cs-picture,
  #RTsbst-581 .cs-picture {
      width: 47vw;
      max-width: 30.875rem;
      /* 518px - 700px */
      height: clamp(32.375rem, 63vw, 43.75rem);
      /* 16px - 28px, added margin left and bottom to cs-picture so it pushes away by the same amount the yellow box element overlaps it left and bottom. This maintains consistent spacing left and bottom */
      margin: 0 0 clamp(1rem, 2.4vw, 1.75rem) clamp(1rem, 2.4vw, 1.75rem);
      position: relative;
  }
  #RTsbs-581 .cs-picture:before,
  #RTsbsr-581 .cs-picture:before,
  #RTsbst-581 .cs-picture:before {
      /* yellow box */
      content: "";
      width: 50%;
      height: 60%;
      background: var(--secondary);
      opacity: 1;
      display: block;
      position: absolute;
      /* 16px - 28px, wrapped in calc function to multiple by negative 1 and get a negative clamp value */
      bottom: calc(clamp(1rem, 2.4vw, 1.75rem) * -1);
      left: calc(clamp(1rem, 2.4vw, 1.75rem) * -1);
  }
}

/*-- -------------------------- -->
<---    Side By Side Reverse    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RTsbsr-581 {
      background-color: #f7f7f7;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #RTsbsr-581 .cs-container {
      justify-content: flex-end;
  }
  #RTsbsr-581 .cs-content {
      /* sends it to the left in the first position */
      order: -1;
  }
  #RTsbsr-581 .cs-picture {
      /* 16px - 28px, added margin left and bottom to cs-picture so it pushes away by the same amount the yellow box element overlaps it left and bottom. This maintains consistent spacing left and bottom */
      margin: 0 clamp(1rem, 2.4vw, 1.75rem) clamp(1rem, 2.4vw, 1.75rem) 0;
  }
  #RTsbsr-581 .cs-picture:before {
      /* yellow box */
      content: "";
      width: 50%;
      height: 60%;
      background: var(--secondary);
      opacity: 1;
      display: block;
      position: absolute;
      left: auto;
      /* 16px - 28px, wrapped in calc function to multiple by negative 1 and get a negative clamp value */
      bottom: calc(clamp(1rem, 2.4vw, 1.75rem) * -1);
      right: calc(clamp(1rem, 2.4vw, 1.75rem) * -1);
  }
}

                                                            

/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1237 {
      padding: var(--sectionPadding);
      position: relative;
      overflow: hidden;
      z-index: 1;
  }
  #faq-1237 .cs-container {
      width: 100%;
      /* chnages to 1280px at desktop */
      max-width: 36.5rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      /* 40px - 48px */
      gap: clamp(2.5rem, 5vw, 3rem);
  }
  #faq-1237 .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;
  }

  #faq-1237 .cs-title {
      margin: 0;
  }
  #faq-1237 .cs-wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /* 16px - 20px */
      gap: clamp(1rem, 2.4vw, 1.25rem);
  }
  #faq-1237 .cs-faq-group {
      width: 100%;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      /* 16px - 20px */
      gap: clamp(1rem, 2.4vw, 1.25rem);
  }
  #faq-1237 .cs-faq-item {
      list-style: none;
      width: 100%;
      background-color: #f7f7f7;
      padding: 0;
      box-sizing: border-box;
      transition: border-bottom 0.3s;
  }
  #faq-1237 .cs-faq-item.active {
      background-color: #1a1a1a;
  }
  #faq-1237 .cs-faq-item.active .cs-button {
      color: var(--primary);
  }
  #faq-1237 .cs-faq-item.active .cs-button:before {
      background-color: var(--primary);
      transform: rotate(315deg);
  }
  #faq-1237 .cs-faq-item.active .cs-button:after {
      background-color: var(--primary);
      transform: rotate(-315deg);
  }
  #faq-1237 .cs-faq-item.active .cs-number {
      background-color: #1a1a1a;
      color: var(--primary);
  }
  #faq-1237 .cs-faq-item.active .cs-number:before {
      height: 100%;
      opacity: 0.3;
  }
  #faq-1237 .cs-faq-item.active .cs-number:after {
      width: 100vw;
      opacity: 0.3;
  }
  #faq-1237 .cs-faq-item.active .cs-item-p {
      height: auto;
      /* 16px - 24px */
      padding-top: clamp(1rem, 2.5vw, 1.5rem);
      padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
      color: var(--bodyTextColorWhite);
      opacity: 0.8;
  }
  #faq-1237 .cs-button {
      /* 16px - 20px */
      font-size: clamp(1rem, 2vw, 1.25rem);
      line-height: 1.2em;
      text-align: left;
      font-weight: bold;
      width: 100%;
      padding: 0 2.5rem 0 0;
      border: none;
      background: transparent;
      color: var(--headerColor);
      overflow: hidden;
      display: flex;
      justify-content: flex-start;
      align-items: stretch;
      /* 16px - 24px */
      gap: clamp(1rem, 2.5vw, 1.5rem);
      position: relative;
      transition:
          background-color 0.3s,
          color 0.3s;
  }
  #faq-1237 .cs-button:hover {
      cursor: pointer;
  }
  #faq-1237 .cs-button:before {
      /* left line */
      content: "";
      width: 0.5rem;
      height: 0.125rem;
      background-color: var(--headerColor);
      opacity: 1;
      border-radius: 50%;
      position: absolute;
      display: block;
      top: 45%;
      right: 1.1875rem;
      transform: rotate(45deg);
      /* animate the transform from the left side of the x axis, and the center of the y */
      transform-origin: left center;
      transition: transform 0.5s;
  }
  #faq-1237 .cs-button:after {
      /* right line */
      content: "";
      width: 0.5rem;
      height: 0.125rem;
      background-color: var(--headerColor);
      opacity: 1;
      border-radius: 50%;
      position: absolute;
      display: block;
      top: 45%;
      right: 1rem;
      transform: rotate(-45deg);
      /* animate the transform from the right side of the x axis, and the center of the y */
      transform-origin: right center;
      transition: transform 0.5s;
  }
  #faq-1237 .cs-number {
      font-size: 1.25rem;
      line-height: 1.5em;
      /* 52px - 72px */
      width: clamp(3.25rem, 6vw, 4.5rem);
      color: var(--headerColor);
      background-color: #e8e8e8;
      display: flex;
      justify-content: center;
      align-items: center;
      /* prevents flexbox from squishing it */
      flex: none;
      position: relative;
      transition: background-color 0.3s;
  }
  #faq-1237 .cs-number:before {
      /* yellow border right on active */
      content: "";
      width: 1px;
      height: 0;
      background: var(--primary);
      opacity: 0;
      position: absolute;
      display: block;
      top: -1px;
      right: 0;
      transition:
          opacity 0.3s,
          height 0.6s;
      transition-delay: 0.1s;
  }
  #faq-1237 .cs-number:after {
      /* yellow border bottom on active */
      content: "";
      width: 0;
      height: 1px;
      background: var(--primary);
      opacity: 0;
      position: absolute;
      display: block;
      bottom: 0;
      left: 0;
      transition:
          opacity 0.3s,
          width 1s;
  }
  #faq-1237 .cs-button-text {
      width: 90%;
      /* 16px - 24px */
      padding: clamp(1rem, 2.5vw, 1.5rem) 0;
      display: block;
  }
  #faq-1237 .cs-item-p {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      width: 90%;
      max-width: 33.8125rem;
      height: 0;
      margin: 0;
      /* 16px - 24px */
      padding: 0 clamp(1rem, 2.5vw, 1.5rem);
      opacity: 0;
      color: var(--bodyTextColor);
      /* clips the text so it doesn't show up */
      overflow: hidden;
      transition:
          opacity 0.3s,
          padding-bottom 0.3s,
          padding-top 0.3s;
  }
  #faq-1237 .cs-floater {
      display: none;
  }
}
/* tablet - 768px */
@media only screen and (min-width: 48rem) {
  #faq-1237 .cs-container {
      max-width: 80rem;
  }
  #faq-1237 .cs-wrapper {
      flex-direction: row;
      align-items: flex-start;
  }
}

                              
                    
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RTsbs-876,
  #RTsbsr-876,
  #RTsbst-876 {
      padding: var(--sectionPadding);
  }
  #RTsbs-876 .cs-container,
  #RTsbsr-876 .cs-container,
  #RTsbst-876 .cs-container {
      width: 100%;
      /* changes to 1280px at desktop */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 7vw, 4rem);
  }
  #RTsbs-876 .cs-content,
  #RTsbsr-876 .cs-content,
  #RTsbst-876 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      max-width: 33.875rem;
      /* prevents padding from affecting width and height */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
  }

  #RTsbs-876 .cs-title,
  #RTsbsr-876 .cs-title,
  #RTsbst-876 .cs-title {
      /* 17 characters wide including spaces */
      max-width: 17ch;
  }
  #RTsbs-876 .cs-text,
  #RTsbsr-876 .cs-text,
  #RTsbst-876 .cs-text {
      margin-bottom: 1rem;
  }
  #RTsbs-876 .cs-text:last-of-type,
  #RTsbsr-876 .cs-text:last-of-type,
  #RTsbst-876 .cs-text:last-of-type {
      margin-bottom: 2rem;
  }
  #RTsbs-876 .cs-button-solid,
  #RTsbsr-876 .cs-button-solid,
  #RTsbst-876 .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      margin: 0;
      color: #fff;
      min-width: 9.375rem;
      padding: 0 1.5rem;
      background-color: var(--primary);
      border-radius: 0.25rem;
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
  }
  #RTsbs-876 .cs-button-solid:before,
  #RTsbsr-876 .cs-button-solid:before,
  #RTsbst-876 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 0.25rem;
      transition: width 0.3s;
  }
  #RTsbs-876 .cs-button-solid:hover:before,
  #RTsbsr-876 .cs-button-solid:hover:before,
  #RTsbst-876 .cs-button-solid:hover:before {
      width: 100%;
  }
  #RTsbs-876 .cs-picture,
  #RTsbsr-876 .cs-picture,
  #RTsbst-876 .cs-picture {
      display: block;
      position: relative;
      width: 100%;
      max-width: 39.375rem;
      /* 400px - 775px */
      height: clamp(25rem, 70vw, 48.4375rem);
      box-shadow: 0px 2.80579px 42.0868px rgba(0, 0, 0, 0.16);
      /* 100px - 200px */
      border-radius: 0 clamp(6.25rem, 17vw, 12.5rem) 0
          clamp(6.25rem, 17vw, 12.5rem);
      /* clips img tag corners */
      overflow: hidden;
  }
  #RTsbs-876 .cs-picture img,
  #RTsbsr-876 .cs-picture img,
  #RTsbst-876 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 64rem) {
  #RTsbs-876,
  #RTsbsr-876,
  #RTsbst-876 {
      padding: var(--sectionPadding);
  }
  #RTsbs-876 .cs-container,
  #RTsbsr-876 .cs-container,
  #RTsbst-876 .cs-container {
      flex-direction: row;
      max-width: 80rem;
      justify-content: space-between;
  }
  #RTsbs-876 .cs-content,
  #RTsbsr-876 .cs-content,
  #RTsbst-876 .cs-content {
      width: 53%;
      /* reset the padding, add the section padding back to the section container */
      padding: 0;
  }
  #RTsbs-876 .cs-picture,
  #RTsbsr-876 .cs-picture,
  #RTsbst-876 .cs-picture {
      width: 47vw;
      position: relative;
  }
}

/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RTsbsr-876 {
      background-color: #f7f7f7;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #RTsbsr-876 .cs-content {
      /* sends it to the left in the 1st position */
      order: -1;
  }
}

                              
                              
/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #footer-1390 {
      padding: var(--sectionPadding);
      background-color: var(--headerColor);
      position: relative;
      z-index: 1;
  }
  #footer-1390 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  #footer-1390 .cs-top {
      width: 100%;
      margin-bottom: 2.5rem;
      /* 24px - 64px */
      padding-bottom: clamp(1.5rem, 5vw, 4rem);
      border-bottom: 1px solid #484848;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      /* 24px - 40px */
      gap: clamp(1.25rem, 4vw, 2.5rem);
  }

  #footer-1390 .cs-top .cs-text{
      color: var(--bodyTextColorWhite);
  }
  #footer-1390 .cs-ul {
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      row-gap: 0.5rem;
      /* 24px - 36px */
      column-gap: clamp(1.5rem, 4vw, 2.25rem);
  }
  #footer-1390 .cs-li {
      list-style: none;
  }
  #footer-1390 .cs-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: #bababa;
      display: block;
      transition: color 0.3s;
  }
  #footer-1390 .cs-link:hover {
      color: var(--primary);
  }
  #footer-1390 .cs-logo {
      width: 100%;
      max-width: 13.0625rem;
      height: auto;
      display: block;
  }
  #footer-1390 .cs-logo-img {
      width: 100%;
      height: auto;
      display: block;
  }
  #footer-1390 .cs-bottom {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
  }
  #footer-1390 .cs-social {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
  }
  #footer-1390 .cs-social-li {
      list-style: none;
  }
  #footer-1390 .cs-social-link {
      width: 2rem;
      height: 2rem;
      background-color: #484848;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: background-color 0.3s;
  }
  #footer-1390 .cs-social-link:hover {
      background-color: var(--primary);
  }
  #footer-1390 .cs-social-link:hover .cs-social-icon {
      filter: grayscale(1) brightness(1000%);
      opacity: 1;
  }
  #footer-1390 .cs-social-icon {
      width: 0.75rem;
      height: auto;
      display: block;
      opacity: 0.6;
      transition: opacity 0.3s;
  }
  #footer-1390 .cs-copyright {
      font-size: 1rem;
      color: var(--bodyTextColorWhite);
      line-height: 1.5em;
      margin: 0;
      display: block;
  }
  #footer-1390 .cs-copyright-link,
  #footer-1390 .cs-separater {
      font-size: 1rem;
      text-decoration: none;
      color: var(--bodyTextColorWhite);
      transition: color 0.3s;
  }
  #footer-1390 .cs-copyright-link:hover,
  #footer-1390 .cs-separater:hover {
      color: var(--primary);
  }
  #footer-1390 .cs-separater {
      margin: 0 1rem;
      display: inline-block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #footer-1390 .cs-top {
      flex-direction: row;
  }

  #footer-1390 .cs-bottom {
      flex-direction: row;
      justify-content: center;
  }
  #footer-1390 .cs-flex {
      margin: 0 auto;
  }
  #footer-1390 .cs-social {
      /* sends it to the right in the 3rd position */
      order: 3;
  }
}